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

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/settings/features/account.ts

@@ -0,0 +1,238 @@
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { Component, signal } from '@angular/core';
+import { email, form, FormField, required } from '@angular/forms/signals';
+import { MatButton } from '@angular/material/button';
+import { MatOption } from '@angular/material/core';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import {
+  MatError,
+  MatFormField,
+  MatHint,
+  MatInput,
+  MatLabel,
+  MatPrefix,
+} from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+
+@Component({
+  selector: 'account-settings',
+  imports: [
+    CdkTextareaAutosize,
+    MatButton,
+    MatFormField,
+    MatIcon,
+    MatInput,
+    MatLabel,
+    MatOption,
+    MatPrefix,
+    MatSelect,
+    FormField,
+    MatDivider,
+    MatHint,
+    MatError,
+  ],
+  template: `
+    <form
+      class="grid grid-cols-1 gap-6 md:grid-cols-4 md:gap-8"
+      (submit)="save($event)"
+    >
+      <!-- Profile section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Profile</div>
+        <div class="text-neutral-500">
+          Following information is publicly displayed, be careful!
+        </div>
+      </div>
+
+      <!-- Name -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Name</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.name"
+        />
+        <mat-icon
+          svgIcon="user"
+          matPrefix
+        ></mat-icon>
+        <mat-error>
+          @for (error of accountSettingsForm.name().errors(); track error) {
+            {{ error.message }}
+          }
+        </mat-error>
+      </mat-form-field>
+
+      <!-- Username -->
+      <mat-form-field class="col-span-full md:col-span-2 md:col-start-1">
+        <mat-label>Username</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.username"
+        />
+        <div
+          class="text-neutral-500"
+          matPrefix
+        >
+          fusetheme.com/
+        </div>
+      </mat-form-field>
+
+      <!-- Title -->
+      <mat-form-field class="col-span-full md:col-span-2 md:col-start-1">
+        <mat-label>Title</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.title"
+        />
+        <mat-icon
+          svgIcon="briefcase-business"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Company -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Company</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.company"
+        />
+        <mat-icon
+          svgIcon="building-2"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- About -->
+      <mat-form-field class="col-span-full md:col-span-3">
+        <mat-label>About</mat-label>
+        <textarea
+          matInput
+          cdkTextareaAutosize
+          [formField]="accountSettingsForm.about"
+          [cdkAutosizeMinRows]="4"
+          [cdkAutosizeMaxRows]="6"
+        ></textarea>
+        <mat-hint>
+          Brief description for your profile. Basic HTML and Emoji are allowed.
+        </mat-hint>
+      </mat-form-field>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Personal information section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Personal Information</div>
+        <div class="text-neutral-500">
+          Communication details in case we want to connect with you. These will
+          be kept private.
+        </div>
+      </div>
+
+      <!-- Email -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Email</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.email"
+        />
+        <mat-icon
+          svgIcon="mail"
+          matPrefix
+        ></mat-icon>
+        <mat-error>
+          @for (error of accountSettingsForm.email().errors(); track error) {
+            {{ error.message }}
+          }
+        </mat-error>
+      </mat-form-field>
+
+      <!-- Phone -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Phone</mat-label>
+        <input
+          matInput
+          [formField]="accountSettingsForm.phone"
+        />
+        <mat-icon
+          svgIcon="phone"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Country -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Country</mat-label>
+        <mat-select [formField]="accountSettingsForm.country">
+          <mat-option [value]="'usa'">United States</mat-option>
+          <mat-option [value]="'canada'">Canada</mat-option>
+          <mat-option [value]="'mexico'">Mexico</mat-option>
+          <mat-option [value]="'france'">France</mat-option>
+          <mat-option [value]="'germany'">Germany</mat-option>
+          <mat-option [value]="'italy'">Italy</mat-option>
+        </mat-select>
+        <mat-icon
+          svgIcon="map-pin"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Language -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Language</mat-label>
+        <mat-select [formField]="accountSettingsForm.language">
+          <mat-option [value]="'english'">English</mat-option>
+          <mat-option [value]="'french'">French</mat-option>
+          <mat-option [value]="'spanish'">Spanish</mat-option>
+          <mat-option [value]="'german'">German</mat-option>
+          <mat-option [value]="'italian'">Italian</mat-option>
+        </mat-select>
+        <mat-icon
+          svgIcon="globe"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Actions -->
+      <div class="col-span-full flex items-center justify-end gap-x-3">
+        <button
+          type="button"
+          matButton="outlined"
+        >
+          Cancel
+        </button>
+        <button matButton="filled">Save</button>
+      </div>
+    </form>
+  `,
+})
+export default class AccountSettings {
+  // State
+  protected accountSettingsModel = signal({
+    name: 'CRUDForge User',
+    username: 'crudforge',
+    title: 'CRUDForge Developer',
+    company: 'CRUDForge',
+    about:
+      "Hey! I'm a developer using CRUDForge to generate high quality Angular applications.",
+    email: 'demo@crudforge.com',
+    phone: '121-490-33-12',
+    country: 'usa',
+    language: 'english',
+  });
+  protected accountSettingsForm = form(this.accountSettingsModel, (schema) => {
+    required(schema.name, { message: 'Name is required' });
+
+    required(schema.email, { message: 'Email is required' });
+    email(schema.email, { message: 'Invalid email address' });
+  });
+
+  save(event: Event) {
+    event.preventDefault();
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/settings/features/notifications.ts

@@ -0,0 +1,134 @@
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { form, FormField } from '@angular/forms/signals';
+import { MatButton } from '@angular/material/button';
+import { MatDivider } from '@angular/material/list';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+
+@Component({
+  selector: 'notifications-settings',
+  imports: [FormsModule, MatButton, MatDivider, MatSlideToggle, FormField],
+  template: `
+    <form
+      class="grid grid-cols-1 gap-6 md:grid-cols-4 md:gap-8"
+      (submit)="save($event)"
+    >
+      <!-- Alerts section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Alerts</div>
+      </div>
+
+      <!-- Communication -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="notificationsSettingsForm.communication"
+      >
+        <div class="ml-2 flex flex-col">
+          <div class="font-medium">Communication</div>
+          <div class="text-sm text-neutral-500">
+            Get news, announcements, and product updates.
+          </div>
+        </div>
+      </mat-slide-toggle>
+
+      <!-- Security -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="notificationsSettingsForm.security"
+      >
+        <div class="ml-2 flex flex-col">
+          <div class="font-medium">Security</div>
+          <div class="text-sm text-neutral-500">
+            Get important notifications about your account security.
+          </div>
+        </div>
+      </mat-slide-toggle>
+
+      <!-- Meetups -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="notificationsSettingsForm.meetups"
+      >
+        <div class="ml-2 flex flex-col">
+          <div class="font-medium">Meetups</div>
+          <div class="text-sm text-neutral-500">
+            Get an email when a Meetup is posted close to my location.
+          </div>
+        </div>
+      </mat-slide-toggle>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Account activity section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Email me when:</div>
+      </div>
+
+      <!-- Comments -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="notificationsSettingsForm.comments"
+      >
+        <div class="ml-2 flex flex-col">
+          someone comments on one of my items
+        </div>
+      </mat-slide-toggle>
+
+      <!-- Mention -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="notificationsSettingsForm.mention"
+      >
+        <div class="ml-2 flex flex-col">someone mentions me</div>
+      </mat-slide-toggle>
+
+      <!-- Follow -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="notificationsSettingsForm.follow"
+      >
+        <div class="ml-2 flex flex-col">someone follows me</div>
+      </mat-slide-toggle>
+
+      <!-- Inquiry -->
+      <mat-slide-toggle
+        class="col-span-full"
+        [formField]="notificationsSettingsForm.inquiry"
+      >
+        <div class="ml-2 flex flex-col">someone replies to my job posting</div>
+      </mat-slide-toggle>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Actions -->
+      <div class="col-span-full flex items-center justify-end gap-x-4">
+        <button
+          type="button"
+          matButton="outlined"
+        >
+          Cancel
+        </button>
+        <button matButton="filled">Save</button>
+      </div>
+    </form>
+  `,
+})
+export default class NotificationsSettings {
+  // State
+  protected notificationsSettingsModel = signal({
+    communication: true,
+    security: true,
+    meetups: false,
+    comments: false,
+    mention: true,
+    follow: true,
+    inquiry: true,
+  });
+  protected notificationsSettingsForm = form(this.notificationsSettingsModel);
+
+  save(event: Event) {
+    event.preventDefault();
+  }
+}

package/fuse-starter-pack/fuse-v21.1/src/app/domains/admin/modules/extras/settings/features/plan-and-billing.ts

@@ -0,0 +1,238 @@
+import { CurrencyPipe } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { form, FormField } from '@angular/forms/signals';
+import { MatButton } from '@angular/material/button';
+import { MatCard } from '@angular/material/card';
+import { MatOption } from '@angular/material/core';
+import { MatDivider } from '@angular/material/divider';
+import { MatIcon } from '@angular/material/icon';
+import {
+  MatFormField,
+  MatInput,
+  MatLabel,
+  MatPrefix,
+} from '@angular/material/input';
+import { MatRadioButton, MatRadioGroup } from '@angular/material/radio';
+import { MatSelect } from '@angular/material/select';
+
+@Component({
+  selector: 'plan-and-billing-settings',
+  imports: [
+    CurrencyPipe,
+    FormsModule,
+    MatButton,
+    MatFormField,
+    MatIcon,
+    MatInput,
+    MatLabel,
+    MatOption,
+    MatPrefix,
+    MatRadioButton,
+    MatRadioGroup,
+    MatSelect,
+    FormField,
+    MatCard,
+    MatDivider,
+  ],
+  template: `
+    <form
+      class="grid grid-cols-1 gap-6 md:grid-cols-4 md:gap-8"
+      (submit)="save($event)"
+    >
+      <!-- Plan section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Change your plan</div>
+        <div class="text-neutral-500">
+          Upgrade or downgrade your current plan.
+        </div>
+      </div>
+
+      <div class="col-span-full">
+        <!-- Plans -->
+        <mat-radio-group
+          class="pointer-events-none invisible absolute size-0 opacity-0"
+          [formField]="planAndBillingSettingsForm.plan"
+          #planRadioGroup="matRadioGroup"
+        >
+          @for (plan of plans; track plan.value) {
+            <mat-radio-button [value]="plan.value"></mat-radio-button>
+          }
+        </mat-radio-group>
+        <div class="grid grid-cols-1 gap-3 md:grid-cols-3">
+          @for (plan of plans; track plan.value) {
+            <mat-card
+              appearance="outlined"
+              class="relative flex cursor-pointer flex-col items-start justify-start p-4"
+              tabindex="0"
+              [class.border-primary-600]="planRadioGroup.value === plan.value"
+              [class.bg-primary-500/5]="planRadioGroup.value === plan.value"
+              (pointerdown)="planRadioGroup.value = plan.value"
+            >
+              @if (planRadioGroup.value === plan.value) {
+                <mat-icon
+                  class="absolute top-3 right-3 size-6 text-primary-500"
+                  svgIcon="circle-check"
+                ></mat-icon>
+              }
+              <div class="font-semibold">{{ plan.label }}</div>
+              <div class="text-neutral-500">
+                {{ plan.details }}
+              </div>
+
+              <div class="mt-4 font-medium md:mt-6">
+                <span>{{
+                  plan.price | currency: 'USD' : 'symbol' : '1.0'
+                }}</span>
+                <span class="text-neutral-500"> / month</span>
+              </div>
+            </mat-card>
+          }
+        </div>
+      </div>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Payment details section -->
+      <div class="col-span-full">
+        <div class="text-lg font-medium">Payment Details</div>
+        <div class="text-neutral-500">
+          Update your billing information. Make sure to set your location
+          correctly as it could affect your tax rates.
+        </div>
+      </div>
+
+      <!-- Card holder -->
+      <mat-form-field class="col-span-full">
+        <mat-label>Card holder</mat-label>
+        <input
+          matInput
+          [formField]="planAndBillingSettingsForm.cardHolder"
+        />
+        <mat-icon
+          svgIcon="user"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Card number -->
+      <mat-form-field class="col-span-full md:col-span-2">
+        <mat-label>Card number</mat-label>
+        <input
+          matInput
+          [formField]="planAndBillingSettingsForm.cardNumber"
+        />
+        <mat-icon
+          svgIcon="credit-card"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Card expiration -->
+      <mat-form-field class="col-span-full md:col-span-1">
+        <mat-label>Expiration date</mat-label>
+        <input
+          matInput
+          [formField]="planAndBillingSettingsForm.cardExpiration"
+          [placeholder]="'MM / YY'"
+        />
+        <mat-icon
+          svgIcon="calendar"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Card CVC -->
+      <mat-form-field class="col-span-full md:col-span-1">
+        <mat-label>CVC</mat-label>
+        <input
+          matInput
+          [formField]="planAndBillingSettingsForm.cardCVC"
+        />
+        <mat-icon
+          svgIcon="lock-keyhole"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Country -->
+      <mat-form-field class="col-span-full md:col-span-3">
+        <mat-label>Country</mat-label>
+        <mat-select [formField]="planAndBillingSettingsForm.country">
+          <mat-option [value]="'usa'">United States</mat-option>
+          <mat-option [value]="'canada'">Canada</mat-option>
+          <mat-option [value]="'mexico'">Mexico</mat-option>
+          <mat-option [value]="'france'">France</mat-option>
+          <mat-option [value]="'germany'">Germany</mat-option>
+          <mat-option [value]="'italy'">Italy</mat-option>
+        </mat-select>
+        <mat-icon
+          svgIcon="map-pin"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- ZIP -->
+      <mat-form-field class="col-span-full md:col-span-1">
+        <mat-label>ZIP / Postal code</mat-label>
+        <input matInput />
+        <mat-icon
+          svgIcon="hash"
+          matPrefix
+        ></mat-icon>
+      </mat-form-field>
+
+      <!-- Divider -->
+      <mat-divider class="col-span-full my-4" />
+
+      <!-- Actions -->
+      <div class="col-span-full flex items-center justify-end gap-x-4">
+        <button
+          type="button"
+          matButton="outlined"
+        >
+          Cancel
+        </button>
+        <button matButton="filled">Save</button>
+      </div>
+    </form>
+  `,
+})
+export default class PlanAndBillingSettings {
+  // State
+  protected planAndBillingSettingsModel = signal({
+    plan: 'team',
+    cardHolder: 'Brian Hughes',
+    cardNumber: '',
+    cardExpiration: '',
+    cardCVC: '',
+    country: 'usa',
+    zip: '',
+  });
+  protected planAndBillingSettingsForm = form(this.planAndBillingSettingsModel);
+  protected plans = [
+    {
+      value: 'basic',
+      label: 'BASIC',
+      details: 'Starter plan for individuals.',
+      price: '10',
+    },
+    {
+      value: 'team',
+      label: 'TEAM',
+      details: 'Collaborate up to 10 people.',
+      price: '20',
+    },
+    {
+      value: 'enterprise',
+      label: 'ENTERPRISE',
+      details: 'For bigger businesses.',
+      price: '40',
+    },
+  ];
+
+  save(event: Event) {
+    event.preventDefault();
+  }
+}