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

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

@@ -0,0 +1,34 @@
+export type Tag = {
+  id: string;
+  title: string;
+};
+
+export type Country = {
+  id: string;
+  iso: string;
+  name: string;
+  code: string;
+  flagImagePos: string;
+};
+
+export type Contact = {
+  id: string;
+  photo: string | null;
+  background: string | null;
+  name: string;
+  emails: {
+    email: string;
+    label: string;
+  }[];
+  phoneNumbers: {
+    country: string;
+    phoneNumber: string;
+    label: string;
+  }[];
+  title: string | null;
+  company: string | null;
+  birthday: string | null;
+  address: string | null;
+  notes: string | null;
+  tags: string[];
+};

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

@@ -0,0 +1,239 @@
+import { DatePipe } from '@angular/common';
+import {
+  afterNextRender,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatTooltip } from '@angular/material/tooltip';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ContactsService } from '@/app/domains/admin/modules/apps/contacts/data/contacts';
+import Contacts from '@/app/domains/admin/modules/apps/contacts/features/contacts';
+
+@Component({
+  selector: 'contact',
+  imports: [DatePipe, MatIcon, MatIconButton, MatTooltip, ReactiveFormsModule],
+  template: `
+    @let contact = this.contact();
+    <div class="flex w-full flex-col">
+      <!-- Header -->
+      <div
+        class="relative h-40 w-full bg-neutral-100 px-8 sm:h-48 sm:px-8 dark:bg-neutral-800"
+      >
+        <!-- Background -->
+        @if (contact.background) {
+          <img
+            class="absolute inset-0 h-full w-full object-cover"
+            [src]="contact.background"
+            alt="Contact background"
+          />
+        }
+        <!-- Close button -->
+        <div
+          class="mx-auto flex w-full max-w-3xl items-center justify-end pt-6"
+        >
+          <button
+            matIconButton
+            class="bg-white/20 text-black backdrop-blur-xs"
+            [matTooltip]="'Close'"
+            (click)="closeContact()"
+          >
+            <mat-icon svgIcon="x"></mat-icon>
+          </button>
+        </div>
+      </div>
+
+      <!-- Contact -->
+      <div
+        class="relative flex flex-auto flex-col items-center p-6 pt-0 sm:p-12 sm:pt-0"
+      >
+        <div class="w-full max-w-3xl">
+          <!-- Photo -->
+          <div class="-mt-16 flex flex-auto items-end">
+            <div
+              class="overflow-hidden rounded-full ring-4 ring-white dark:ring-neutral-900"
+            >
+              @if (contact.photo) {
+                <img
+                  class="size-32 shrink-0 object-cover"
+                  [src]="contact.photo"
+                  alt="Contact photo"
+                />
+              }
+              @if (!contact.photo) {
+                <div
+                  class="flex size-32 shrink-0 items-center justify-center overflow-hidden rounded bg-neutral-200 text-5xl font-bold text-neutral-600 uppercase dark:bg-neutral-700 dark:text-neutral-200"
+                >
+                  {{ contact.name.charAt(0) }}
+                </div>
+              }
+            </div>
+          </div>
+
+          <!-- Name -->
+          <div class="mt-3 truncate text-4xl font-bold">
+            {{ contact.name }}
+          </div>
+
+          <div class="mt-8 flex flex-col space-y-8">
+            <!-- Title -->
+            @if (contact.title) {
+              <div class="flex items-center">
+                <mat-icon
+                  class="shrink-0"
+                  svgIcon="briefcase"
+                />
+                <div class="ml-6">
+                  {{ contact.title }}
+                </div>
+              </div>
+            }
+
+            <!-- Company -->
+            @if (contact.company) {
+              <div class="flex items-center">
+                <mat-icon
+                  class="shrink-0"
+                  svgIcon="building"
+                />
+                <div class="ml-6">
+                  {{ contact.company }}
+                </div>
+              </div>
+            }
+
+            <!-- Emails -->
+            @if (contact.emails.length) {
+              <div class="flex">
+                <mat-icon
+                  class="shrink-0"
+                  svgIcon="mail"
+                />
+                <div class="ml-6 flex flex-col space-y-1 gap-y-2">
+                  @for (email of contact.emails; track email.email) {
+                    <div class="flex items-center">
+                      <a
+                        class="text-primary-500 hover:underline"
+                        [href]="'mailto:' + email.email"
+                        target="_blank"
+                      >
+                        {{ email.email }}
+                      </a>
+                      @if (email.label) {
+                        <div class="truncate text-neutral-500">
+                          <span class="mx-2">&bull;</span>
+                          <span class="font-medium">{{ email.label }}</span>
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+
+            <!-- Phone -->
+            @if (contact.phoneNumbers.length) {
+              <div class="flex">
+                <mat-icon
+                  class="shrink-0"
+                  svgIcon="phone"
+                />
+                <div class="ml-6 flex flex-col space-y-1 gap-y-2">
+                  @for (
+                    phoneNumber of contact.phoneNumbers;
+                    track phoneNumber.phoneNumber
+                  ) {
+                    <div class="flex items-center">
+                      <div class="tabular-nums">
+                        {{ phoneNumber.phoneNumber }}
+                      </div>
+                      @if (phoneNumber.label) {
+                        <div class="truncate text-neutral-500">
+                          <span class="mx-2">&bull;</span>
+                          <span class="font-medium">{{
+                            phoneNumber.label
+                          }}</span>
+                        </div>
+                      }
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+
+            <!-- Address -->
+            @if (contact.address) {
+              <div class="flex items-center">
+                <mat-icon
+                  class="shrink-0"
+                  svgIcon="map-pin"
+                />
+                <div class="ml-6">
+                  {{ contact.address }}
+                </div>
+              </div>
+            }
+
+            <!-- Birthday -->
+            @if (contact.birthday) {
+              <div class="flex items-center">
+                <mat-icon
+                  class="shrink-0"
+                  svgIcon="cake"
+                />
+                <div class="ml-6">
+                  {{ contact.birthday | date: 'longDate' }}
+                </div>
+              </div>
+            }
+
+            <!-- Notes -->
+            @if (contact.notes) {
+              <div class="flex">
+                <mat-icon
+                  class="shrink-0"
+                  svgIcon="notebook-pen"
+                />
+                <div
+                  class="prose ml-6 text-base leading-5 *:first:mt-0"
+                  [innerHTML]="contact.notes"
+                ></div>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export default class Contact {
+  // Dependencies
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private contactsService = inject(ContactsService);
+  private contacts = inject(Contacts);
+
+  // Input / Output
+  readonly contactId = input.required({ alias: 'id' });
+
+  // State
+  protected data = this.contactsService.data;
+  protected contact = computed(
+    () => this.data.contacts.find((contact) => contact.id === this.contactId())!
+  );
+
+  constructor() {
+    afterNextRender(() => {
+      this.contacts.selectedContact.set(this.contact());
+    });
+  }
+
+  closeContact() {
+    this.contacts.selectedContact.set(null);
+    this.router.navigate(['..'], { relativeTo: this.route });
+  }
+}

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

@@ -0,0 +1,185 @@
+import { I18nPluralPipe } from '@angular/common';
+import { Component, computed, inject, signal } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatFormField, MatInput, MatPrefix } from '@angular/material/input';
+import {
+  MatSidenav,
+  MatSidenavContainer,
+  MatSidenavContent,
+} from '@angular/material/sidenav';
+import { Router, RouterLink, RouterOutlet } from '@angular/router';
+import { Media } from '@/app/core/media';
+import { ContactsService } from '@/app/domains/admin/modules/apps/contacts/data/contacts';
+import { Contact } from '@/app/domains/admin/modules/apps/contacts/data/model';
+
+@Component({
+  selector: 'contacts',
+  imports: [
+    I18nPluralPipe,
+    MatButton,
+    MatIcon,
+    ReactiveFormsModule,
+    RouterOutlet,
+    RouterLink,
+    MatSidenavContainer,
+    MatSidenav,
+    MatSidenavContent,
+    MatFormField,
+    MatInput,
+    MatPrefix,
+  ],
+  host: {
+    class: 'lg: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)="closeContact()"
+      >
+        <!-- Drawer -->
+        <mat-sidenav
+          class="w-full bg-white sm:w-lg dark:bg-neutral-900"
+          [mode]="isMobile() ? 'over' : 'side'"
+          [opened]="!!selectedContact()"
+          [position]="'end'"
+          [fixedInViewport]="isMobile()"
+          disableClose
+        >
+          <router-outlet></router-outlet>
+        </mat-sidenav>
+
+        <mat-sidenav-content
+          class="flex flex-auto flex-col"
+          [class.border-r]="!!selectedContact()"
+        >
+          <!-- 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">
+                Contacts
+              </div>
+              <div class="text-neutral-500">
+                {{
+                  data.contacts.length
+                    | i18nPlural
+                      : {
+                          '=0': 'No contacts',
+                          '=1': '1 contact',
+                          other: '# contacts',
+                        }
+                }}
+              </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 contacts"
+                matInput
+              />
+            </mat-form-field>
+
+            <!-- Actions -->
+            <button matButton="filled">
+              <mat-icon svgIcon="plus" />
+              Add
+            </button>
+          </div>
+
+          <!-- Tasks -->
+          <div class="relative">
+            @if (contacts && data.contacts.length > 0) {
+              @for (contact of contacts; track contact.id; let i = $index) {
+                <!-- Group -->
+                @if (
+                  i === 0 ||
+                  contact.name.charAt(0) !== contacts[i - 1].name.charAt(0)
+                ) {
+                  <div
+                    class="-mt-px border-t border-b bg-neutral-50 px-6 py-1 font-medium text-neutral-500 uppercase md:px-8 dark:bg-neutral-900"
+                  >
+                    {{ contact.name.charAt(0) }}
+                  </div>
+                }
+                <!-- Contact -->
+                <a
+                  class="flex cursor-pointer items-center border-b px-6 py-4 hover:bg-neutral-100 md:px-8 dark:hover:bg-white/2.5"
+                  [routerLink]="['./', contact.id]"
+                >
+                  @if (contact.photo) {
+                    <img
+                      class="size-10 shrink-0 rounded-full object-cover"
+                      [src]="contact.photo"
+                      alt="Contact avatar"
+                    />
+                  }
+                  @if (!contact.photo) {
+                    <div
+                      class="flex size-10 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-lg text-neutral-600 uppercase dark:bg-neutral-700 dark:text-neutral-200"
+                    >
+                      {{ contact.name.charAt(0) }}
+                    </div>
+                  }
+                  <div class="ml-4 min-w-0">
+                    <div class="truncate leading-5 font-medium">
+                      {{ contact.name }}
+                    </div>
+                    <div class="truncate leading-5 text-neutral-500">
+                      {{ contact.title }}
+                    </div>
+                  </div>
+                </a>
+              }
+            } @else {
+              <div class="flex flex-auto flex-col items-center justify-center">
+                <mat-icon
+                  class="size-12 text-neutral-500"
+                  svgIcon="user"
+                />
+                <div class="mt-4 text-xl font-medium tracking-tight">
+                  No contacts!
+                </div>
+              </div>
+            }
+          </div>
+        </mat-sidenav-content>
+      </mat-sidenav-container>
+    </div>
+  `,
+})
+export default class Contacts {
+  // Dependencies
+  private contactsService = inject(ContactsService);
+  private media = inject(Media);
+  private router = inject(Router);
+
+  // State
+  protected data = this.contactsService.data;
+  protected contacts = this.data.contacts.sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+  protected isMobile = computed(() =>
+    this.media.match(`(max-width: 1023px)`)()
+  );
+  selectedContact = signal<Contact | null>(null);
+
+  closeContact() {
+    const selectedContact = this.selectedContact();
+    if (selectedContact) {
+      this.selectedContact.set(null);
+      this.router.navigate(['/admin/contacts']);
+    }
+  }
+}

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

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