Update names part 2
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
<div>
|
||||
<form [formGroup]="form" novalidate>
|
||||
<mat-card appearance="outlined">
|
||||
<mat-toolbar color="secondary">
|
||||
Szczegóły warstwy danych
|
||||
<span class="fill-to-right"></span>
|
||||
<button mat-button (click)="export()">Eksportuj do Google</button>
|
||||
</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">
|
||||
<mat-label>Źródło</mat-label>
|
||||
<input matInput formControlName="source">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile *ngIf="document">
|
||||
<mat-form-field class="detail-input">
|
||||
<mat-label>Utworzono</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>MPK</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.code}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="value">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Wartość</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-paginator #paginator [pageSize]="50" [pageSizeOptions]="[5, 10, 20]">
|
||||
</mat-paginator>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1 @@
|
||||
@import "../../../main-view/main-view.component.scss";
|
||||
@@ -0,0 +1,64 @@
|
||||
import { DatePipe } from '@angular/common';
|
||||
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 { MatSnackBar } from '@angular/material/snack-bar';
|
||||
import { MatSort, MatSortable } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
import { AuthService } from 'src/app/auth/auth.service';
|
||||
import { Layer } from 'src/app/models/layer.model';
|
||||
import { Record } from 'src/app/models/record.model';
|
||||
|
||||
@Component({
|
||||
selector: 'diunaBI-layer-detail',
|
||||
templateUrl: './layer-detail.component.html',
|
||||
styleUrls: ['./layer-detail.component.scss']
|
||||
})
|
||||
export class LayerDetailComponent {
|
||||
|
||||
public form!: UntypedFormGroup;
|
||||
public document!: Layer;
|
||||
|
||||
displayedColumns = ['code', 'value'];
|
||||
dataSource!: MatTableDataSource<Record>;
|
||||
|
||||
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||
@ViewChild(MatSort) sort!: MatSort;
|
||||
|
||||
constructor(
|
||||
private fb$: UntypedFormBuilder,
|
||||
private router$: Router,
|
||||
private http$: HttpClient,
|
||||
private route$: ActivatedRoute,
|
||||
private auth$: AuthService,
|
||||
private snackBar: MatSnackBar,
|
||||
private datePipe: DatePipe
|
||||
) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.form = Layer.getForm(this.fb$);
|
||||
this.document = await this.load();
|
||||
this.dataSource = new MatTableDataSource<Record>(this.document.records);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
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);
|
||||
}
|
||||
private async load(): Promise<Layer> {
|
||||
return await Layer.getById(this.route$.snapshot.paramMap.get('id') || "", this.http$);
|
||||
}
|
||||
trackByUid(index : number, item : Record) {
|
||||
return item.id;
|
||||
}
|
||||
async export() {
|
||||
if (await Layer.exportToGoogleSheet(this.document.id || "", this.http$)) {
|
||||
this.snackBar.open("Plik został zapisany na dysku Google", "OK");
|
||||
} else {
|
||||
this.snackBar.open("Zapis się nie udał.", "OK");
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
<div>
|
||||
<form [formGroup]="form" (ngSubmit)="save()" novalidate>
|
||||
<mat-card appearance="outlined">
|
||||
<mat-toolbar color="secondary">
|
||||
Edycja warstwy danych
|
||||
<span class="fill-to-right"></span>
|
||||
<button mat-button type="submit" [disabled]="form.invalid">Zapisz</button>
|
||||
<button mat-button type="button" routerLink="../..">Anuluj</button>
|
||||
</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-error *ngIf="form.controls['name'].touched && form.controls['name'].invalid">
|
||||
Pole obowiązkowe
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
|
||||
<mat-grid-tile>
|
||||
<mat-form-field class="detail-input">
|
||||
<mat-select placeholder="Źródło" formControlName="source">
|
||||
<mat-option value="GoogleSheet">GoogleSheet</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="form.controls['source'].touched && form.controls['source'].invalid">
|
||||
Pole obowiązkowe
|
||||
</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>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">{{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>
|
||||
@@ -0,0 +1,5 @@
|
||||
@import "../../../main-view/main-view.component.scss";
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
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 { Layer } from 'src/app/models/layer.model';
|
||||
import { Record } from 'src/app/models/record.model';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
@Component({
|
||||
selector: 'diunaBI-layer-edit',
|
||||
templateUrl: './layer-edit.component.html',
|
||||
styleUrls: ['./layer-edit.component.scss']
|
||||
})
|
||||
export class LayerEditComponent implements OnInit {
|
||||
|
||||
public form!: UntypedFormGroup;
|
||||
private document!: Layer;
|
||||
|
||||
displayedColumns = ['code', 'value', 'desc1'];
|
||||
dataSource!: MatTableDataSource<Record>;
|
||||
|
||||
@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 = Layer.getForm(this.fb$);
|
||||
this.document = new Layer({
|
||||
id: uuidv4(), createdById: this.auth$.user.id, createdAt: moment(),
|
||||
modifiedAt: moment()
|
||||
})
|
||||
this.document.fillForm(this.form);
|
||||
}
|
||||
async save() {
|
||||
if (this.form.invalid) {
|
||||
return;
|
||||
}
|
||||
this.document.loadForm(this.form);
|
||||
const id = await Layer.add(this.document, this.http$);
|
||||
this.router$.navigate(['../../Detail', id], { relativeTo: this.route$ });
|
||||
}
|
||||
async onFileSelected(event: any) {
|
||||
const file = event.target.files[0];
|
||||
this.document.records = await Layer.parseFile(file, this.http$);
|
||||
this.dataSource = new MatTableDataSource(this.document.records);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
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.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<div class="list-container mat-elevation-z8">
|
||||
<div class="list-header">
|
||||
<mat-grid-list cols="10" rowHeight="60">
|
||||
<mat-grid-tile>
|
||||
<!--
|
||||
<button mat-button routerLink="Edit/new">
|
||||
Dodaj
|
||||
</button>
|
||||
-->
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="8">
|
||||
<mat-form-field class="searchListInput">
|
||||
<mat-label>Filtruj</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event)">
|
||||
</mat-form-field>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
</div>
|
||||
|
||||
<mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
|
||||
|
||||
<ng-container matColumnDef="number">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Numer</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.number}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Nazwa</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="source">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header>Źródło</mat-header-cell>
|
||||
<mat-cell *matCellDef="let item">{{item.source}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row>
|
||||
</mat-table>
|
||||
<mat-paginator #paginator
|
||||
[pageSize]="10"
|
||||
[pageSizeOptions]="[5, 10, 20]">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
@import "../../../main-view/main-view.component.scss";
|
||||
@@ -0,0 +1,38 @@
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortable } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { Layer } from 'src/app/models/layer.model';
|
||||
|
||||
@Component({
|
||||
selector: 'diunaBI-layers-list',
|
||||
templateUrl: './layers-list.component.html',
|
||||
styleUrls: ['./layers-list.component.scss']
|
||||
})
|
||||
export class LayersListComponent implements OnInit {
|
||||
displayedColumns = ['number', 'name', 'source'];
|
||||
dataSource!: MatTableDataSource<Layer>;
|
||||
|
||||
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||
@ViewChild(MatSort) sort!: MatSort;
|
||||
|
||||
constructor(
|
||||
private _http: HttpClient
|
||||
) { }
|
||||
|
||||
async ngOnInit() {
|
||||
this.dataSource = new MatTableDataSource(await Layer.getList(this._http));
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
this.dataSource.sort.sort({ id: 'number', start: 'desc' } as MatSortable);
|
||||
}
|
||||
|
||||
applyFilter(event: Event) {
|
||||
const filterValue = (event.target as HTMLInputElement).value;
|
||||
this.dataSource.filter = filterValue.trim().toLowerCase();
|
||||
}
|
||||
trackByUid(index : number, item : Layer) {
|
||||
return item.id;
|
||||
}
|
||||
}
|
||||
17
Frontend/src/app/modules/layers/layers-routing.module.ts
Normal file
17
Frontend/src/app/modules/layers/layers-routing.module.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { LayerDetailComponent } from './layer-detail/layer-detail.component';
|
||||
import { LayerEditComponent } from './layer-edit/layer-edit.component';
|
||||
import { LayersListComponent } from './layers-list/layers-list.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: LayersListComponent },
|
||||
{ path: 'Edit/:id', component: LayerEditComponent },
|
||||
{ path: 'Detail/:id', component: LayerDetailComponent }
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class LayersRoutingModule { }
|
||||
27
Frontend/src/app/modules/layers/layers.module.ts
Normal file
27
Frontend/src/app/modules/layers/layers.module.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule, DatePipe } from '@angular/common';
|
||||
import { MaterialModule } from 'src/app/material.module';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { LayersListComponent } from './layers-list/layers-list.component';
|
||||
import { LayerEditComponent } from './layer-edit/layer-edit.component';
|
||||
import { LayerDetailComponent } from './layer-detail/layer-detail.component';
|
||||
import { LayersRoutingModule } from './layers-routing.module';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
LayersListComponent,
|
||||
LayerEditComponent,
|
||||
LayerDetailComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
LayersRoutingModule,
|
||||
MaterialModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
providers: [
|
||||
DatePipe
|
||||
]
|
||||
})
|
||||
export class LayersModule { }
|
||||
Reference in New Issue
Block a user