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

package/src/command/utils/index.ts

@@ -0,0 +1,142 @@
+import {
+  CommandItemExperience,
+  MenuItemCommandExperience,
+} from '@headless-adminapp/core/experience/command';
+import { checkCommandCondition } from '@headless-adminapp/core/experience/command/utils';
+import {
+  ArrayGroupWithAtLeastOne,
+  ArrayWithAtLeastOne,
+} from '@headless-adminapp/core/types';
+
+import {
+  CommandItemExperienceSelector,
+  CommandItemState,
+  MenuItemCommandState,
+} from '../types';
+
+function transformedProperties<HandlerContext>(
+  command: Pick<
+    CommandItemExperience<HandlerContext>,
+    'Icon' | 'disabled' | 'onClick' | 'hidden'
+  >,
+  handlerContext: HandlerContext
+) {
+  const IconComponent = command.Icon;
+
+  const hidden = checkCommandCondition(handlerContext, command.hidden);
+
+  const disabled = checkCommandCondition(handlerContext, command.disabled);
+
+  const onClick = command.onClick
+    ? () => {
+        command.onClick!(handlerContext)?.catch(console.error);
+      }
+    : undefined;
+
+  return {
+    Icon: IconComponent,
+    hidden,
+    disabled,
+    onClick,
+  };
+}
+
+function transformCommand<HandlerContext>(
+  command: CommandItemExperience<HandlerContext>,
+  handlerContext: HandlerContext
+): CommandItemState {
+  const commandType = command.type;
+
+  switch (command.type) {
+    case 'icon':
+      return {
+        type: command.type,
+        isQuickAction: command.isQuickAction,
+        danger: command.danger,
+        iconPosition: command.iconPosition,
+        ...transformedProperties(command, handlerContext),
+      } as CommandItemState;
+    case 'button':
+      return {
+        type: command.type,
+        isQuickAction: command.isQuickAction,
+        text: command.text,
+        danger: command.danger,
+        iconPosition: command.iconPosition,
+        localizedTexts: command.localizedText,
+        ...transformedProperties(command, handlerContext),
+      } as CommandItemState;
+    case 'menu':
+      return {
+        type: command.type,
+        text: command.text,
+        danger: command.danger,
+        localizedTexts: command.localizedTexts,
+        iconPosition: command.iconPosition,
+        ...transformedProperties(command, handlerContext),
+        items: command.items.map((item) =>
+          transformMenuItems(item, handlerContext)
+        ),
+      } as CommandItemState;
+    default:
+      throw new Error(`Unknown command type: ${commandType}`);
+  }
+}
+
+function transformMenuItems<HandlerContext>(
+  items: ArrayWithAtLeastOne<MenuItemCommandExperience<HandlerContext>>,
+  handlerContext: HandlerContext
+): ArrayWithAtLeastOne<MenuItemCommandState> {
+  return items.map((item) =>
+    transformMenuItem(item, handlerContext)
+  ) as ArrayWithAtLeastOne<MenuItemCommandState>;
+}
+
+function transformMenuItem<HandlerContext>(
+  item: MenuItemCommandExperience<HandlerContext>,
+  handlerContext: HandlerContext
+): MenuItemCommandState {
+  return {
+    danger: item.danger,
+    text: item.text,
+    localizedTexts: item.localizedTexts,
+    ...transformedProperties(item, handlerContext),
+    items: item.items?.map((item) =>
+      transformMenuItems(item, handlerContext)
+    ) as ArrayGroupWithAtLeastOne<MenuItemCommandState>,
+  };
+}
+
+function transformCommandGroup<HandlerContext>(
+  group: CommandItemExperience<HandlerContext>[],
+  handlerContext: HandlerContext,
+  selector?: CommandItemExperienceSelector<HandlerContext>
+): CommandItemState[] {
+  return group
+    .map((command) => {
+      if (!(selector?.(command) ?? true)) {
+        return false; // Skip command
+      }
+
+      const transformedCommand = transformCommand(command, handlerContext);
+
+      if (transformedCommand.hidden) {
+        return false; // Skip command
+      }
+
+      return transformedCommand;
+    })
+    .filter(Boolean) as CommandItemState[];
+}
+
+export function transformCommadnGroups<HandlerContext>(
+  groups: CommandItemExperience<HandlerContext>[][],
+  handlerContext: HandlerContext,
+  selector?: CommandItemExperienceSelector<HandlerContext>
+): CommandItemState[][] {
+  return groups
+    .map((group) => {
+      return transformCommandGroup(group, handlerContext, selector);
+    })
+    .filter((group) => group.length > 0);
+}

package/src/components/ScrollView/index.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+import { FC, PropsWithChildren } from 'react';
+import Scrollbars, { ScrollbarProps } from 'react-custom-scrollbars-2';
+
+interface ScrollViewProps {
+  className?: string;
+  autoHide?: boolean;
+  rtl?: boolean;
+  onScroll?: ScrollbarProps['onScroll'];
+}
+
+export const ScrollView: FC<PropsWithChildren<ScrollViewProps>> = ({
+  children,
+  className,
+  rtl,
+  autoHide,
+  onScroll,
+}) => (
+  <Scrollbars
+    autoHide={autoHide}
+    className={clsx(className, 'hdl-scrollbar', rtl && 'rtl')}
+    onScroll={onScroll}
+  >
+    {children}
+  </Scrollbars>
+);

package/src/dataform/DataFormProvider/DataResolver.tsx

@@ -0,0 +1,186 @@
+import { Form } from '@headless-adminapp/core/experience/form';
+import {
+  InferredSchemaType,
+  Schema,
+  SchemaAttributes,
+} from '@headless-adminapp/core/schema';
+import { HttpError, IDataService } from '@headless-adminapp/core/transport';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { useEffect, useMemo } from 'react';
+
+import { useMetadata } from '../../metadata/hooks';
+import { useContextSetValue } from '../../mutable';
+import { useDataService } from '../../transport';
+import { DataFormContext } from '../context';
+import { useDataFormSchema, useRecordId, useSelectedForm } from '../hooks';
+
+export function getControls(form: Form) {
+  const controls = form.experience.tabs
+    .flatMap((tab) => tab.tabColumns)
+    .flatMap((tabColumn) => tabColumn.sections)
+    .flatMap((section) => section.controls);
+
+  return controls;
+}
+
+export function getColumns(form: Form) {
+  const columns = Array.from(
+    new Set([
+      ...(form.experience.includeAttributes ?? []),
+      ...form.experience.headerControls,
+      ...getControls(form)
+        .filter((control) => control.type === 'standard')
+        .map((control) => control.attributeName),
+    ])
+  );
+
+  return columns;
+}
+
+async function getRecord({
+  recordId,
+  dataService,
+  form,
+  schema,
+  columns,
+  getSchema,
+}: {
+  recordId: string;
+  dataService: IDataService;
+  form: Form;
+  schema: Schema;
+  columns: string[];
+  getSchema: (logicalName: string) => Schema;
+}) {
+  let record = null;
+
+  try {
+    record = await dataService.retriveRecord(
+      schema.logicalName,
+      recordId,
+      columns
+    );
+  } catch (error) {
+    if (error instanceof HttpError && error.status === 404) {
+      return null;
+    }
+
+    throw error;
+  }
+
+  if (!record) {
+    return null;
+  }
+
+  const controls = getControls(form);
+
+  const editableGridControls = controls.filter(
+    (control) => control.type === 'editablegrid'
+  );
+
+  for (const control of editableGridControls) {
+    if (control.type !== 'editablegrid') {
+      continue;
+    }
+
+    const controlSchema = getSchema(control.logicalName);
+
+    const records = await dataService.retriveRecords<
+      InferredSchemaType<SchemaAttributes>
+    >({
+      logicalName: controlSchema.logicalName,
+      filter: {
+        type: 'and',
+        conditions: [
+          {
+            field: control.referenceAttribute,
+            operator: 'eq',
+            value: recordId,
+          },
+        ],
+      },
+      sort: [
+        {
+          field: controlSchema.createdAtAttribute ?? controlSchema.idAttribute,
+          order: 'asc',
+        },
+      ],
+      limit: 5000,
+      search: '',
+      columns: [
+        controlSchema.idAttribute,
+        control.referenceAttribute,
+        ...control.attributes,
+      ],
+    });
+
+    (record as any)[control.attributeName] = records.records;
+  }
+
+  return record;
+}
+
+export function DataResolver() {
+  const schema = useDataFormSchema();
+  const form = useSelectedForm();
+
+  const dataService = useDataService();
+  const recordId = useRecordId();
+
+  const { getSchema } = useMetadata();
+
+  const setState = useContextSetValue(DataFormContext);
+
+  const columns = useMemo(() => getColumns(form), [form]);
+
+  const queryKey = useMemo(
+    () => ['data', 'retriveRecord', schema.logicalName, recordId, columns],
+    [columns, recordId, schema.logicalName]
+  );
+
+  const { data, refetch, isPending } = useQuery<any>({
+    queryKey,
+    queryFn: async () => {
+      if (!recordId) {
+        return null;
+      }
+
+      const record = getRecord({
+        columns,
+        dataService,
+        form,
+        recordId,
+        schema,
+        getSchema,
+      });
+
+      return record;
+    },
+    placeholderData: keepPreviousData,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+
+  useEffect(() => {
+    setState({
+      record: data,
+    });
+  }, [data, setState]);
+
+  useEffect(() => {
+    setState({
+      dataState: {
+        isFetching: isPending,
+      },
+    });
+  }, [isPending, setState]);
+
+  useEffect(() => {
+    setState({
+      refresh: async () => {
+        await refetch();
+      },
+    });
+  }, [refetch, setState]);
+
+  return null;
+}

package/src/dataform/DataFormProvider/InitialValueResolver.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import { useContextSelector, useContextSetValue } from '../../mutable';
+import { DataFormContext } from '../context';
+import {
+  useDataFormSchema,
+  useFormInstance,
+  useRecordId,
+  useSelectedForm,
+} from '../hooks';
+import { getInitialValues } from '../utils';
+
+export function InitialValueResolver() {
+  const formConfig = useSelectedForm();
+  const schema = useDataFormSchema();
+  const recordId = useRecordId();
+  const record = useContextSelector(DataFormContext, (state) => state.record);
+  const formInstance = useFormInstance();
+
+  const initialValues = useMemo(() => {
+    return getInitialValues({
+      cloneRecord: undefined,
+      form: formConfig,
+      record: record,
+      recordId: recordId,
+      schema: schema,
+      defaultParameters: {},
+      // defaultParameters,
+    });
+  }, [formConfig, record, recordId, schema]);
+
+  const setValue = useContextSetValue(DataFormContext);
+
+  useEffect(() => {
+    setValue({
+      initialValues,
+    });
+  }, [setValue, initialValues]);
+
+  const formInstanceRef = useRef(formInstance);
+  formInstanceRef.current = formInstance;
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // console.log('resetting form', initialValues);
+      formInstanceRef.current.reset(initialValues);
+    });
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [initialValues]);
+
+  return null;
+}

package/src/dataform/DataFormProvider/ReadonlyInfoResolver.tsx

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+
+import { useContextSetValue } from '../../mutable';
+import { DataFormContext } from '../context';
+import { useDataFormSchema, useRecordId } from '../hooks';
+
+export function ReadonlyInfoResolver({
+  setFormReadOnly,
+}: {
+  setFormReadOnly: (value: boolean) => void;
+}) {
+  const schema = useDataFormSchema();
+  const recordId = useRecordId();
+
+  let readonly = false;
+
+  if (schema.restrictions?.disableCreate && !recordId) {
+    readonly = true;
+  }
+
+  if (schema.restrictions?.disableUpdate && recordId) {
+    readonly = true;
+  }
+
+  const setValue = useContextSetValue(DataFormContext);
+
+  useEffect(() => {
+    setValue({
+      isReadonly: readonly,
+    });
+    setFormReadOnly(readonly);
+  }, [setValue, setFormReadOnly, readonly]);
+
+  return null;
+}

package/src/dataform/DataFormProvider/index.tsx

@@ -0,0 +1,102 @@
+import {
+  EntityMainFormCommandItemExperience,
+  Form,
+} from '@headless-adminapp/core/experience/form';
+import {
+  InferredSchemaType,
+  Schema,
+  SchemaAttributes,
+} from '@headless-adminapp/core/schema';
+import { Nullable } from '@headless-adminapp/core/types';
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import { useFormValidationStrings } from '../../form/FormValidationStringContext';
+import { useLocale } from '../../locale/useLocale';
+import { useMetadata } from '../../metadata/hooks/useMetadata';
+import { ContextValue, useCreateContextStore } from '../../mutable';
+import { DataFormContext, DataFormContextState } from '../context';
+import { formValidator } from '../utils';
+import { DataResolver } from './DataResolver';
+import { InitialValueResolver } from './InitialValueResolver';
+import { ReadonlyInfoResolver } from './ReadonlyInfoResolver';
+
+export interface DataFormProviderProps<
+  S extends SchemaAttributes = SchemaAttributes
+> {
+  schema: Schema<S>;
+  form: Form<S>;
+  recordId?: string;
+  commands: EntityMainFormCommandItemExperience[][];
+}
+
+export function DataFormProvider<S extends SchemaAttributes = SchemaAttributes>(
+  props: PropsWithChildren<DataFormProviderProps<S>>
+) {
+  const { getSchema } = useMetadata();
+  const [{ language }] = useLocale();
+  const formValidationStrings = useFormValidationStrings();
+
+  const [formReadOnly, setFormReadOnly] = useState(false); // A trick to provide readOnly info to formInstance
+
+  const formInstance = useForm<any>({
+    mode: 'all',
+    defaultValues: {},
+    resolver: formValidator({
+      form: props.form,
+      getSchema,
+      language,
+      schema: props.schema,
+      strings: formValidationStrings,
+      formReadOnly,
+    }),
+    shouldUnregister: false,
+  });
+
+  const contextValue = useCreateContextStore<DataFormContextState<S>>({
+    schema: props.schema,
+    form: props.form,
+    commands: props.commands,
+    dataState: { isFetching: false },
+    recordId: props.recordId,
+    refresh: async () => {}, // Initial value, will be overridden
+    cloneId: undefined,
+    // formInstance,
+    // formInstanceRenderCount: 0,
+    initialValues: {} as Nullable<InferredSchemaType<S>>,
+  });
+
+  useEffect(() => {
+    contextValue.setValue({
+      form: props.form,
+      schema: props.schema,
+      recordId: props.recordId,
+      cloneId: undefined,
+      commands: props.commands,
+    });
+  }, [
+    props.form,
+    props.schema,
+    props.recordId,
+    contextValue,
+    getSchema,
+    props.commands,
+  ]);
+
+  return (
+    <DataFormContext.Provider
+      value={
+        contextValue as unknown as ContextValue<
+          DataFormContextState<SchemaAttributes>
+        >
+      }
+    >
+      <FormProvider {...formInstance}>
+        <DataResolver />
+        <InitialValueResolver />
+        <ReadonlyInfoResolver setFormReadOnly={setFormReadOnly} />
+        {props.children}
+      </FormProvider>
+    </DataFormContext.Provider>
+  );
+}

package/src/dataform/context.ts

@@ -0,0 +1,53 @@
+import {
+  EntityMainFormCommandItemExperience,
+  Form,
+} from '@headless-adminapp/core/experience/form';
+import {
+  InferredSchemaType,
+  Schema,
+  SchemaAttributes,
+} from '@headless-adminapp/core/schema';
+import { Data } from '@headless-adminapp/core/transport';
+import { Nullable } from '@headless-adminapp/core/types';
+
+import { createContext } from '../mutable';
+
+export type DataFormContextState<
+  SA extends SchemaAttributes = SchemaAttributes
+> = {
+  // from props
+  schema: Schema<SA>;
+  form: Form<SA>;
+  recordId?: string | number;
+  cloneId?: string | number;
+  commands: EntityMainFormCommandItemExperience[][];
+
+  // internal state (visual)
+  // field visibilities
+  // disabled fields
+  // form state (dirty, touched, readonly, etc)
+  activeTab?: string;
+
+  // internal state (data)
+  record?: Data<InferredSchemaType<SA>>;
+  cloneRecord?: Data<InferredSchemaType<SA>>;
+  isReadonly?: boolean;
+
+  dataState: {
+    isFetching: boolean;
+    isError?: boolean;
+  };
+
+  refresh: () => Promise<void>;
+
+  // form
+  initialValues: Nullable<InferredSchemaType<SA>>;
+  // formInstance: UseFormReturn<any, any, undefined>;
+  // formInstanceRenderCount: number;
+
+  // other
+  // config: FormConfig;
+  // useCustomState?: () => unknown;
+};
+
+export const DataFormContext = createContext<DataFormContextState>();

package/src/dataform/hooks/index.ts

@@ -0,0 +1,11 @@
+export * from './useFormInstance';
+export * from './useFormIsDirty';
+export * from './useFormIsReadonly';
+export * from './useFormNotifications';
+export * from './useFormRecord';
+export * from './useFormSave';
+export * from './useFormSchema';
+export * from './useMainFormCommands';
+export * from './useRecordId';
+export * from './useRecordTitle';
+export * from './useSelectedForm';

package/src/dataform/hooks/useFormInstance.ts

@@ -0,0 +1,6 @@
+import { useFormContext } from 'react-hook-form';
+
+export function useFormInstance() {
+  const formInstance = useFormContext();
+  return formInstance;
+}

package/src/dataform/hooks/useFormIsDirty.ts

@@ -0,0 +1,7 @@
+import { useFormInstance } from './useFormInstance';
+
+export function useFormIsDirty() {
+  const formInstance = useFormInstance();
+
+  return Object.keys(formInstance.formState.dirtyFields).length > 0;
+}

package/src/dataform/hooks/useFormIsReadonly.ts

@@ -0,0 +1,11 @@
+import { useContextSelector } from '../../mutable';
+import { DataFormContext } from '../context';
+
+export function useFormIsReadonly() {
+  const readonly = useContextSelector(
+    DataFormContext,
+    (state) => state.isReadonly
+  );
+
+  return readonly;
+}

package/src/dataform/hooks/useFormNotifications.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import { useFormInstance } from './useFormInstance';
+import { useFormIsReadonly } from './useFormIsReadonly';
+
+export function useFormNotifications() {
+  const readonly = useFormIsReadonly();
+
+  const formInstance = useFormInstance();
+
+  const formInstanceAvailable = !!formInstance;
+
+  return useMemo(() => {
+    type Notification = {
+      level: 'info' | 'warning' | 'error';
+      message: string;
+    };
+
+    const notifications: Notification[] = [];
+
+    if (readonly) {
+      notifications.push({
+        level: 'warning',
+        message: 'This record is read only',
+      });
+    }
+
+    if (
+      formInstanceAvailable &&
+      formInstance.formState.isSubmitted &&
+      Object.keys(formInstance.formState.errors).length > 0
+    ) {
+      notifications.push({
+        level: 'error',
+        message: 'Please fill in the required fields',
+      });
+    }
+
+    return notifications;
+  }, [
+    formInstanceAvailable,
+    formInstance?.formState.errors,
+    formInstance?.formState.isSubmitted,
+    readonly,
+  ]);
+}

package/src/dataform/hooks/useFormRecord.ts

@@ -0,0 +1,7 @@
+import { useContextSelector } from '../../mutable';
+import { DataFormContext } from '../context';
+
+export function useFormRecord() {
+  const record = useContextSelector(DataFormContext, (state) => state.record);
+  return record;
+}