Import data from GoogleSheet
This commit is contained in:
@@ -29,6 +29,7 @@ export class DataSet extends Base {
|
||||
id: [null],
|
||||
name: ['', Validators.required],
|
||||
source: ['', Validators.required],
|
||||
sheetId: '1G_Hu8DTP-PSPNXTaVYhc_ppnTQi6HWoA4oXSSdUmM9E',
|
||||
createdAt: '',
|
||||
modifiedAt: '',
|
||||
createdBy: '',
|
||||
@@ -91,4 +92,16 @@ export class DataSet extends Base {
|
||||
})
|
||||
})
|
||||
}
|
||||
static parseGoogleSheet(sheetId: string, _http: HttpClient): Promise<DataRow[]> {
|
||||
return new Promise((resolve, reject) => {
|
||||
_http.get<DataRow[]>(`${environment.api.url}/datasets/parseGoogleSheet/${sheetId}`,
|
||||
).pipe(map(data => data.map(x => new DataRow().deserialize(x))))
|
||||
.subscribe({
|
||||
next: (data) => {
|
||||
resolve(data);
|
||||
},
|
||||
error: (e) => reject(e)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,69 +1,82 @@
|
||||
<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" (selectionChange)="generateNumber()">
|
||||
<mat-option value="CSV">CSV</mat-option>
|
||||
<mat-option value="GoogleSheet">GoogleSheet</mat-option>
|
||||
<mat-option value="SAP">SAP</mat-option>
|
||||
<mat-option value="Symfonia">Symfonia</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>
|
||||
<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>
|
||||
|
||||
<input type="file" class="file-input" (change)="onFileSelected($event)" #fileUpload>
|
||||
<button mat-mini-fab color="primary" type="button" class="upload-btn" (click)="fileUpload.click()">
|
||||
<mat-icon>attach_file</mat-icon>
|
||||
</button>
|
||||
<mat-grid-tile>
|
||||
<mat-form-field class="detail-input">
|
||||
<mat-select placeholder="Źródło" formControlName="source" (selectionChange)="generateNumber()">
|
||||
<mat-option value="CSV">CSV</mat-option>
|
||||
<mat-option value="GoogleSheet">GoogleSheet</mat-option>
|
||||
<mat-option value="SAP">SAP</mat-option>
|
||||
<mat-option value="Symfonia">Symfonia</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>
|
||||
<mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
|
||||
|
||||
<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>
|
||||
<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>
|
||||
@@ -68,4 +68,11 @@ export class DataSetEditComponent implements OnInit {
|
||||
trackByUid(index: number, item: DataRow) {
|
||||
return item.id;
|
||||
}
|
||||
async parseGoogleSheet() {
|
||||
const id = this.form.get('sheetId')?.value;
|
||||
this.document.dataRows = await DataSet.parseGoogleSheet(id, this.http$);
|
||||
this.dataSource = new MatTableDataSource(this.document.dataRows);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user