@masterteam/form-builder 0.0.1 → 0.0.2

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

@@ -21,9 +21,11 @@ import {
   DeleteSection,
   GetFormConfiguration,
   MoveField,
+  ReorderFields,
   ResetFormBuilderState,
   ResetFormConfiguration,
   SetModuleInfo,
+  SetProperties,
   UpdateField,
   UpdateSection,
 } from './form-builder.actions';
@@ -40,6 +42,9 @@ const DEFAULT_STATE: FormBuilderStateModel = {
   // Form data
   formConfiguration: null,
 
+  // Properties for field enrichment
+  properties: [],
+
   // Loading state (from LoadingStateShape)
   loadingActive: [],
   errors: {},
@@ -98,6 +103,11 @@ export class FormBuilderState extends CrudStateBase<
     return state?.moduleId ?? null;
   }
 
+  @Selector()
+  static getProperties(state: FormBuilderStateModel) {
+    return state?.properties ?? [];
+  }
+
   // ============================================================================
   // Module Configuration Actions
   // ============================================================================
@@ -127,6 +137,16 @@ export class FormBuilderState extends CrudStateBase<
     ctx.setState(DEFAULT_STATE);
   }
 
+  @Action(SetProperties)
+  setProperties(
+    ctx: StateContext<FormBuilderStateModel>,
+    action: SetProperties,
+  ) {
+    ctx.patchState({
+      properties: action.properties,
+    });
+  }
+
   // ============================================================================
   // Form Configuration Actions
   // ============================================================================
@@ -382,13 +402,16 @@ export class FormBuilderState extends CrudStateBase<
         const sections = (currentState.formConfiguration?.sections ?? []).map(
           (section) => {
             if (section.id === action.sectionId) {
-              // Update the field and sort by order
-              const updatedFields = section.fields.map((f) =>
-                f.id === updatedField.id ? updatedField : f,
+              // Update the field but preserve current array order (from optimistic update)
+              // Don't re-sort by order property as other fields may have stale order values
+              const updatedFields = section.fields.map((f, index) =>
+                f.id === updatedField.id
+                  ? { ...updatedField, order: index }
+                  : { ...f, order: index },
               );
               return {
                 ...section,
-                fields: updatedFields.sort((a, b) => a.order - b.order),
+                fields: updatedFields,
               };
             }
             return section;
@@ -490,6 +513,76 @@ export class FormBuilderState extends CrudStateBase<
     });
   }
 
+  @Action(ReorderFields)
+  reorderFields(
+    ctx: StateContext<FormBuilderStateModel>,
+    action: ReorderFields,
+  ) {
+    const state = ctx.getState();
+    const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/reorder`;
+    const req$ = this.http.put<Response<FormField[]>>(apiPath, action.payload);
+
+    // Create order map for optimistic update
+    const orderMap = new Map(action.payload.map((p) => [p.id, p.order]));
+
+    // Apply optimistic update
+    const optimisticSections = (state.formConfiguration?.sections ?? []).map(
+      (section) => {
+        if (section.id === action.sectionId) {
+          const reorderedFields = section.fields
+            .map((f) => ({
+              ...f,
+              order: orderMap.get(f.id) ?? f.order,
+            }))
+            .sort((a, b) => a.order - b.order);
+          return { ...section, fields: reorderedFields };
+        }
+        return section;
+      },
+    );
+
+    ctx.patchState({
+      formConfiguration: {
+        ...state.formConfiguration!,
+        sections: optimisticSections,
+      },
+    });
+
+    return handleApiRequest({
+      ctx,
+      key: FormBuilderActionKey.ReorderFields,
+      request$: req$,
+      onSuccess: (res, currentState) => {
+        const updatedFields = res.data;
+        const fieldMap = new Map(updatedFields.map((f) => [f.id, f]));
+
+        const sections = (currentState.formConfiguration?.sections ?? []).map(
+          (section) => {
+            if (section.id === action.sectionId) {
+              const mergedFields = section.fields
+                .map((f) => fieldMap.get(f.id) ?? f)
+                .sort((a, b) => a.order - b.order);
+              return { ...section, fields: mergedFields };
+            }
+            return section;
+          },
+        );
+        return {
+          formConfiguration: {
+            ...currentState.formConfiguration!,
+            sections,
+          },
+        };
+      },
+      onError: (_error, _currentState) => {
+        // Revert to original state on error
+        return {
+          formConfiguration: state.formConfiguration,
+        };
+      },
+    });
+  }
+
   @Action(MoveField)
   moveField(ctx: StateContext<FormBuilderStateModel>, action: MoveField) {
     const state = ctx.getState();