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

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/data/navigation.ts

@@ -0,0 +1,176 @@
+import { IsActiveMatchOptions } from '@angular/router';
+
+export type NavigationItem = {
+  id: string;
+  label: string;
+  description?: string;
+  route?: string;
+  icon?: string;
+  badge?: string;
+  children?: NavigationItem[];
+  disabled?: boolean;
+  expanded?: boolean;
+  activeOptions?: { exact: boolean } | IsActiveMatchOptions;
+};
+
+export const NAVIGATION: NavigationItem[] = [
+  {
+    id: 'dashboards',
+    label: 'Dashboards',
+    description: 'Overview of key metrics',
+    children: [
+      {
+        id: 'dashboards/project',
+        label: 'Project',
+        icon: 'folder-kanban',
+        route: '/admin/dashboards/project',
+      },
+      {
+        id: 'dashboards/analytics',
+        label: 'Analytics',
+        icon: 'chart-area',
+        route: '/admin/dashboards/analytics',
+      },
+      {
+        id: 'dashboards/finance',
+        label: 'Finance',
+        icon: 'chart-candlestick',
+        route: '/admin/dashboards/finance',
+      },
+    ],
+  },
+  {
+    id: 'general',
+    label: 'General',
+    description: 'Commonly used apps',
+    children: [
+      {
+        id: 'general/academy',
+        label: 'Academy',
+        icon: 'graduation-cap',
+        route: '/admin/academy',
+        activeOptions: { exact: false },
+      },
+      {
+        id: 'general/contacts',
+        label: 'Contacts',
+        icon: 'contact-round',
+        route: '/admin/contacts',
+      },
+      {
+        id: 'general/file-manager',
+        label: 'File Manager',
+        icon: 'folder-tree',
+        route: '/admin/file-manager',
+      },
+      {
+        id: 'general/help-center',
+        label: 'Help Center',
+        icon: 'life-buoy',
+        route: '/admin/help-center',
+      },
+      {
+        id: 'general/notes',
+        label: 'Notes',
+        icon: 'notebook-pen',
+        route: '/admin/notes',
+      },
+      {
+        id: 'general/tasks',
+        label: 'Tasks',
+        icon: 'list-todo',
+        badge: '10',
+        route: '/admin/tasks',
+        activeOptions: { exact: false },
+      },
+    ],
+  },
+  {
+    id: 'extras',
+    label: 'Extras',
+    description: 'Additional pages and features',
+    children: [
+      {
+        id: 'extras/settings',
+        label: 'Settings',
+        icon: 'settings',
+        route: '/admin/settings',
+        activeOptions: { exact: false },
+      },
+      {
+        id: 'extras/notifications',
+        label: 'Notifications',
+        icon: 'bell',
+        route: '/admin/notifications',
+        activeOptions: { exact: false },
+      },
+      {
+        id: 'extras/error',
+        label: 'Error page',
+        icon: 'circle-x',
+        route: 'error/404',
+      },
+      {
+        id: 'extras/sign-in',
+        label: 'Sign in',
+        icon: 'log-in',
+        route: '/auth/sign-in',
+      },
+      {
+        id: 'extras/sign-up',
+        label: 'Sign up',
+        icon: 'log-out',
+        route: '/auth/sign-up',
+      },
+      {
+        id: 'extras/forgot-password',
+        label: 'Forgot password',
+        icon: 'rectangle-ellipsis',
+        route: '/auth/forgot-password',
+      },
+      {
+        id: 'extras/reset-password',
+        label: 'Reset password',
+        icon: 'rotate-ccw-key',
+        route: '/auth/reset-password',
+      },
+      {
+        id: 'extras/coming-soon',
+        label: 'Coming soon',
+        icon: 'traffic-cone',
+        route: '/coming-soon',
+      },
+    ],
+  },
+  {
+    id: 'documentation',
+    label: 'Documentation',
+    description: 'Resources for developers',
+    children: [
+      {
+        id: 'documentation/changelog',
+        label: 'Changelog',
+        icon: 'logs',
+        route: 'documentation/changelog',
+      },
+      {
+        id: 'documentation/getting-started/installation',
+        label: 'Installation',
+        icon: 'download',
+        route: 'documentation/getting-started/installation',
+      },
+      {
+        id: 'documentation/getting-started/development',
+        label: 'Development',
+        icon: 'code',
+        route: 'documentation/getting-started/development',
+      },
+      {
+        id: 'documentation/getting-started/building',
+        label: 'Building',
+        icon: 'blocks',
+        route: 'documentation/getting-started/building',
+      },
+    ],
+  },
+];

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/layout.ts

@@ -0,0 +1,77 @@
+import { Component, computed, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import {
+  MatSidenav,
+  MatSidenavContainer,
+  MatSidenavContent,
+} from '@angular/material/sidenav';
+import { RouterOutlet } from '@angular/router';
+import { Media } from '@/app/core/media';
+
+import { Notifications } from '@/app/domains/admin/layout/ui/notifications';
+import { SchemeSwitcher } from '@/app/domains/admin/layout/ui/scheme-switcher';
+import { AdminSidebar } from '@/app/domains/admin/layout/ui/sidebar';
+
+@Component({
+  selector: 'admin-layout',
+  imports: [
+    MatIconModule,
+    MatButtonModule,
+    RouterOutlet,
+    MatSidenavContainer,
+    MatSidenav,
+    MatSidenavContent,
+    AdminSidebar,
+    SchemeSwitcher,
+    Notifications,
+
+  ],
+  template: `
+    <mat-sidenav-container>
+      <mat-sidenav
+        class="w-70 border-r border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900"
+        [mode]="isMobile() ? 'over' : 'side'"
+        [opened]="!isMobile()"
+        [disableClose]="!isMobile()"
+        fixedInViewport
+        #sidenav="matSidenav"
+      >
+        <admin-sidebar />
+      </mat-sidenav>
+
+      <mat-sidenav-content>
+        <!-- Toolbar -->
+        <div class="flex items-center border-b px-4 py-2.5">
+          <button
+            matIconButton
+            (click)="sidenav.toggle()"
+          >
+            <mat-icon svgIcon="panel-left" />
+          </button>
+
+          <!-- Spacer -->
+          <div class="flex-auto"></div>
+
+          <div class="flex items-center gap-x-2">
+
+            <scheme-switcher />
+            <notifications />
+          </div>
+        </div>
+
+        <!-- Content -->
+        <router-outlet />
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `,
+})
+export class AdminLayout {
+  // Dependencies
+  private media = inject(Media);
+
+  // State
+  protected isMobile = computed(() =>
+    this.media.match(`(max-width: 1023px)`)()
+  );
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/ui/language-switcher.ts

@@ -0,0 +1,91 @@
+import { Component, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatButton, MatIconButton } from '@angular/material/button';
+import { MatPseudoCheckbox } from '@angular/material/core';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { LangDefinition, TranslocoService } from '@jsverse/transloco';
+
+@Component({
+  selector: 'language-switcher',
+  imports: [
+    MatIconButton,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger,
+    MatPseudoCheckbox,
+  ],
+  template: `
+    <span class="fi fi-gr"></span>
+    <span class="fi fi-gr"></span>
+
+    <button
+      matIconButton
+      [matMenuTriggerFor]="langMenu"
+    >
+      <img
+        [src]="'/images/flags/' + getLangFlag(this.activeLang) + '.svg'"
+        alt="{{ this.activeLang }}"
+        width="20"
+        height="15"
+      />
+    </button>
+    <mat-menu #langMenu="matMenu">
+      @for (lang of availableLangs; track lang.id) {
+        <button
+          mat-menu-item
+          (click)="setActiveLang(lang.id)"
+        >
+          <span class="flex items-center gap-x-3">
+            <span class="flex items-center gap-x-2">
+              <img
+                [src]="'/images/flags/' + getLangFlag(lang.id) + '.svg'"
+                alt="{{ this.activeLang }}"
+                width="20"
+                height="15"
+              />
+              <span>{{ lang.label }}</span>
+            </span>
+            <mat-pseudo-checkbox
+              appearance="minimal"
+              [state]="lang.id === activeLang ? 'checked' : 'unchecked'"
+            />
+          </span>
+        </button>
+      }
+    </mat-menu>
+  `,
+})
+export class LanguageSwitcher {
+  // Dependencies
+  private readonly transloco = inject(TranslocoService);
+
+  // State
+  protected activeLang = this.transloco.getActiveLang();
+  protected readonly availableLangs =
+    this.transloco.getAvailableLangs() as LangDefinition[];
+
+  constructor() {
+    this.transloco.langChanges$.pipe(takeUntilDestroyed()).subscribe((lang) => {
+      this.activeLang = lang;
+    });
+  }
+
+  setActiveLang(lang: string) {
+    this.transloco.setActiveLang(lang);
+  }
+
+  getLangFlag(lang: string) {
+    switch (lang) {
+      case 'en': {
+        return 'US';
+      }
+      case 'es': {
+        return 'ES';
+      }
+      default: {
+        return 'US';
+      }
+    }
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/layout/ui/navigation.ts

@@ -0,0 +1,238 @@
+import { Tree, TreeItem, TreeItemGroup } from '@angular/aria/tree';
+import { CdkMonitorFocus } from '@angular/cdk/a11y';
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, effect, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatIcon } from '@angular/material/icon';
+import {
+  isActive,
+  IsActiveMatchOptions,
+  NavigationEnd,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+} from '@angular/router';
+import { filter, take } from 'rxjs';
+import {
+  NAVIGATION,
+  NavigationItem,
+} from '@/app/domains/admin/layout/data/navigation';
+
+@Component({
+  selector: 'navigation',
+  imports: [
+    MatIcon,
+    NgTemplateOutlet,
+    RouterLinkActive,
+    Tree,
+    TreeItem,
+    TreeItemGroup,
+    RouterLink,
+    CdkMonitorFocus,
+  ],
+  template: `
+    <div class="flex flex-col gap-y-4">
+      @for (section of navigation(); track section.id) {
+        <div class="flex flex-col px-4">
+          <!-- Section title -->
+          <div class="px-2.5 py-1.5 text-sm font-semibold text-blue-400">
+            {{ section.label }}
+
+            <!-- Section description -->
+            @if (section.description) {
+              <div class="text-xs font-medium text-neutral-400">
+                {{ section.description }}
+              </div>
+            }
+          </div>
+
+          <!-- Section content -->
+          <ul
+            ngTree
+            class="mt-1 flex flex-col gap-y-1"
+            [nav]="true"
+            #tree="ngTree"
+          >
+            <ng-template
+              [ngTemplateOutlet]="treeNodes"
+              [ngTemplateOutletContext]="{
+                nodes: section.children,
+                parent: tree,
+              }"
+            />
+          </ul>
+
+          <!-- Menu item -->
+          <ng-template
+            let-nodes="nodes"
+            let-parent="parent"
+            #treeNodes
+          >
+            @for (node of nodes; track node.id) {
+              <a
+                cdkMonitorElementFocus
+                ngTreeItem
+                routerLinkActive="bg-neutral-700/10 dark:bg-neutral-300/10"
+                class="navigation-item flex cursor-pointer items-center gap-x-2 rounded-lg px-2.5 py-2 select-none hover:bg-neutral-700/10 dark:hover:bg-neutral-300/10"
+                [parent]="parent"
+                [value]="node.id"
+                [label]="node.label"
+                [disabled]="node.disabled"
+                [selectable]="!node.children"
+                [(expanded)]="node.expanded"
+                [routerLink]="node.route"
+                [routerLinkActiveOptions]="
+                  node.activeOptions ?? { exact: true }
+                "
+                (click)="$event.preventDefault()"
+                #rla="routerLinkActive"
+                #treeItem="ngTreeItem"
+              >
+                <!-- Icon -->
+                @if (node.icon) {
+                  <mat-icon
+                    class="pointer-events-none size-4"
+                    [svgIcon]="node.icon"
+                  />
+                }
+
+                <!-- Label -->
+                <div class="flex flex-auto flex-col font-medium">
+                  {{ node.label }}
+
+                  <!-- Description -->
+                  @if (node.description) {
+                    <div class="text-xs">
+                      {{ node.description }}
+                    </div>
+                  }
+                </div>
+
+                <!-- Badge -->
+                @if (node.badge) {
+                  <div
+                    class="rounded bg-pink-400 px-1.5 py-0.5 text-xs font-semibold dark:bg-pink-700"
+                  >
+                    {{ node.badge }}
+                  </div>
+                }
+
+                <!-- Expand icon -->
+                @if (node.children && node.children.length > 0) {
+                  <mat-icon
+                    svgIcon="chevron-right"
+                    class="pointer-events-none size-4 transition-[rotate]"
+                    [class.rotate-90]="node.expanded"
+                  />
+                }
+              </a>
+
+              <!-- Children -->
+              @if (node.children && node.children.length > 0) {
+                <ul
+                  class="flex flex-col gap-y-1 [&_ul>.navigation-item]:pl-14.5 [&>.navigation-item]:pl-8.5"
+                  [class.hidden]="!node.expanded"
+                  [class.mt-1]="node.expanded"
+                  role="group"
+                >
+                  <ng-template
+                    ngTreeItemGroup
+                    [ownedBy]="treeItem"
+                    #group="ngTreeItemGroup"
+                  >
+                    <ng-template
+                      [ngTemplateOutlet]="treeNodes"
+                      [ngTemplateOutletContext]="{
+                        nodes: node.children,
+                        parent: group,
+                      }"
+                    />
+                  </ng-template>
+                </ul>
+              }
+            }
+          </ng-template>
+        </div>
+      }
+    </div>
+  `,
+})
+export class Navigation {
+  // Dependencies
+  private router = inject(Router);
+
+  // State
+  protected navigation = signal<NavigationItem[]>(NAVIGATION);
+  protected navigationEnd = toSignal(
+    this.router.events.pipe(
+      filter((event) => event instanceof NavigationEnd),
+      take(1)
+    )
+  );
+
+  constructor() {
+    // Expand active route on initial load
+    effect(() => {
+      const navigationEnd = this.navigationEnd();
+      if (!navigationEnd) {
+        return;
+      }
+
+      this.navigation.set(this.expandActiveRoute(this.navigation()));
+    });
+  }
+
+  /**
+   * Expand all parent routes of the active route.
+   * @param items
+   */
+  expandActiveRoute(items: NavigationItem[]): NavigationItem[] {
+    for (const item of items) {
+      if (item.children?.length) {
+        item.children = this.expandActiveRoute(item.children);
+
+        if (item.children.some((child) => child.expanded)) {
+          item.expanded = true;
+        }
+      }
+
+      if (
+        item.route &&
+        isActive(
+          item.route,
+          this.router,
+          this.isActiveOption(item.activeOptions ?? { exact: true })
+        )()
+      ) {
+        item.expanded = true;
+      }
+    }
+    return items;
+  }
+
+  /**
+   * Convert simple exact option to full IsActiveMatchOptions.
+   * @param options
+   */
+  isActiveOption(
+    options: { exact: boolean } | IsActiveMatchOptions
+  ): IsActiveMatchOptions {
+    if ('exact' in options) {
+      return options.exact
+        ? {
+            paths: 'exact',
+            queryParams: 'exact',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+          }
+        : {
+            paths: 'subset',
+            queryParams: 'subset',
+            fragment: 'ignored',
+            matrixParams: 'ignored',
+          };
+    }
+
+    return options;
+  }
+}