@masterteam/form-builder 0.0.1 → 0.0.3

package/src/lib/fb-field-conditions/fb-field-conditions.ts

@@ -1,123 +0,0 @@
-import {
-  Component,
-  computed,
-  inject,
-  input,
-  OnInit,
-  signal,
-  viewChild,
-} from '@angular/core';
-import { TranslocoDirective } from '@jsverse/transloco';
-import { ReactiveFormsModule, FormControl } from '@angular/forms';
-import { Button } from '@masterteam/components/button';
-import { ModalService } from '@masterteam/components/modal';
-import { ModalRef } from '@masterteam/components/dialog';
-import {
-  FormulaEditor,
-  FormulaToolbar,
-  SmartBlock,
-  FormulaToken,
-} from '@masterteam/components/formula';
-import {
-  CONDITION_FUNCTION_CATEGORIES,
-  CONDITION_OPERATORS,
-} from './condition-constants';
-
-/**
- * Field property for condition formula
- */
-export interface ConditionFieldProperty {
-  /** Unique key (used in formula as @key) */
-  key: string;
-  /** Display name */
-  name: string;
-  /** Field type for hint */
-  type?: string;
-}
-
-/**
- * Field Conditions Dialog
- *
- * Allows users to define conditional display formulas for form fields.
- * Uses FormulaToolbar + FormulaEditor directly for a visual formula editing experience.
- */
-@Component({
-  selector: 'mt-fb-field-conditions',
-  standalone: true,
-  imports: [
-    TranslocoDirective,
-    ReactiveFormsModule,
-    Button,
-    FormulaToolbar,
-    FormulaEditor,
-  ],
-  templateUrl: './fb-field-conditions.html',
-})
-export class FBFieldConditions implements OnInit {
-  protected readonly modalService = inject(ModalService);
-  private readonly ref = inject(ModalRef);
-
-  // Inputs
-  /** Initial formula (JSON string from backend) */
-  readonly initialFormula = input<string>('');
-
-  /** Available fields from the form builder (other fields that can be referenced) */
-  readonly availableFields = input<ConditionFieldProperty[]>([]);
-
-  // UI State
-  readonly submitting = signal(false);
-
-  // Form control for the formula editor (tokens array)
-  readonly formulaControl = new FormControl<FormulaToken[]>([]);
-
-  // View child for the editor
-  private readonly editorRef = viewChild<FormulaEditor>('editor');
-
-  // Condition-specific functions and operators
-  readonly functionCategories = CONDITION_FUNCTION_CATEGORIES;
-  readonly operators = CONDITION_OPERATORS;
-
-  /** Extract property keys for toolbar */
-  readonly propertyKeys = computed(() =>
-    this.availableFields().map((f) => f.key),
-  );
-
-  /** Toolbar labels */
-  readonly toolbarLabels = {
-    functions: 'Functions',
-    properties: 'Fields',
-    operators: 'Operators',
-    noPropertiesAvailable: 'No fields available',
-  };
-
-  ngOnInit(): void {
-    // Parse JSON string to tokens
-    const formula = this.initialFormula();
-    if (formula) {
-      try {
-        const tokens = JSON.parse(formula) as FormulaToken[];
-        this.formulaControl.patchValue(tokens);
-      } catch {
-        // Invalid JSON, start with empty
-      }
-    }
-  }
-
-  /** Handle block insert from toolbar */
-  onBlockInsert(block: SmartBlock): void {
-    const editor = this.editorRef();
-    if (editor) {
-      editor.addBlock(block);
-    }
-  }
-
-  onSave(): void {
-    const tokens = this.formulaControl.value ?? [];
-    const formula = tokens.length > 0 ? JSON.stringify(tokens) : '';
-    this.ref.close({ saved: true, conditionalDisplayFormula: formula });
-  }
-
-  onCancel(): void {
-    this.ref.close({ saved: false });
-  }
-}

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

@@ -1,59 +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 flex flex-col gap-4">
-      <mt-dynamic-form [formConfig]="formConfig" [formControl]="formControl">
-      </mt-dynamic-form>
-
-      <!-- Show/Hide Toggle with Set Conditions -->
-      <mt-toggle-field
-        toggleShape="card"
-        [label]="t('show-hide')"
-        [descriptionCard]="t('show-hide-description')"
-        icon="general.eye"
-        [formControl]="showHideControl"
-      >
-        <ng-template #toggleCardBottom>
-          @if (showHideControl.value) {
-            <div class="mt-3">
-              <mt-button
-                [label]="t('set-conditions')"
-                size="small"
-                (onClick)="onSetConditions()"
-              ></mt-button>
-            </div>
-          }
-        </ng-template>
-      </mt-toggle-field>
-    </div>
-  </div>
-
-  <div [class]="modalService.footerClass">
-    @if (initialData()) {
-      <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-field-form/fb-field-form.ts

@@ -1,249 +0,0 @@
-import {
-  Component,
-  computed,
-  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,
-  RadioCardsFieldConfig,
-} from '@masterteam/components';
-import { Button } from '@masterteam/components/button';
-import { ToggleField } from '@masterteam/components/toggle-field';
-import { ModalService } from '@masterteam/components/modal';
-import { ModalRef } from '@masterteam/components/dialog';
-import { ConfirmationService } from '@masterteam/components/confirmation';
-import type {
-  EnrichedFormField,
-  EnrichedFormSection,
-} from '../form-builder.model';
-import { FormBuilderFacade } from '../../store/form-builder';
-import type { FieldWidth } from '../../store/form-builder/form-builder.model';
-import {
-  FBFieldConditions,
-  ConditionFieldProperty,
-} from '../fb-field-conditions/fb-field-conditions';
-
-@Component({
-  selector: 'mt-fb-field-form',
-  standalone: true,
-  imports: [
-    TranslocoDirective,
-    ReactiveFormsModule,
-    DynamicForm,
-    Button,
-    ToggleField,
-  ],
-  templateUrl: './fb-field-form.html',
-})
-export class FBFieldForm {
-  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>('');
-  readonly initialData = input<EnrichedFormField | null>(null);
-  /** All sections with enriched fields (to get available fields for conditions) */
-  readonly allSections = input<EnrichedFormSection[]>([]);
-
-  // UI State
-  readonly submitting = signal(false);
-  readonly deleting = signal(false);
-  readonly conditionalDisplayFormula = signal<string>('');
-  private conditionsDialogRef: any;
-
-  /**
-   * Compute available fields for condition formula
-   * Excludes the current field being edited
-   */
-  readonly availableFields = computed<ConditionFieldProperty[]>(() => {
-    const sections = this.allSections();
-    const currentField = this.initialData();
-    const fields: ConditionFieldProperty[] = [];
-
-    for (const section of sections) {
-      for (const field of section.fields) {
-        // Exclude the current field being edited
-        if (currentField && field.id === currentField.id) continue;
-
-        fields.push({
-          key: field.name,
-          name: field.name,
-          type: field.type,
-        });
-      }
-    }
-
-    return fields;
-  });
-
-  // Form
-  readonly formControl = new FormControl();
-  readonly showHideControl = new FormControl(false);
-  readonly formConfig: DynamicFormConfig = {
-    sections: [
-      {
-        key: 'section-form',
-        type: 'none',
-        columns: 12,
-        order: 1,
-        fields: [
-          {
-            key: 'isRequired',
-            label: this.transloco.translate('formBuilder.is-required'),
-            type: 'toggle',
-            toggleShape: 'card',
-            colSpan: 12,
-            order: 1,
-          },
-          {
-            key: 'hiddenInCreation',
-            label: this.transloco.translate('formBuilder.hidden-in-creation'),
-            type: 'toggle',
-            toggleShape: 'card',
-            colSpan: 12,
-            order: 2,
-          },
-          {
-            key: 'hiddenInEditForm',
-            label: this.transloco.translate('formBuilder.hidden-in-edit-form'),
-            type: 'toggle',
-            toggleShape: 'card',
-            colSpan: 12,
-            order: 3,
-          },
-          new RadioCardsFieldConfig({
-            key: 'size',
-            label: this.transloco.translate('formBuilder.size'),
-            placeholder: this.transloco.translate('formBuilder.size'),
-            options: [
-              { id: 's', name: 'S' },
-              { id: 'm', name: 'M' },
-              { id: 'l', name: 'L' },
-            ],
-            order: 4,
-            size: 'small',
-          }),
-        ],
-      },
-    ],
-  };
-
-  constructor() {
-    effect(() => {
-      const data = this.initialData();
-      if (data) {
-        const widthToSize: Record<string, string> = {
-          '25': 's',
-          '50': 'm',
-          '100': 'l',
-        };
-        this.formControl.patchValue({
-          isRequired: data.isRequired ?? false,
-          hiddenInCreation: data.hiddenInCreation ?? false,
-          hiddenInEditForm: data.hiddenInEditForm ?? false,
-          size: widthToSize[data.width] ?? 'l',
-        });
-        // Set show/hide toggle based on existing value
-        this.showHideControl.patchValue(
-          data.showConditionalDisplayFormula ?? false,
-        );
-        this.conditionalDisplayFormula.set(
-          data.conditionalDisplayFormula ?? '',
-        );
-      }
-    });
-  }
-
-  onSave(): void {
-    if (this.formControl.invalid) return;
-
-    const formValue = this.formControl.value;
-    const field = this.initialData();
-    const sectionId = this.sectionId();
-
-    if (!field || !sectionId) return;
-
-    const widthMap: Record<string, FieldWidth> = {
-      s: '25',
-      m: '50',
-      l: '100',
-    };
-
-    const payload = {
-      width: widthMap[formValue.size] ?? '100',
-      hiddenInCreation: formValue.hiddenInCreation ?? false,
-      hiddenInEditForm: formValue.hiddenInEditForm ?? false,
-      isRequired: formValue.isRequired ?? false,
-      showConditionalDisplayFormula: this.showHideControl.value ?? false,
-      conditionalDisplayFormula: this.showHideControl.value
-        ? this.conditionalDisplayFormula()
-        : null,
-    };
-
-    this.submitting.set(true);
-    this.facade.updateField(sectionId, field.id, payload).subscribe({
-      next: () => this.ref.close(true),
-      error: () => this.submitting.set(false),
-    });
-  }
-
-  onCancel(): void {
-    this.ref.close(false);
-  }
-
-  onSetConditions(): void {
-    this.conditionsDialogRef = this.modalService.openModal(
-      FBFieldConditions,
-      'drawer',
-      {
-        header: this.transloco.translate('formBuilder.set-conditions'),
-        styleClass: '!w-[calc(100%-25rem)] !absolute ',
-        position: 'start',
-        modal: false,
-        appendTo: '#page-content',
-        inputValues: {
-          initialFormula: this.conditionalDisplayFormula(),
-          availableFields: this.availableFields(),
-        },
-      },
-    );
-
-    this.conditionsDialogRef.onClose.subscribe(
-      (result: { saved: boolean; conditionalDisplayFormula?: string }) => {
-        if (result?.saved) {
-          this.conditionalDisplayFormula.set(
-            result.conditionalDisplayFormula ?? '',
-          );
-        }
-      },
-    );
-  }
-
-  onDelete(event: Event): void {
-    const field = this.initialData();
-    const sectionId = this.sectionId();
-
-    if (!field || !sectionId) return;
-
-    this.confirmationService.confirmDelete({
-      event,
-      type: 'popup',
-      accept: () => {
-        this.deleting.set(true);
-        this.facade.deleteField(sectionId, field.id).subscribe({
-          next: () => this.ref.close(true),
-          error: () => this.deleting.set(false),
-        });
-      },
-    });
-  }
-}

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

@@ -1,31 +0,0 @@
-<ng-container *transloco="let t; prefix: 'formBuilder'">
-  <div [class]="[modalService.contentClass, 'p-4', 'overflow-y-hidden!']">
-    <!-- Tabs for Create/Edit mode -->
-    <div class="flex justify-center mb-4">
-      <mt-tabs [options]="tabOptions" [(active)]="activeTab"></mt-tabs>
-    </div>
-
-    <div class="h-full overflow-y-auto pb-10">
-      @if (isLoading()) {
-        <div class="space-y-4 animate-pulse">
-          <div class="h-6 bg-surface-200 rounded w-1/3"></div>
-          <div class="h-10 bg-surface-200 rounded"></div>
-          <div class="h-10 bg-surface-200 rounded"></div>
-          <div class="h-10 bg-surface-200 rounded w-2/3"></div>
-        </div>
-      } @else if (formConfig().sections.length > 0) {
-        <mt-dynamic-form
-          [formConfig]="formConfig()"
-          [formControl]="formControl"
-        >
-        </mt-dynamic-form>
-      } @else {
-        <div
-          class="flex justify-center items-center h-64 text-muted-color text-lg"
-        >
-          {{ t("no-fields-visible") }}
-        </div>
-      }
-    </div>
-  </div>
-</ng-container>

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

@@ -1,142 +0,0 @@
-import {
-  Component,
-  computed,
-  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, DynamicFieldConfig } from '@masterteam/components';
-import { Tabs } from '@masterteam/components/tabs';
-import { ModalService } from '@masterteam/components/modal';
-import { ModalRef } from '@masterteam/components/dialog';
-import type { EnrichedFormSection } from '../form-builder.model';
-
-type PreviewMode = 'create' | 'edit';
-
-@Component({
-  selector: 'mt-fb-preview-form',
-  standalone: true,
-  imports: [TranslocoDirective, ReactiveFormsModule, DynamicForm, Tabs],
-  templateUrl: './fb-preview-form.html',
-})
-export class FBPreviewForm {
-  protected readonly modalService = inject(ModalService);
-  private readonly ref = inject(ModalRef);
-  private readonly transloco = inject(TranslocoService);
-
-  // Inputs
-  readonly sections = input<EnrichedFormSection[]>([]);
-
-  // Tab state
-  readonly activeTab = signal<PreviewMode>('create');
-  readonly isLoading = signal(false);
-  readonly tabOptions = [
-    {
-      label: this.transloco.translate('formBuilder.create-form'),
-      value: 'create',
-    },
-    { label: this.transloco.translate('formBuilder.edit-form'), value: 'edit' },
-  ];
-
-  // Form control for dynamic form
-  readonly formControl = new FormControl();
-
-  constructor() {
-    // Show skeleton briefly when tab changes to force rebuild
-    effect(() => {
-      this.activeTab(); // Track tab changes
-      this.isLoading.set(true);
-      setTimeout(() => this.isLoading.set(false), 50);
-    });
-  }
-
-  // Convert enriched sections to DynamicFormConfig based on active tab
-  readonly formConfig = computed<DynamicFormConfig>(() => {
-    const sections = this.sections();
-    const mode = this.activeTab();
-
-    return {
-      sections: sections
-        .map((section, sectionIndex) => {
-          const lang = document.documentElement.lang as 'en' | 'ar';
-          const sectionName = section.name[lang] ?? section.name['en'] ?? '';
-
-          // Filter fields based on mode
-          const visibleFields = section.fields.filter((field) => {
-            if (mode === 'create') {
-              return !field.hiddenInCreation;
-            } else {
-              return !field.hiddenInEditForm;
-            }
-          });
-
-          return {
-            key: section.id,
-            label: sectionName,
-            type: 'header' as const,
-            columns: 12,
-            order: section.order ?? sectionIndex,
-            fields: visibleFields.map((field, fieldIndex) => {
-              const colSpan = this.getColSpan(field.width);
-
-              return {
-                key: `field_${field.propertyId}`,
-                label: field.name,
-                type: this.mapFieldType(field.type),
-                colSpan,
-                order: field.order ?? fieldIndex,
-                placeholder: field.name,
-              } as DynamicFieldConfig;
-            }),
-          };
-        })
-        .filter((section) => section.fields.length > 0), // Hide empty sections
-    };
-  });
-
-  /**
-   * Map property view type to dynamic form field type
-   */
-  private mapFieldType(viewType: string): string {
-    const typeMap: Record<string, string> = {
-      text: 'text',
-      number: 'number',
-      date: 'date',
-      select: 'select',
-      multiselect: 'multiselect',
-      toggle: 'toggle',
-      checkbox: 'checkbox',
-      textarea: 'textarea',
-      editor: 'editor',
-      color: 'color',
-      slider: 'slider',
-      radio: 'radio',
-      'radio-cards': 'radio-cards',
-      upload: 'upload',
-      'user-search': 'user-search',
-    };
-
-    return typeMap[viewType?.toLowerCase()] ?? 'text';
-  }
-
-  /**
-   * Convert field width to colSpan
-   */
-  private getColSpan(width: string): number {
-    const widthMap: Record<string, number> = {
-      '25': 3,
-      '50': 6,
-      '100': 12,
-    };
-
-    return widthMap[width] ?? 12;
-  }
-
-  onClose(): void {
-    this.ref.close();
-  }
-}