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

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

@@ -0,0 +1,195 @@
+import { TextFieldModule } from '@angular/cdk/text-field';
+import {
+  afterNextRender,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  linkedSignal,
+} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { form, FormField } from '@angular/forms/signals';
+import { MatOption } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatRippleModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelect } from '@angular/material/select';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TasksService } from '@/app/domains/admin/modules/apps/tasks/data/tasks';
+import Tasks from '@/app/domains/admin/modules/apps/tasks/features/tasks';
+
+@Component({
+  selector: 'task',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    TextFieldModule,
+    MatRippleModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    FormField,
+    MatSelect,
+    MatOption,
+  ],
+  template: `
+    <div class="flex flex-auto">
+      <form
+        class="flex flex-auto flex-col overflow-y-auto p-6 pt-10 sm:p-8 sm:pt-10"
+      >
+        <!-- Header -->
+        <div class="-mt-3 -ml-4 flex items-center justify-between">
+          <button
+            matButton
+            class="pr-4 pl-3.5"
+          >
+            <mat-icon
+              [svgIcon]="!taskModel().completed ? 'circle' : 'circle-check'"
+            />
+            @if (!taskModel().completed) {
+              Mark as complete
+            } @else {
+              Mark as incomplete
+            }
+          </button>
+
+          <div class="flex items-center">
+            <!-- More menu -->
+            <button
+              matIconButton
+              [matMenuTriggerFor]="moreMenu"
+            >
+              <mat-icon svgIcon="ellipsis" />
+            </button>
+            <mat-menu #moreMenu="matMenu">
+              <button mat-menu-item>
+                <mat-icon svgIcon="trash" />
+                <span
+                  >Delete
+                  {{ task().type === 'task' ? 'task' : 'section' }}</span
+                >
+              </button>
+            </mat-menu>
+
+            <!-- Close button -->
+            <button
+              type="button"
+              matIconButton
+              (click)="closeTask()"
+            >
+              <mat-icon svgIcon="x" />
+            </button>
+          </div>
+        </div>
+
+        <mat-divider class="mt-6 mb-8"></mat-divider>
+
+        <!-- Title -->
+        <mat-form-field class="w-full">
+          <mat-label>{{
+            task().type === 'task' ? 'Task title' : 'Section title'
+          }}</mat-label>
+          <textarea
+            matInput
+            [formField]="taskForm.title"
+            [spellcheck]="false"
+            cdkTextareaAutosize
+          ></textarea>
+        </mat-form-field>
+
+        <!-- Priority and Due date -->
+        <div
+          class="mt-8 grid grid-cols-1 items-center gap-y-8 sm:grid-cols-2 sm:gap-x-3 sm:gap-y-0"
+        >
+          <!-- Priority -->
+          <mat-form-field class="flex-auto">
+            <mat-label>Priority</mat-label>
+            <mat-select
+              class="w-full"
+              [formField]="taskForm.priority"
+              [panelWidth]="null"
+            >
+              <mat-option [value]="2">High</mat-option>
+              <mat-option [value]="1">Medium</mat-option>
+              <mat-option [value]="0">Low</mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <!-- Due date -->
+          <mat-form-field class="flex-auto">
+            <mat-label>Due date</mat-label>
+            <input
+              matInput
+              [matDatepicker]="dueDatePicker"
+              [formField]="taskForm.dueDate"
+            />
+            <mat-datepicker-toggle
+              matIconSuffix
+              [for]="dueDatePicker"
+            ></mat-datepicker-toggle>
+            <mat-datepicker #dueDatePicker></mat-datepicker>
+          </mat-form-field>
+        </div>
+
+        <!-- Notes -->
+        <div class="mt-8">
+          <mat-form-field class="w-full">
+            <mat-label>Notes</mat-label>
+            <textarea
+              matInput
+              [formField]="taskForm.notes"
+              [spellcheck]="false"
+              cdkTextareaAutosize
+            ></textarea>
+          </mat-form-field>
+        </div>
+      </form>
+    </div>
+  `,
+})
+export default class Task {
+  // Dependencies
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private tasksService = inject(TasksService);
+  private tasks = inject(Tasks);
+
+  // Input / Output
+  readonly taskId = input.required({ alias: 'id' });
+
+  // State
+  protected data = this.tasksService.data;
+  protected task = computed(
+    () => this.data.tasks.find((task) => task.id === this.taskId())!
+  );
+  protected taskModel = linkedSignal(() => this.task());
+  protected taskForm = form(this.taskModel);
+
+  constructor() {
+    afterNextRender(() => {
+      this.tasks.selectedTask.set(this.task());
+    });
+
+    effect(() => {
+      const task = this.task();
+      this.taskModel.set(task);
+    });
+  }
+
+  closeTask() {
+    this.tasks.selectedTask.set(null);
+    this.router.navigate(['..'], { relativeTo: this.route });
+  }
+}

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

@@ -0,0 +1,271 @@
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragHandle,
+  CdkDragPreview,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+import { DatePipe, TitleCasePipe } from '@angular/common';
+import { Component, inject, computed, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormField, MatInput, MatPrefix } from '@angular/material/input';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
+import { Media } from '@/app/core/media';
+import { Task } from '@/app/domains/admin/modules/apps/tasks/data/model';
+import { TasksService } from '@/app/domains/admin/modules/apps/tasks/data/tasks';
+
+@Component({
+  selector: 'tasks',
+  imports: [
+    MatSidenavModule,
+    RouterOutlet,
+    MatButtonModule,
+    MatTooltipModule,
+    MatIconModule,
+    CdkDropList,
+    CdkDrag,
+    CdkDragPreview,
+    CdkDragHandle,
+    RouterLink,
+    TitleCasePipe,
+    DatePipe,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger,
+    MatFormField,
+    MatInput,
+    MatPrefix,
+  ],
+  host: {
+    class: 'h-[calc(1dvh-57px)]',
+  },
+  template: `
+    <div
+      class="@container mx-auto flex w-full flex-auto flex-col overflow-hidden"
+    >
+      <mat-sidenav-container
+        class="h-full flex-auto [&_.mat-drawer-backdrop]:fixed"
+        (backdropClick)="closeTask()"
+      >
+        <!-- Drawer -->
+        <mat-sidenav
+          class="w-full bg-white sm:w-lg dark:bg-neutral-900"
+          [mode]="isMobile() ? 'over' : 'side'"
+          [opened]="!!selectedTask()"
+          [position]="'end'"
+          [fixedInViewport]="isMobile()"
+          disableClose
+        >
+          <router-outlet></router-outlet>
+        </mat-sidenav>
+
+        <mat-sidenav-content
+          class="flex flex-auto flex-col"
+          [class.border-r]="!!selectedTask()"
+        >
+          <!-- Header -->
+          <div class="flex items-center gap-x-4 px-6 py-4 lg:px-10 lg:py-8">
+            <div class="flex flex-col gap-y-0.5">
+              <div class="text-xl font-semibold tracking-tighter sm:text-2xl">
+                Tasks
+              </div>
+              <div class="text-neutral-500">
+                Manage your tasks and stay organized.
+              </div>
+            </div>
+
+            <!-- Spacer -->
+            <div class="flex-auto"></div>
+
+            <!-- Search -->
+            <mat-form-field class="w-40 sm:w-64">
+              <mat-icon
+                matPrefix
+                svgIcon="search"
+              />
+              <input
+                placeholder="Search tasks"
+                matInput
+              />
+            </mat-form-field>
+
+            <!-- Actions -->
+            <div>
+              <button
+                matButton="filled"
+                [matMenuTriggerFor]="actionsMenu"
+              >
+                <mat-icon svgIcon="plus" />
+                Add
+              </button>
+              <mat-menu
+                xPosition="before"
+                #actionsMenu
+              >
+                <button mat-menu-item>Section</button>
+                <button mat-menu-item>Task</button>
+              </mat-menu>
+            </div>
+          </div>
+
+          <!-- Tasks -->
+          @if (data.tasks && data.tasks.length > 0) {
+            <div
+              class="divide-y"
+              cdkDropList
+              [cdkDropListData]="data.tasks"
+              (cdkDropListDropped)="orderTasks($event)"
+            >
+              <!-- Task -->
+              @for (task of data.tasks; track task.id; let first = $first) {
+                <div
+                  [id]="'task-' + task.id"
+                  class="group w-full select-none hover:bg-neutral-100 dark:hover:bg-white/2.5"
+                  [class.h-10]="task.type === 'section'"
+                  [class.bg-neutral-50]="task.type === 'section'"
+                  [class.dark:bg-neutral-800]="task.type === 'section'"
+                  [class.font-semibold]="task.type === 'section'"
+                  [class.text-md]="task.type === 'section'"
+                  [class.h-14]="task.type === 'task'"
+                  [class.text-neutral-500]="task.completed"
+                  [class.border-t]="first"
+                  cdkDrag
+                  [cdkDragLockAxis]="'y'"
+                >
+                  <!-- Drag preview -->
+                  <div
+                    class="flex size-0 flex-0"
+                    *cdkDragPreview
+                  ></div>
+
+                  <div class="relative flex h-full items-center pl-10">
+                    <!-- Drag handle -->
+                    <div
+                      class="absolute inset-y-0 left-0 flex w-8 cursor-move items-center justify-center md:hidden md:group-hover:flex"
+                      cdkDragHandle
+                    >
+                      <mat-icon
+                        class="text-neutral-500"
+                        svgIcon="grip-vertical"
+                      />
+                    </div>
+
+                    <!-- Complete task button -->
+                    @if (task.type === 'task') {
+                      <button
+                        matIconButton
+                        class="mr-2 -ml-2.5 leading-none"
+                      >
+                        @if (task.completed) {
+                          <mat-icon
+                            class="text-primary-600"
+                            svgIcon="circle-check"
+                          />
+                        }
+                        @if (!task.completed) {
+                          <mat-icon
+                            class="text-neutral-500"
+                            svgIcon="circle"
+                          />
+                        }
+                      </button>
+                    }
+
+                    <!-- Task link -->
+                    <a
+                      class="flex h-full min-w-0 flex-auto items-center pr-7"
+                      [routerLink]="[task.id]"
+                    >
+                      <!-- Title & Placeholder -->
+                      <div class="mr-2 flex-auto truncate">
+                        @if (task.title) {
+                          <span>{{ task.title }}</span>
+                        }
+                        @if (!task.title) {
+                          <span class="text-neutral-500 select-none"
+                            >{{ task.type | titlecase }} title
+                          </span>
+                        }
+                      </div>
+                      <!-- Priority -->
+                      @if (task.type === 'task') {
+                        <div class="mr-3 h-4 w-4">
+                          <!-- Low -->
+                          @if (task.priority === 0) {
+                            <mat-icon
+                              class="size-4 text-green-600 dark:text-green-400"
+                              svgIcon="move-down"
+                              title="Low"
+                            />
+                          }
+                          <!-- High -->
+                          @if (task.priority === 2) {
+                            <mat-icon
+                              class="size-4 text-red-600 dark:text-red-400"
+                              svgIcon="move-up"
+                              title="High"
+                            />
+                          }
+                        </div>
+                      }
+                      <!-- Due date -->
+                      @if (task.type === 'task') {
+                        <div class="text-sm whitespace-nowrap text-neutral-500">
+                          {{ task.dueDate | date: 'LLL dd' }}
+                        </div>
+                      }
+                    </a>
+                  </div>
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="flex flex-auto flex-col items-center justify-center">
+              <mat-icon
+                class="size-12 text-neutral-500"
+                svgIcon="list-todo"
+              />
+              <div class="mt-4 text-xl font-medium tracking-tight">
+                No tasks yet
+              </div>
+            </div>
+          }
+        </mat-sidenav-content>
+      </mat-sidenav-container>
+    </div>
+  `,
+})
+export default class Tasks {
+  // Dependencies
+  private media = inject(Media);
+  private tasksService = inject(TasksService);
+  private router = inject(Router);
+
+  // State
+  protected data = this.tasksService.data;
+  protected isMobile = computed(() =>
+    this.media.match(`(max-width: 1023px)`)()
+  );
+  selectedTask = signal<Task | null>(null);
+
+  orderTasks(event: CdkDragDrop<Task[]>): void {
+    moveItemInArray(
+      event.container.data,
+      event.previousIndex,
+      event.currentIndex
+    );
+  }
+
+  closeTask() {
+    const selectedTask = this.selectedTask();
+    if (selectedTask) {
+      this.selectedTask.set(null);
+      this.router.navigate(['/admin/tasks']);
+    }
+  }
+}

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

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