Improved column width for the logs

Author: iilunin

admin/src/app/logs/logs.component.css

@@ -10,4 +10,106 @@
 
 table {
     width: 100%;
-}
+}
+
+
+.mat-column-date, .mat-column-level, .mat-column-origin, .mat-column-message {
+    word-wrap: break-word !important;
+    white-space: unset !important;
+    flex: 0 0 auto !important;
+    width: 25% !important;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    word-break: break-word;
+
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
+
+.mat-column-date {
+    flex: 0 0 15% !important;
+    width: 15% !important;
+}
+
+.mat-column-level {
+    flex: 0 0 5% !important;
+    width: 5% !important;
+}
+
+.mat-column-origin {
+    flex: 0 0 25% !important;
+    width: 25% !important;
+}
+
+.mat-column-message {
+    flex: 0 0 55% !important;
+    width: 55% !important;
+}
+
+/*   
+  .mat-column-emailid {
+    word-wrap: break-word !important;
+    white-space: unset !important;
+    flex: 0 0 25% !important;
+    width: 25% !important;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  
+    word-break: break-word;
+  
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+  
+  .mat-column-contactno {
+    word-wrap: break-word !important;
+    white-space: unset !important;
+    flex: 0 0 17% !important;
+    width: 17% !important;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  
+    word-break: break-word;
+  
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+  
+  .mat-column-userimage {
+    word-wrap: break-word !important;
+    white-space: unset !important;
+    flex: 0 0 8% !important;
+    width: 8% !important;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  
+    word-break: break-word;
+  
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  }
+  
+  .mat-column-userActivity {
+    word-wrap: break-word !important;
+    white-space: unset !important;
+    flex: 0 0 10% !important;
+    width: 10% !important;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+  
+    word-break: break-word;
+  
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+  } */

admin/src/app/logs/logs.component.html

@@ -17,7 +17,7 @@
 
       <ng-container matColumnDef="date">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="d"> Date </th>
-        <td mat-cell *matCellDef="let log"> {{log.d.toLocaleString()}} </td>
+        <td mat-cell *matCellDef="let log"> {{log.d | date: dateFormatStr}} </td>
       </ng-container>
 
       <ng-container matColumnDef="level">

admin/src/app/logs/logs.component.ts

@@ -1,4 +1,5 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { DatePipe, formatDate } from '@angular/common';
+import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -12,17 +13,20 @@ import { LogEntry } from '../log-entry';
 })
 export class LogsComponent implements OnInit, AfterViewInit {
 
+  public readonly dateFormatStr = 'dd/MM/yyyy HH:mm:ss.SSS';
+  pipe: DatePipe;
   logs: LogEntry[];
-  dataSource: MatTableDataSource<LogEntry> = new MatTableDataSource<LogEntry>();
+  dataSource: MatTableDataSource<LogEntry>;
   limit: number = 1000;
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
 
-  constructor(private api: BotApi) { }
+  constructor(private api: BotApi,
+              @Inject(LOCALE_ID) public locale: string) { }
   ngAfterViewInit(): void {
+    this.pipe = new DatePipe(this.locale); 
     this.refreshLogs(); 
-    console.log(this.paginator);
   }
 
   ngOnInit(): void {
@@ -44,9 +48,10 @@ export class LogsComponent implements OnInit, AfterViewInit {
   getClipboard(): string {
     let cb = ''
 
+    
     if (this.logs){
       this.logs.forEach(l=> {
-        cb += `${l.d.toLocaleString()} [${l.l}] [${l.o}]: ${l.t}\n`
+        cb += `${this.pipe.transform(l.d, this.dateFormatStr)} [${l.l}] [${l.o}]: ${l.t}\n`
       })
     }