[#877] apply formatting and linting to files module

ui/.eslintignore

@@ -25,4 +25,3 @@ src/app/CustomMaterial
 src/app/dashboard
 src/app/data-explorer
 src/app/editor
-src/app/files

ui/.prettierignore

@@ -25,4 +25,3 @@ src/app/CustomMaterial
 src/app/dashboard
 src/app/data-explorer
 src/app/editor
-src/app/files

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>

ui/src/app/files/components/file-overview/file-overview.component.scss

@@ -17,24 +17,22 @@
  */
 
 .mat-table {
-  //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);
 }
 
 .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;
 }

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

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>

ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss

@@ -16,4 +16,4 @@
  *
  */
 
-@import 'src/scss/sp/sp-dialog';
+@import 'src/scss/sp/sp-dialog';