@team-codeme/crud-forge 0.0.0-stage → 1.0.0

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/apps/file-manager/data/file-manager.ts

@@ -0,0 +1,261 @@
+import { Injectable } from '@angular/core';
+import { Item } from '@/app/domains/admin/modules/apps/file-manager/data/model';
+
+@Injectable({ providedIn: 'root' })
+export class FileManagerService {
+  data: Item[] = [
+    {
+      id: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+      folderId: null,
+      name: 'Personal',
+      createdBy: 'Brian Hughes',
+      createdAt: 'April 24, 2018',
+      modifiedAt: 'April 24, 2018',
+      size: '87 MB',
+      type: 'folder',
+      contents: '57 files',
+      description:
+        'Personal documents such as insurance policies, tax papers and etc.',
+    },
+    {
+      id: '6da8747f-b474-4c9a-9eba-5ef212285500',
+      folderId: null,
+      name: 'Photos',
+      createdBy: 'Brian Hughes',
+      createdAt: 'November 01, 2021',
+      modifiedAt: 'November 01, 2021',
+      size: '3015 MB',
+      type: 'folder',
+      contents: '907 files',
+      description: 'Personal photos; selfies, family, vacation and etc.',
+    },
+    {
+      id: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
+      folderId: null,
+      name: 'Work',
+      createdBy: 'Brian Hughes',
+      createdAt: 'May 8, 2020',
+      modifiedAt: 'May 8, 2020',
+      size: '14 MB',
+      type: 'folder',
+      contents: '24 files',
+      description: 'Work related files, mainly documents and paychecks.',
+    },
+    {
+      id: '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
+      folderId: null,
+      name: 'Contract #123',
+      createdBy: 'Brian Hughes',
+      createdAt: 'January 14, 2021',
+      modifiedAt: 'January 14, 2021',
+      size: '1.2 MB',
+      type: 'PDF',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
+      folderId: null,
+      name: 'Estimated budget',
+      createdBy: 'Brian Hughes',
+      createdAt: 'December 14, 2020',
+      modifiedAt: 'December 14, 2020',
+      size: '679 KB',
+      type: 'XLS',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '157adb9a-14f8-4559-ac93-8be893c9f80a',
+      folderId: null,
+      name: 'DMCA notice #42',
+      createdBy: 'Brian Hughes',
+      createdAt: 'May 8, 2021',
+      modifiedAt: 'May 8, 2021',
+      size: '1.5 MB',
+      type: 'DOC',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '4f64597a-df7e-461c-ad60-f33e5f7e0747',
+      folderId: null,
+      name: 'Invoices',
+      createdBy: 'Brian Hughes',
+      createdAt: 'January 12, 2020',
+      modifiedAt: 'January 12, 2020',
+      size: '17.8 MB',
+      type: 'PDF',
+      contents: null,
+      description: null,
+    },
+    {
+      id: 'e445c445-57b2-4476-8c62-b068e3774b8e',
+      folderId: null,
+      name: 'Crash logs',
+      createdBy: 'Brian Hughes',
+      createdAt: 'June 8, 2020',
+      modifiedAt: 'June 8, 2020',
+      size: '11.3 MB',
+      type: 'TXT',
+      contents: null,
+      description: null,
+    },
+    {
+      id: 'b482f93e-7847-4614-ad48-b78b78309f81',
+      folderId: null,
+      name: 'System logs',
+      createdBy: 'Brian Hughes',
+      createdAt: 'June 8, 2020',
+      modifiedAt: 'June 8, 2020',
+      size: '9.3 MB',
+      type: 'TXT',
+      contents: null,
+      description: null,
+    },
+    {
+      id: 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
+      folderId: null,
+      name: 'Personal projects',
+      createdBy: 'Brian Hughes',
+      createdAt: 'March 18, 2020',
+      modifiedAt: 'March 18, 2020',
+      size: '4.3 MB',
+      type: 'DOC',
+      contents: null,
+      description: null,
+    },
+    {
+      id: 'ae908d59-07da-4dd8-aba0-124e50289295',
+      folderId: null,
+      name: 'Biometric portrait',
+      createdBy: 'Brian Hughes',
+      createdAt: 'August 29, 2020',
+      modifiedAt: 'August 29, 2020',
+      size: '4.5 MB',
+      type: 'JPG',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '4038a5b6-5b1a-432d-907c-e037aeb817a8',
+      folderId: null,
+      name: 'Scanned image 20201012-1',
+      createdBy: 'Brian Hughes',
+      createdAt: 'September 13, 2020',
+      modifiedAt: 'September 13, 2020',
+      size: '7.8 MB',
+      type: 'JPG',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '630d2e9a-d110-47a0-ac03-256073a0f56d',
+      folderId: null,
+      name: 'Scanned image 20201012-2',
+      createdBy: 'Brian Hughes',
+      createdAt: 'September 14, 2020',
+      modifiedAt: 'September 14, 2020',
+      size: '7.4 MB',
+      type: 'JPG',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '1417d5ed-b616-4cff-bfab-286677b69d79',
+      folderId: null,
+      name: 'Prices',
+      createdBy: 'Brian Hughes',
+      createdAt: 'April 07, 2020',
+      modifiedAt: 'April 07, 2020',
+      size: '2.6 MB',
+      type: 'DOC',
+      contents: null,
+      description: null,
+    },
+    {
+      id: 'bd2817c7-6751-40dc-b252-b6b5634c0689',
+      folderId: null,
+      name: 'Shopping list',
+      createdBy: 'Brian Hughes',
+      createdAt: 'March 26, 2021',
+      modifiedAt: 'March 26, 2021',
+      size: '2.1 MB',
+      type: 'DOC',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '14fb47c9-6eeb-4070-919c-07c8133285d1',
+      folderId: null,
+      name: 'Summer budget',
+      createdBy: 'Brian Hughes',
+      createdAt: 'June 02, 2020',
+      modifiedAt: 'June 02, 2020',
+      size: '943 KB',
+      type: 'XLS',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '894e8514-03d3-4f5e-bb28-f6c092501fae',
+      folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+      name: 'A personal file',
+      createdBy: 'Brian Hughes',
+      createdAt: 'June 02, 2020',
+      modifiedAt: 'June 02, 2020',
+      size: '943 KB',
+      type: 'XLS',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '74010810-16cf-441d-a1aa-c9fb620fceea',
+      folderId: 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
+      name: 'A personal folder',
+      createdBy: 'Brian Hughes',
+      createdAt: 'November 01, 2021',
+      modifiedAt: 'November 01, 2021',
+      size: '3015 MB',
+      type: 'folder',
+      contents: '907 files',
+      description: 'Personal photos; selfies, family, vacation and etc.',
+    },
+    {
+      id: 'a8c73e5a-8114-436d-ab54-d900b50b3762',
+      folderId: '74010810-16cf-441d-a1aa-c9fb620fceea',
+      name: 'A personal file within the personal folder',
+      createdBy: 'Brian Hughes',
+      createdAt: 'June 02, 2020',
+      modifiedAt: 'June 02, 2020',
+      size: '943 KB',
+      type: 'XLS',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '12d851a8-4f60-473e-8a59-abe4b422ea99',
+      folderId: '6da8747f-b474-4c9a-9eba-5ef212285500',
+      name: 'Photos file',
+      createdBy: 'Brian Hughes',
+      createdAt: 'June 02, 2020',
+      modifiedAt: 'June 02, 2020',
+      size: '943 KB',
+      type: 'XLS',
+      contents: null,
+      description: null,
+    },
+    {
+      id: '2836766d-27e1-4f40-a31a-5a8419105e7e',
+      folderId: 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
+      name: 'Work file',
+      createdBy: 'Brian Hughes',
+      createdAt: 'June 02, 2020',
+      modifiedAt: 'June 02, 2020',
+      size: '943 KB',
+      type: 'XLS',
+      contents: null,
+      description: null,
+    },
+  ];
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/apps/file-manager/data/model.ts

@@ -0,0 +1,12 @@
+export type Item = {
+  id: string;
+  folderId: string | null;
+  name: string;
+  createdBy: string;
+  createdAt: string;
+  modifiedAt: string;
+  size: string;
+  type: string;
+  contents: string | null;
+  description: string | null;
+};

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/apps/file-manager/features/file-manager.ts

@@ -0,0 +1,131 @@
+import { Component, computed, inject, input } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { RouterLink } from '@angular/router';
+import { FileManagerService } from '@/app/domains/admin/modules/apps/file-manager/data/file-manager';
+import { Item } from '@/app/domains/admin/modules/apps/file-manager/data/model';
+import { FileManagerFileList } from '@/app/domains/admin/modules/apps/file-manager/ui/list';
+
+@Component({
+  selector: 'file-manager',
+  imports: [MatButton, MatIcon, FileManagerFileList, RouterLink],
+  template: `
+    <div
+      class="@container mx-auto flex w-full max-w-7xl flex-auto flex-col gap-4 p-6 sm:gap-6 lg:p-10 lg:pt-8"
+    >
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-x-3">
+        <div class="flex flex-col">
+          <!-- Breadcrumb -->
+          @let trail = this.trail();
+          @if (trail.length) {
+            <div class="flex flex-wrap items-center gap-2">
+              <a
+                class="flex items-center gap-x-2 text-primary-600"
+                routerLink="/admin/file-manager"
+              >
+                <span class="font-medium">My files</span>
+              </a>
+              <div class="">/</div>
+              @for (
+                breadcrumb of trail;
+                track breadcrumb.id;
+                let last = $last
+              ) {
+                @if (!last) {
+                  <a
+                    class="font-medium text-primary-600"
+                    [routerLink]="[
+                      '/admin/file-manager/folders',
+                      breadcrumb.id,
+                    ]"
+                  >
+                    {{ breadcrumb.name }}
+                  </a>
+                  <div class="">/</div>
+                } @else {
+                  <div class="font-medium">
+                    {{ breadcrumb.name }}
+                  </div>
+                }
+              }
+            </div>
+          } @else {
+            <div class="font-medium">My files</div>
+          }
+
+          <div class="mt-4 text-xl font-semibold tracking-tighter sm:text-2xl">
+            File Manager
+          </div>
+          <div class="mt-0.5 text-neutral-500">
+            Manage your files and documents efficiently.
+          </div>
+        </div>
+
+        <!-- Spacer -->
+        <div class="flex-auto"></div>
+
+        <button matButton="outlined">
+          <mat-icon svgIcon="upload" />
+          Upload
+        </button>
+      </div>
+
+      <!-- Content -->
+      <div class="">
+        <file-manager-file-list [items]="items()" />
+      </div>
+    </div>
+  `,
+})
+export default class FileManager {
+  // Dependencies
+  private fileManagerService = inject(FileManagerService);
+
+  // Input / Output
+  readonly folderId = input<string>();
+
+  // State
+  protected data = this.fileManagerService.data;
+  protected items = computed(() => {
+    const folderId = this.folderId();
+    if (folderId) {
+      return this.data.filter((item) => item.folderId === folderId)!;
+    }
+
+    return this.data.filter((item) => item.folderId === null)!;
+  });
+
+  // Build the breadcrumb trail by walking the folder hierarchy.
+  // This implementation is intentionally simple and meant for demonstration
+  // only.
+  //
+  // In real-world applications, breadcrumbs are typically derived directly from
+  // object keys that encode the full path (e.g. /home/user/documents/my-document.txt),
+  // or from a separate metadata store that models the folder structure explicitly.
+  protected trail = computed(() => {
+    const folderId = this.folderId();
+    const data = this.data;
+    const trail: Item[] = [];
+
+    // Prepare the current folder
+    let currentFolder: Item | null = null;
+
+    // Get the current folder and add it as the first entry
+    if (folderId) {
+      currentFolder = data.find((item) => item.id === folderId)!;
+      trail.push(currentFolder);
+    }
+
+    // Start traversing and storing the folders as a path array
+    // until we hit null on the folder id
+    while (currentFolder?.folderId) {
+      currentFolder = data.find((item) => item.id === currentFolder?.folderId)!;
+      if (currentFolder) {
+        trail.unshift(currentFolder);
+      }
+    }
+
+    return trail;
+  });
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/apps/file-manager/routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./features/file-manager'),
+  },
+  {
+    path: 'folders/:folderId',
+    loadComponent: () => import('./features/file-manager'),
+  },
+];
+
+export default routes;

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/apps/file-manager/ui/list.ts

@@ -0,0 +1,164 @@
+import { Component, computed, input } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { RouterLink } from '@angular/router';
+import { Item } from '@/app/domains/admin/modules/apps/file-manager/data/model';
+
+@Component({
+  selector: 'file-manager-file-list',
+  imports: [
+    RouterLink,
+    MatIcon,
+    MatIconButton,
+    MatMenu,
+    MatMenuItem,
+    MatDivider,
+    MatMenuTrigger,
+  ],
+  template: `
+    <div class="flex flex-col">
+      <!-- Header -->
+      <div class="grid grid-cols-5 gap-x-2 px-3 py-2 md:grid-cols-10">
+        <div class="col-span-3 font-medium md:col-span-7">Name</div>
+        <div class="hidden font-medium md:block">Owner</div>
+        <div class="text-right font-medium">File size</div>
+        <div class="text-right font-medium">Actions</div>
+      </div>
+
+      <mat-divider />
+
+      <!-- Folders -->
+      @for (folder of folders(); track folder.id) {
+        <div
+          class="relative isolate grid grid-cols-5 items-center gap-x-2 border-b px-3 py-1 hover:bg-neutral-100 md:grid-cols-10"
+        >
+          <!-- Link -->
+          <a
+            class="absolute inset-0 z-0"
+            [routerLink]="['/admin/file-manager/folders', folder.id]"
+            ><span></span
+          ></a>
+
+          <!-- Name -->
+          <div class="col-span-3 flex items-center gap-x-2 md:col-span-7">
+            <mat-icon svgIcon="folder" />
+            <div class="truncate">{{ folder.name }}</div>
+          </div>
+
+          <!-- Owner -->
+          <div class="hidden whitespace-nowrap md:block">
+            {{ folder.createdBy }}
+          </div>
+
+          <!-- File size -->
+          <div class="text-right whitespace-nowrap">{{ folder.size }}</div>
+
+          <!-- Actions -->
+          <div class="relative z-10 text-right">
+            <button
+              matIconButton
+              [matMenuTriggerFor]="folderMenu"
+            >
+              <mat-icon svgIcon="ellipsis" />
+            </button>
+            <mat-menu #folderMenu>
+              <button mat-menu-item>
+                <mat-icon svgIcon="download" />
+                Download
+              </button>
+              <button mat-menu-item>
+                <mat-icon svgIcon="pencil" />
+                Rename
+              </button>
+              <mat-divider />
+              <button mat-menu-item>
+                <mat-icon svgIcon="user-plus" />
+                Share
+              </button>
+              <button mat-menu-item>
+                <mat-icon svgIcon="info" />
+                Folder information
+              </button>
+              <mat-divider />
+              <button mat-menu-item>
+                <mat-icon svgIcon="trash" />
+                Delete
+              </button>
+            </mat-menu>
+          </div>
+        </div>
+      }
+
+      @for (file of files(); track file.id) {
+        <div
+          class="relative isolate grid grid-cols-5 items-center gap-x-2 border-b px-3 py-1 hover:bg-neutral-100 md:grid-cols-10"
+        >
+          <!-- Name -->
+          <div class="col-span-3 flex items-center gap-x-2 md:col-span-7">
+            <mat-icon svgIcon="file" />
+            <div class="truncate">{{ file.name }}</div>
+          </div>
+
+          <!-- Owner -->
+          <div class="hidden whitespace-nowrap md:block">
+            {{ file.createdBy }}
+          </div>
+
+          <!-- File size -->
+          <div class="text-right whitespace-nowrap">{{ file.size }}</div>
+
+          <!-- Actions -->
+          <div class="relative z-10 text-right">
+            <button
+              matIconButton
+              [matMenuTriggerFor]="fileMenu"
+            >
+              <mat-icon svgIcon="ellipsis" />
+            </button>
+            <mat-menu #fileMenu>
+              <button mat-menu-item>
+                <mat-icon svgIcon="download" />
+                Download
+              </button>
+              <button mat-menu-item>
+                <mat-icon svgIcon="pencil" />
+                Rename
+              </button>
+              <mat-divider />
+              <button mat-menu-item>
+                <mat-icon svgIcon="user-plus" />
+                Share
+              </button>
+              <button mat-menu-item>
+                <mat-icon svgIcon="info" />
+                File information
+              </button>
+              <mat-divider />
+              <button mat-menu-item>
+                <mat-icon svgIcon="trash" />
+                Delete
+              </button>
+            </mat-menu>
+          </div>
+        </div>
+      }
+    </div>
+  `,
+})
+export class FileManagerFileList {
+  // Input / Output
+  readonly items = input.required<Item[]>();
+
+  // State
+  protected folders = computed(() => {
+    const items = this.items();
+    return items.filter((item) => item.type === 'folder');
+  });
+
+  protected files = computed(() => {
+    const items = this.items();
+    return items.filter((item) => item.type !== 'folder');
+  });
+}