(filemanager) restructured inputs

Author: hrueger

projects/demo/src/app/_components/file-manager-demo/file-manager-demo.component.html

@@ -1 +1 @@
-<filemanager [items]="items"></filemanager>
+<filemanager [files]="files"></filemanager>

projects/demo/src/app/_components/file-manager-demo/file-manager-demo.component.ts

@@ -1,5 +1,4 @@
 import { Component } from "@angular/core";
-import { Folder } from "../../../../../schoolsquirrel/filemanager/src/lib/Folder";
 import { File } from "../../../../../schoolsquirrel/filemanager/src/lib/File";
 
 @Component({
@@ -8,30 +7,25 @@ import { File } from "../../../../../schoolsquirrel/filemanager/src/lib/File";
     styleUrls: ["./file-manager-demo.component.scss"],
 })
 export class FileManagerDemoComponent {
-    public items: (File | Folder)[] = [
+    public files: File[] = [
         {
-            name: "CVs",
-            files: [],
+            path: "CVs",
             isFolder: true,
         },
         {
-            name: "Assignments",
-            files: [],
-            isFolder: true,
+            path: "Pictures/Holidays/Winter/cool.png",
         },
         {
-            name: "Pictures",
-            files: [],
-            isFolder: true,
+            path: "Spreadsheets/Calculations/Prices.xlsx",
         },
         {
-            name: "README.docx",
+            path: "README.docx",
         },
         {
-            name: "Infos.pptx",
+            path: "Infos.pptx",
         },
         {
-            name: "Logo.psd",
+            path: "Logo.psd",
         },
     ];
 }

projects/schoolsquirrel/filemanager/src/lib/File.ts

@@ -1,10 +1,11 @@
 import { User } from "./User";
 
 export class File {
-    name: string;
-
+    path: string;
+    isFolder?: boolean;
     created?: Date;
     modified?: Date;
     createdBy?: User;
     modifiedBy?: User;
+    _name?: string;
 }

projects/schoolsquirrel/filemanager/src/lib/Folder.ts

@@ -6,6 +6,6 @@ import { Pipe, PipeTransform } from "@angular/core";
 
 export class FileExtensionPipe implements PipeTransform {
     public transform(value: string): string {
-        return value.split(".")?.pop() || "";
+        return value?.split(".")?.pop() || "";
     }
 }

projects/schoolsquirrel/filemanager/src/lib/file-extension.pipe.ts

@@ -1,24 +1,33 @@
-<table class="table table-striped table-hover" *ngIf="items && items.length">
+<table class="table table-hover" *ngIf="currentFiles && currentFiles.length">
     <thead>
         <tr>
-            <th></th>
+            <th class="sm"></th>
+            <th class="sm"></th>
             <th>Name</th>
             <th colspan="2">Modified</th>
         </tr>
     </thead>
     <tbody>
-        <tr *ngFor="let item of items" class="pointer">
-            <td></td>
+        <tr *ngFor="let file of currentFiles" class="pointer">
             <td>
-                <div [class]="'d-inline-block fi fi-round-md fi-' + (item.name | fileExtension)" *ngIf="!item.isFolder">
-                    <div class="fi-content">{{item.name | fileExtension}}</div>
+                <div class="custom-control custom-checkbox autohide">
+                    <input type="checkbox" class="custom-control-input" [id]="file.path">
+                    <label class="custom-control-label pointer" [for]="file.path"></label>
                 </div>
-                <span>{{item.name}}</span>
             </td>
-            <td>{{item.modified | date}}</td>
-            <td>{{item.modifiedBy?.name}}</td>
+            <td>
+                <div [class]="'d-inline-block fi fi-size-xs fi-round-md fi-' + (file._name | fileExtension)" *ngIf="!file.isFolder">
+                    <div class="fi-content">{{file._name | fileExtension}}</div>
+                </div>
+                <i class="folder-icon fas fa-folder fa-2x" *ngIf="file.isFolder"></i>
+            </td>
+            <td>
+                <span>{{file._name}}</span>
+            </td>
+            <td>{{file.modified | date}}</td>
+            <td>{{file.modifiedBy?.name}}</td>
         </tr>
     </tbody>
 </table>
 
-<span *ngIf="!items || items.length == 0">No files or folders found!</span>
+<span *ngIf="!currentFiles || currentFiles.length == 0">No files or folders found!</span>

projects/schoolsquirrel/filemanager/src/lib/filemanager.component.html

@@ -2,4 +2,24 @@
 
 .pointer {
     cursor: pointer;
+    .autohide {
+        display: none;
+    }
+    &:hover {
+        .autohide {
+            display: unset;
+        }
+    }
+}
+
+.folder-icon {
+    color: #FFDA68;
+}
+
+table {
+    tr {
+        th.sm, td.sm {
+            width: 4rem;
+        }
+    }
 }

projects/schoolsquirrel/filemanager/src/lib/filemanager.component.scss

@@ -2,7 +2,6 @@ import {
     Component, Input,
 } from "@angular/core";
 import { File } from "./File";
-import { Folder } from "./Folder";
 
 @Component({
     selector: "filemanager",
@@ -13,5 +12,25 @@ import { Folder } from "./Folder";
     styleUrls: ["./filemanager.component.scss"],
 })
 export class FileManagerComponent {
-    @Input() public items: (File | Folder)[];
+    @Input() public files: File[];
+    public currentFiles: File[] = [];
+    public currentPath: string[] = [];
+
+    public ngOnInit(): void {
+        for (const file of this.files) {
+            if (this.currentPath.length > 0) {
+                //
+            } else {
+                const parts = file.path.split("/");
+                const topLevelName = parts.shift();
+                if (this.currentFiles.findIndex((f) => f._name == topLevelName) === -1) {
+                    this.currentFiles.push({
+                        _name: topLevelName,
+                        path: file.path,
+                        isFolder: file.isFolder || parts.length > 0,
+                    });
+                }
+            }
+        }
+    }
 }