WIP: edit and duplicate layer

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

@@ -5,6 +5,10 @@
         Layer details
         <span style="flex: 1;"></span>
         <button mat-button (click)="export()">Export</button>
+        <button mat-button *ngIf="document && document.type === LayerType.Administration"
+        [routerLink]="['/app/layers/Edit/', document.id, 'duplicate']">Duplicate</button>
+        <button mat-button *ngIf="document && document.type === LayerType.Administration"
+        [routerLink]="['/app/layers/Edit/', document.id]">Edit</button>
       </mat-card-title>
       <mat-card-subtitle>&nbsp;</mat-card-subtitle>
     </mat-card-header>

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

@@ -4,8 +4,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { ActivatedRoute } from '@angular/router';
-import { Layer } from 'src/app/models/layer.model';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Layer, LayerType } from 'src/app/models/layer.model';
 import { Record } from 'src/app/models/record.model';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { environment } from 'src/environments/environment';
@@ -22,7 +22,7 @@ import { MatCardModule } from '@angular/material/card';
     standalone: true,
     imports: [FormsModule, ReactiveFormsModule, MatCardModule, 
       MatButtonModule, MatGridListModule, MatFormFieldModule, MatInputModule, 
-      NgIf, MatTableModule, MatSortModule, DecimalPipe, JsonPipe],
+      NgIf, MatTableModule, MatSortModule, DecimalPipe, JsonPipe, RouterLink],
     providers: [DatePipe]
 })
 export class LayerDetailComponent implements OnInit {
@@ -35,6 +35,8 @@ export class LayerDetailComponent implements OnInit {
   displayedColumns = environment.views.layers.recordColumns.split("|");
   dataSource!: MatTableDataSource<Record>;
 
+  LayerType = LayerType;
+
   @ViewChild(MatSort) sort!: MatSort;
 
   constructor(

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

@@ -1,77 +1 @@
-<div>
-  <form [formGroup]="form" (ngSubmit)="save()" novalidate>
-    <mat-card appearance="outlined">
-      <mat-toolbar color="secondary">
-        New layer
-        <span class="fill-to-right"></span>
-        <button mat-button type="submit" [disabled]="form.invalid">Save</button>
-        <button mat-button type="button" routerLink="../..">Cancel</button>
-      </mat-toolbar>
-      <mat-card-content>
-        <mat-grid-list cols="2" rowHeight="90px">
-          <mat-grid-tile>
-            <mat-form-field class="detail-input">
-              <mat-label>Name</mat-label>
-              <input matInput formControlName="name">
-              <mat-error *ngIf="form.controls['name'].touched && form.controls['name'].invalid">
-                Required
-              </mat-error>
-            </mat-form-field>
-          </mat-grid-tile>
-
-          <mat-grid-tile>
-            <mat-form-field class="detail-input">
-              <mat-select placeholder="Source" formControlName="source">
-                <mat-option value="GoogleSheet">GoogleSheet</mat-option>
-              </mat-select>
-              <mat-error *ngIf="form.controls['source'].touched && form.controls['source'].invalid">
-                Required
-              </mat-error>
-            </mat-form-field>
-          </mat-grid-tile>
-        </mat-grid-list>
-        <input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload>
-        <button mat-mini-fab color="primary" type="button" class="upload-btn" (click)="fileUpload.click()"
-          *ngIf="form.get('source')?.value === 'CSV'">
-          <mat-icon>attach_file</mat-icon>
-        </button>
-        <mat-grid-list cols="5" rowHeight="90px" *ngIf="form.get('source')?.value === 'GoogleSheet'">
-          <mat-grid-tile>
-            <mat-form-field class>
-              <input matInput formControlName="sheetId">
-            </mat-form-field>
-          </mat-grid-tile>
-          <mat-grid-tile>
-            <button mat-mini-fab color="primary" type="button" class="upload-btn" (click)="parseGoogleSheet()">
-              <mat-icon>publish</mat-icon>
-            </button>
-          </mat-grid-tile>
-          <mat-grid-tile></mat-grid-tile>
-          <mat-grid-tile></mat-grid-tile>
-          <mat-grid-tile></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>Code</mat-header-cell>
-            <mat-cell *matCellDef="let item">{{item.code}}</mat-cell>
-          </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>
-
-          <ng-container matColumnDef="value">
-            <mat-header-cell *matHeaderCellDef mat-sort-header>Value</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-card-content>
-    </mat-card>
-  </form>
-</div>
+EDIT in progress

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

@@ -4,12 +4,10 @@ import { UntypedFormBuilder, UntypedFormGroup, FormsModule, ReactiveFormsModule
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
-import moment from 'moment';
 import { AuthService } from 'src/app/auth/auth.service';
 import { Layer } from 'src/app/models/layer.model';
 import { Record } from 'src/app/models/record.model';
 import { environment } from 'src/environments/environment';
-import { v4 as uuidv4 } from 'uuid';
 import { MatIconModule } from '@angular/material/icon';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
@@ -22,11 +20,11 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatCardModule } from '@angular/material/card';
 
 @Component({
-    selector: 'diunabi-layer-edit',
-    templateUrl: './layer-edit.component.html',
-    styleUrls: ['./layer-edit.component.scss'],
-    standalone: true,
-    imports: [FormsModule, ReactiveFormsModule, MatCardModule, MatToolbarModule, MatButtonModule, RouterLink, MatGridListModule, MatFormFieldModule, MatInputModule, NgIf, MatSelectModule, MatOptionModule, MatIconModule, MatTableModule, MatSortModule, DecimalPipe]
+  selector: 'diunabi-layer-edit',
+  templateUrl: './layer-edit.component.html',
+  styleUrls: ['./layer-edit.component.scss'],
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, MatCardModule, MatToolbarModule, MatButtonModule, RouterLink, MatGridListModule, MatFormFieldModule, MatInputModule, NgIf, MatSelectModule, MatOptionModule, MatIconModule, MatTableModule, MatSortModule, DecimalPipe]
 })
 export class LayerEditComponent implements OnInit {
 
@@ -44,15 +42,17 @@ export class LayerEditComponent implements OnInit {
     private http$: HttpClient,
     private route$: ActivatedRoute,
     private auth$: AuthService
-  ) { }
+  ) {
+    this.form = Layer.getForm(this.fb$);
+  }
 
   async ngOnInit() {
-    this.form = Layer.getForm(this.fb$);
-    this.document = new Layer({
-      id: uuidv4(), createdById: this.auth$.user.id, createdAt: moment(),
-      modifiedAt: moment()
-    })
-    this.document.fillForm(this.form);
+    this.document = await this.load();
+    console.log(this.document);
+  }
+
+  private async load(): Promise<Layer> {
+    return await Layer.getById(this.route$.snapshot.paramMap.get('id') || "", this.http$);
   }
   async save() {
     if (this.form.invalid) {
@@ -62,22 +62,8 @@ export class LayerEditComponent implements OnInit {
     const id = await Layer.add(this.document, this.http$);
     this.router$.navigate(['../../Detail', id], { relativeTo: this.route$ });
   }
-  async onFileSelected(event: Event) {
-    const input = event.target as HTMLInputElement;
-    if (!input.files?.length) { return; }
-    const file = input.files[0];
-    this.document.records = await Layer.parseFile(file, this.http$);
-    this.dataSource = new MatTableDataSource(this.document.records);
-    this.dataSource.sort = this.sort;
-  }
+
   trackByUid(index: number, item: Record) {
     return item.id;
   }
-  async parseGoogleSheet() {
-    const id = this.form.get('sheetId')?.value;
-    this.document =  await Layer.parseGoogleSheet(id, this.http$);
-    this.document.fillForm(this.form);
-    this.dataSource = new MatTableDataSource(this.document.records);
-    this.dataSource.sort = this.sort;
-  }
 }

Frontend/src/app/modules/layers/layers.routes.ts

@@ -6,5 +6,6 @@ import { LayersListComponent } from './layers-list/layers-list.component';
 export const LAYERS_ROUTES: Route[] = [
   { path: '', component: LayersListComponent },
   { path: 'Edit/:id', component: LayerEditComponent },
+  { path: 'Edit/:id/:duplicate', component: LayerEditComponent },
   { path: 'Detail/:id', component: LayerDetailComponent }
 ];

Frontend/src/environments/environment.ts

@@ -7,8 +7,8 @@ export const environment = {
   appName: "LOCAL_DiunaBI",
   production: false,
   api: {
-    url: "http://localhost:5400/api"
-    //url: "https://diunabi-morska.bim-it.pl/api"
+    //url: "http://localhost:5400/api"
+    url: "https://diunabi-morska.bim-it.pl/api"
   },
   google: {
     clientId: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com"