@masterteam/form-builder 0.0.1 → 0.0.3

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

@@ -1,575 +0,0 @@
-import { HttpClient } from '@angular/common/http';
-import { inject, Injectable } from '@angular/core';
-import { Action, Selector, State, StateContext } from '@ngxs/store';
-import {
-  CrudStateBase,
-  handleApiRequest,
-  Response,
-} from '@masterteam/components';
-
-import {
-  FormBuilderActionKey,
-  FormBuilderStateModel,
-  FormConfiguration,
-  FormField,
-  FormSection,
-} from './form-builder.model';
-import {
-  AddField,
-  AddSection,
-  DeleteField,
-  DeleteSection,
-  GetFormConfiguration,
-  MoveField,
-  ResetFormBuilderState,
-  ResetFormConfiguration,
-  SetModuleInfo,
-  UpdateField,
-  UpdateSection,
-} from './form-builder.actions';
-
-// Default State
-const DEFAULT_STATE: FormBuilderStateModel = {
-  // Module configuration
-  moduleType: null,
-  moduleId: null,
-  parentModuleType: null,
-  parentModuleId: null,
-  parentPath: '',
-
-  // Form data
-  formConfiguration: null,
-
-  // Loading state (from LoadingStateShape)
-  loadingActive: [],
-  errors: {},
-};
-
-@State<FormBuilderStateModel>({
-  name: 'formBuilder',
-  defaults: DEFAULT_STATE,
-})
-@Injectable()
-export class FormBuilderState extends CrudStateBase<
-  FormSection,
-  FormBuilderStateModel,
-  FormBuilderActionKey
-> {
-  private http = inject(HttpClient);
-  private baseUrl = 'formConfigurations';
-
-  // ============================================================================
-  // Helpers
-  // ============================================================================
-
-  private getApiPath(state: FormBuilderStateModel): string {
-    const { parentPath, moduleType, moduleId } = state;
-    return `${this.baseUrl}${parentPath}/${moduleType}/${moduleId}`;
-  }
-
-  // ============================================================================
-  // Selectors
-  // ============================================================================
-
-  @Selector()
-  static getState(state: FormBuilderStateModel): FormBuilderStateModel {
-    return state ?? DEFAULT_STATE;
-  }
-
-  @Selector()
-  static getFormConfiguration(
-    state: FormBuilderStateModel,
-  ): FormConfiguration | null {
-    return state?.formConfiguration ?? null;
-  }
-
-  @Selector()
-  static getSections(state: FormBuilderStateModel): FormSection[] {
-    return state?.formConfiguration?.sections ?? [];
-  }
-
-  @Selector()
-  static getModuleType(state: FormBuilderStateModel): string | null {
-    return state?.moduleType ?? null;
-  }
-
-  @Selector()
-  static getModuleId(state: FormBuilderStateModel): string | number | null {
-    return state?.moduleId ?? null;
-  }
-
-  // ============================================================================
-  // Module Configuration Actions
-  // ============================================================================
-
-  @Action(SetModuleInfo)
-  setModuleInfo(
-    ctx: StateContext<FormBuilderStateModel>,
-    action: SetModuleInfo,
-  ) {
-    let parentPath = '';
-    if (action.parentModuleType && action.parentModuleId) {
-      parentPath = `/${action.parentModuleType}/${action.parentModuleId}`;
-    } else if (action.parentPath) {
-      parentPath = action.parentPath;
-    }
-    ctx.patchState({
-      moduleType: action.moduleType,
-      moduleId: action.moduleId,
-      parentModuleType: action.parentModuleType ?? null,
-      parentModuleId: action.parentModuleId ?? null,
-      parentPath: parentPath ?? '',
-    });
-  }
-
-  @Action(ResetFormBuilderState)
-  resetState(ctx: StateContext<FormBuilderStateModel>) {
-    ctx.setState(DEFAULT_STATE);
-  }
-
-  // ============================================================================
-  // Form Configuration Actions
-  // ============================================================================
-
-  @Action(GetFormConfiguration)
-  getFormConfiguration(ctx: StateContext<FormBuilderStateModel>) {
-    const state = ctx.getState();
-    const apiPath = this.getApiPath(state);
-    const req$ = this.http.get<Response<FormConfiguration>>(apiPath);
-
-    return this.load(ctx, {
-      key: FormBuilderActionKey.GetFormConfiguration,
-      request$: req$,
-      updateState: (_state, data) => ({
-        formConfiguration: data ?? null,
-      }),
-    });
-  }
-
-  @Action(ResetFormConfiguration)
-  resetFormConfiguration(ctx: StateContext<FormBuilderStateModel>) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/reset`;
-    const req$ = this.http.delete<Response<FormConfiguration>>(apiPath);
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.ResetFormConfiguration,
-      request$: req$,
-      onSuccess: (res, _currentState) => ({
-        formConfiguration: res.data ?? null,
-      }),
-    });
-  }
-
-  // ============================================================================
-  // Section Actions
-  // ============================================================================
-
-  @Action(AddSection)
-  addSection(ctx: StateContext<FormBuilderStateModel>, action: AddSection) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/sections`;
-    const req$ = this.http.post<Response<FormSection>>(apiPath, action.payload);
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.AddSection,
-      request$: req$,
-      onSuccess: (res, currentState) => {
-        const sections = this.adapter.addOne(
-          currentState.formConfiguration?.sections ?? [],
-          res.data,
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-    });
-  }
-
-  @Action(UpdateSection)
-  updateSection(
-    ctx: StateContext<FormBuilderStateModel>,
-    action: UpdateSection,
-  ) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}`;
-    const req$ = this.http.put<Response<FormSection>>(apiPath, action.payload);
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.UpdateSection,
-      request$: req$,
-      onSuccess: (res, currentState) => {
-        const sections = this.adapter.upsertOne(
-          currentState.formConfiguration?.sections ?? [],
-          res.data,
-          'id',
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-    });
-  }
-
-  @Action(DeleteSection)
-  deleteSection(
-    ctx: StateContext<FormBuilderStateModel>,
-    action: DeleteSection,
-  ) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}`;
-    const req$ = this.http.delete<Response<{ id: string }>>(apiPath);
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.DeleteSection,
-      request$: req$,
-      onSuccess: (res, currentState) => {
-        const sections = this.adapter.removeOne(
-          currentState.formConfiguration?.sections ?? [],
-          res.data.id,
-          'id',
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-    });
-  }
-
-  // ============================================================================
-  // Field Actions
-  // ============================================================================
-
-  @Action(AddField)
-  addField(ctx: StateContext<FormBuilderStateModel>, action: AddField) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields`;
-    const req$ = this.http.post<Response<FormField>>(apiPath, action.payload);
-
-    // Generate temp ID for optimistic update
-    const tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const tempField: FormField = {
-      id: tempId,
-      sectionId: action.sectionId,
-      propertyId: action.payload.propertyId,
-      width: action.payload.width,
-      order: action.payload.order ?? 0,
-      hiddenInCreation: action.payload.hiddenInCreation,
-      _pending: true,
-    };
-
-    // Optimistically add the temp field
-    const sectionsWithTemp = (state.formConfiguration?.sections ?? []).map(
-      (section) => {
-        if (section.id === action.sectionId) {
-          const fields = [...section.fields];
-          const insertIndex = action.payload.order ?? fields.length;
-          fields.splice(insertIndex, 0, tempField);
-          return { ...section, fields };
-        }
-        return section;
-      },
-    );
-    ctx.patchState({
-      formConfiguration: {
-        ...state.formConfiguration!,
-        sections: sectionsWithTemp,
-      },
-    });
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.AddField,
-      request$: req$,
-      onSuccess: (res, currentState) => {
-        const newField = res.data;
-        // Replace temp field with real field
-        const sections = (currentState.formConfiguration?.sections ?? []).map(
-          (section) => {
-            if (section.id === action.sectionId) {
-              return {
-                ...section,
-                fields: section.fields.map((f) =>
-                  f.id === tempId ? newField : f,
-                ),
-              };
-            }
-            return section;
-          },
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-      onError: (_error, currentState) => {
-        // Remove temp field on error
-        const sections = (currentState.formConfiguration?.sections ?? []).map(
-          (section) => {
-            if (section.id === action.sectionId) {
-              return {
-                ...section,
-                fields: section.fields.filter((f) => f.id !== tempId),
-              };
-            }
-            return section;
-          },
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-    });
-  }
-
-  @Action(UpdateField)
-  updateField(ctx: StateContext<FormBuilderStateModel>, action: UpdateField) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/${action.fieldId}`;
-    const req$ = this.http.put<Response<FormField>>(apiPath, action.payload);
-
-    // Apply optimistic update for order changes
-    if (action.payload.order !== undefined) {
-      const newOrder = action.payload.order;
-      const sections = (state.formConfiguration?.sections ?? []).map(
-        (section) => {
-          if (section.id === action.sectionId) {
-            const fields = [...section.fields];
-            const currentIndex = fields.findIndex(
-              (f) => f.id === action.fieldId,
-            );
-            if (currentIndex !== -1) {
-              const [movedField] = fields.splice(currentIndex, 1);
-              fields.splice(newOrder, 0, movedField);
-            }
-            return { ...section, fields };
-          }
-          return section;
-        },
-      );
-      ctx.patchState({
-        formConfiguration: {
-          ...state.formConfiguration!,
-          sections,
-        },
-      });
-    }
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.UpdateField,
-      request$: req$,
-      onSuccess: (res, currentState) => {
-        const updatedField = res.data;
-        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,
-              );
-              return {
-                ...section,
-                fields: updatedFields.sort((a, b) => a.order - b.order),
-              };
-            }
-            return section;
-          },
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-      onError: (_error, _currentState) => {
-        // Revert optimistic update on error - reload original state
-        if (action.payload.order !== undefined) {
-          return {
-            formConfiguration: state.formConfiguration,
-          };
-        }
-        return {};
-      },
-    });
-  }
-
-  @Action(DeleteField)
-  deleteField(ctx: StateContext<FormBuilderStateModel>, action: DeleteField) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/${action.fieldId}`;
-    const req$ =
-      this.http.delete<Response<{ id: string; sectionId: string }>>(apiPath);
-
-    // Optimistically mark field as deleting
-    const sectionsWithDeleting = (state.formConfiguration?.sections ?? []).map(
-      (section) => {
-        if (section.id === action.sectionId) {
-          return {
-            ...section,
-            fields: section.fields.map((f) =>
-              f.id === action.fieldId ? { ...f, _deleting: true } : f,
-            ),
-          };
-        }
-        return section;
-      },
-    );
-    ctx.patchState({
-      formConfiguration: {
-        ...state.formConfiguration!,
-        sections: sectionsWithDeleting,
-      },
-    });
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.DeleteField,
-      request$: req$,
-      onSuccess: (res, currentState) => {
-        const { id: deletedId, sectionId } = res.data;
-        const sections = (currentState.formConfiguration?.sections ?? []).map(
-          (section) => {
-            if (section.id === sectionId) {
-              return {
-                ...section,
-                fields: section.fields.filter((f) => f.id !== deletedId),
-              };
-            }
-            return section;
-          },
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-      onError: (_error, currentState) => {
-        // Remove _deleting flag on error
-        const sections = (currentState.formConfiguration?.sections ?? []).map(
-          (section) => {
-            if (section.id === action.sectionId) {
-              return {
-                ...section,
-                fields: section.fields.map((f) =>
-                  f.id === action.fieldId ? { ...f, _deleting: false } : f,
-                ),
-              };
-            }
-            return section;
-          },
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-    });
-  }
-
-  @Action(MoveField)
-  moveField(ctx: StateContext<FormBuilderStateModel>, action: MoveField) {
-    const state = ctx.getState();
-    const apiPath = `${this.getApiPath(state)}/sections/${action.sectionId}/fields/${action.fieldId}/move`;
-    const req$ = this.http.put<Response<FormField>>(apiPath, action.payload);
-
-    // Apply optimistic update - move field immediately
-    const sourceSectionId = action.sectionId;
-    const targetSectionId = action.payload.targetSectionId;
-    const targetOrder = action.payload.order ?? 0;
-
-    let movedFieldData: FormField | null = null;
-    const optimisticSections = (state.formConfiguration?.sections ?? []).map(
-      (section) => {
-        if (section.id === sourceSectionId) {
-          const fieldToMove = section.fields.find(
-            (f) => f.id === action.fieldId,
-          );
-          if (fieldToMove) {
-            movedFieldData = { ...fieldToMove, order: targetOrder };
-          }
-          return {
-            ...section,
-            fields: section.fields.filter((f) => f.id !== action.fieldId),
-          };
-        }
-        return section;
-      },
-    );
-
-    // Add to target section
-    const sectionsWithMoved = optimisticSections.map((section) => {
-      if (section.id === targetSectionId && movedFieldData) {
-        const fields = [...section.fields];
-        fields.splice(targetOrder, 0, movedFieldData);
-        return { ...section, fields };
-      }
-      return section;
-    });
-
-    ctx.patchState({
-      formConfiguration: {
-        ...state.formConfiguration!,
-        sections: sectionsWithMoved,
-      },
-    });
-
-    return handleApiRequest({
-      ctx,
-      key: FormBuilderActionKey.MoveField,
-      request$: req$,
-      onSuccess: (res, currentState) => {
-        const movedField = res.data;
-        const sections = (currentState.formConfiguration?.sections ?? []).map(
-          (section) => {
-            // Update the moved field with server response
-            if (section.id === targetSectionId) {
-              return {
-                ...section,
-                fields: section.fields
-                  .map((f) => (f.id === movedField.id ? movedField : f))
-                  .sort((a, b) => a.order - b.order),
-              };
-            }
-            return section;
-          },
-        );
-        return {
-          formConfiguration: {
-            ...currentState.formConfiguration!,
-            sections,
-          },
-        };
-      },
-      onError: (_error, _currentState) => {
-        // Revert optimistic update on error
-        return {
-          formConfiguration: state.formConfiguration,
-        };
-      },
-    });
-  }
-}

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

@@ -1,5 +0,0 @@
-export * from './api.model';
-export * from './form-builder.actions';
-export * from './form-builder.facade';
-export * from './form-builder.model';
-export * from './form-builder.state';

package/tsconfig.json

@@ -1,31 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@masterteam/components": [
-        "../../../dist/masterteam/components"
-      ],
-      "@masterteam/components/*": [
-        "../../../dist/masterteam/components/*"
-      ],
-      "@masterteam/forms": [
-        "../../../dist/masterteam/forms"
-      ],
-      "@masterteam/forms/*": [
-        "../../../dist/masterteam/forms/*"
-      ],
-      "@masterteam/icons": [
-        "../../../dist/masterteam/icons"
-      ],
-         "@masterteam/properties": [
-        "../../../dist/masterteam/properties"
-      ]
-    }
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  },
-  "exclude": [
-    "node_modules"
-  ]
-}