From a8d53d47b4c1715ee6e855baad315527d8b2b0a5 Mon Sep 17 00:00:00 2001 From: bossenti Date: Fri, 20 Jan 2023 21:47:23 +0100 Subject: [PATCH] [#877] apply formatting and linting to files module --- ui/.eslintignore | 1 - ui/.prettierignore | 1 - .../file-overview.component.html | 54 ++++++--- .../file-overview.component.scss | 18 +-- .../file-overview/file-overview.component.ts | 95 +++++++-------- .../file-upload-dialog.component.html | 94 +++++++++++---- .../file-upload-dialog.component.scss | 2 +- .../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 043fb5b8f3..973cc1ec2a 100644 --- a/ui/.eslintignore +++ b/ui/.eslintignore @@ -25,4 +25,3 @@ src/app/CustomMaterial src/app/dashboard src/app/data-explorer src/app/editor -src/app/files diff --git a/ui/.prettierignore b/ui/.prettierignore index cfed2e8866..406698f849 100644 --- a/ui/.prettierignore +++ b/ui/.prettierignore @@ -25,4 +25,3 @@ src/app/CustomMaterial src/app/dashboard src/app/data-explorer src/app/editor -src/app/files 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 051d7b97c4..bc7d775cbf 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 @@ ~ --> -
+
- +
- + - + - + - + - - +
FilenameFilename -

{{fileMetadata.originalFilename}}

+

{{ fileMetadata.originalFilename }}

 FiletypeFiletype - {{fileMetadata.filetype}} + {{ + fileMetadata.filetype + }} UploadedUploaded -
{{fileMetadata.createdAt | date:'dd.MM.yyyy HH:mm'}}
+
+ {{ fileMetadata.createdAt | date : 'dd.MM.yyyy HH:mm' }} +
ActionAction -
- +
-
+
(no files available)
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 a1b1300758..90097a5d1a 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 dda5d580ce..22865f21af 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; + filesAvailable = false; - dataSource: MatTableDataSource; - 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([]); + this.refreshFiles(); + } - } - - ngOnInit() { - this.dataSource = new MatTableDataSource([]); - 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 ed88a66e43..7fc060395e 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 @@ ~ --> -
-
- - - +
+ + +
-
{{filename}}
- +
+ {{ filename }} +
+
- - {{errorMessage}} + {{ errorMessage }} - +
- -
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 d25ee74130..704f843e4b 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 0df31b1bf5..d932dbab5f 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, + private filesService: FilesService, + ) {} - constructor(private dialogRef: DialogRef, - 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 10e701fe27..6832667409 100644 --- a/ui/src/app/files/files.component.html +++ b/ui/src/app/files/files.component.html @@ -17,24 +17,40 @@ --> - -
-
- +
- +
- diff --git a/ui/src/app/files/files.component.scss b/ui/src/app/files/files.component.scss index 0d59f14e3a..ba9f01dd22 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 4c5afe015b..3129ef4897 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 7eb7b8d460..f83d1ae24b 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 10fb905ed1..be69607a13 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], + }; }