DataSet detail view

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;
+  }
 }