Skip to content

Commit

Permalink
[#877] apply formatting and linting to files module
Browse files Browse the repository at this point in the history
  • Loading branch information
@bossenti
bossenti committed Jan 21, 2023
1 parent cd26f1f commit a8d53d4
Show file tree
Hide file tree
Showing 13 changed files with 329 additions and 238 deletions.
1 change: 0 additions & 1 deletion ui/.eslintignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,3 @@ src/app/CustomMaterial
src/app/dashboard
src/app/data-explorer
src/app/editor
src/app/files
1 change: 0 additions & 1 deletion ui/.prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,3 @@ src/app/CustomMaterial
src/app/dashboard
src/app/data-explorer
src/app/editor
src/app/files
54 changes: 38 additions & 16 deletions ui/src/app/files/components/file-overview/file-overview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
18 changes: 9 additions & 9 deletions ui/src/app/files/components/file-overview/file-overview.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
95 changes: 48 additions & 47 deletions ui/src/app/files/components/file-overview/file-overview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
94 changes: 71 additions & 23 deletions ui/src/app/files/dialog/file-upload/file-upload-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/files/dialog/file-upload/file-upload-dialog.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@
*
*/

@import 'src/scss/sp/sp-dialog';
@import 'src/scss/sp/sp-dialog';
Loading

0 comments on commit a8d53d4

Please sign in to comment.