@headless-adminapp/app 0.0.8-0.0.9-alpha.1.0

package/src/dataform/hooks/useFormSave.ts

@@ -0,0 +1,147 @@
+// Steps
+// 1. Show the loading indicator
+// 2. Extract modified fields from the form
+// 3. Preapre operations
+// 4. Perform the operations
+// 5. Handle the response (success or error, navigation, clear some cache, etc)
+// 6. Hide the loading indicator
+
+// Wrapper - Loader, response message
+// Core - Extract modified fields, prepare operations, perform operations
+
+import { SaveMode } from '@headless-adminapp/core/experience/form';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { useMetadata } from '../../metadata/hooks/useMetadata';
+import { useContextSelector } from '../../mutable/context';
+import { useProgressIndicator } from '../../progress-indicator/hooks/useProgressIndicator';
+import { useOpenToastNotification } from '../../toast-notification/hooks/useOpenToastNotification';
+import { useDataService } from '../../transport';
+import { DataFormContext } from '../context';
+import { saveRecord } from '../utils';
+import { useFormRecord } from './useFormRecord';
+import { useDataFormSchema } from './useFormSchema';
+import { useSelectedForm } from './useSelectedForm';
+
+export function useFormSave() {
+  const form = useSelectedForm();
+  const formInstance = useFormContext();
+  const record = useFormRecord();
+  const { getSchema } = useMetadata();
+  const schema = useDataFormSchema();
+  const initialValues = useContextSelector(
+    DataFormContext,
+    (state) => state.initialValues
+  );
+  const refresh = useContextSelector(DataFormContext, (state) => state.refresh);
+  const dataService = useDataService();
+  const { showProgressIndicator, hideProgressIndicator } =
+    useProgressIndicator();
+  const openToastNotification = useOpenToastNotification();
+
+  const client = useQueryClient();
+
+  function showMessageAfterSave({ isCreatedMode }: { isCreatedMode: boolean }) {
+    // Show notification
+    if (!isCreatedMode) {
+      openToastNotification({
+        type: 'success',
+        title: 'Record updated',
+        text: 'Record updated successfully',
+      });
+    } else {
+      openToastNotification({
+        type: 'success',
+        title: 'Record created',
+        text: 'Record created successfully',
+      });
+    }
+  }
+
+  const _save = async (mode?: SaveMode) => {
+    await formInstance.handleSubmit(async (values) => {
+      if (mode === 'background' && !record) {
+        // Background save should not be triggered if there is no record
+        return;
+      }
+
+      if (mode !== 'background') {
+        showProgressIndicator(undefined, 500);
+      }
+
+      try {
+        const result = await saveRecord({
+          values,
+          form: form,
+          record: record,
+          initialValues: initialValues,
+          dataService,
+          schema: schema,
+          getSchema,
+        });
+
+        if (!result.success) {
+          openToastNotification({
+            type: result.isError ? 'error' : 'info',
+            title: 'Error',
+            text: result.message,
+          });
+          return;
+        }
+
+        // invalidateQueriesAfterSave({
+        //   client,
+        // });
+
+        if (mode === 'save' && record) {
+          await refresh();
+          // client.invalidateQueries({ queryKey: ['data', 'retriveRecord'] });
+        } else {
+          await client.invalidateQueries({
+            queryKey: ['data', 'retriveRecord'],
+          });
+        }
+
+        await client.invalidateQueries({
+          queryKey: ['data', 'retriveRecords'],
+        });
+
+        // redirectAfterSave({
+        //   navigation,
+        //   isCreatedMode: !context.state.record,
+        //   recordId: result.recordId,
+        //   reset: form.reset,
+        //   logicalName: schema.logicalName,
+        //   mode,
+        // });
+
+        showMessageAfterSave({
+          isCreatedMode: !record,
+        });
+      } catch (err) {
+        openToastNotification({
+          type: 'error',
+          title: 'Error',
+          text: (err as Error).message,
+        });
+      } finally {
+        if (mode !== 'background') {
+          // Hide the loading indicator
+          hideProgressIndicator();
+        }
+      }
+    })();
+  };
+
+  const _saveRef = useRef(_save);
+  _saveRef.current = _save;
+
+  const save = useCallback(
+    (mode?: SaveMode) => _saveRef.current(mode),
+    [_saveRef]
+  );
+
+  return save;
+}

package/src/dataform/hooks/useFormSchema.ts

@@ -0,0 +1,13 @@
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+
+import { useContextSelector } from '../../mutable/context';
+import { DataFormContext } from '../context';
+
+export function useDataFormSchema<
+  S extends SchemaAttributes = SchemaAttributes
+>(): Schema<S> {
+  return useContextSelector(
+    DataFormContext,
+    (state) => state.schema as unknown as Schema<S>
+  );
+}

package/src/dataform/hooks/useLoadFormGridPage.ts

@@ -0,0 +1,97 @@
+import {
+  EntityMainFormCommandItemExperience,
+  Form,
+} from '@headless-adminapp/core/experience/form';
+import { Schema } from '@headless-adminapp/core/schema';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
+import { useExperienceStore, useSchema } from '../../metadata/hooks';
+
+type UseLoadMainFormPageResult =
+  | {
+      loading: true;
+    }
+  | {
+      loading: false;
+      error: true;
+      title: string;
+      message: string;
+    }
+  | {
+      loading: false;
+      error: false;
+      schema: Schema;
+      form: Form;
+      commands: EntityMainFormCommandItemExperience[][];
+    };
+
+export function useLoadFormGridPage(
+  logicalName: string,
+  formId: string | undefined
+): UseLoadMainFormPageResult {
+  const schema = useSchema(logicalName);
+  const experienceStore = useExperienceStore();
+
+  const { data: form, isFetching: isFetchingForm } = useQuery({
+    queryKey: ['experience-schema-form', logicalName, formId],
+    queryFn: async () => {
+      return experienceStore.getForm(logicalName, formId);
+    },
+    placeholderData: keepPreviousData,
+  });
+
+  const { data: commands } = useQuery({
+    queryKey: ['experience-schema-form-commands', logicalName],
+    queryFn: async () => {
+      return experienceStore.getFormCommands(logicalName);
+    },
+    initialData: [],
+  });
+
+  if (!schema) {
+    return {
+      loading: false,
+      error: true,
+      title: 'Schema not found',
+      message: 'The schema was not found',
+    };
+  }
+
+  if (!form) {
+    if (isFetchingForm) {
+      return {
+        loading: true,
+      };
+    }
+
+    return {
+      loading: false,
+      error: true,
+      title: 'Form not found',
+      message: 'The form was not found',
+    };
+  }
+
+  if (form.logicalName !== schema.logicalName) {
+    if (isFetchingForm) {
+      return {
+        loading: true,
+      };
+    }
+
+    return {
+      loading: false,
+      error: true,
+      title: 'Form not found',
+      message: 'The form was not found (missmatch)',
+    };
+  }
+
+  return {
+    loading: false,
+    error: false,
+    schema,
+    form,
+    commands,
+  };
+}

package/src/dataform/hooks/useMainFormCommands.ts

@@ -0,0 +1,65 @@
+import { EntityFormCommandContext } from '@headless-adminapp/core/experience/form';
+
+import {
+  CommandItemState,
+  useBaseCommandHandlerContext,
+  useCommands,
+} from '../../command';
+import { useContextSelector } from '../../mutable/context';
+import { DataFormContext } from '../context';
+import { useFormInstance } from './useFormInstance';
+import { useFormIsReadonly } from './useFormIsReadonly';
+import { useFormRecord } from './useFormRecord';
+import { useFormSave } from './useFormSave';
+import { useDataFormSchema } from './useFormSchema';
+import { useRecordId } from './useRecordId';
+
+export function useFormControlContext() {
+  const schema = useDataFormSchema();
+  const form = useContextSelector(DataFormContext, (state) => state.form);
+  const originalData = useFormRecord();
+  const recordId = useRecordId<string | number>();
+
+  const save = useFormSave();
+  const refresh = useContextSelector(DataFormContext, (state) => state.refresh);
+
+  const formInstance = useFormInstance();
+  const readonly = useFormIsReadonly();
+
+  const data = formInstance.watch() as any;
+
+  return {
+    data,
+    logicalName: schema.logicalName,
+    schema,
+    form,
+    formId: form.id,
+    originalData: originalData ?? null,
+    recordId,
+    refresh,
+    save,
+    readonly,
+  };
+}
+
+export function useMainFormCommandHandlerContext(): EntityFormCommandContext {
+  const primaryControl: any = useFormControlContext();
+
+  const baseHandlerContext = useBaseCommandHandlerContext();
+
+  return {
+    ...baseHandlerContext,
+    primaryControl,
+  };
+}
+
+export function useMainFormCommands(): CommandItemState[][] {
+  const commands = useContextSelector(
+    DataFormContext,
+    (state) => state.commands
+  );
+
+  const handlerContext = useMainFormCommandHandlerContext();
+
+  return useCommands<EntityFormCommandContext>(commands, handlerContext);
+}

package/src/dataform/hooks/useRecordId.ts

@@ -0,0 +1,6 @@
+import { useContextSelector } from '../../mutable/context';
+import { DataFormContext } from '../context';
+
+export function useRecordId<T extends string | number = string>(): T {
+  return useContextSelector(DataFormContext, (state) => state.recordId) as T;
+}

package/src/dataform/hooks/useRecordTitle.ts

@@ -0,0 +1,22 @@
+import { useFormInstance } from './useFormInstance';
+import { useDataFormSchema } from './useFormSchema';
+import { useRecordId } from './useRecordId';
+
+export function useRecordTitle() {
+  const formInstance = useFormInstance();
+  const schema = useDataFormSchema();
+  const recordId = useRecordId();
+
+  const primaryAttributeValue =
+    (formInstance.watch(schema.primaryAttribute) as string) ?? '';
+
+  if (primaryAttributeValue) {
+    return primaryAttributeValue;
+  }
+
+  if (recordId) {
+    return '(No name)';
+  }
+
+  return `New ${schema.label.toLowerCase()}`;
+}

package/src/dataform/hooks/useSelectedForm.ts

@@ -0,0 +1,14 @@
+import { Form } from '@headless-adminapp/core/experience/form';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+
+import { useContextSelector } from '../../mutable/context';
+import { DataFormContext } from '../context';
+
+export function useSelectedForm<
+  S extends SchemaAttributes = SchemaAttributes
+>(): Form<S> {
+  return useContextSelector(
+    DataFormContext,
+    (state) => state.form as unknown as Form<S>
+  );
+}