Layer detail refactor

Frontend/src/app/models/layer.model.ts

@@ -6,7 +6,7 @@ import { map } from 'rxjs';
 import { Record } from 'src/app/models/record.model';
 
 export enum LayerType {
-    Ipmort,
+    Import,
     Processed,
     Administration,
     Dictionary
@@ -19,7 +19,7 @@ export class Layer extends Base {
     name?: string;
     records: Record[] = [];
     created?: string;
-    type?: LayerType = LayerType.Ipmort;
+    type?: LayerType;
 
     constructor(data: Partial<Layer> = {}) {
         super();
@@ -28,8 +28,6 @@ export class Layer extends Base {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     override deserialize(input: any): this {
         Object.assign(this, Object.assign(this, super.deserialize(input)));
-        console.log(input.type);
-        console.log(this.type);
         if (this.records) { this.records = this.records.map(x => new Record().deserialize(x)); }
         return this;
     }

Frontend/src/app/modules/layers/layer-detail/layer-detail.component.html

@@ -1,7 +1,8 @@
-<form [formGroup]="form" novalidate *ngIf="document">
+<form [formGroup]="form" novalidate>
   <mat-card>
     <mat-card-header>
-      Layer details
+      <mat-card-title>Layer details</mat-card-title>
+      <mat-card-subtitle>&nbsp;</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
       <div class="row">
@@ -22,39 +23,29 @@
         <div class="col">
           <mat-form-field class="full-width" appearance="outline">
             <mat-label>Created</mat-label>
-            <input matInput disabled [value]="document.created">
+            <input matInput disabled [value]="document?.created">
           </mat-form-field>
         </div>
         <div class="col"></div>
       </div>
 
-
-      <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
+      <table mat-table [dataSource]="dataSource" matSort matSortActive="code" matSortDisableClear matSortDirection="desc">
+        <!-- ID Column -->
         <ng-container matColumnDef="code">
-          <mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
-          <mat-cell *matCellDef="let item">{{item.code}}</mat-cell>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Code</th>
+          <td mat-cell *matCellDef="let row"> {{row.code}} </td>
         </ng-container>
 
         <ng-container matColumnDef="value">
-          <mat-header-cell *matHeaderCellDef mat-sort-header>Value1</mat-header-cell>
-          <mat-cell *matCellDef="let item">{{item.value1 | number:'1.2-2'}}</mat-cell>
-          <!--
-            <td mat-footer-cell *matFooterCellDef>Checksum: {{valueSum}}</td>
-            -->
+          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value1</th>
+          <td mat-cell *matCellDef="let row"> {{row.value1 | number:'1.2-2'}} </td>
         </ng-container>
-
-        <ng-container matColumnDef="desc1">
-          <mat-header-cell *matHeaderCellDef mat-sort-header>Account</mat-header-cell>
-          <mat-cell *matCellDef="let item">{{item.desc1}}</mat-cell>
-        </ng-container>
-
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-row *matRowDef="let item; columns: displayedColumns;"></mat-row>
-        <!--
-          <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
-          -->
-      </mat-table>
-
+    
+        <tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: true"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+      </table>
+      <br>
+      {{valueSum}}
     </mat-card-content>
   </mat-card>
 </form>

Frontend/src/app/modules/layers/layer-detail/layer-detail.component.ts

@@ -1,8 +1,8 @@
-import { DatePipe, NgIf, DecimalPipe } from '@angular/common';
+import { DatePipe, NgIf, DecimalPipe, JsonPipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatSort, MatSortModule, MatSortable } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { Layer } from 'src/app/models/layer.model';
@@ -23,7 +23,7 @@ import { MatCardModule } from '@angular/material/card';
     standalone: true,
     imports: [FormsModule, ReactiveFormsModule, MatCardModule, MatToolbarModule, 
       MatButtonModule, MatGridListModule, MatFormFieldModule, MatInputModule, 
-      NgIf, MatTableModule, MatSortModule, DecimalPipe],
+      NgIf, MatTableModule, MatSortModule, DecimalPipe, JsonPipe],
     providers: [DatePipe]
 })
 export class LayerDetailComponent implements OnInit {
@@ -44,25 +44,23 @@ export class LayerDetailComponent implements OnInit {
     private route$: ActivatedRoute,
     private datePipe: DatePipe,
     private notifications$: NotificationsService
-  ) { }
+  ) { 
+    this.form = Layer.getForm(this.fb$);
+  }
 
   async ngOnInit() {
-    this.form = Layer.getForm(this.fb$);
     this.document = await this.load();
     this.dataSource = new MatTableDataSource<Record>(this.document.records);
     this.dataSource.sort = this.sort;
     this.document.fillForm(this.form);
     this.form.disable();
     this.document.created = `${this.datePipe.transform(this.document.createdAt?.toDate(), 'short')}, ${this.document.createdBy?.userName}`;
-    // this.dataSource.sort.sort({ id: 'code', start: 'desc' } as MatSortable);
     this.valueSum =  this.document.records.map(t => t.value1 || 0).reduce((acc, value) => acc + value, 0);
   }
   private async load(): Promise<Layer> {
       return await Layer.getById(this.route$.snapshot.paramMap.get('id') || "", this.http$);
   }
-  trackByUid(index : number, item : Record) {
-    return item.id;
-  }
+
   async export() {
     if (await Layer.exportToGoogleSheet(this.document.id || "", this.http$)) {
       this.notifications$.add({

Frontend/src/app/modules/layers/layers-list/layers-list.component.html

@@ -12,10 +12,10 @@
 
     <ng-container matColumnDef="type">
       <th mat-header-cell *matHeaderCellDef>Type</th>
-      <td mat-cell *matCellDef="let element">{{element.type}}</td>
+      <td mat-cell *matCellDef="let element">{{LayerType[element.type]}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns, sticky: true"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"></tr>
   </table>
 </div>

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component, HostListener, OnInit } from '@angular/core';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
-import { Layer } from 'src/app/models/layer.model';
+import { Layer, LayerType } from 'src/app/models/layer.model';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { RouterLink } from '@angular/router';
@@ -26,6 +26,7 @@ import { NgFor } from '@angular/common';
 export class LayersListComponent implements OnInit {
   displayedColumns = ['number', 'name', 'type'];
   dataSource!: Layer[];
+  LayerType = LayerType;
 
   start = 0;
   limit = 50;

Frontend/src/styles.scss

@@ -84,6 +84,7 @@ app-root:empty+.AppLoading {
   margin-right: 0;
 }
 
-.list-container {
-  width: 100%;
+input[disabled] {
+  color: black;
+  -webkit-text-fill-color: black;
 }