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

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

@@ -0,0 +1,161 @@
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { Component, signal } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { email, form, FormField, required } from '@angular/forms/signals';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import {
+  MatError,
+  MatFormField,
+  MatInput,
+  MatLabel,
+} from '@angular/material/input';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'help-center-support',
+  imports: [
+    CdkTextareaAutosize,
+    MatButton,
+    MatError,
+    MatFormField,
+    MatIcon,
+    MatInput,
+    MatLabel,
+    ReactiveFormsModule,
+    RouterLink,
+    FormField,
+  ],
+  template: `
+    <div
+      class="@container mx-auto flex w-full max-w-4xl flex-auto flex-col items-start p-6 pt-2 lg:p-10 lg:pt-16"
+    >
+      <!-- Header -->
+      <a
+        matButton
+        class="-ml-3"
+        routerLink=".."
+      >
+        <mat-icon svgIcon="move-left" />
+        Back to Help Center
+      </a>
+
+      <div class="relative mt-3 flex flex-col">
+        <div class="text-xl font-bold tracking-tighter sm:text-4xl">
+          Contact us
+        </div>
+        <div class="mt-1 text-neutral-500">
+          Your request will be processed and our support staff will get back to
+          you in 24 hours.
+        </div>
+      </div>
+
+      <!-- Form -->
+      <form
+        class="mt-8 flex w-full flex-auto flex-col gap-y-6"
+        (submit)="send($event)"
+      >
+        <!-- Name -->
+        <mat-form-field class="mt-12 w-full">
+          <mat-label>Name</mat-label>
+          <input
+            matInput
+            [formField]="supportForm.name"
+          />
+          <mat-error>
+            @for (error of supportForm.name().errors(); track error) {
+              {{ error.message }}
+            }
+          </mat-error>
+        </mat-form-field>
+
+        <!-- Email -->
+        <mat-form-field class="w-full">
+          <mat-label>Email</mat-label>
+          <input
+            matInput
+            [formField]="supportForm.email"
+          />
+          <mat-error>
+            @for (error of supportForm.email().errors(); track error) {
+              {{ error.message }}
+            }
+          </mat-error>
+        </mat-form-field>
+
+        <!-- Subject -->
+        <mat-form-field class="w-full">
+          <mat-label>Subject</mat-label>
+          <input
+            matInput
+            [formField]="supportForm.subject"
+          />
+          <mat-error>
+            @for (error of supportForm.subject().errors(); track error) {
+              {{ error.message }}
+            }
+          </mat-error>
+        </mat-form-field>
+
+        <!-- Message -->
+        <mat-form-field class="w-full">
+          <mat-label>Message</mat-label>
+          <textarea
+            matInput
+            [formField]="supportForm.message"
+            cdkTextareaAutosize
+            [cdkAutosizeMinRows]="4"
+            cdkAutosizeMaxRows="6"
+          ></textarea>
+          <mat-error>
+            @for (error of supportForm.subject().errors(); track error) {
+              {{ error.message }}
+            }
+          </mat-error>
+        </mat-form-field>
+
+        <!-- Actions -->
+        <div class="flex items-center justify-end gap-x-3">
+          <button
+            type="reset"
+            matButton
+            (click)="this.reset()"
+          >
+            Clear
+          </button>
+
+          <button matButton="filled">Submit</button>
+        </div>
+      </form>
+    </div>
+  `,
+})
+export default class HelpCenterSupport {
+  // State
+  protected supportFormModel = signal({
+    name: '',
+    email: '',
+    subject: '',
+    message: '',
+  });
+  protected supportForm = form(this.supportFormModel, (schema) => {
+    required(schema.name, { message: 'Name is required' });
+    required(schema.email, { message: 'Email is required' });
+    email(schema.email, { message: 'Enter a valid email address' });
+    required(schema.subject, { message: 'Subject is required' });
+    required(schema.message, { message: 'Message is required' });
+  });
+
+  reset() {
+    this.supportForm().reset({
+      name: '',
+      message: '',
+      email: '',
+      subject: '',
+    });
+  }
+
+  send(event: Event) {
+    event.preventDefault();
+  }
+}

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

@@ -0,0 +1,33 @@
+import { Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadComponent: () => import('./features/home'),
+  },
+  {
+    path: 'faq',
+    loadComponent: () => import('./features/faq'),
+  },
+  {
+    path: 'support',
+    loadComponent: () => import('./features/support'),
+  },
+  {
+    path: 'guides',
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'getting-started',
+      },
+      {
+        path: ':id',
+        loadComponent: () => import('./features/guide'),
+      },
+    ],
+  },
+];
+
+export default routes;

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

@@ -0,0 +1,18 @@
+export type Note = {
+  id: string;
+  title: string;
+  content: string;
+  tasks:
+    | {
+        id: string;
+        content: string;
+        completed: boolean;
+      }[]
+    | null;
+  image: string | null;
+  reminder: string | null;
+  labels: string[];
+  archived: boolean;
+  createdAt: string;
+  updatedAt: string | null;
+};

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

@@ -0,0 +1,324 @@
+import { Injectable } from '@angular/core';
+import { add, set, sub } from 'date-fns';
+import { Note } from '@/app/domains/admin/modules/apps/notes/data/model';
+
+@Injectable({ providedIn: 'root' })
+export class NotesService {
+  private now = new Date();
+  private notes: Note[] = [
+    {
+      id: '8f011ac5-b71c-4cd7-a317-857dcd7d85e0',
+      title: 'Find a new company name',
+      content:
+        'We need to find a new company name that reflects our values and mission. The name should be catchy, easy to remember, and available as a domain name.',
+      tasks: null,
+      image: null,
+      reminder: null,
+      labels: ['Work'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 10, minutes: 19 }), {
+        days: 98,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: 'ced0a1ce-051d-41a3-b080-e2161e4ae621',
+      title: 'Vacation Photos',
+      content: 'Send the photos of last summer to John',
+      tasks: null,
+      image: 'images/cards/14-640x480.jpg',
+      reminder: null,
+      labels: ['Personal', 'Tasks'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 15, minutes: 37 }), {
+        days: 80,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: 'd3ac02a9-86e4-4187-bbd7-2c965518b3a3',
+      title: 'Design Update',
+      content: 'Update the design of the theme',
+      tasks: null,
+      image: null,
+      reminder: null,
+      labels: ['Priority'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 19, minutes: 27 }), {
+        days: 74,
+      }).toDateString(),
+      updatedAt: sub(set(this.now, { hours: 15, minutes: 36 }), {
+        days: 50,
+      }).toDateString(),
+    },
+    {
+      id: '89861bd4-0144-4bb4-8b39-332ca10371d5',
+      title: 'Theming Support',
+      content: 'Theming support for all apps',
+      tasks: null,
+      image: null,
+      reminder: add(set(this.now, { hours: 12, minutes: 34 }), {
+        days: 50,
+      }).toDateString(),
+      labels: ['Work'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 12, minutes: 34 }), {
+        days: 59,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: 'ffd20f3c-2d43-4c6b-8021-278032fc9e92',
+      title: 'Gift Ideas',
+      content:
+        "Stephanie's birthday is coming and I need to pick a present for her. Take a look at the below list and buy one of them (or all of them)",
+      tasks: [
+        {
+          id: '330a924f-fb51-48f6-a374-1532b1dd353d',
+          content: 'Scarf',
+          completed: false,
+        },
+        {
+          id: '781855a6-2ad2-4df4-b0af-c3cb5f302b40',
+          content: 'A new bike helmet',
+          completed: true,
+        },
+        {
+          id: 'bcb8923b-33cd-42c2-9203-170994fa24f5',
+          content: 'Necklace',
+          completed: false,
+        },
+        {
+          id: '726bdf6e-5cd7-408a-9a4f-0d7bb98c1c4b',
+          content: 'Flowers',
+          completed: false,
+        },
+      ],
+      image: null,
+      reminder: null,
+      labels: ['Family'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 16, minutes: 4 }), {
+        days: 47,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: '71d223bb-abab-4183-8919-cd3600a950b4',
+      title: 'Shopping list',
+      content: 'Buy the groceries for the week',
+      tasks: [
+        {
+          id: 'e3cbc986-641c-4448-bc26-7ecfa0549c22',
+          content: 'Bread',
+          completed: true,
+        },
+        {
+          id: '34013111-ab2c-4b2f-9352-d2ae282f57d3',
+          content: 'Milk',
+          completed: false,
+        },
+        {
+          id: '0fbdea82-cc79-4433-8ee4-54fd542c380d',
+          content: 'Onions',
+          completed: false,
+        },
+        {
+          id: '66490222-743e-4262-ac91-773fcd98a237',
+          content: 'Coffee',
+          completed: true,
+        },
+        {
+          id: 'ab367215-d06a-48b0-a7b8-e161a63b07bd',
+          content: 'Toilet Paper',
+          completed: true,
+        },
+      ],
+      image: null,
+      reminder: add(set(this.now, { hours: 10, minutes: 44 }), {
+        days: 35,
+      }).toDateString(),
+      labels: ['Tasks'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 10, minutes: 44 }), {
+        days: 35,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: '11fbeb98-ae5e-41ad-bed6-330886fd7906',
+      title: 'Keynote Schedule',
+      content: 'Schedule for the keynote speech at the conference',
+      tasks: [
+        {
+          id: '2711bac1-7d8a-443a-a4fe-506ef51d3fcb',
+          content: 'Breakfast',
+          completed: true,
+        },
+        {
+          id: 'e3a2d675-a3e5-4cef-9205-feeccaf949d7',
+          content: 'Opening ceremony',
+          completed: true,
+        },
+        {
+          id: '7a721b6d-9d85-48e0-b6c3-f927079af582',
+          content: 'Talk 1: How we did it!',
+          completed: true,
+        },
+        {
+          id: 'bdb4d5cd-5bb8-45e2-9186-abfd8307e429',
+          content: 'Talk 2: How can you do it!',
+          completed: false,
+        },
+        {
+          id: 'c8293bb4-8ab4-4310-bbc2-52ecf8ec0c54',
+          content: 'Lunch break',
+          completed: false,
+        },
+      ],
+      image: null,
+      reminder: add(set(this.now, { hours: 11, minutes: 27 }), {
+        days: 14,
+      }).toDateString(),
+      labels: ['Tasks', 'Work'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 11, minutes: 27 }), {
+        days: 24,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: 'd46dee8b-8761-4b6d-a1df-449d6e6feb6a',
+      title: 'Retirement Party',
+      content: "Organize the dad's surprise retirement party",
+      tasks: null,
+      image: null,
+      reminder: add(set(this.now, { hours: 14, minutes: 56 }), {
+        days: 25,
+      }).toDateString(),
+      labels: ['Family'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 14, minutes: 56 }), {
+        days: 20,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: '6bc9f002-1675-417c-93c4-308fba39023e',
+      title: 'Plan the road trip',
+      content: 'Plan the road trip for the next summer vacation with friends',
+      tasks: null,
+      image: 'images/cards/17-640x480.jpg',
+      reminder: null,
+      labels: ['Friends', 'Tasks'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 9, minutes: 32 }), {
+        days: 15,
+      }).toDateString(),
+      updatedAt: sub(set(this.now, { hours: 17, minutes: 6 }), {
+        days: 12,
+      }).toDateString(),
+    },
+    {
+      id: '15188348-78aa-4ed6-b5c2-028a214ba987',
+      title: 'Office Address',
+      content: '933 8th Street Stamford, CT 06902',
+      tasks: null,
+      image: null,
+      reminder: null,
+      labels: ['Work'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 20, minutes: 5 }), {
+        days: 12,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: '1dbfc685-1a0a-4070-9ca7-ed896c523037',
+      title: 'Tasks',
+      content: 'Things to do this week',
+      tasks: [
+        {
+          id: '004638bf-3ee6-47a5-891c-3be7b9f3df09',
+          content: 'Wash the dishes',
+          completed: true,
+        },
+        {
+          id: '86e6820b-1ae3-4c14-a13e-35605a0d654b',
+          content: 'Walk the dog',
+          completed: false,
+        },
+      ],
+      image: null,
+      reminder: add(set(this.now, { hours: 13, minutes: 43 }), {
+        days: 2,
+      }).toDateString(),
+      labels: ['Personal'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 13, minutes: 43 }), {
+        days: 7,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: '49548409-90a3-44d4-9a9a-f5af75aa9a66',
+      title: 'Dinner',
+      content: 'Dinner with parents',
+      tasks: null,
+      image: null,
+      reminder: null,
+      labels: ['Family', 'Priority'],
+      archived: false,
+      createdAt: sub(set(this.now, { hours: 7, minutes: 12 }), {
+        days: 2,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: 'c6d13a35-500d-4491-a3f3-6ca05d6632d3',
+      title: 'Medicine Cabinet',
+      content: 'Re-fill the medicine cabinet',
+      tasks: null,
+      image: null,
+      reminder: null,
+      labels: ['Personal', 'Priority'],
+      archived: true,
+      createdAt: sub(set(this.now, { hours: 17, minutes: 14 }), {
+        days: 100,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: '5e8a890f-d159-49f3-871b-ba19ce57517e',
+      title: 'Icons Pack',
+      content: 'Update the icons pack',
+      tasks: null,
+      image: null,
+      reminder: null,
+      labels: ['Work'],
+      archived: true,
+      createdAt: sub(set(this.now, { hours: 10, minutes: 29 }), {
+        days: 85,
+      }).toDateString(),
+      updatedAt: null,
+    },
+    {
+      id: '46214383-f8e7-44da-aa2e-0b685e0c5027',
+      title: 'Team Meeting',
+      content: 'Talk about the future of the web apps',
+      tasks: null,
+      image: null,
+      reminder: null,
+      labels: ['Work', 'Tasks'],
+      archived: true,
+      createdAt: sub(set(this.now, { hours: 15, minutes: 30 }), {
+        days: 69,
+      }).toDateString(),
+      updatedAt: null,
+    },
+  ];
+
+  data = {
+    notes: this.notes,
+  };
+}

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

@@ -0,0 +1,152 @@
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import {
+  afterNextRender,
+  Component,
+  inject,
+  input,
+  linkedSignal,
+  TemplateRef,
+  viewChild,
+} from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
+import { MatButton } from '@angular/material/button';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatDialog, MatDialogClose } from '@angular/material/dialog';
+import { MatIcon } from '@angular/material/icon';
+import { ActivatedRoute, Router } from '@angular/router';
+import { take } from 'rxjs';
+import { NotesService } from '@/app/domains/admin/modules/apps/notes/data/notes';
+
+@Component({
+  selector: 'note',
+  imports: [
+    FormField,
+    CdkTextareaAutosize,
+    MatButton,
+    MatIcon,
+    MatCheckbox,
+    MatDialogClose,
+  ],
+  template: `
+    <ng-template #content>
+      @let note = this.note();
+
+      <div class="flex w-full flex-col p-4">
+        <!-- Title -->
+        <input
+          type="text"
+          class="rounded-md p-2 font-medium outline-none focus-within:bg-black/5"
+          [formField]="noteForm.title"
+        />
+
+        <!-- Content -->
+        <textarea
+          class="rounded-md p-2 outline-none focus-within:bg-black/5"
+          [formField]="noteForm.content"
+          cdkTextareaAutosize
+          [cdkAutosizeMinRows]="2"
+          [cdkAutosizeMaxRows]="5"
+        ></textarea>
+
+        <!-- Todo -->
+        @if (note.tasks && note.tasks.length > 0) {
+          <div class="mt-2 flex flex-col items-start gap-y-1 py-2">
+            @for (task of note.tasks; track task) {
+              <div class="items -center flex gap-2">
+                <mat-checkbox
+                  [checked]="task.completed"
+                  #checkbox
+                >
+                  <span
+                    [class.line-through]="checkbox.checked"
+                    [class.text-neutral-500]="checkbox.checked"
+                  >
+                    {{ task.content }}
+                  </span>
+                </mat-checkbox>
+              </div>
+            }
+
+            <!-- Add task -->
+            <button matButton="text">
+              <mat-icon svgIcon="plus" />
+              Add task
+            </button>
+          </div>
+        }
+
+        <!-- Labels -->
+        @if (note.labels && note.labels.length > 0) {
+          <div class="mt-2 flex flex-wrap items-center gap-2 p-2">
+            @for (label of note.labels; track label) {
+              <div
+                class="rounded-lg bg-neutral-200 px-2 py-1 text-xs font-medium text-neutral-500 dark:bg-black/20"
+              >
+                {{ label }}
+              </div>
+            }
+
+            <!-- Edit labels -->
+            <button
+              matButton="text"
+              class="h-6 text-xs text-neutral-500"
+            >
+              <mat-icon svgIcon="square-pen" />
+              Edit
+            </button>
+          </div>
+        }
+
+        <!-- Buttons -->
+        <div class="mt-4 flex items-center justify-end gap-x-2">
+          <button
+            matButton="outlined"
+            matDialogClose
+          >
+            Cancel
+          </button>
+          <button
+            matButton="filled"
+            matDialogClose
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </ng-template>
+  `,
+})
+export default class Note {
+  // Dependencies
+  private matDialog = inject(MatDialog);
+  private notesService = inject(NotesService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
+  // Inputs / Outputs
+  readonly noteId = input.required({ alias: 'id' });
+
+  // Queries
+  readonly content = viewChild.required<TemplateRef<unknown>>('content');
+
+  // State
+  protected note = linkedSignal(
+    () =>
+      this.notesService.data.notes.find((note) => note.id === this.noteId())!
+  );
+  protected noteForm = form(this.note);
+
+  constructor() {
+    afterNextRender(() => {
+      const dialogRef = this.matDialog.open(this.content(), {
+        panelClass: 'w-full max-w-lg'.split(' '),
+      });
+      dialogRef
+        .afterClosed()
+        .pipe(take(1))
+        .subscribe(() => {
+          this.router.navigate(['..'], { relativeTo: this.route });
+        });
+    });
+  }
+}