DataSet detail view

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

@@ -15,8 +15,9 @@ export class DataSet extends Base {
         super();
         Object.assign(this, data);
     }
-    override deserialize(input: any): this {        
+    override deserialize(input: any): this {     
         Object.assign(this, Object.assign(this, super.deserialize(input)));
+        if (this.dataRows) { this.dataRows = this.dataRows.map(x => new DataRow().deserialize(x)); }
         return this;
     }
     override serialize() {

Frontend/src/app/modules/data-sets/data-set-detail/data-set-detail.component.html

@@ -1 +1,50 @@
-<p>data-set-detail works!</p>
+<div>
+    <form [formGroup]="form" novalidate>
+      <mat-card appearance="outlined">
+        <mat-toolbar color="secondary">
+          Szczegóły warstwy danych
+        </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">
+                    <input matInput formControlName="source">
+                </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="desc1">
+              <mat-header-cell *matHeaderCellDef mat-sort-header>Konto</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>Wartość</mat-header-cell>
+              <mat-cell *matCellDef="let item" align="right">{{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/data-sets/data-set-detail/data-set-detail.component.scss

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

Frontend/src/app/modules/data-sets/data-set-detail/data-set-detail.component.ts

@@ -1,4 +1,15 @@
-import { Component } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
+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 { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { Router, ActivatedRoute } from '@angular/router';
+import moment from 'moment';
+import { AuthService } from 'src/app/auth/auth.service';
+import { DataRow } from 'src/app/models/dataRow.model copy';
+import { DataSet } from 'src/app/models/dataSet.model';
 
 @Component({
   selector: 'app-data-set-detail',
@@ -7,4 +18,36 @@ import { Component } from '@angular/core';
 })
 export class DataSetDetailComponent {
 
+  public form!: UntypedFormGroup;
+  private document!: DataSet;
+
+  displayedColumns = ['code', 'value', 'desc1'];
+  dataSource!: MatTableDataSource<DataRow>;
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
+  constructor(
+    private fb$: UntypedFormBuilder,
+    private router$: Router,
+    private http$: HttpClient,
+    private route$: ActivatedRoute,
+    private auth$: AuthService
+  ) { }
+
+  async ngOnInit() {
+    this.form = DataSet.getForm(this.fb$);
+    this.document = await this.load();
+    this.dataSource = new MatTableDataSource<DataRow>(this.document.dataRows);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+    this.document.fillForm(this.form);
+    this.form.disable();
+  }
+  private async load(): Promise<DataSet> {
+      return await DataSet.getById(this.route$.snapshot.paramMap.get('id') || "", this.http$);
+  }
+  trackByUid(index : number, item : DataRow) {
+    return item.id;
+  }
 }

Frontend/src/app/modules/data-sets/data-set-edit/data-set-edit.component.ts

@@ -33,49 +33,39 @@ export class DataSetEditComponent implements OnInit {
     private fb$: UntypedFormBuilder,
     private router$: Router,
     private http$: HttpClient,
-    private data$: DataService,
     private route$: ActivatedRoute,
-    private dialog$: MatDialog,
     private auth$: AuthService
   ) { }
 
   async ngOnInit() {
     this.form = DataSet.getForm(this.fb$);
-    this.document = await this.load();
+    this.document = new DataSet({
+      id: uuidv4(), createdById: this.auth$.user.id, createdAt: moment(),
+      modifiedAt: moment()
+    })
     this.document.fillForm(this.form);
   }
-  private load(): Promise<DataSet> {
-    return new Promise((resolve) => {
-      const id = this.route$.snapshot.paramMap.get('id') || "";
-      if (this.route$.snapshot.paramMap.get('id') === 'new') {
-        resolve(new DataSet({ id: uuidv4(), createdById: this.auth$.user.id, createdAt: moment(),
-          modifiedAt: moment() })) // new element
-        return;
-      }
-      resolve(DataSet.getById(id, this.http$))
-    });
-  }
   async save() {
     if (this.form.invalid) {
       return;
     }
     this.document.loadForm(this.form);
     const id = await DataSet.add(this.document, this.http$);
-    // this._router.navigate(['../../Detail', id], { relativeTo: this._route});   
+    this.router$.navigate(['../../Detail', id], { relativeTo: this.route$ });
   }
   generateNumber() {
     this.form.patchValue({
       name: `${this.form.controls['source'].value}-${moment().format("YYYY")}${moment().format("MM")}${moment().format("DD")}${moment().format("HH")}${moment().format("mm")}`
     })
   }
-  async onFileSelected(event : any) {
+  async onFileSelected(event: any) {
     const file = event.target.files[0];
-    this.document.dataRows = await  DataSet.parseFile(file, this.http$);
+    this.document.dataRows = await DataSet.parseFile(file, this.http$);
     this.dataSource = new MatTableDataSource(this.document.dataRows);
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
   }
-  trackByUid(index : number, item : DataRow) {
+  trackByUid(index: number, item: DataRow) {
     return item.id;
   }
 }

WebAPI/Controllers/DataSetsController.cs

@@ -2,6 +2,7 @@ using Google.Apis.Auth;
 using Google.Apis.Http;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Identity.Client.Platforms.Features.DesktopOs.Kerberos;
 using Microsoft.IdentityModel.Tokens;
@@ -47,6 +48,22 @@ namespace WebAPI.Controllers
                 return BadRequest(e.ToString());
             }
         }
+        [HttpGet]
+        [Route("{id}")]
+        public IActionResult Get(Guid id)
+        {
+            try
+            {
+                return Ok(db.DataSets
+                    .Include(x => x.CreatedBy)
+                    .Include(x => x.DataRows)
+                    .Where(x => x.Id == id && !x.IsDeleted).First());
+            }
+            catch (Exception e)
+            {
+                return BadRequest(e.ToString());
+            }
+        }
         [HttpPost]
         [DisableRequestSizeLimit]
         [Route("parseFile")]