feat: Add color display for file types in File Management (#2107) (#2216

)
apache · Nov 23, 2023 · 993f371 · 993f371
1 parent a6d219a
commit 993f371
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
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
@@ -33,9 +33,13 @@ <h4>{{ fileMetadata.originalFilename }}</h4>
             <ng-container matColumnDef="filetype">
                 <th mat-header-cell *matHeaderCellDef>Filetype</th>
                 <td mat-cell *matCellDef="let fileMetadata">
-                    <span class="filetype-container">{{
-                        fileMetadata.filetype
-                    }}</span>
+                    <span
+                        class="filetype-container"
+                        [style.background-color]="
+                            getFileColor(fileMetadata.filetype)
+                        "
+                        >{{ fileMetadata.filetype }}</span
+                    >
                 </td>
             </ng-container>
             <ng-container matColumnDef="uploaded">

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
@@ -38,6 +38,8 @@ export class FileOverviewComponent implements OnInit {
     paginator: MatPaginator;
     pageSize = 1;
 
+    private fileTypeColors: { [key: string]: string } = {};
+
     constructor(
         private filesService: FilesService,
         private dialog: MatDialog,
@@ -89,6 +91,27 @@ export class FileOverviewComponent implements OnInit {
             });
     }
 
+    getFileColor(fileType: string) {
+        if (!this.fileTypeColors.hasOwnProperty(fileType)) {
+            this.fileTypeColors[fileType] = this.generateColorHash(fileType);
+        }
+
+        return this.fileTypeColors[fileType];
+    }
+
+    private generateColorHash(fileType: string) {
+        let hash = 0;
+
+        fileType.split('').forEach(char => {
+            hash = char.charCodeAt(0) + ((hash << 5) - hash);
+        });
+
+        const color = (Math.abs(hash) & 0x00ffffff).toString(16).toUpperCase();
+        const paddedColor = color.padStart(6, '0');
+
+        return `#${paddedColor}`;
+    }
+
     @ViewChild(MatPaginator) set content(paginator: MatPaginator) {
         this.paginator = paginator;
     }