Import data from GoogleSheet

This commit is contained in:
2022-12-21 22:15:17 +01:00
parent 7db4fee54d
commit c7b907da7c
9 changed files with 206 additions and 67 deletions

View File

@@ -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)
})
})
}
}

View File

@@ -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>

View File

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