Update names part 2

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

@@ -0,0 +1,53 @@
+<div>
+  <form [formGroup]="form" novalidate>
+    <mat-card appearance="outlined">
+      <mat-toolbar color="secondary">
+        Szczegóły warstwy danych
+        <span class="fill-to-right"></span>
+        <button mat-button (click)="export()">Eksportuj do Google</button>
+      </mat-toolbar>
+      <mat-card-content>
+        <mat-grid-list cols="2" rowHeight="90px">
+          <mat-grid-tile>
+            <mat-form-field class="detail-input">
+              <mat-label>Nazwa</mat-label>
+              <input matInput formControlName="name">
+            </mat-form-field>
+          </mat-grid-tile>
+
+          <mat-grid-tile>
+            <mat-form-field class="detail-input">
+              <mat-label>Źródło</mat-label>
+              <input matInput formControlName="source">
+            </mat-form-field>
+          </mat-grid-tile>
+
+          <mat-grid-tile *ngIf="document">
+            <mat-form-field class="detail-input">
+              <mat-label>Utworzono</mat-label>
+              <input matInput disabled [value]="document.created">
+            </mat-form-field>
+          </mat-grid-tile>
+        </mat-grid-list>
+
+        <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
+
+          <ng-container matColumnDef="code">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>MPK</mat-header-cell>
+            <mat-cell *matCellDef="let item">{{item.code}}</mat-cell>
+          </ng-container>
+
+          <ng-container matColumnDef="value">
+            <mat-header-cell *matHeaderCellDef mat-sort-header>Wartość</mat-header-cell>
+            <mat-cell *matCellDef="let item">{{item.value | number:'1.2-2'}}</mat-cell>
+          </ng-container>
+
+          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+          <mat-row *matRowDef="let item; columns: displayedColumns;"></mat-row>
+        </mat-table>
+        <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[5, 10, 20]">
+        </mat-paginator>
+      </mat-card-content>
+    </mat-card>
+  </form>
+</div>

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

@@ -0,0 +1 @@
+@import "../../../main-view/main-view.component.scss";

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

@@ -0,0 +1,64 @@
+import { DatePipe } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { Component, ViewChild } from '@angular/core';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatSort, MatSortable } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { Router, ActivatedRoute } from '@angular/router';
+import { AuthService } from 'src/app/auth/auth.service';
+import { Layer } from 'src/app/models/layer.model';
+import { Record } from 'src/app/models/record.model';
+
+@Component({
+  selector: 'diunaBI-layer-detail',
+  templateUrl: './layer-detail.component.html',
+  styleUrls: ['./layer-detail.component.scss']
+})
+export class LayerDetailComponent {
+
+  public form!: UntypedFormGroup;
+  public document!: Layer;
+
+  displayedColumns = ['code', 'value'];
+  dataSource!: MatTableDataSource<Record>;
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
+  constructor(
+    private fb$: UntypedFormBuilder,
+    private router$: Router,
+    private http$: HttpClient,
+    private route$: ActivatedRoute,
+    private auth$: AuthService,
+    private snackBar: MatSnackBar,
+    private datePipe: DatePipe
+  ) { }
+
+  async ngOnInit() {
+    this.form = Layer.getForm(this.fb$);
+    this.document = await this.load();
+    this.dataSource = new MatTableDataSource<Record>(this.document.records);
+    this.dataSource.paginator = this.paginator;
+    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);
+  }
+  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.snackBar.open("Plik został zapisany na dysku Google", "OK");
+    } else {
+      this.snackBar.open("Zapis się nie udał.", "OK");
+    }
+  }
+}