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

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

@@ -0,0 +1,27 @@
+export type Category = {
+  id: string;
+  title: string;
+  slug: string;
+};
+
+export type Course = {
+  id: string;
+  title: string;
+  slug: string;
+  description: string;
+  category: string;
+  duration: number;
+  steps: {
+    order: number;
+    title: string;
+    subtitle: string;
+    content: string;
+  }[];
+  totalSteps: number;
+  updatedAt: string;
+  featured: boolean;
+  progress: {
+    currentStep: number;
+    completed: number;
+  };
+};

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

@@ -0,0 +1,318 @@
+import { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
+import { TitleCasePipe } from '@angular/common';
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterLink } from '@angular/router';
+import { Media } from '@/app/core/media';
+import { AcademyService } from '@/app/domains/admin/modules/apps/academy/data/academy';
+
+@Component({
+  selector: 'academy-course',
+  imports: [
+    MatSidenavModule,
+    RouterLink,
+    MatIconModule,
+    MatButtonModule,
+    MatProgressBarModule,
+    MatTabsModule,
+    TitleCasePipe,
+    Tabs,
+    TabList,
+    TabPanel,
+    Tab,
+    TabContent,
+  ],
+  host: {
+    class: 'lg:h-[calc(1dvh-57px)]',
+  },
+  template: `
+    @let course = this.course();
+    @let currentStep = this.currentStep();
+
+    <mat-sidenav-container class="[&_.mat-drawer-backdrop]:fixed">
+      <!-- Drawer -->
+      <mat-sidenav
+        class="w-90 bg-white dark:bg-neutral-900"
+        [autoFocus]="false"
+        [mode]="isMobile() ? 'over' : 'side'"
+        [opened]="!isMobile()"
+        [fixedInViewport]="isMobile()"
+        #drawer
+      >
+        <div class="flex flex-col">
+          <div class="flex flex-col items-start border-b p-6">
+            <!-- Back to courses -->
+            <a
+              class="-ml-2"
+              matButton
+              [routerLink]="['..']"
+            >
+              <mat-icon
+                class="text-current"
+                svgIcon="arrow-left"
+              />
+              Back to courses
+            </a>
+
+            <!-- Category -->
+            <div
+              class="mt-4 rounded-full bg-neutral-200 px-3 py-0.5 text-sm font-semibold dark:bg-neutral-500 dark:text-black"
+            >
+              {{ course.category | titlecase }}
+            </div>
+
+            <!-- Title & description -->
+            <div class="mt-4 text-2xl font-semibold">
+              {{ course.title }}
+            </div>
+            <div class="mt-1 text-neutral-500">{{ course.description }}</div>
+          </div>
+
+          <!-- Steps -->
+          <div class="px-6 py-2">
+            <ol>
+              @for (step of course.steps; track step.order; let last = $last) {
+                <li
+                  class="group relative py-6 select-none"
+                  [class.current-step]="step.order === currentStep"
+                >
+                  @if (!last) {
+                    <div
+                      class="absolute top-6 left-4 -ml-px h-full w-0.5"
+                      [class.bg-primary-600]="step.order < currentStep"
+                      [class.dark:bg-primary-500]="step.order < currentStep"
+                      [class.bg-neutral-300]="step.order >= currentStep"
+                      [class.dark:bg-neutral-600]="step.order >= currentStep"
+                    ></div>
+                  }
+                  <button
+                    class="relative flex cursor-pointer items-start text-left"
+                    (click)="goToStep(step.order)"
+                  >
+                    <div
+                      class="flex size-8 shrink-0 items-center justify-center rounded-full ring-2 ring-inset"
+                      [class.text-white]="step.order < currentStep"
+                      [class.ring-transparent]="step.order < currentStep"
+                      [class.bg-primary-600]="step.order < currentStep"
+                      [class.dark:bg-primary-500]="step.order < currentStep"
+                      [class.ring-primary-600]="step.order === currentStep"
+                      [class.bg-white]="step.order >= currentStep"
+                      [class.dark:bg-neutral-900]="step.order >= currentStep"
+                      [class.ring-neutral-300]="step.order >= currentStep"
+                      [class.dark:ring-neutral-600]="step.order >= currentStep"
+                    >
+                      <!-- Check icon, show if the step is completed -->
+                      @if (step.order < currentStep) {
+                        <mat-icon
+                          class="text-current"
+                          svgIcon="check"
+                        />
+                      }
+                      <!-- Step order, show if the step is the current step -->
+                      @if (step.order === currentStep) {
+                        <div
+                          class="font-semibold text-primary-600 dark:text-white"
+                        >
+                          {{ step.order + 1 }}
+                        </div>
+                      }
+                      <!-- Step order, show if the step is not completed -->
+                      @if (step.order > currentStep) {
+                        <div
+                          class="font-semibold text-neutral-500 group-hover:text-neutral-500"
+                        >
+                          {{ step.order + 1 }}
+                        </div>
+                      }
+                    </div>
+                    <div class="ml-4 flex flex-col gap-y-1">
+                      <div class="font-medium">{{ step.title }}</div>
+                      <div class="text-sm text-neutral-500">
+                        {{ step.subtitle }}
+                      </div>
+                    </div>
+                  </button>
+                </li>
+              }
+            </ol>
+          </div>
+        </div>
+      </mat-sidenav>
+
+      <!-- Drawer content -->
+      <mat-sidenav-content class="flex flex-col border-l">
+        <!-- Header -->
+        <div
+          class="flex flex-0 items-center border-b py-2 pr-6 pl-4 sm:py-4 md:pr-8 md:pl-6 lg:hidden lg:border-b-0 dark:bg-transparent"
+        >
+          <!-- Title & Actions -->
+          <a
+            mat-icon-button
+            [routerLink]="['..']"
+          >
+            <mat-icon svgIcon="move-left" />
+          </a>
+          <h2 class="ml-2.5 truncate font-medium tracking-tight sm:text-xl">
+            {{ course.title }}
+          </h2>
+        </div>
+        <mat-progress-bar
+          class="hidden h-0.5 w-full flex-0 lg:block"
+          [value]="(100 * (currentStep + 1)) / course.totalSteps"
+        />
+
+        <!-- Steps -->
+        <div
+          ngTabs
+          class="flex flex-col items-center"
+          #tabs
+        >
+          <div
+            ngTabList
+            [selectedTab]="currentStep.toString()"
+            class="hidden size-0 opacity-0"
+          >
+            @for (step of course.steps; track step.order) {
+              <div
+                ngTab
+                [value]="step.order.toString()"
+              ></div>
+            }
+          </div>
+
+          @for (step of course.steps; track step.order) {
+            <div
+              ngTabPanel
+              [value]="step.order.toString()"
+            >
+              <ng-template ngTabContent>
+                <div
+                  class="mx-auto prose max-w-3xl px-4 pb-20 sm:px-6 lg:pb-0"
+                  [innerHTML]="step.content"
+                ></div>
+              </ng-template>
+            </div>
+          }
+        </div>
+
+        <!-- Navigation - Desktop -->
+        <div
+          class="sticky bottom-0 z-10 hidden border-t bg-white/60 p-4 backdrop-blur-sm lg:flex dark:bg-black/10"
+        >
+          <div
+            class="mx-auto flex items-center justify-center gap-x-3 rounded-xl bg-primary-600 p-2 shadow-lg"
+          >
+            <button
+              matButton="filled"
+              (click)="goToPreviousStep()"
+            >
+              <mat-icon svgIcon="move-left" />
+              Prev
+            </button>
+            <div
+              class="flex items-center justify-center gap-x-0.5 font-medium text-primary-50"
+            >
+              <span>{{ currentStep + 1 }}</span>
+              <span class="text-primary-300">/</span>
+              <span>{{ course.totalSteps }}</span>
+            </div>
+            <button
+              matButton="filled"
+              (click)="goToNextStep()"
+            >
+              <mat-icon
+                iconPositionEnd
+                svgIcon="move-right"
+              />
+              Next
+            </button>
+          </div>
+        </div>
+
+        <!-- Progress & Navigation - Mobile -->
+        <div
+          class="fixed bottom-0 z-10 flex w-full items-center border-t bg-white p-4 lg:hidden dark:bg-neutral-900"
+        >
+          <button
+            mat-icon-button
+            (click)="drawer.toggle()"
+          >
+            <mat-icon svgIcon="menu" />
+          </button>
+          <div
+            class="ml-1 flex items-center justify-center leading-5 font-medium lg:ml-2"
+          >
+            <span>{{ currentStep + 1 }}</span>
+            <span class="mx-0.5 text-neutral-500">/</span>
+            <span>{{ course.totalSteps }}</span>
+          </div>
+          <mat-progress-bar
+            class="ml-6 flex-auto rounded-full"
+            [value]="(100 * (currentStep + 1)) / course.totalSteps"
+          ></mat-progress-bar>
+          <button
+            class="ml-4"
+            mat-icon-button
+            (click)="goToPreviousStep()"
+          >
+            <mat-icon svgIcon="arrow-left" />
+          </button>
+          <button
+            class="ml-0.5"
+            mat-icon-button
+            (click)="goToNextStep()"
+          >
+            <mat-icon svgIcon="arrow-right" />
+          </button>
+        </div>
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `,
+})
+export default class AcademyCourse {
+  // Dependencies
+  private academyService = inject(AcademyService);
+  private media = inject(Media);
+
+  // Inputs / Outputs
+  readonly courseId = input.required({ alias: 'id' });
+
+  // State
+  protected data = this.academyService.data;
+  protected course = computed(
+    () => this.data.courses.find((course) => course.id === this.courseId())!
+  );
+  protected currentStep = signal(0);
+  protected isMobile = computed(() =>
+    this.media.match(`(max-width: 1023px)`)()
+  );
+
+  goToStep(step: number): void {
+    // Go to the step
+    this.currentStep.set(step);
+  }
+
+  goToPreviousStep(): void {
+    // Return if we already on the first step
+    if (this.currentStep() === 0) {
+      return;
+    }
+
+    // Go to previous
+    this.currentStep.update((value) => value - 1);
+  }
+
+  goToNextStep(): void {
+    // Return if we already on the last step
+    if (this.currentStep() === this.course().totalSteps - 1) {
+      return;
+    }
+
+    // Go to next step
+    this.currentStep.update((value) => value + 1);
+  }
+}

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

@@ -0,0 +1,228 @@
+import { PercentPipe, TitleCasePipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCard } from '@angular/material/card';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDivider } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterLink } from '@angular/router';
+import { AcademyService } from '@/app/domains/admin/modules/apps/academy/data/academy';
+
+@Component({
+  selector: 'academy-courses',
+  imports: [
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule,
+    MatIconModule,
+    MatInputModule,
+    MatSlideToggleModule,
+    MatTooltipModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    RouterLink,
+    PercentPipe,
+    TitleCasePipe,
+    MatCard,
+    MatDivider,
+  ],
+  template: `
+    <!-- Header -->
+    <div class="overflow-hidden bg-linear-to-r from-blue-800 to-blue-950">
+      <div
+        class="@container relative mx-auto flex w-full max-w-7xl flex-auto flex-col gap-y-1 px-6 py-10 lg:px-10 lg:py-14"
+      >
+        <mat-icon
+          class="absolute top-1/2 right-12 z-0 size-40 -translate-y-1/2 text-blue-700/60 *:[svg]:stroke-1"
+          svgIcon="graduation-cap"
+        />
+        <div
+          class="relative z-10 text-xl font-semibold tracking-tighter text-white sm:text-3xl"
+        >
+          What do you want to learn today?
+        </div>
+        <div class="relative z-10 text-md font-medium text-blue-400">
+          Our courses will step you through the process of a building small
+          applications, or adding new features to existing applications.
+        </div>
+      </div>
+    </div>
+
+    <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"
+    >
+      <!-- Courses -->
+      <div class="flex flex-auto flex-col">
+        <!-- Filters -->
+        <div
+          class="flex w-full max-w-xs flex-col items-start justify-between sm:max-w-none sm:flex-row sm:items-center"
+        >
+          <mat-form-field class="w-full sm:w-36">
+            <mat-select [value]="'all'">
+              <mat-option [value]="'all'">All</mat-option>
+              @for (category of data.categories; track category.id) {
+                <mat-option [value]="category.slug">
+                  {{ category.title }}
+                </mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+          <mat-form-field class="mt-4 w-full sm:mt-0 sm:ml-4 sm:w-72">
+            <mat-icon
+              matPrefix
+              svgIcon="search"
+            />
+            <input
+              placeholder="Search by title or description"
+              matInput
+            />
+          </mat-form-field>
+          <mat-slide-toggle
+            class="mt-6 sm:mt-0 sm:ml-auto"
+            hideIcon
+          >
+            Hide completed
+          </mat-slide-toggle>
+        </div>
+
+        <!-- Courses -->
+        <div
+          class="mt-6 grid grid-cols-1 gap-8 sm:mt-8 @lg:grid-cols-2 @4xl:grid-cols-3 @5xl:grid-cols-4"
+        >
+          @for (course of data.courses; track course.id) {
+            <!-- Course -->
+            <mat-card
+              appearance="outlined"
+              class="flex-col overflow-hidden"
+            >
+              <div class="flex flex-auto flex-col p-5">
+                <div class="flex items-center justify-between">
+                  <!-- Category -->
+                  <div
+                    class="rounded-full bg-neutral-200 px-3 py-0.5 text-sm font-semibold dark:bg-neutral-500 dark:text-black"
+                  >
+                    {{ course.category | titlecase }}
+                  </div>
+
+                  <!-- Completed at least once -->
+                  <div class="flex items-center">
+                    @if (course.progress.completed > 0) {
+                      <mat-icon
+                        class="size-5 text-green-600"
+                        svgIcon="badge-check"
+                        [matTooltip]="'You completed this course at least once'"
+                      />
+                    }
+                  </div>
+                </div>
+
+                <!-- Title & description -->
+                <div class="mt-4 text-lg font-medium">
+                  {{ course.title }}
+                </div>
+                <div class="mt-0.5 line-clamp-2 text-neutral-500">
+                  {{ course.description }}
+                </div>
+
+                <!-- Divider -->
+                <div class="my-auto">
+                  <mat-divider class="my-6 w-8" />
+                </div>
+
+                <!-- Duration -->
+                <div class="flex items-center gap-x-2 text-neutral-500">
+                  <mat-icon
+                    class="text-neutral-500"
+                    svgIcon="clock"
+                  />
+                  <div>{{ course.duration }} minutes</div>
+                </div>
+
+                <!-- Completion -->
+                <div class="mt-2 flex items-center gap-x-2 text-neutral-500">
+                  <mat-icon
+                    class="text-neutral-500"
+                    svgIcon="graduation-cap"
+                  />
+                  @if (course.progress.completed === 0) {
+                    <div>Never completed</div>
+                  } @else {
+                    <div>Completed</div>
+                  }
+                </div>
+              </div>
+
+              <!-- Footer -->
+              <div class="mt-auto flex w-full flex-col">
+                <!-- Progress -->
+                <div class="relative h-0.5">
+                  <div
+                    class="absolute inset-x-0 z-10 -mt-3 h-6"
+                    [matTooltip]="
+                      course.progress.currentStep / course.totalSteps | percent
+                    "
+                    [matTooltipPosition]="'above'"
+                    [matTooltipClass]="'-mb-0.5'"
+                  ></div>
+                  <mat-progress-bar
+                    class="h-0.5"
+                    [value]="
+                      (100 * course.progress.currentStep) / course.totalSteps
+                    "
+                  />
+                </div>
+
+                <!-- Launch button -->
+                <div
+                  class="flex items-center justify-end bg-neutral-50 p-3 dark:border-t dark:border-neutral-700 dark:bg-transparent"
+                >
+                  <a
+                    mat-stroked-button
+                    [routerLink]="[course.id]"
+                  >
+                    <span class="inline-flex items-center">
+                      <!-- Not started -->
+                      @if (course.progress.currentStep === 0) {
+                        <!-- Never completed -->
+                        @if (course.progress.completed === 0) {
+                          <span>Start</span>
+                        }
+                        <!-- Completed before -->
+                        @if (course.progress.completed > 0) {
+                          <span>Start again</span>
+                        }
+                      }
+
+                      <!-- Started -->
+                      @if (course.progress.currentStep > 0) {
+                        <span>Continue</span>
+                      }
+
+                      <mat-icon
+                        class="ml-1.5 size-4"
+                        svgIcon="arrow-right"
+                      />
+                    </span>
+                  </a>
+                </div>
+              </div>
+            </mat-card>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+})
+export default class AcademyCourses {
+  // Dependencies
+  private academyService = inject(AcademyService);
+
+  // State
+  protected data = this.academyService.data;
+}

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

@@ -0,0 +1,14 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('./features/courses'),
+  },
+  {
+    path: ':id',
+    loadComponent: () => import('./features/course'),
+  },
+];
+
+export default routes;