WIP: upgrade views
This commit is contained in:
@@ -1,56 +1,60 @@
|
||||
<div>
|
||||
<form [formGroup]="form" novalidate>
|
||||
<mat-card appearance="outlined">
|
||||
<mat-toolbar color="secondary">
|
||||
Layer details
|
||||
<span class="fill-to-right"></span>
|
||||
</mat-toolbar>
|
||||
<mat-card-content>
|
||||
<mat-grid-list cols="2" rowHeight="90px">
|
||||
<mat-grid-tile>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput formControlName="name">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
<form [formGroup]="form" novalidate *ngIf="document">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
Layer details
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mat-form-field class="full-width" appearance="outline">
|
||||
<mat-label>Name</mat-label>
|
||||
<input matInput formControlName="name">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col">
|
||||
<mat-form-field class="full-width" appearance="outline">
|
||||
<mat-label>Source</mat-label>
|
||||
<input matInput formControlName="source">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mat-form-field class="full-width" appearance="outline">
|
||||
<mat-label>Created</mat-label>
|
||||
<input matInput disabled [value]="document.created">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
|
||||
<mat-grid-tile>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Source</mat-label>
|
||||
<input matInput formControlName="source">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile *ngIf="document">
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Created</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>Code</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.code}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
|
||||
<ng-container matColumnDef="value">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Value</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.value1 | number:'1.2-2'}}</mat-cell>
|
||||
<!--
|
||||
<td mat-footer-cell *matFooterCellDef>Checksum: {{valueSum}}</td>
|
||||
-->
|
||||
</ng-container>
|
||||
|
||||
<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>
|
||||
<!--
|
||||
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
|
||||
-->
|
||||
</mat-table>
|
||||
|
||||
<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>
|
||||
</mat-table>
|
||||
Checksum: {{valueSum}}
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
@@ -2,7 +2,7 @@ import { DatePipe, NgIf, DecimalPipe } from '@angular/common';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { UntypedFormGroup, UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatSort, MatSortable, MatSortModule } from '@angular/material/sort';
|
||||
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';
|
||||
@@ -54,7 +54,7 @@ export class LayerDetailComponent implements OnInit {
|
||||
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.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> {
|
||||
|
||||
Reference in New Issue
Block a user