mz/DiunaBI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: upgrade views

Browse Source
This commit is contained in:
Michał Zieliński
2023-08-22 11:38:18 +02:00
parent e8c64059fb
commit 8b109c4f1b
5 changed files with 82 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
Frontend/src/app/main-view/main-view.component.scss
View File

@@ -20,12 +20,7 @@ mat-nav-list.menu-sublist {
mat-nav-list.menu-sublist > a { mat-nav-list.menu-sublist > a {
font-size: small; font-size: small;
} }
div.footer {
text-align: right;
font-size: smaller;
color: gray;
padding-right: 5px;
}
.fill-to-right { .fill-to-right {
flex: 1 1 auto; flex: 1 1 auto;
} }
@@ -38,45 +33,6 @@ h1.topbar-app-name {
mat-sidenav { mat-sidenav {
width: 200px; width: 200px;
} }
.list-container {
display: flex;
flex-direction: column;
min-width: 300px;
height: 98%;
}
.top-list-container {
display: flex;
flex-direction: column;
min-width: 30vh;
height: 54vh;
}
.bottom-list-container {
display: flex;
flex-direction: column;
height: 35vh;
}
.table {
overflow: auto;
height: 100%;
}
.list-header {
min-height: 50px;
padding: 4px 12px 0;
}
.mat-mdc-form-field {
font-size: 14px;
width: 100%;
}
mat-form-field.detail-input {
width: 90%;
text-align: left;
color: black;
}
mat-form-field.detail-input-full-width {
width: 96%;
text-align: left;
color: black;
}
input[disabled] { input[disabled] {
color: black; color: black;
-webkit-text-fill-color: black; -webkit-text-fill-color: black;

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

@@ -1,56 +1,60 @@
<div> <form [formGroup]="form" novalidate *ngIf="document">
<form [formGroup]="form" novalidate> <mat-card>
<mat-card appearance="outlined"> <mat-card-header>
<mat-toolbar color="secondary"> Layer details
Layer details </mat-card-header>
<span class="fill-to-right"></span> <mat-card-content>
</mat-toolbar> <div class="row">
<mat-card-content> <div class="col">
<mat-grid-list cols="2" rowHeight="90px"> <mat-form-field class="full-width" appearance="outline">
<mat-grid-tile> <mat-label>Name</mat-label>
<mat-form-field appearance="outline"> <input matInput formControlName="name">
<mat-label>Name</mat-label> </mat-form-field>
<input matInput formControlName="name"> </div>
</mat-form-field> <div class="col">
</mat-grid-tile> <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-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
<mat-form-field appearance="outline"> <ng-container matColumnDef="code">
<mat-label>Created</mat-label> <mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell>
<input matInput disabled [value]="document.created"> <mat-cell *matCellDef="let item">{{item.code}}</mat-cell>
</mat-form-field> </ng-container>
</mat-grid-tile>
</mat-grid-list>
<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"> <ng-container matColumnDef="desc1">
<mat-header-cell *matHeaderCellDef mat-sort-header>Code</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>Account</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.code}}</mat-cell> <mat-cell *matCellDef="let item">{{item.desc1}}</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="value"> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-header-cell *matHeaderCellDef mat-sort-header>Value</mat-header-cell> <mat-row *matRowDef="let item; columns: displayedColumns;"></mat-row>
<mat-cell *matCellDef="let item">{{item.value | number:'1.2-2'}}</mat-cell> <!--
</ng-container> <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
-->
</mat-table>
<ng-container matColumnDef="desc1"> </mat-card-content>
<mat-header-cell *matHeaderCellDef mat-sort-header>Account</mat-header-cell> </mat-card>
<mat-cell *matCellDef="let item">{{item.desc1}}</mat-cell> </form>
</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>

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

@@ -2,7 +2,7 @@ import { DatePipe, NgIf, DecimalPipe } from '@angular/common';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; 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 { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { Layer } from 'src/app/models/layer.model'; import { Layer } from 'src/app/models/layer.model';
@@ -54,7 +54,7 @@ export class LayerDetailComponent implements OnInit {
this.document.fillForm(this.form); this.document.fillForm(this.form);
this.form.disable(); this.form.disable();
this.document.created = `${this.datePipe.transform(this.document.createdAt?.toDate(), 'short')}, ${this.document.createdBy?.userName}`; 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); this.valueSum = this.document.records.map(t => t.value1 || 0).reduce((acc, value) => acc + value, 0);
} }
private async load(): Promise<Layer> { private async load(): Promise<Layer> {

4
Frontend/src/environments/environment.ts
View File

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

23
Frontend/src/styles.scss
View File

@@ -56,4 +56,27 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
width: var(--avatar-size); width: var(--avatar-size);
vertical-align: middle; vertical-align: middle;
margin-right: 10px; margin-right: 10px;
}
.form-card {
min-width: 120px;
margin: 20px auto;
}
.full-width {
width: 100%;
}
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
} }