@masterteam/form-builder 0.0.2 → 0.0.3

package/src/lib/form-builder.model.ts

@@ -1,27 +0,0 @@
-import type { FieldType } from '@masterteam/components';
-import type {
-  FormField as BaseFormField,
-  FormSection as BaseFormSection,
-  FieldWidth,
-  PropertyItem,
-} from '../store/form-builder/form-builder.model';
-
-export type { FieldType, FieldWidth, PropertyItem };
-
-// Re-export base types
-export type FormField = BaseFormField;
-export type FormSection = BaseFormSection;
-
-// Enriched field with UI properties (from PropertyItem)
-export interface EnrichedFormField extends BaseFormField {
-  name: string;
-  type: string;
-  data?: any;
-  _pending?: boolean; // Optimistic: field is being added
-  _deleting?: boolean; // Optimistic: field is being deleted
-}
-
-// Enriched section for UI display
-export interface EnrichedFormSection extends Omit<BaseFormSection, 'fields'> {
-  fields: EnrichedFormField[];
-}

package/src/lib/form-builder.scss

@@ -1,20 +0,0 @@
-// Drag & Drop Cursor Styles
-.cdk-drag {
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-.cdk-drag-preview {
-  cursor: grabbing;
-}
-
-.cdk-drag-placeholder {
-  opacity: 0.5;
-}
-
-.cdk-drop-list-dragging .cdk-drag {
-  cursor: grabbing;
-}

package/src/lib/form-builder.ts

@@ -1,208 +0,0 @@
-import { Component, computed, inject, signal, effect } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { TabsModule } from 'primeng/tabs';
-import { SkeletonModule } from 'primeng/skeleton';
-import { Button } from '@masterteam/components/button';
-import { Card } from '@masterteam/components/card';
-import { ModalService } from '@masterteam/components/modal';
-import { ConfirmationService } from '@masterteam/components/confirmation';
-import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
-import { FBSection } from './fb-section/fb-section';
-import type {
-  EnrichedFormSection,
-  EnrichedFormField,
-  FieldWidth,
-  PropertyItem,
-} from '../store/form-builder/form-builder.model';
-import { CdkDragDrop, DragDropModule } from '@angular/cdk/drag-drop';
-import { FBSectionForm } from './fb-section-form/fb-section-form';
-import { FBPreviewForm } from './fb-preview-form/fb-preview-form';
-import { FormBuilderFacade } from '../store/form-builder/form-builder.facade';
-
-@Component({
-  selector: 'mt-form-builder',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    TabsModule,
-    SkeletonModule,
-    Button,
-    Card,
-    TranslocoDirective,
-    FBSection,
-    DragDropModule,
-  ],
-  templateUrl: './form-builder.html',
-  styleUrl: './form-builder.scss',
-})
-export class FormBuilder {
-  private readonly modalService = inject(ModalService);
-  private readonly confirmationService = inject(ConfirmationService);
-  private readonly translocoService = inject(TranslocoService);
-  protected readonly facade = inject(FormBuilderFacade);
-
-  private dialogRef: any;
-
-  // Local UI state
-  readonly activeTab = signal<string>('system');
-
-  // State from facade
-  readonly sections = this.facade.sections;
-  readonly properties = this.facade.properties;
-  readonly isLoading = this.facade.isLoadingFormConfiguration;
-  readonly error = this.facade.formConfigurationError;
-
-  // Properties map for enrichment
-  private readonly propertiesMap = computed(() => {
-    const map = new Map<number, PropertyItem>();
-    for (const prop of this.properties()) {
-      map.set(prop.id, prop);
-    }
-    return map;
-  });
-
-  // Enrich sections with property data for UI display
-  readonly enrichedSections = computed<EnrichedFormSection[]>(() => {
-    const sections = this.sections();
-    const propsMap = this.propertiesMap();
-    const lang = document.documentElement.lang as 'en' | 'ar';
-
-    return sections.map((section) => ({
-      ...section,
-      fields: section.fields.map((field): EnrichedFormField => {
-        const prop = propsMap.get(field.propertyId);
-        const propName = prop?.name;
-        const name =
-          typeof propName === 'string'
-            ? propName
-            : (propName?.[lang] ??
-              propName?.['en'] ??
-              `Property ${field.propertyId}`);
-
-        return {
-          ...field,
-          name,
-          type: prop?.viewType || 'text',
-          data: prop,
-        };
-      }),
-    }));
-  });
-
-  // Available properties for toolbox tabs
-  readonly availableTabs = computed(() => {
-    const tabs: Array<{
-      id: string;
-      title: string;
-      properties: PropertyItem[];
-    }> = [];
-    const usedPropertyIds = new Set(
-      this.sections().flatMap((s) => s.fields.map((f) => f.propertyId)),
-    );
-
-    const availableProps = this.properties().filter(
-      (p) => !usedPropertyIds.has(p.id),
-    );
-
-    const systemProps = availableProps.filter((p) => p['isSystem']);
-    const customProps = availableProps.filter((p) => !p['isSystem']);
-
-    if (systemProps.length > 0) {
-      tabs.push({ id: 'system', title: 'System', properties: systemProps });
-    }
-    if (customProps.length > 0) {
-      tabs.push({ id: 'custom', title: 'Custom', properties: customProps });
-    }
-
-    return tabs;
-  });
-
-  constructor() {
-    // Update active tab when tabs change
-    effect(() => {
-      const tabs = this.availableTabs();
-      const currentTab = this.activeTab();
-      if (tabs.length > 0 && !tabs.some((t) => t.id === currentTab)) {
-        this.activeTab.set(tabs[0].id);
-      }
-    });
-  }
-
-  drop(event: CdkDragDrop<EnrichedFormField[] | PropertyItem[]>): void {
-    const targetSectionId = event.container.id;
-
-    if (event.previousContainer === event.container) {
-      // Reordering within the same section
-      const fields = [...(event.container.data as EnrichedFormField[])];
-      const [movedField] = fields.splice(event.previousIndex, 1);
-      fields.splice(event.currentIndex, 0, movedField);
-
-      // Build bulk reorder payload with new order values
-      const reorderPayload = fields.map((field, index) => ({
-        id: field.id,
-        order: index,
-      }));
-
-      this.facade.reorderFields(targetSectionId, reorderPayload);
-    } else if (event.previousContainer.id.startsWith('toolbox-')) {
-      // Adding from toolbox
-      const propertyItem = event.item.data as PropertyItem;
-      this.facade.addField(targetSectionId, {
-        propertyId: propertyItem.id,
-        width: '100' as FieldWidth,
-        order: event.currentIndex,
-        hiddenInCreation: false,
-      });
-    } else {
-      // Moving between sections
-      const sourceSectionId = event.previousContainer.id;
-      const field = event.item.data as EnrichedFormField;
-      this.facade.moveField(sourceSectionId, field.id, {
-        targetSectionId,
-        order: event.currentIndex,
-      });
-    }
-  }
-
-  addSection(): void {
-    this.dialogRef = this.modalService.openModal(FBSectionForm, 'drawer', {
-      header: this.translocoService.translate('formBuilder.add-section'),
-      height: '20vw',
-      styleClass: '!w-100 !absolute  ',
-      position: 'end',
-      appendTo: '#page-content',
-      modal: true,
-      dismissible: true,
-      inputValues: {
-        sectionsCount: this.sections().length,
-      },
-    });
-  }
-
-  openPreview(): void {
-    this.dialogRef = this.modalService.openModal(FBPreviewForm, 'drawer', {
-      header: this.translocoService.translate('formBuilder.preview'),
-      styleClass: '!w-[80vw]   ',
-      position: 'end',
-      modal: true,
-      dismissible: true,
-      inputValues: {
-        sections: this.enrichedSections(),
-      },
-    });
-  }
-
-  resetFormConfiguration(): void {
-    this.confirmationService.confirm({
-      type: 'dialog',
-      acceptButtonStyleClass: 'p-button-danger',
-      accept: () => {
-        this.facade.resetFormConfiguration();
-      },
-    });
-  }
-
-  noReturnPredicate = (): boolean => false;
-}

package/src/public-api.ts

@@ -1,6 +0,0 @@
-/*
- * Public API Surface of form-builder
- */
-
-export * from './lib/form-builder';
-export * from './store/form-builder';

package/src/store/form-builder/api.model.ts

@@ -1,13 +0,0 @@
-/**
- * Standard API Response wrapper
- */
-export interface Response<T> {
-  endpoint: string;
-  status: number;
-  code: number;
-  locale: string;
-  message?: string | null;
-  errors?: any | null;
-  data: T;
-  cacheSession?: string;
-}

package/src/store/form-builder/form-builder.actions.ts

@@ -1,113 +0,0 @@
-import type {
-  AddFieldPayload,
-  AddSectionPayload,
-  MoveFieldPayload,
-  PropertyItem,
-  ReorderFieldPayload,
-  UpdateFieldPayload,
-  UpdateSectionPayload,
-} from './form-builder.model';
-
-// ============================================================================
-// Module Configuration Actions
-// ============================================================================
-
-export class SetModuleInfo {
-  static readonly type = '[FormBuilder] Set Module Info';
-  constructor(
-    public moduleType: string,
-    public moduleId: string | number,
-    public parentModuleType?: string,
-    public parentModuleId?: string | number,
-    public parentPath?: string,
-  ) {}
-}
-
-export class ResetFormBuilderState {
-  static readonly type = '[FormBuilder] Reset State';
-}
-
-export class SetProperties {
-  static readonly type = '[FormBuilder] Set Properties';
-  constructor(public properties: PropertyItem[]) {}
-}
-
-// ============================================================================
-// Form Configuration Actions
-// ============================================================================
-
-export class GetFormConfiguration {
-  static readonly type = '[FormBuilder] Get Form Configuration';
-}
-
-export class ResetFormConfiguration {
-  static readonly type = '[FormBuilder] Reset Form Configuration';
-}
-
-// ============================================================================
-// Section Actions
-// ============================================================================
-
-export class AddSection {
-  static readonly type = '[FormBuilder] Add Section';
-  constructor(public payload: AddSectionPayload) {}
-}
-
-export class UpdateSection {
-  static readonly type = '[FormBuilder] Update Section';
-  constructor(
-    public sectionId: string,
-    public payload: UpdateSectionPayload,
-  ) {}
-}
-
-export class DeleteSection {
-  static readonly type = '[FormBuilder] Delete Section';
-  constructor(public sectionId: string) {}
-}
-
-// ============================================================================
-// Field Actions
-// ============================================================================
-
-export class AddField {
-  static readonly type = '[FormBuilder] Add Field';
-  constructor(
-    public sectionId: string,
-    public payload: AddFieldPayload,
-  ) {}
-}
-
-export class UpdateField {
-  static readonly type = '[FormBuilder] Update Field';
-  constructor(
-    public sectionId: string,
-    public fieldId: string,
-    public payload: UpdateFieldPayload,
-  ) {}
-}
-
-export class DeleteField {
-  static readonly type = '[FormBuilder] Delete Field';
-  constructor(
-    public sectionId: string,
-    public fieldId: string,
-  ) {}
-}
-
-export class ReorderFields {
-  static readonly type = '[FormBuilder] Reorder Fields';
-  constructor(
-    public sectionId: string,
-    public payload: ReorderFieldPayload[],
-  ) {}
-}
-
-export class MoveField {
-  static readonly type = '[FormBuilder] Move Field';
-  constructor(
-    public sectionId: string,
-    public fieldId: string,
-    public payload: MoveFieldPayload,
-  ) {}
-}

package/src/store/form-builder/form-builder.facade.ts

@@ -1,207 +0,0 @@
-import { computed, Injectable, inject } from '@angular/core';
-import { Store, select } from '@ngxs/store';
-
-import {
-  AddFieldPayload,
-  AddSectionPayload,
-  FormBuilderActionKey,
-  MoveFieldPayload,
-  PropertyItem,
-  ReorderFieldPayload,
-  UpdateFieldPayload,
-  UpdateSectionPayload,
-} from './form-builder.model';
-import {
-  AddField,
-  AddSection,
-  DeleteField,
-  DeleteSection,
-  GetFormConfiguration,
-  MoveField,
-  ReorderFields,
-  ResetFormBuilderState,
-  ResetFormConfiguration,
-  SetModuleInfo,
-  SetProperties,
-  UpdateField,
-  UpdateSection,
-} from './form-builder.actions';
-import { FormBuilderState } from './form-builder.state';
-
-@Injectable({ providedIn: 'root' })
-export class FormBuilderFacade {
-  private readonly store = inject(Store);
-
-  // ============================================================================
-  // State Selectors
-  // ============================================================================
-
-  private readonly stateSignal = select(FormBuilderState.getState);
-
-  readonly formConfiguration = select(FormBuilderState.getFormConfiguration);
-  readonly sections = select(FormBuilderState.getSections);
-  readonly properties = select(FormBuilderState.getProperties);
-  readonly moduleType = select(FormBuilderState.getModuleType);
-  readonly moduleId = select(FormBuilderState.getModuleId);
-
-  // ============================================================================
-  // Loading Signals
-  // ============================================================================
-
-  readonly isLoadingFormConfiguration = computed(() =>
-    this.stateSignal().loadingActive.includes(
-      FormBuilderActionKey.GetFormConfiguration,
-    ),
-  );
-
-  readonly isResettingFormConfiguration = computed(() =>
-    this.stateSignal().loadingActive.includes(
-      FormBuilderActionKey.ResetFormConfiguration,
-    ),
-  );
-
-  readonly isAddingSection = computed(() =>
-    this.stateSignal().loadingActive.includes(FormBuilderActionKey.AddSection),
-  );
-
-  readonly isUpdatingSection = computed(() =>
-    this.stateSignal().loadingActive.includes(
-      FormBuilderActionKey.UpdateSection,
-    ),
-  );
-
-  readonly isDeletingSection = computed(() =>
-    this.stateSignal().loadingActive.includes(
-      FormBuilderActionKey.DeleteSection,
-    ),
-  );
-
-  readonly isAddingField = computed(() =>
-    this.stateSignal().loadingActive.includes(FormBuilderActionKey.AddField),
-  );
-
-  readonly isUpdatingField = computed(() =>
-    this.stateSignal().loadingActive.includes(FormBuilderActionKey.UpdateField),
-  );
-
-  readonly isDeletingField = computed(() =>
-    this.stateSignal().loadingActive.includes(FormBuilderActionKey.DeleteField),
-  );
-
-  readonly isMovingField = computed(() =>
-    this.stateSignal().loadingActive.includes(FormBuilderActionKey.MoveField),
-  );
-
-  // ============================================================================
-  // Error Signals
-  // ============================================================================
-
-  readonly formConfigurationError = computed(
-    () =>
-      this.stateSignal().errors[FormBuilderActionKey.GetFormConfiguration] ??
-      null,
-  );
-
-  readonly sectionError = computed(() => {
-    const errors = this.stateSignal().errors;
-    return (
-      errors[FormBuilderActionKey.AddSection] ??
-      errors[FormBuilderActionKey.UpdateSection] ??
-      errors[FormBuilderActionKey.DeleteSection] ??
-      null
-    );
-  });
-
-  readonly fieldError = computed(() => {
-    const errors = this.stateSignal().errors;
-    return (
-      errors[FormBuilderActionKey.AddField] ??
-      errors[FormBuilderActionKey.UpdateField] ??
-      errors[FormBuilderActionKey.DeleteField] ??
-      errors[FormBuilderActionKey.MoveField] ??
-      null
-    );
-  });
-
-  // ============================================================================
-  // Module Configuration Dispatchers
-  // ============================================================================
-
-  setModuleInfo(
-    moduleType: string,
-    moduleId: string | number,
-    parentModuleType?: string,
-    parentModuleId?: string | number,
-    parentPath?: string,
-  ) {
-    return this.store.dispatch(
-      new SetModuleInfo(
-        moduleType,
-        moduleId,
-        parentModuleType,
-        parentModuleId,
-        parentPath,
-      ),
-    );
-  }
-
-  resetState() {
-    return this.store.dispatch(new ResetFormBuilderState());
-  }
-
-  setProperties(properties: PropertyItem[]) {
-    return this.store.dispatch(new SetProperties(properties));
-  }
-
-  // ============================================================================
-  // Form Configuration Dispatchers
-  // ============================================================================
-
-  getFormConfiguration() {
-    return this.store.dispatch(new GetFormConfiguration());
-  }
-
-  resetFormConfiguration() {
-    return this.store.dispatch(new ResetFormConfiguration());
-  }
-
-  // ============================================================================
-  // Section Dispatchers
-  // ============================================================================
-
-  addSection(payload: AddSectionPayload) {
-    return this.store.dispatch(new AddSection(payload));
-  }
-
-  updateSection(sectionId: string, payload: UpdateSectionPayload) {
-    return this.store.dispatch(new UpdateSection(sectionId, payload));
-  }
-
-  deleteSection(sectionId: string) {
-    return this.store.dispatch(new DeleteSection(sectionId));
-  }
-
-  // ============================================================================
-  // Field Dispatchers
-  // ============================================================================
-
-  addField(sectionId: string, payload: AddFieldPayload) {
-    return this.store.dispatch(new AddField(sectionId, payload));
-  }
-
-  updateField(sectionId: string, fieldId: string, payload: UpdateFieldPayload) {
-    return this.store.dispatch(new UpdateField(sectionId, fieldId, payload));
-  }
-
-  deleteField(sectionId: string, fieldId: string) {
-    return this.store.dispatch(new DeleteField(sectionId, fieldId));
-  }
-
-  reorderFields(sectionId: string, payload: ReorderFieldPayload[]) {
-    return this.store.dispatch(new ReorderFields(sectionId, payload));
-  }
-
-  moveField(sectionId: string, fieldId: string, payload: MoveFieldPayload) {
-    return this.store.dispatch(new MoveField(sectionId, fieldId, payload));
-  }
-}