This is an automated email from the ASF dual-hosted git repository. bossenti pushed a commit to branch chore/formatting-linting-files in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit c868dbe92e05ad407799a4467b05f3ab73f753e1 Author: bossenti <[email protected]> AuthorDate: Fri Jan 20 21:47:23 2023 +0100 [#877] apply formatting and linting to files module --- ui/.eslintignore | 1 - ui/.prettierignore | 1 - .../file-overview/file-overview.component.html | 54 ++++++++--- .../file-overview/file-overview.component.scss | 18 ++-- .../file-overview/file-overview.component.ts | 95 +++++++++--------- .../file-upload/file-upload-dialog.component.html | 94 +++++++++++++----- .../file-upload/file-upload-dialog.component.scss | 2 +- .../file-upload/file-upload-dialog.component.ts | 108 ++++++++++----------- ui/src/app/files/files.component.html | 34 +++++-- ui/src/app/files/files.component.scss | 12 +-- ui/src/app/files/files.component.ts | 56 ++++++----- ui/src/app/files/files.module.ts | 82 ++++++++-------- ui/src/app/files/files.routes.ts | 10 +- 13 files changed, 329 insertions(+), 238 deletions(-) diff --git a/ui/.eslintignore b/ui/.eslintignore index c980966c1..e14894a30 100644 --- a/ui/.eslintignore +++ b/ui/.eslintignore @@ -26,6 +26,5 @@ src/app/CustomMaterial src/app/dashboard src/app/data-explorer src/app/editor -src/app/files src/app/info src/app/login diff --git a/ui/.prettierignore b/ui/.prettierignore index 3930e91ee..aafb087af 100644 --- a/ui/.prettierignore +++ b/ui/.prettierignore @@ -26,6 +26,5 @@ src/app/CustomMaterial src/app/dashboard src/app/data-explorer src/app/editor -src/app/files src/app/info src/app/login diff --git a/ui/src/app/files/components/file-overview/file-overview.component.html b/ui/src/app/files/components/file-overview/file-overview.component.html index 051d7b97c..bc7d775cb 100644 --- a/ui/src/app/files/components/file-overview/file-overview.component.html +++ b/ui/src/app/files/components/file-overview/file-overview.component.html @@ -16,48 +16,70 @@ ~ --> -<div fxFlex="100" fxLayout="column" style="margin:1px;"> +<div fxFlex="100" fxLayout="column" style="margin: 1px"> <div fxLayout="column" fxFlex="100" *ngIf="filesAvailable"> - <table fxFlex="100" mat-table [dataSource]="dataSource" style="width: 100%;"> + <table + fxFlex="100" + mat-table + [dataSource]="dataSource" + style="width: 100%" + > <ng-container matColumnDef="filename"> - <th mat-header-cell *matHeaderCellDef> Filename</th> + <th mat-header-cell *matHeaderCellDef>Filename</th> <td mat-cell *matCellDef="let fileMetadata"> - <h4>{{fileMetadata.originalFilename}}</h4> + <h4>{{ fileMetadata.originalFilename }}</h4> </td> </ng-container> <ng-container matColumnDef="filetype"> - <th mat-header-cell *matHeaderCellDef> Filetype</th> + <th mat-header-cell *matHeaderCellDef>Filetype</th> <td mat-cell *matCellDef="let fileMetadata"> - <span class="filetype-container">{{fileMetadata.filetype}}</span> + <span class="filetype-container">{{ + fileMetadata.filetype + }}</span> </td> </ng-container> <ng-container matColumnDef="uploaded"> - <th mat-header-cell *matHeaderCellDef> Uploaded</th> + <th mat-header-cell *matHeaderCellDef>Uploaded</th> <td mat-cell *matCellDef="let fileMetadata"> - <h5>{{fileMetadata.createdAt | date:'dd.MM.yyyy HH:mm'}}</h5> + <h5> + {{ fileMetadata.createdAt | date : 'dd.MM.yyyy HH:mm' }} + </h5> </td> </ng-container> <ng-container matColumnDef="action"> - <th mat-header-cell *matHeaderCellDef> Action</th> + <th mat-header-cell *matHeaderCellDef>Action</th> <td mat-cell *matCellDef="let fileMetadata"> - <button color="accent" mat-button mat-icon-button matTooltip="Delete file" - matTooltipPosition="above" - (click)="deleteFile(fileMetadata)" data-cy="delete"> + <button + color="accent" + mat-button + mat-icon-button + matTooltip="Delete file" + matTooltipPosition="above" + (click)="deleteFile(fileMetadata)" + data-cy="delete" + > <i class="material-icons">delete</i> </button> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> - <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> - + <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr> </table> <div fxFlex="100" fxLayoutAlign="end end"> - <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="10"></mat-paginator> + <mat-paginator + [pageSizeOptions]="[5, 10, 25, 100]" + [pageSize]="10" + ></mat-paginator> </div> </div> - <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!filesAvailable"> + <div + fxFlex="100" + fxLayout="column" + fxLayoutAlign="center center" + *ngIf="!filesAvailable" + > <h5>(no files available)</h5> </div> </div> diff --git a/ui/src/app/files/components/file-overview/file-overview.component.scss b/ui/src/app/files/components/file-overview/file-overview.component.scss index a1b130075..90097a5d1 100644 --- a/ui/src/app/files/components/file-overview/file-overview.component.scss +++ b/ui/src/app/files/components/file-overview/file-overview.component.scss @@ -17,24 +17,24 @@ */ .mat-table { - //background: #FAFAFA; + //background: #FAFAFA; } .mat-paginator { - border-top: 1px solid rgba(0,0,0,.12); - //background: #FAFAFA; + border-top: 1px solid rgba(0, 0, 0, 0.12); + //background: #FAFAFA; } .mat-row:nth-child(even) { - background-color: var(--color-bg-1); + background-color: var(--color-bg-1); } .mat-row:nth-child(odd) { - background-color: var(--color-bg-2); + background-color: var(--color-bg-2); } .filetype-container { - background: #00aeff; - color: white; - padding: 5px 15px; - border-radius: 5px; + background: #00aeff; + color: white; + padding: 5px 15px; + border-radius: 5px; } diff --git a/ui/src/app/files/components/file-overview/file-overview.component.ts b/ui/src/app/files/components/file-overview/file-overview.component.ts index dda5d580c..22865f21a 100644 --- a/ui/src/app/files/components/file-overview/file-overview.component.ts +++ b/ui/src/app/files/components/file-overview/file-overview.component.ts @@ -24,62 +24,63 @@ import { ConfirmDialogComponent } from '@streampipes/shared-ui'; import { MatDialog } from '@angular/material/dialog'; @Component({ - selector: 'sp-file-overview', - templateUrl: './file-overview.component.html', - styleUrls: ['./file-overview.component.scss'] + selector: 'sp-file-overview', + templateUrl: './file-overview.component.html', + styleUrls: ['./file-overview.component.scss'], }) export class FileOverviewComponent implements OnInit { + displayedColumns: string[] = ['filename', 'filetype', 'uploaded', 'action']; - displayedColumns: string[] = ['filename', 'filetype', 'uploaded', 'action']; + dataSource: MatTableDataSource<FileMetadata>; + filesAvailable = false; - dataSource: MatTableDataSource<FileMetadata>; - filesAvailable = false; + paginator: MatPaginator; + pageSize = 1; - paginator: MatPaginator; - pageSize = 1; + constructor( + private filesService: FilesService, + private dialog: MatDialog, + ) {} - constructor(private filesService: FilesService, - private dialog: MatDialog) { + ngOnInit() { + this.dataSource = new MatTableDataSource<FileMetadata>([]); + this.refreshFiles(); + } - } - - ngOnInit() { - this.dataSource = new MatTableDataSource<FileMetadata>([]); - this.refreshFiles(); - } - - refreshFiles() { - this.filesService.getFileMetadata().subscribe(fm => { - this.dataSource.data = fm; - this.filesAvailable = fm && fm.length > 0; - setTimeout(() => { - this.dataSource.paginator = this.paginator; - }); - }); - } + refreshFiles() { + this.filesService.getFileMetadata().subscribe(fm => { + this.dataSource.data = fm; + this.filesAvailable = fm && fm.length > 0; + setTimeout(() => { + this.dataSource.paginator = this.paginator; + }); + }); + } - deleteFile(fileMetadata: FileMetadata) { - const dialogRef = this.dialog.open(ConfirmDialogComponent, { - width: '500px', - data: { - 'title': 'Do you really want to delete this file?', - 'subtitle': 'This cannot be undone.', - 'cancelTitle': 'No', - 'okTitle': 'Yes', - 'confirmAndCancel': true - }, - }); + deleteFile(fileMetadata: FileMetadata) { + const dialogRef = this.dialog.open(ConfirmDialogComponent, { + width: '500px', + data: { + title: 'Do you really want to delete this file?', + subtitle: 'This cannot be undone.', + cancelTitle: 'No', + okTitle: 'Yes', + confirmAndCancel: true, + }, + }); - dialogRef.afterClosed().subscribe(ev => { - if (ev) { - this.filesService.deleteFile(fileMetadata.fileId).subscribe(response => { - this.refreshFiles(); + dialogRef.afterClosed().subscribe(ev => { + if (ev) { + this.filesService + .deleteFile(fileMetadata.fileId) + .subscribe(response => { + this.refreshFiles(); + }); + } }); - } - }); - } + } - @ViewChild(MatPaginator) set content(paginator: MatPaginator) { - this.paginator = paginator; - } + @ViewChild(MatPaginator) set content(paginator: MatPaginator) { + this.paginator = paginator; + } } diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html index ed88a66e4..7fc060395 100644 --- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html +++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html @@ -16,45 +16,93 @@ ~ --> - <div class="sp-dialog-container"> <div class="sp-dialog-content p-15"> <div fxFlex="100"> - <div fxFlex="100" style="margin:5px;width:100%"> - <mat-form-field style="width: 95%" (click)="fileInput.click();" color="accent"> - <input matInput placeholder="File" disabled (value)="fileNames"> - <input #fileInput type="file" style="display:none;" - (change)="handleFileInput($event.target.files)" - data-cy="sp-file-management-file-input" multiple> + <div fxFlex="100" style="margin: 5px; width: 100%"> + <mat-form-field + style="width: 95%" + (click)="fileInput.click()" + color="accent" + > + <input + matInput + placeholder="File" + disabled + (value)="(fileNames)" + /> + <input + #fileInput + type="file" + style="display: none" + (change)="handleFileInput($event.target.files)" + data-cy="sp-file-management-file-input" + multiple + /> <div> - <div fxLayout="column" *ngFor="let filename of fileNames">{{filename}}</div> - <mat-progress-bar mode="determinate" value="{{uploadStatus}}" *ngIf="uploadStatus > 0" color="accent"></mat-progress-bar> + <div + fxLayout="column" + *ngFor="let filename of fileNames" + > + {{ filename }} + </div> + <mat-progress-bar + mode="determinate" + value="{{ uploadStatus }}" + *ngIf="uploadStatus > 0" + color="accent" + ></mat-progress-bar> </div> - <button color="accent" matSuffix - mat-button style="min-width: 0px"> - <mat-icon *ngIf="uploadStatus < 99">insert_drive_file</mat-icon> - <mat-icon *ngIf="uploadStatus == 100" class="green-icon">check_circle</mat-icon> + <button + color="accent" + matSuffix + mat-button + style="min-width: 0px" + > + <mat-icon *ngIf="uploadStatus < 99" + >insert_drive_file</mat-icon + > + <mat-icon + *ngIf="uploadStatus === 100" + class="green-icon" + >check_circle</mat-icon + > </button> <mat-error *ngIf="!hasInput"> - {{errorMessage}} + {{ errorMessage }} </mat-error> </mat-form-field> - <button mat-button mat-raised-button class="mat-basic" (click)="removeFilesFromUpload()">Clear</button> + <button + mat-button + mat-raised-button + class="mat-basic" + (click)="removeFilesFromUpload()" + > + Clear + </button> </div> </div> </div> <mat-divider></mat-divider> <div class="sp-dialog-actions"> - <button mat-button - mat-raised-button - color="accent" - (click)="store()" - [disabled]="fileNames.length === 0" - data-cy="sp-file-management-store-file" - style="margin-right:10px;"> + <button + mat-button + mat-raised-button + color="accent" + (click)="store()" + [disabled]="fileNames.length === 0" + data-cy="sp-file-management-store-file" + style="margin-right: 10px" + > Import files </button> - <button mat-button mat-raised-button class="mat-basic" (click)="cancel()" style="margin-right:10px;"> + <button + mat-button + mat-raised-button + class="mat-basic" + (click)="cancel()" + style="margin-right: 10px" + > Cancel </button> </div> diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss index d25ee7413..704f843e4 100644 --- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss +++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss @@ -16,4 +16,4 @@ * */ -@import 'src/scss/sp/sp-dialog'; \ No newline at end of file +@import 'src/scss/sp/sp-dialog'; diff --git a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts index 0df31b1bf..d932dbab5 100644 --- a/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts +++ b/ui/src/app/files/dialog/file-upload/file-upload-dialog.component.ts @@ -16,77 +16,75 @@ * */ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { DialogRef } from '@streampipes/shared-ui'; import { HttpEventType, HttpResponse } from '@angular/common/http'; import { FilesService } from '@streampipes/platform-services'; @Component({ - selector: 'sp-file-upload-dialog-component', - templateUrl: './file-upload-dialog.component.html', - styleUrls: ['./file-upload-dialog.component.scss'] + selector: 'sp-file-upload-dialog-component', + templateUrl: './file-upload-dialog.component.html', + styleUrls: ['./file-upload-dialog.component.scss'], }) -export class FileUploadDialogComponent implements OnInit { +export class FileUploadDialogComponent { + inputValue: string; + fileNames: string[] = []; - inputValue: string; - fileNames: string[] = []; + selectedUploadFiles: FileList; - selectedUploadFiles: FileList; + hasInput: boolean; + errorMessage = 'Please enter a value'; - hasInput: boolean; - errorMessage = 'Please enter a value'; + uploadStatus = 0; - uploadStatus = 0; + constructor( + private dialogRef: DialogRef<FileUploadDialogComponent>, + private filesService: FilesService, + ) {} - constructor(private dialogRef: DialogRef<FileUploadDialogComponent>, - private filesService: FilesService) { - - } - - ngOnInit(): void { - } - - handleFileInput(files: FileList) { - this.selectedUploadFiles = files; - for (let i = 0; i < files.length; i++) { - this.fileNames.push(files.item(i).name); + handleFileInput(files: FileList) { + this.selectedUploadFiles = files; + for (let i = 0; i < files.length; i++) { + this.fileNames.push(files.item(i).name); + } + this.uploadStatus = 0; } - this.uploadStatus = 0; - } - removeFilesFromUpload(): void { - this.selectedUploadFiles = undefined; - this.fileNames = []; - } - - store() { - this.uploadStatus = 0; - if (this.selectedUploadFiles.length > 0) { - this.uploadFile(0); + removeFilesFromUpload(): void { + this.selectedUploadFiles = undefined; + this.fileNames = []; } - } - uploadFile(index: number): void { - this.filesService.uploadFile(this.selectedUploadFiles.item(index)).subscribe( - event => { - if (event.type === HttpEventType.UploadProgress) { - this.uploadStatus = Math.round(100 * event.loaded / event.total); - } else if (event instanceof HttpResponse) { - index++; - if (index === (this.selectedUploadFiles.length)) { - this.dialogRef.close(); - } else { - this.uploadFile(index); - } + store() { + this.uploadStatus = 0; + if (this.selectedUploadFiles.length > 0) { + this.uploadFile(0); } - }, - error => { - }, - ); - } + } - cancel() { - this.dialogRef.close(); - } + uploadFile(index: number): void { + this.filesService + .uploadFile(this.selectedUploadFiles.item(index)) + .subscribe( + event => { + if (event.type === HttpEventType.UploadProgress) { + this.uploadStatus = Math.round( + (100 * event.loaded) / event.total, + ); + } else if (event instanceof HttpResponse) { + index++; + if (index === this.selectedUploadFiles.length) { + this.dialogRef.close(); + } else { + this.uploadFile(index); + } + } + }, + error => {}, + ); + } + cancel() { + this.dialogRef.close(); + } } diff --git a/ui/src/app/files/files.component.html b/ui/src/app/files/files.component.html index 10e701fe2..683266740 100644 --- a/ui/src/app/files/files.component.html +++ b/ui/src/app/files/files.component.html @@ -17,24 +17,40 @@ --> <sp-basic-view [showBackLink]="false" [padding]="true"> - - <div nav fxFlex="100" fxLayoutAlign="start center" fxLayout="row" class="pl-10"> - <button mat-button mat-raised-button color="accent" - (click)="openFileUploadDialog()" - data-cy="sp-open-file-upload-dialog" - class="mr-10"> + <div + nav + fxFlex="100" + fxLayoutAlign="start center" + fxLayout="row" + class="pl-10" + > + <button + mat-button + mat-raised-button + color="accent" + (click)="openFileUploadDialog()" + data-cy="sp-open-file-upload-dialog" + class="mr-10" + > <i class="material-icons">cloud_upload</i> Upload new file </button> </div> <div fxFlex="100" fxLayout="column"> - <sp-basic-header-title-component title="My Files"></sp-basic-header-title-component> + <sp-basic-header-title-component + title="My Files" + ></sp-basic-header-title-component> <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start"> - <sp-basic-inner-panel [showTitle]="false" innerPadding="0" outerMargin="0" fxFlex="90" [hideToolbar]="true"> + <sp-basic-inner-panel + [showTitle]="false" + innerPadding="0" + outerMargin="0" + fxFlex="90" + [hideToolbar]="true" + > <sp-file-overview #fileOverviewComponent></sp-file-overview> </sp-basic-inner-panel> </div> </div> - </sp-basic-view> diff --git a/ui/src/app/files/files.component.scss b/ui/src/app/files/files.component.scss index 0d59f14e3..ba9f01dd2 100644 --- a/ui/src/app/files/files.component.scss +++ b/ui/src/app/files/files.component.scss @@ -17,16 +17,16 @@ */ .add-options { - border-bottom: 1px solid var(--color-bg-2); - padding-top:10px; - padding-bottom:10px; + border-bottom: 1px solid var(--color-bg-2); + padding-top: 10px; + padding-bottom: 10px; } .page-container-padding-inner { - margin: 20px; + margin: 20px; } .add-options-item { - display: inline; - margin-right: 10px; + display: inline; + margin-right: 10px; } diff --git a/ui/src/app/files/files.component.ts b/ui/src/app/files/files.component.ts index 4c5afe015..3129ef489 100644 --- a/ui/src/app/files/files.component.ts +++ b/ui/src/app/files/files.component.ts @@ -17,35 +17,41 @@ */ import { Component, OnInit, ViewChild } from '@angular/core'; -import { DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui'; +import { + DialogService, + PanelType, + SpBreadcrumbService, +} from '@streampipes/shared-ui'; import { FileUploadDialogComponent } from './dialog/file-upload/file-upload-dialog.component'; import { SpFilesRoutes } from './files.routes'; @Component({ - templateUrl: './files.component.html', - styleUrls: ['./files.component.scss'] + templateUrl: './files.component.html', + styleUrls: ['./files.component.scss'], }) export class FilesComponent implements OnInit { - - @ViewChild('fileOverviewComponent') fileOverviewComponent; - - constructor(private dialogService: DialogService, - private breadcrumbService: SpBreadcrumbService) { - - } - - ngOnInit() { - this.breadcrumbService.updateBreadcrumb(this.breadcrumbService.getRootLink(SpFilesRoutes.BASE)); - } - - openFileUploadDialog() { - const dialogRef = this.dialogService.open(FileUploadDialogComponent, { - panelType: PanelType.SLIDE_IN_PANEL, - title: 'Upload file', - width: '40vw', - }); - - dialogRef.afterClosed().subscribe(() => this.fileOverviewComponent.refreshFiles()); - } - + @ViewChild('fileOverviewComponent') fileOverviewComponent; + + constructor( + private dialogService: DialogService, + private breadcrumbService: SpBreadcrumbService, + ) {} + + ngOnInit() { + this.breadcrumbService.updateBreadcrumb( + this.breadcrumbService.getRootLink(SpFilesRoutes.BASE), + ); + } + + openFileUploadDialog() { + const dialogRef = this.dialogService.open(FileUploadDialogComponent, { + panelType: PanelType.SLIDE_IN_PANEL, + title: 'Upload file', + width: '40vw', + }); + + dialogRef + .afterClosed() + .subscribe(() => this.fileOverviewComponent.refreshFiles()); + } } diff --git a/ui/src/app/files/files.module.ts b/ui/src/app/files/files.module.ts index 7eb7b8d46..f83d1ae24 100644 --- a/ui/src/app/files/files.module.ts +++ b/ui/src/app/files/files.module.ts @@ -43,45 +43,45 @@ import { RouterModule } from '@angular/router'; import { SharedUiModule } from '@streampipes/shared-ui'; @NgModule({ - imports: [ - CommonModule, - CoreUiModule, - FlexLayoutModule, - FormsModule, - ReactiveFormsModule, - MatButtonModule, - MatChipsModule, - MatFormFieldModule, - MatGridListModule, - MatIconModule, - MatInputModule, - MatDividerModule, - MatListModule, - MatPaginatorModule, - MatProgressBarModule, - MatTableModule, - MatTabsModule, - MatTooltipModule, - PlatformServicesModule, - ServicesModule, - SharedUiModule, - RouterModule.forChild([ - { - path: 'files', - children: [ - { - path: '', - component: FilesComponent - }] - }]) - - ], - declarations: [ - FilesComponent, - FileOverviewComponent, - FileUploadDialogComponent - ], - providers: [] + imports: [ + CommonModule, + CoreUiModule, + FlexLayoutModule, + FormsModule, + ReactiveFormsModule, + MatButtonModule, + MatChipsModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatDividerModule, + MatListModule, + MatPaginatorModule, + MatProgressBarModule, + MatTableModule, + MatTabsModule, + MatTooltipModule, + PlatformServicesModule, + ServicesModule, + SharedUiModule, + RouterModule.forChild([ + { + path: 'files', + children: [ + { + path: '', + component: FilesComponent, + }, + ], + }, + ]), + ], + declarations: [ + FilesComponent, + FileOverviewComponent, + FileUploadDialogComponent, + ], + providers: [], }) -export class FilesModule { -} +export class FilesModule {} diff --git a/ui/src/app/files/files.routes.ts b/ui/src/app/files/files.routes.ts index 10fb905ed..be69607a1 100644 --- a/ui/src/app/files/files.routes.ts +++ b/ui/src/app/files/files.routes.ts @@ -16,10 +16,12 @@ * */ -import { SpBreadcrumbItem, } from '@streampipes/shared-ui'; +import { SpBreadcrumbItem } from '@streampipes/shared-ui'; export class SpFilesRoutes { - - static FILES_BASE_LINK = 'files'; - static BASE: SpBreadcrumbItem = {label: 'File Management', link: [SpFilesRoutes.FILES_BASE_LINK]}; + static FILES_BASE_LINK = 'files'; + static BASE: SpBreadcrumbItem = { + label: 'File Management', + link: [SpFilesRoutes.FILES_BASE_LINK], + }; }
