@masterteam/form-builder 0.0.2 → 0.0.4

package/src/lib/fb-section/fb-section.html

@@ -1,130 +0,0 @@
-<ng-container *transloco="let t; prefix: 'formBuilder'">
-  <div class="flex flex-col">
-    <div
-      class="flex justify-between items-center bg-primary text-primary-contrast p-2 rounded-xl"
-    >
-      <mt-button
-        size="small"
-        icon="arrow.chevron-down"
-        class="transition-[rotate]"
-        [class.rotate-180]="expanded()"
-        (onClick)="toggleExpanded()"
-      ></mt-button>
-      <span class="font-bold">
-        {{ sectionName() }}
-      </span>
-      <div class="flex gap-2">
-        <mt-button
-          size="small"
-          icon="general.edit-02"
-          [tooltip]="t('edit-section')"
-          (onClick)="editSection($event)"
-        ></mt-button>
-      </div>
-    </div>
-    @if (expanded()) {
-      <div
-        cdkDropList
-        [id]="section().id"
-        cdkDropListOrientation="mixed"
-        [cdkDropListData]="fields()"
-        (cdkDropListDropped)="onDrop($event)"
-        class="grid grid-cols-12 gap-4 relative py-4"
-        [class.min-h-27]="fields().length === 0"
-      >
-        @for (field of fields(); track field.id) {
-          <div
-            cdkDrag
-            [cdkDragData]="field"
-            [cdkDragDisabled]="field._pending || field._deleting"
-            [class]="
-              getFieldColSpan(field) + ' cursor-grab active:cursor-grabbing'
-            "
-          >
-            <div
-              *cdkDragPlaceholder
-              [class]="
-                'h-full min-h-27 bg-black/10 rounded-2xl ' +
-                getFieldColSpan(field)
-              "
-            ></div>
-            @if (field._pending) {
-              <!-- Skeleton for pending field -->
-              <mt-card class="h-full animate-pulse">
-                <div class="flex gap-2">
-                  <div class="flex-1 space-y-3">
-                    <div class="h-4 bg-surface-200 rounded w-1/3"></div>
-                    <div class="h-10 bg-surface-200 rounded"></div>
-                  </div>
-                  <div class="flex flex-col gap-1">
-                    <div class="h-8 w-8 bg-surface-200 rounded"></div>
-                    <div class="h-8 w-8 bg-surface-200 rounded"></div>
-                  </div>
-                </div>
-              </mt-card>
-            } @else {
-              <mt-card
-                class="h-full relative"
-                [class.opacity-50]="field._deleting"
-              >
-                @if (field._deleting) {
-                  <div
-                    class="absolute inset-0 flex items-center justify-center bg-white/50 rounded-xl z-10"
-                  >
-                    <div
-                      class="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full"
-                    ></div>
-                  </div>
-                }
-                <div class="flex gap-2">
-                  <div class="flex-1">
-                    <form [formGroup]="getFormGroup(field)">
-                      <mt-dynamic-field
-                        [fieldName]="field.name"
-                        [fieldConfig]="{
-                          label: field.name,
-                          readonly: true,
-                          type: getFieldType(field),
-                        }"
-                      />
-                    </form>
-                  </div>
-                  <div class="flex flex-col gap-1">
-                    <mt-button
-                      size="small"
-                      icon="general.settings-01"
-                      [tooltip]="t('edit-field')"
-                      outlined
-                      [disabled]="field._deleting"
-                      (onClick)="editField(field)"
-                    ></mt-button>
-                    <mt-button
-                      size="small"
-                      icon="general.trash-01"
-                      severity="danger"
-                      outlined
-                      [tooltip]="t('remove-field')"
-                      [disabled]="field._deleting"
-                      (onClick)="removeField($event, field)"
-                    ></mt-button>
-                  </div>
-                </div>
-              </mt-card>
-            }
-          </div>
-        } @empty {
-          <mt-card class="absolute inset-0 top-4 h-full" paddingless>
-            <div class="size-full p-4">
-              <div
-                class="flex justify-center items-center gap-4 h-full border-2 border-primary rounded-xl bg-primary-200 text-primary"
-              >
-                <mt-icon icon="editor.move" class="text-3xl" />
-                <span>{{ t("drag-from-the-side") }}</span>
-              </div>
-            </div>
-          </mt-card>
-        }
-      </div>
-    }
-  </div>
-</ng-container>

package/src/lib/fb-section/fb-section.ts

@@ -1,211 +0,0 @@
-import {
-  Component,
-  computed,
-  inject,
-  input,
-  output,
-  signal,
-  effect,
-} from '@angular/core';
-import type {
-  EnrichedFormField,
-  EnrichedFormSection,
-} from '../../store/form-builder/form-builder.model';
-import { ConfirmationService } from '@masterteam/components/confirmation';
-import { ModalService } from '@masterteam/components/modal';
-import { TranslocoService } from '@jsverse/transloco';
-import { Button } from '@masterteam/components/button';
-import { Card } from '@masterteam/components/card';
-import {
-  CdkDrag,
-  CdkDragDrop,
-  CdkDragPlaceholder,
-  CdkDropList,
-} from '@angular/cdk/drag-drop';
-import { TranslocoDirective } from '@jsverse/transloco';
-import { DynamicField } from '@masterteam/forms/dynamic-field';
-import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
-import { Icon } from '@masterteam/icons';
-import { FormBuilderFacade } from '../../store/form-builder';
-import { FBFieldForm } from '../fb-field-form/fb-field-form';
-import { FBSectionForm } from '../fb-section-form/fb-section-form';
-
-@Component({
-  selector: 'mt-fb-section',
-  standalone: true,
-  imports: [
-    Button,
-    Card,
-    Icon,
-    CdkDrag,
-    CdkDropList,
-    CdkDragPlaceholder,
-    TranslocoDirective,
-    DynamicField,
-    ReactiveFormsModule,
-  ],
-  templateUrl: './fb-section.html',
-})
-export class FBSection {
-  private readonly confirmationService = inject(ConfirmationService);
-  private readonly modalService = inject(ModalService);
-  private readonly translocoService = inject(TranslocoService);
-  private readonly facade = inject(FormBuilderFacade);
-
-  // Inputs
-  readonly section = input.required<EnrichedFormSection>();
-  readonly sectionsCount = input<number>(0);
-  /** All sections - used to get available fields for condition formulas */
-  readonly allSections = input<EnrichedFormSection[]>([]);
-
-  // Outputs - only keep drag/drop since it needs coordination with parent drop list group
-  readonly onFieldDrop = output<CdkDragDrop<EnrichedFormField[]>>();
-
-  // Computed
-  readonly sectionName = computed(() => {
-    const lang = document.documentElement.lang as 'en' | 'ar';
-    const section = this.section();
-    return section.name[lang] ?? section.name['en'];
-  });
-
-  readonly fields = computed(() => this.section().fields);
-
-  // UI State
-  readonly expanded = signal(true);
-
-  // Form groups cache for dynamic fields
-  private readonly formGroupsCache = new Map<string, FormGroup>();
-
-  constructor() {
-    // Cleanup stale form groups when fields change
-    effect(() => {
-      const currentIds = new Set(this.fields().map((f) => f.id));
-      for (const id of this.formGroupsCache.keys()) {
-        if (!currentIds.has(id)) {
-          this.formGroupsCache.delete(id);
-        }
-      }
-    });
-  }
-
-  getFormGroup(field: EnrichedFormField): FormGroup {
-    let fg = this.formGroupsCache.get(field.id);
-
-    if (fg) {
-      // Check if field name changed
-      if (!fg.contains(field.name)) {
-        const oldKey = Object.keys(fg.controls)[0];
-        const value = oldKey ? fg.get(oldKey)?.value : field.data?.data;
-
-        fg = new FormGroup({
-          [field.name]: new FormControl(value),
-        });
-        this.formGroupsCache.set(field.id, fg);
-      }
-    } else {
-      fg = new FormGroup({
-        [field.name]: new FormControl(field.data?.data),
-      });
-      this.formGroupsCache.set(field.id, fg);
-    }
-
-    return fg;
-  }
-
-  toggleExpanded(): void {
-    this.expanded.update((v) => !v);
-  }
-
-  onDrop(event: CdkDragDrop<EnrichedFormField[]>): void {
-    this.onFieldDrop.emit(event);
-  }
-
-  editSection(event: Event): void {
-    event.stopPropagation();
-    const section = this.section();
-
-    this.modalService.openModal(FBSectionForm, 'drawer', {
-      header: this.translocoService.translate('formBuilder.edit-section'),
-      height: '20vw',
-      styleClass: '!w-100 !absolute  ',
-      position: 'end',
-      appendTo: '#page-content',
-      modal: true,
-      dismissible: true,
-
-      inputValues: {
-        sectionId: section.id,
-        initialData: section.name,
-        sectionsCount: this.sectionsCount(),
-      },
-    });
-  }
-
-  removeField(event: Event, field: EnrichedFormField): void {
-    this.confirmationService.confirmDelete({
-      event,
-      type: 'popup',
-      accept: () => {
-        this.facade.deleteField(this.section().id, field.id);
-      },
-    });
-  }
-
-  editField(field: EnrichedFormField): void {
-    this.modalService.openModal(FBFieldForm, 'drawer', {
-      header: this.translocoService.translate('formBuilder.field-settings'),
-      height: '20vw',
-      styleClass: '!w-100 !absolute !shadow-none',
-      position: 'end',
-      modal: true,
-      dismissible: true,
-
-      appendTo: '#page-content',
-      inputValues: {
-        initialData: field,
-        sectionId: this.section().id,
-        allSections: this.allSections(),
-      },
-    });
-  }
-
-  getFieldColSpan(field: EnrichedFormField): string {
-    switch (field.width) {
-      case '100':
-        return 'col-span-12';
-      case '50':
-        return 'col-span-6';
-      case '25':
-        return 'col-span-3';
-      default:
-        return 'col-span-12';
-    }
-  }
-
-  getFieldType(field: EnrichedFormField): string {
-    const typeMap: Record<string, string> = {
-      User: 'select',
-      Text: 'text',
-      LongText: 'editor-field',
-      Percentage: 'slider',
-      Date: 'date',
-      Currency: 'text',
-      Number: 'number',
-      Lookup: 'select',
-      LookupMultiSelect: 'select',
-      Checkbox: 'toggle',
-      InternalModule: 'select',
-      DynamicList: 'select',
-      API: 'select',
-      Time: 'date',
-      Status: 'select',
-      Attachment: 'attachment',
-      EditableListView: 'actionableTable',
-      LookupLog: 'actionableTable',
-      LookupMatrix: 'select',
-      Location: 'select',
-    };
-
-    return typeMap[field.type] ?? 'text';
-  }
-}

package/src/lib/fb-section-form/fb-section-form.html

@@ -1,38 +0,0 @@
-<ng-container *transloco="let t; prefix: 'formBuilder'">
-  <div [class]="[modalService.contentClass, 'p-4', 'overflow-y-hidden!']">
-    <div class="mt-4 h-full overflow-y-auto pb-10">
-      <mt-dynamic-form [formConfig]="formConfig" [formControl]="formControl">
-      </mt-dynamic-form>
-    </div>
-  </div>
-
-  <div [class]="modalService.footerClass">
-    @if (sectionId()) {
-      <mt-button
-        [tooltip]="t('delete')"
-        severity="danger"
-        outlined
-        icon="general.trash-01"
-        [loading]="deleting()"
-        [disabled]="submitting()"
-        (onClick)="onDelete($event)"
-        class="me-auto"
-      ></mt-button>
-    }
-    <mt-button
-      [label]="t('cancel')"
-      severity="secondary"
-      [disabled]="submitting() || deleting()"
-      (onClick)="onCancel()"
-    >
-    </mt-button>
-    <mt-button
-      [disabled]="!formControl.valid || deleting()"
-      [label]="t('save')"
-      severity="primary"
-      [loading]="submitting()"
-      (onClick)="onSave()"
-    >
-    </mt-button>
-  </div>
-</ng-container>

package/src/lib/fb-section-form/fb-section-form.ts

@@ -1,128 +0,0 @@
-import { Component, effect, inject, input, signal } from '@angular/core';
-import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import { ReactiveFormsModule, FormControl } from '@angular/forms';
-import { DynamicForm } from '@masterteam/forms/dynamic-form';
-import { DynamicFormConfig } from '@masterteam/components';
-import { Button } from '@masterteam/components/button';
-import { ModalService } from '@masterteam/components/modal';
-import { ModalRef } from '@masterteam/components/dialog';
-import { ConfirmationService } from '@masterteam/components/confirmation';
-import { FormBuilderFacade } from '../../store/form-builder';
-
-@Component({
-  selector: 'mt-fb-section-form',
-  standalone: true,
-  imports: [TranslocoDirective, ReactiveFormsModule, DynamicForm, Button],
-  templateUrl: './fb-section-form.html',
-})
-export class FBSectionForm {
-  private readonly transloco = inject(TranslocoService);
-  protected readonly modalService = inject(ModalService);
-  private readonly ref = inject(ModalRef);
-  private readonly confirmationService = inject(ConfirmationService);
-  private readonly facade = inject(FormBuilderFacade);
-
-  // Inputs
-  readonly sectionId = input<string | null>(null);
-  readonly initialData = input<{ ar: string; en: string } | null>(null);
-  readonly sectionsCount = input<number>(0);
-
-  // UI State
-  readonly submitting = signal(false);
-  readonly deleting = signal(false);
-
-  // Form
-  readonly formControl = new FormControl();
-  readonly formConfig: DynamicFormConfig = {
-    sections: [
-      {
-        key: 'section-form',
-        type: 'none',
-        columns: 12,
-        order: 1,
-        fields: [
-          {
-            key: 'name-ar',
-            label: this.transloco.translate('formBuilder.name-ar'),
-            type: 'text',
-            placeholder: this.transloco.translate('formBuilder.name-ar'),
-            colSpan: 12,
-            order: 1,
-          },
-          {
-            key: 'name-en',
-            label: this.transloco.translate('formBuilder.name-en'),
-            type: 'text',
-            placeholder: this.transloco.translate('formBuilder.name-en'),
-            colSpan: 12,
-            order: 2,
-          },
-        ],
-      },
-    ],
-  };
-
-  constructor() {
-    effect(() => {
-      const data = this.initialData();
-      if (data) {
-        this.formControl.patchValue({
-          'name-ar': data.ar,
-          'name-en': data.en,
-        });
-      }
-    });
-  }
-
-  onSave(): void {
-    if (this.formControl.invalid) return;
-
-    const formValue = this.formControl.value;
-    const payload = {
-      name: {
-        ar: formValue['name-ar'],
-        en: formValue['name-en'],
-      },
-    };
-
-    this.submitting.set(true);
-    const sectionId = this.sectionId();
-
-    if (sectionId) {
-      // Update existing section
-      this.facade.updateSection(sectionId, payload).subscribe({
-        next: () => this.ref.close(true),
-        error: () => this.submitting.set(false),
-      });
-    } else {
-      // Create new section
-      this.facade
-        .addSection({ ...payload, order: this.sectionsCount() })
-        .subscribe({
-          next: () => this.ref.close(true),
-          error: () => this.submitting.set(false),
-        });
-    }
-  }
-
-  onCancel(): void {
-    this.ref.close(false);
-  }
-
-  onDelete(event: Event): void {
-    const sectionId = this.sectionId();
-    if (!sectionId) return;
-
-    this.confirmationService.confirmDelete({
-      event,
-      type: 'popup',
-      accept: () => {
-        this.deleting.set(true);
-        this.facade.deleteSection(sectionId).subscribe({
-          next: () => this.ref.close(true),
-          error: () => this.deleting.set(false),
-        });
-      },
-    });
-  }
-}

package/src/lib/form-builder.html

@@ -1,166 +0,0 @@
-<ng-container *transloco="let t; prefix: 'formBuilder'">
-  <div class="flex gap-4 h-full w-full overflow-hidden" cdkDropListGroup>
-    <!-- Properties Sidebar -->
-    <mt-card
-      class="z-1 w-1/5 min-w-xs shrink-0 h-full flex flex-col overflow-hidden"
-    >
-      <ng-template #headless>
-        <!-- Header -->
-        <div class="flex items-center justify-between px-4 pt-5">
-          <h3 class="text-xl font-semibold">{{ t("form-elements") }}</h3>
-        </div>
-
-        @if (properties().length === 0) {
-          @if (isLoading()) {
-            <!-- Properties Loading Skeleton -->
-            <div class="p-4 space-y-3">
-              <p-skeleton height="2rem" styleClass="mb-4" />
-              @for (i of [1, 2, 3, 4, 5, 6]; track i) {
-                <p-skeleton height="3rem" styleClass="rounded-lg" />
-              }
-            </div>
-          } @else {
-            <!-- No Properties State -->
-            <div class="flex-1 flex items-center justify-center p-4">
-              <div class="text-center text-muted-color">
-                <p class="text-sm">{{ t("no-properties") }}</p>
-              </div>
-            </div>
-          }
-        } @else {
-          <!-- Tabs using PrimeNG -->
-          <p-tabs
-            [(value)]="activeTab"
-            styleClass="structure-tabs"
-            class="flex flex-1 flex-col min-h-0"
-          >
-            <p-tablist class="shrink-0">
-              @for (tab of availableTabs(); track tab.id) {
-                <p-tab [value]="tab.id">{{ tab.title | titlecase }}</p-tab>
-              }
-            </p-tablist>
-            <p-tabpanels class="!bg-transparent !p-0 flex-1 overflow-hidden">
-              @for (tab of availableTabs(); track tab.id) {
-                <p-tabpanel [value]="tab.id" class="h-full">
-                  <!-- Node List -->
-                  <div
-                    class="space-y-1 p-4 [&_.cdk-drag-placeholder]:hidden h-full overflow-y-auto"
-                    [id]="'toolbox-' + tab.id"
-                    cdkDropList
-                    cdkDropListSortingDisabled
-                    [cdkDropListData]="tab.properties"
-                    [cdkDropListEnterPredicate]="noReturnPredicate"
-                  >
-                    @for (node of tab.properties; track $index) {
-                      <div
-                        cdkDrag
-                        [cdkDragData]="node"
-                        class="group cursor-move select-none relative flex items-center gap-3 py-3 px-4 rounded-lg border border-dashed border-surface-300 hover:border-solid hover:bg-emphasis dark:border-surface-500 transition-colors"
-                      >
-                        <div
-                          *cdkDragPlaceholder
-                          class="col-span-12 min-h-27 w-full rounded-2xl bg-black/10 z-1"
-                        ></div>
-                        <span class="flex-1 text-base font-medium">{{
-                          node.name
-                        }}</span>
-                      </div>
-                    }
-
-                    @if (tab.properties.length === 0) {
-                      <div class="py-8 text-center text-muted-color">
-                        <p class="text-sm">
-                          All {{ tab.title }} items are in use
-                        </p>
-                      </div>
-                    }
-                  </div>
-                </p-tabpanel>
-              }
-            </p-tabpanels>
-          </p-tabs>
-        }
-      </ng-template>
-    </mt-card>
-
-    <!-- Main Canvas Area -->
-    <div class="flex flex-col gap-4 flex-1 w-full h-full overflow-y-auto">
-      <mt-card>
-        <ng-template #headless>
-          <div class="p-4 flex items-center gap-2">
-            <mt-button
-              icon="layout.layout-top"
-              [label]="t('add-section')"
-              (onClick)="addSection()"
-              [disabled]="isLoading()"
-            ></mt-button>
-            <mt-button
-              icon="general.eye"
-              [label]="t('preview')"
-              (onClick)="openPreview()"
-              [disabled]="isLoading()"
-            ></mt-button>
-            <mt-button
-              icon="finance.credit-card-plus"
-              [label]="t('reset')"
-              (onClick)="resetFormConfiguration()"
-              [disabled]="isLoading()"
-            ></mt-button>
-          </div>
-        </ng-template>
-      </mt-card>
-
-      @if (isLoading()) {
-        <!-- Form Loading Skeleton -->
-        @for (i of [1, 2]; track i) {
-          <mt-card>
-            <ng-template #headless>
-              <div class="p-4 space-y-4">
-                <!-- Section header skeleton -->
-                <div class="flex items-center justify-between">
-                  <p-skeleton width="10rem" height="1.5rem" />
-                  <div class="flex gap-2">
-                    <p-skeleton width="2rem" height="2rem" shape="circle" />
-                    <p-skeleton width="2rem" height="2rem" shape="circle" />
-                  </div>
-                </div>
-                <!-- Fields skeleton -->
-                <div class="grid grid-cols-12 gap-4">
-                  <div class="col-span-6">
-                    <p-skeleton height="4rem" styleClass="rounded-lg" />
-                  </div>
-                  <div class="col-span-6">
-                    <p-skeleton height="4rem" styleClass="rounded-lg" />
-                  </div>
-                  <div class="col-span-12">
-                    <p-skeleton height="4rem" styleClass="rounded-lg" />
-                  </div>
-                </div>
-              </div>
-            </ng-template>
-          </mt-card>
-        }
-      } @else {
-        @for (section of enrichedSections(); track section.id) {
-          <mt-fb-section
-            [section]="section"
-            [sectionsCount]="enrichedSections().length"
-            [allSections]="enrichedSections()"
-            (onFieldDrop)="drop($event)"
-          >
-          </mt-fb-section>
-        } @empty {
-          <mt-card>
-            <div class="h-27 p-4">
-              <div
-                class="flex justify-center items-center gap-4 h-full border-2 border-primary rounded-xl bg-primary-200 text-primary"
-              >
-                <span>{{ t("no-section") }}</span>
-              </div>
-            </div>
-          </mt-card>
-        }
-      }
-    </div>
-  </div>
-</ng-container>