@masterteam/form-builder 0.0.1 → 0.0.2

package/assets/i18n/ar.json

@@ -3,6 +3,8 @@
     "save": "Save",
     "cancel": "Cancel",
     "delete": "Delete",
+    "name-ar": "الاسم بالعربية",
+    "name-en": "الاسم بالإنجليزية",
     "system": "System",
     "custom": "Custom",
     "layout": "Layout",

package/assets/i18n/en.json

@@ -3,6 +3,8 @@
     "save": "Save",
     "cancel": "Cancel",
     "delete": "Delete",
+    "name-ar": "Name (Arabic)",
+    "name-en": "Name (English)",
     "system": "System",
     "custom": "Custom",
     "layout": "Layout",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masterteam/form-builder",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "publishConfig": {
     "directory": ".",
     "linkDirectory": false,
@@ -21,8 +21,8 @@
     "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.8.1",
     "@masterteam/properties": "^0.0.26",
-    "@masterteam/components": "^0.0.75",
     "@masterteam/forms": "^0.0.33",
+    "@masterteam/components": "^0.0.76",
     "@masterteam/icons": "^0.0.12"
   },
   "sideEffects": false,

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

@@ -21,9 +21,9 @@ import { ConfirmationService } from '@masterteam/components/confirmation';
 import type {
   EnrichedFormField,
   EnrichedFormSection,
-} from '../form-builder.model';
+  FieldWidth,
+} from '../../store/form-builder/form-builder.model';
 import { FormBuilderFacade } from '../../store/form-builder';
-import type { FieldWidth } from '../../store/form-builder/form-builder.model';
 import {
   FBFieldConditions,
   ConditionFieldProperty,
@@ -208,7 +208,8 @@ export class FBFieldForm {
         header: this.transloco.translate('formBuilder.set-conditions'),
         styleClass: '!w-[calc(100%-25rem)] !absolute ',
         position: 'start',
-        modal: false,
+        modal: true,
+        dismissible: true,
         appendTo: '#page-content',
         inputValues: {
           initialFormula: this.conditionalDisplayFormula(),

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

@@ -13,7 +13,7 @@ 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';
+import type { EnrichedFormSection } from '../../store/form-builder/form-builder.model';
 
 type PreviewMode = 'create' | 'edit';
 
@@ -103,24 +103,29 @@ export class FBPreviewForm {
    */
   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',
+      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[viewType?.toLowerCase()] ?? 'text';
+    return typeMap[viewType] ?? 'text';
   }
 
   /**

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

@@ -7,7 +7,10 @@ import {
   signal,
   effect,
 } from '@angular/core';
-import { EnrichedFormField, EnrichedFormSection } from '../form-builder.model';
+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';
@@ -127,7 +130,9 @@ export class FBSection {
       styleClass: '!w-100 !absolute  ',
       position: 'end',
       appendTo: '#page-content',
-      modal: false,
+      modal: true,
+      dismissible: true,
+
       inputValues: {
         sectionId: section.id,
         initialData: section.name,
@@ -152,7 +157,9 @@ export class FBSection {
       height: '20vw',
       styleClass: '!w-100 !absolute !shadow-none',
       position: 'end',
-      modal: false,
+      modal: true,
+      dismissible: true,
+
       appendTo: '#page-content',
       inputValues: {
         initialData: field,

package/src/lib/form-builder.html

@@ -1,15 +1,33 @@
 <ng-container *transloco="let t; prefix: 'formBuilder'">
   <div class="flex gap-4 h-full w-full overflow-hidden" cdkDropListGroup>
-    @if (properties().length > 0) {
-      <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>
+    <!-- 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"
@@ -61,9 +79,9 @@
               }
             </p-tabpanels>
           </p-tabs>
-        </ng-template>
-      </mt-card>
-    }
+        }
+      </ng-template>
+    </mt-card>
 
     <!-- Main Canvas Area -->
     <div class="flex flex-col gap-4 flex-1 w-full h-full overflow-y-auto">
@@ -74,38 +92,74 @@
               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>
-      @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>
+
+      @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>
-          </div>
-        </mt-card>
+          </mt-card>
+        }
       }
     </div>
   </div>

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

@@ -3,9 +3,10 @@ import type {
   FormField as BaseFormField,
   FormSection as BaseFormSection,
   FieldWidth,
+  PropertyItem,
 } from '../store/form-builder/form-builder.model';
 
-export type { FieldType, FieldWidth };
+export type { FieldType, FieldWidth, PropertyItem };
 
 // Re-export base types
 export type FormField = BaseFormField;
@@ -24,37 +25,3 @@ export interface EnrichedFormField extends BaseFormField {
 export interface EnrichedFormSection extends Omit<BaseFormSection, 'fields'> {
   fields: EnrichedFormField[];
 }
-export interface PropertyItem {
-  id: number;
-  key: string;
-  normalizedKey: string;
-  viewType: string;
-  viewTypeLabel: string;
-  name: string | Record<string, string>;
-  description?: string;
-  defaultValue?: unknown;
-  order?: number;
-  canBeDeleted?: boolean;
-  displayOverView?: boolean;
-  enabled?: boolean;
-  formula?: unknown[];
-  isBasic?: boolean;
-  isCalculated?: boolean;
-  isConfigurable?: boolean;
-  isHiddenInCreation?: boolean;
-  isHiddenInEdition?: boolean;
-  isLive?: boolean;
-  isLog?: boolean;
-  isRequired?: boolean;
-  isSystem?: boolean;
-  isTranslatable?: boolean;
-  shownInTable?: boolean;
-  includeInSummary?: boolean;
-  dependsOn?: unknown[];
-  isFilterFormula?: boolean;
-  configuration?: Record<string, unknown>;
-  category?: string;
-  valueOnCreation?: boolean;
-  isRelated?: boolean;
-  [key: string]: unknown;
-}

package/src/lib/form-builder.ts

@@ -1,26 +1,20 @@
-import {
-  Component,
-  computed,
-  inject,
-  input,
-  signal,
-  effect,
-} from '@angular/core';
+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 {
+import type {
   EnrichedFormSection,
   EnrichedFormField,
+  FieldWidth,
   PropertyItem,
-} from './form-builder.model';
-import type { FieldWidth } from '../store/form-builder/form-builder.model';
+} 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';
@@ -33,6 +27,7 @@ import { FormBuilderFacade } from '../store/form-builder/form-builder.facade';
     CommonModule,
     FormsModule,
     TabsModule,
+    SkeletonModule,
     Button,
     Card,
     TranslocoDirective,
@@ -50,14 +45,12 @@ export class FormBuilder {
 
   private dialogRef: any;
 
-  // Inputs - only properties needed from parent
-  readonly properties = input<PropertyItem[]>([]);
-
   // 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;
 
@@ -113,8 +106,8 @@ export class FormBuilder {
       (p) => !usedPropertyIds.has(p.id),
     );
 
-    const systemProps = availableProps.filter((p) => p.isSystem);
-    const customProps = availableProps.filter((p) => !p.isSystem);
+    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 });
@@ -142,12 +135,17 @@ export class FormBuilder {
 
     if (event.previousContainer === event.container) {
       // Reordering within the same section
-      const field = event.item.data as EnrichedFormField;
+      const fields = [...(event.container.data as EnrichedFormField[])];
+      const [movedField] = fields.splice(event.previousIndex, 1);
+      fields.splice(event.currentIndex, 0, movedField);
 
-      // Update the field order via API
-      this.facade.updateField(targetSectionId, field.id, {
-        order: event.currentIndex,
-      });
+      // 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;
@@ -176,6 +174,7 @@ export class FormBuilder {
       position: 'end',
       appendTo: '#page-content',
       modal: true,
+      dismissible: true,
       inputValues: {
         sectionsCount: this.sections().length,
       },
@@ -188,6 +187,7 @@ export class FormBuilder {
       styleClass: '!w-[80vw]   ',
       position: 'end',
       modal: true,
+      dismissible: true,
       inputValues: {
         sections: this.enrichedSections(),
       },

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

@@ -2,6 +2,8 @@ import type {
   AddFieldPayload,
   AddSectionPayload,
   MoveFieldPayload,
+  PropertyItem,
+  ReorderFieldPayload,
   UpdateFieldPayload,
   UpdateSectionPayload,
 } from './form-builder.model';
@@ -25,6 +27,11 @@ 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
 // ============================================================================
@@ -88,6 +95,14 @@ export class DeleteField {
   ) {}
 }
 
+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(

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

@@ -6,6 +6,8 @@ import {
   AddSectionPayload,
   FormBuilderActionKey,
   MoveFieldPayload,
+  PropertyItem,
+  ReorderFieldPayload,
   UpdateFieldPayload,
   UpdateSectionPayload,
 } from './form-builder.model';
@@ -16,9 +18,11 @@ import {
   DeleteSection,
   GetFormConfiguration,
   MoveField,
+  ReorderFields,
   ResetFormBuilderState,
   ResetFormConfiguration,
   SetModuleInfo,
+  SetProperties,
   UpdateField,
   UpdateSection,
 } from './form-builder.actions';
@@ -36,6 +40,7 @@ export class FormBuilderFacade {
 
   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);
 
@@ -144,6 +149,10 @@ export class FormBuilderFacade {
     return this.store.dispatch(new ResetFormBuilderState());
   }
 
+  setProperties(properties: PropertyItem[]) {
+    return this.store.dispatch(new SetProperties(properties));
+  }
+
   // ============================================================================
   // Form Configuration Dispatchers
   // ============================================================================
@@ -188,6 +197,10 @@ export class FormBuilderFacade {
     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));
   }

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

@@ -18,6 +18,7 @@ export enum FormBuilderActionKey {
   UpdateField = 'updateField',
   DeleteField = 'deleteField',
   MoveField = 'moveField',
+  ReorderFields = 'reorderFields',
 }
 
 // ============================================================================
@@ -96,6 +97,37 @@ export interface MoveFieldPayload {
   order?: number;
 }
 
+export interface ReorderFieldPayload {
+  id: string;
+  order: number;
+}
+
+// ============================================================================
+// Property Item (for enrichment)
+// ============================================================================
+export interface PropertyItem {
+  id: number;
+  name: string | Record<string, string>;
+  viewType?: string;
+  [key: string]: any;
+}
+
+// ============================================================================
+// Enriched Types (for UI display)
+// ============================================================================
+
+// Enriched field with UI properties (from PropertyItem)
+export interface EnrichedFormField extends FormField {
+  name: string;
+  type: string;
+  data?: any;
+}
+
+// Enriched section for UI display
+export interface EnrichedFormSection extends Omit<FormSection, 'fields'> {
+  fields: EnrichedFormField[];
+}
+
 // ============================================================================
 // State Model
 // ============================================================================
@@ -109,4 +141,7 @@ export interface FormBuilderStateModel extends LoadingStateShape<FormBuilderActi
 
   // Form data
   formConfiguration: FormConfiguration | null;
+
+  // Properties for field enrichment
+  properties: PropertyItem[];
 }