[#24] create Add-Button for file items

CLIENT/CLIENT.FileSharing/src/app/pages/uploads/uploads.component.html

@@ -1,4 +1,16 @@
-<h2 class="heading">My Uploads</h2>
+<div class="header">
+  <h2 class="heading">My Uploads</h2>
+  <div class="action-container">
+    <button
+      mat-mini-fab
+      class="action-item"
+      [matMenuTriggerFor]="addMenu"
+      #addMenuTrigger="matMenuTrigger"
+    >
+      <mat-icon>add</mat-icon>
+    </button>
+  </div>
+</div>
 <div class="filter-container">
   <form class="filter-form">
     <!-- Filter by File Type -->
@@ -142,12 +154,27 @@ <h2 class="heading">My Uploads</h2>
   <ng-template matMenuContent let-file="file">
     <button mat-menu-item (click)="createLink(file)">+ Create Link</button>
     <button mat-menu-item (click)="downloadFile(file)">Download</button>
-    <button mat-menu-item (click)="renameFile(file)">Rename</button>
+    <button mat-menu-item (click)="editFileItem(EnFileAction.Rename, file)">
+      Rename
+    </button>
     @if (file.isFolder) {
-      <button mat-menu-item (click)="changeFolderColor(file)">
+      <button
+        mat-menu-item
+        (click)="editFileItem(EnFileAction.ChangeColor, file)"
+      >
         Change color
       </button>
     }
     <button mat-menu-item (click)="deleteFile(file)">Delete</button>
   </ng-template>
 </mat-menu>
+
+<mat-menu #addMenu="matMenu">
+  <ng-template matMenuContent>
+    <button mat-menu-item (click)="editFileItem(EnFileAction.Create)">
+      New Folder
+    </button>
+    <button mat-menu-item (click)="uploadFile()">Upload File(s)</button>
+    <button mat-menu-item (click)="uploadFolder()">Upload Folder(s)</button>
+  </ng-template>
+</mat-menu>

CLIENT/CLIENT.FileSharing/src/app/pages/uploads/uploads.component.scss

@@ -1,8 +1,23 @@
 @use "@angular/material" as mat;
 
-.heading {
-  font-size: 1.75em;
-  margin-bottom: 0;
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .heading {
+    font-size: 1.75em;
+    margin-bottom: 0;
+  }
+
+  .action-container {
+    display: flex;
+    gap: 16px;
+  }
+
+  .action-container:last-child {
+    margin-right: 8px;
+  }
 }
 
 .filter-container {

CLIENT/CLIENT.FileSharing/src/app/pages/uploads/uploads.component.ts

@@ -20,6 +20,9 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { FileItemsApiService } from '../../file-items/shared/fileItems-api.service';
 import { map } from 'rxjs/operators';
+import { MatDialog } from '@angular/material/dialog';
+import { EditFileItemModalComponent } from '../../file-items/shared/dialogs/edit-file-item-modal/edit-file-item-modal.component';
+import { EnFileAction } from '../../file-items/shared/file-action-type.enum';
 
 @Component({
   selector: 'app-uploads',
@@ -63,14 +66,19 @@ export class UploadsComponent {
 
   contextMenuPosition = { x: '0px', y: '0px' };
 
+  EnFileAction = EnFileAction;
+
   initialSelection = [];
   allowMultiSelect = true;
   selection = new SelectionModel<FileItem>(
     this.allowMultiSelect,
     this.initialSelection,
   );
 
-  constructor(private fileItemApiService: FileItemsApiService) {}
+  constructor(
+    private fileItemApiService: FileItemsApiService,
+    private dialog: MatDialog,
+  ) {}
 
   ngAfterViewInit(): void {
     this.dataSource = new FileItemsDataSource(this.fileItemApiService);
@@ -113,6 +121,21 @@ export class UploadsComponent {
     this.contextMenu.openMenu();
   }
 
+  editFileItem(action: EnFileAction, fileItem?: FileItem) {
+    const dialogRef = this.dialog.open(EditFileItemModalComponent, {
+      data: fileItem ? { name: fileItem.name, color: '', action } : { action },
+    });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      if (!result) return;
+      console.log(result);
+    });
+  }
+
+  uploadFile() {}
+
+  uploadFolder() {}
+
   createLink(file: FileItem) {
     // TODO
     alert('Create link for ' + file.name);
@@ -128,11 +151,6 @@ export class UploadsComponent {
     alert('Rename ' + file.name);
   }
 
-  changeFolderColor(file: FileItem) {
-    // TODO
-    alert('Change color for ' + file.name);
-  }
-
   deleteFile(file: FileItem) {
     // TODO
     alert('Delete ' + file.name);