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

package/src/datagrid/hooks/useGridColumns.ts

@@ -0,0 +1,13 @@
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+
+import { useContextSelector } from '../../mutable/context';
+import { GridContext, TransformedViewColumn } from '../context';
+
+export function useGridColumns<
+  S extends SchemaAttributes = SchemaAttributes
+>(): TransformedViewColumn<S>[] {
+  return useContextSelector(
+    GridContext,
+    (state) => state.columns as TransformedViewColumn<S>[]
+  );
+}

package/src/datagrid/hooks/useGridCommands.ts

@@ -0,0 +1,21 @@
+import { CommandItemExperience } from '@headless-adminapp/core/experience/command';
+import {
+  EntityMainGridCommandContext,
+  EntitySubGridCommandContext,
+} from '@headless-adminapp/core/experience/view';
+
+import { useContextSelector } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridCommands<
+  CommandContext extends
+    | EntityMainGridCommandContext
+    | EntitySubGridCommandContext = EntityMainGridCommandContext
+>(): CommandItemExperience<CommandContext>[][] {
+  const commands = useContextSelector(
+    GridContext,
+    (state) => state.commands as CommandItemExperience<CommandContext>[][]
+  );
+
+  return commands;
+}

package/src/datagrid/hooks/useGridData.ts

@@ -0,0 +1,8 @@
+import { useContextSelector } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridData() {
+  const data = useContextSelector(GridContext, (state) => state.data);
+
+  return data;
+}

package/src/datagrid/hooks/useGridDataState.ts

@@ -0,0 +1,8 @@
+import { useContextSelector } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridDataState() {
+  const data = useContextSelector(GridContext, (state) => state.dataState);
+
+  return data;
+}

package/src/datagrid/hooks/useGridExtraFilter.ts

@@ -0,0 +1,6 @@
+import { useContextSelector } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridExtraFilter() {
+  return useContextSelector(GridContext, (state) => state.extraFilter);
+}

package/src/datagrid/hooks/useGridOptions.ts

@@ -0,0 +1,3 @@
+export function useDataGridOptions() {
+  return null as any;
+}

package/src/datagrid/hooks/useGridPagination.ts

@@ -0,0 +1,3 @@
+export function useGridPagination() {
+  return null as any;
+}

package/src/datagrid/hooks/useGridRefresh.ts

@@ -0,0 +1,19 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+import { useDataGridSchema } from './useGridSchema';
+
+export function useGridRefresh() {
+  const queryClient = useQueryClient();
+  const schema = useDataGridSchema();
+
+  const refresh = useCallback(() => {
+    queryClient
+      .resetQueries({
+        queryKey: ['data', 'retriveRecords', schema.logicalName],
+      })
+      .catch(console.error);
+  }, [queryClient, schema.logicalName]);
+
+  return refresh;
+}

package/src/datagrid/hooks/useGridSchema.ts

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

package/src/datagrid/hooks/useGridSelection.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+
+import { useContextSelector, useContextSetValue } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridSelection() {
+  const selecteIds = useContextSelector(
+    GridContext,
+    (state) => state.selectedIds
+  );
+
+  const setValue = useContextSetValue(GridContext);
+
+  const setSelectedIds = useCallback(
+    (selectedIds: string[] | ((previousIds: string[]) => string[])) => {
+      if (typeof selectedIds === 'function') {
+        setValue((state) => ({
+          selectedIds: selectedIds(state.selectedIds),
+        }));
+      } else {
+        setValue({ selectedIds });
+      }
+    },
+    [setValue]
+  );
+
+  return [selecteIds, setSelectedIds] as const;
+}

package/src/datagrid/hooks/useGridSorting.ts

@@ -0,0 +1,23 @@
+import { SortingState } from '@headless-adminapp/core/experience/view';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { useCallback } from 'react';
+
+import { useContextSelector, useContextSetValue } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridSorting<
+  S extends SchemaAttributes = SchemaAttributes
+>() {
+  const sorting = useContextSelector(GridContext, (state) => state.sorting);
+
+  const setValue = useContextSetValue(GridContext);
+
+  const setSorting = useCallback(
+    (value: SortingState<S>) => {
+      setValue({ sorting: value as any });
+    },
+    [setValue]
+  );
+
+  return [sorting, setSorting] as const;
+}

package/src/datagrid/hooks/useGridViewLookupData.ts

@@ -0,0 +1,10 @@
+import { useContextSelector } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridViewLookupData() {
+  const viewLookup = useContextSelector(
+    GridContext,
+    (state) => state.viewLookup
+  );
+  return viewLookup;
+}

package/src/datagrid/hooks/useLoadMainGridPage.ts

@@ -0,0 +1,90 @@
+import { LocalizedDataLookup } from '@headless-adminapp/core/attributes';
+import {
+  EntityMainGridCommandItemExperience,
+  View,
+} from '@headless-adminapp/core/experience/view';
+import { Schema } from '@headless-adminapp/core/schema';
+
+import { useExperienceView } from '../../metadata/hooks/useExperienceView';
+import { useExperienceViewCommands } from '../../metadata/hooks/useExperienceViewCommands';
+import { useExperienceViewLookup } from '../../metadata/hooks/useExperienceViewLookup';
+import { useSchema } from '../../metadata/hooks/useSchema';
+
+type UseLoadMainGridPageResult =
+  | {
+      loading: true;
+    }
+  | {
+      loading: false;
+      error: true;
+      title: string;
+      message: string;
+    }
+  | {
+      loading: false;
+      error: false;
+      schema: Schema;
+      viewLookup: LocalizedDataLookup[];
+      commands: EntityMainGridCommandItemExperience[][];
+      view: View;
+    };
+
+export function useLoadMainGridPage(
+  logicalName: string,
+  viewId: string | undefined
+): UseLoadMainGridPageResult {
+  const schema = useSchema(logicalName);
+
+  const { viewLookup } = useExperienceViewLookup(logicalName);
+  const { commands } = useExperienceViewCommands(logicalName);
+
+  const { view, isLoadingView } = useExperienceView(logicalName, viewId);
+
+  if (!schema) {
+    return {
+      loading: false,
+      error: true,
+      title: 'Schema not found',
+      message: 'The schema was not found',
+    };
+  }
+
+  if (!view) {
+    if (isLoadingView) {
+      return {
+        loading: true,
+      };
+    }
+
+    return {
+      loading: false,
+      error: true,
+      title: 'View not found',
+      message: 'The view was not found',
+    };
+  }
+
+  if (view.logicalName !== schema.logicalName) {
+    if (isLoadingView) {
+      return {
+        loading: true,
+      };
+    }
+
+    return {
+      loading: false,
+      error: true,
+      title: 'View not found',
+      message: 'The view was not found (missmatch)',
+    };
+  }
+
+  return {
+    loading: false,
+    error: false,
+    schema,
+    viewLookup,
+    commands,
+    view,
+  };
+}

package/src/datagrid/hooks/useMainGridCommands.ts

@@ -0,0 +1,255 @@
+import { EntityMainGridCommandContext } from '@headless-adminapp/core/experience/view';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { useCommands } from '../../command';
+import {
+  CommandItemState,
+  MenuItemCommandState,
+  UtilityContextState,
+} from '../../command/types';
+import {
+  useOpenAlertDialog,
+  useOpenConfirmDialog,
+  useOpenErrorDialog,
+  useOpenPromptDialog,
+} from '../../dialog/hooks';
+import { useLocale } from '../../locale/useLocale';
+import { useMetadata } from '../../metadata/hooks/useMetadata';
+import { useProgressIndicator } from '../../progress-indicator/hooks/useProgressIndicator';
+import { useOpenToastNotification } from '../../toast-notification/hooks/useOpenToastNotification';
+import { useDataService } from '../../transport';
+import { useGridColumnFilter } from './useGridColumnFilter';
+import { useGridCommands } from './useGridCommands';
+import { useGridData } from './useGridData';
+import { useGridExtraFilter } from './useGridExtraFilter';
+import { useGridRefresh } from './useGridRefresh';
+import { useDataGridSchema } from './useGridSchema';
+import { useGridSelection } from './useGridSelection';
+import { useSearchText } from './useSearchText';
+import { useSelectedView } from './useSelectedView';
+
+export function useUtility(): UtilityContextState {
+  const { hideProgressIndicator, showProgressIndicator } =
+    useProgressIndicator();
+  const openAlertDialog = useOpenAlertDialog();
+  const openConfirmDialog = useOpenConfirmDialog();
+  const openErrorDialog = useOpenErrorDialog();
+  const openPromptDialog = useOpenPromptDialog();
+  const openToastNotification = useOpenToastNotification();
+
+  return {
+    hideProgressIndicator,
+    showProgressIndicator,
+    openAlertDialog,
+    openConfirmDialog: openConfirmDialog as any,
+    openErrorDialog,
+    openPromptDialog: openPromptDialog as any,
+    showNotification: openToastNotification,
+  };
+}
+
+export function useGridControlContext() {
+  const data = useGridData();
+  const schema = useDataGridSchema();
+  const view = useSelectedView();
+  const [searchText] = useSearchText();
+  const [selectedIds] = useGridSelection();
+  const [columnFilter] = useGridColumnFilter();
+  const extraFilter = useGridExtraFilter();
+  const refresh = useGridRefresh();
+
+  const selectedIdsObj = useMemo(() => {
+    const obj: Record<string, boolean> = {};
+    selectedIds.forEach((id) => {
+      obj[id] = true;
+    });
+    return obj;
+  }, [selectedIds]);
+
+  const selectedRecords = useMemo(() => {
+    return (data?.records ?? []).filter(
+      (record) => selectedIdsObj[record[schema.idAttribute as string] as string]
+    );
+  }, [data, schema, selectedIdsObj]);
+
+  return {
+    data,
+    logicalName: schema.logicalName,
+    schema,
+    refresh,
+    searchText,
+    selectedIds,
+    selectedRecords,
+    view,
+    viewId: view.id,
+    columnFilter,
+    extraFilter,
+  };
+}
+
+export function useMainGridCommandHandlerContext(): EntityMainGridCommandContext {
+  const dataService = useDataService();
+  const queryClient = useQueryClient();
+  const { appStore, experienceStore, schemaStore } = useMetadata();
+
+  const utility = useUtility();
+  const [locale] = useLocale();
+
+  const primaryControl = useGridControlContext();
+
+  return {
+    dataService,
+    queryClient,
+    utility,
+    primaryControl,
+    stores: {
+      appStore,
+      experienceStore,
+      schemaStore,
+    },
+    locale,
+  };
+}
+
+export function useMainGridCommands(): CommandItemState[][] {
+  const commands = useGridCommands();
+  const handlerContext = useMainGridCommandHandlerContext();
+
+  // console.log('temp. gc', commands);
+
+  return useCommands<EntityMainGridCommandContext>(commands, handlerContext);
+
+  // return [
+  //   [
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Delete',
+  //       text: 'Delete',
+  //       danger: true,
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //   ],
+  //   [
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'menu',
+  //       icon: 'Add',
+  //       text: 'Report',
+  //       danger: true,
+  //       handlerId: 'report',
+  //       items: [
+  //         {
+  //           icon: 'Add',
+  //           text: 'Export',
+  //           danger: true,
+  //         },
+  //       ],
+  //     },
+  //     {
+  //       type: 'menu',
+  //       icon: 'Add',
+  //       text: 'Report',
+  //       danger: true,
+  //       items: [
+  //         {
+  //           icon: 'Add',
+  //           text: 'Export',
+  //           danger: true,
+  //         },
+  //       ],
+  //     },
+  //   ],
+  //   [
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //     {
+  //       type: 'button',
+  //       icon: 'Add',
+  //       text: 'Add',
+  //     },
+  //   ],
+  // ];
+}
+
+export function useMainGridContextCommands(): MenuItemCommandState[][] {
+  const commands = useGridCommands();
+  const handlerContext = useMainGridCommandHandlerContext();
+
+  return useCommands<EntityMainGridCommandContext>(
+    commands,
+    handlerContext,
+    (command) => ('isContextMenu' in command && command.isContextMenu) ?? false
+  ) as MenuItemCommandState[][];
+}

package/src/datagrid/hooks/useMaxRecords.ts

@@ -0,0 +1,6 @@
+import { useContextSelector } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useMaxRecords() {
+  return useContextSelector(GridContext, (state) => state.maxRecords);
+}

package/src/datagrid/hooks/useSearchText.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+import { useContextSelector, useContextSetValue } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useSearchText() {
+  const searchText = useContextSelector(
+    GridContext,
+    (context) => context.searchText
+  );
+
+  const setValue = useContextSetValue(GridContext);
+
+  const setSearchText = useCallback(
+    (value: string) => {
+      setValue({ searchText: value });
+    },
+    [setValue]
+  );
+
+  return [searchText, setSearchText] as const;
+}

package/src/datagrid/hooks/useSelectedView.ts

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

package/src/datagrid/hooks/useSubGridCommands.ts

@@ -0,0 +1,104 @@
+import { EntitySubGridCommandContext } from '@headless-adminapp/core/experience/view';
+import { useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { useCommands } from '../../command';
+import { CommandItemState, MenuItemCommandState } from '../../command/types';
+import { useMainFormCommandHandlerContext } from '../../dataform/hooks/useMainFormCommands';
+import { useLocale } from '../../locale/useLocale';
+import { useMetadata } from '../../metadata/hooks/useMetadata';
+import { useDataService } from '../../transport';
+import { useGridColumnFilter } from './useGridColumnFilter';
+import { useGridCommands } from './useGridCommands';
+import { useGridData } from './useGridData';
+import { useGridExtraFilter } from './useGridExtraFilter';
+import { useGridRefresh } from './useGridRefresh';
+import { useDataGridSchema } from './useGridSchema';
+import { useGridSelection } from './useGridSelection';
+import { useUtility } from './useMainGridCommands';
+import { useSearchText } from './useSearchText';
+import { useSelectedView } from './useSelectedView';
+
+export function useSubGridCommandHandlerContext(): EntitySubGridCommandContext {
+  const dataService = useDataService();
+  const queryClient = useQueryClient();
+  const { appStore, experienceStore, schemaStore } = useMetadata();
+
+  const data = useGridData();
+  const schema = useDataGridSchema();
+  const view = useSelectedView();
+  const [searchText] = useSearchText();
+  const [selectedIds] = useGridSelection();
+
+  const selectedIdsObj = useMemo(() => {
+    const obj: Record<string, boolean> = {};
+    selectedIds.forEach((id) => {
+      obj[id] = true;
+    });
+    return obj;
+  }, [selectedIds]);
+
+  const selectedRecords = useMemo(() => {
+    return (data?.records ?? []).filter(
+      (record) => selectedIdsObj[record[schema.idAttribute as string] as string]
+    );
+  }, [data, schema, selectedIdsObj]);
+
+  const [columnFilter] = useGridColumnFilter();
+  const extraFilter = useGridExtraFilter();
+
+  const refresh = useGridRefresh();
+  const utility = useUtility();
+  const [locale] = useLocale();
+
+  const mainFormHandlerContext = useMainFormCommandHandlerContext();
+
+  // console.log('mainFormHandlerContext', mainFormHandlerContext);
+
+  return {
+    dataService,
+    queryClient,
+    utility,
+    primaryControl: mainFormHandlerContext.primaryControl,
+    secondaryControl: {
+      data,
+      logicalName: schema.logicalName,
+      schema,
+      refresh,
+      searchText,
+      selectedIds,
+      selectedRecords,
+      view,
+      viewId: view.id,
+      columnFilter,
+      extraFilter,
+    },
+    stores: {
+      appStore,
+      experienceStore,
+      schemaStore,
+    },
+    locale,
+  };
+}
+
+export function useSubGridCommands(): CommandItemState[][] {
+  const commands = useGridCommands<EntitySubGridCommandContext>();
+  const handlerContext = useSubGridCommandHandlerContext();
+
+  console.log('temp. commands (s)', commands);
+  console.log('temp. handlerContext (s)', handlerContext);
+
+  return useCommands<EntitySubGridCommandContext>(commands, handlerContext);
+}
+
+export function useSubGridContextCommands(): MenuItemCommandState[][] {
+  const commands = useGridCommands<EntitySubGridCommandContext>();
+  const handlerContext = useSubGridCommandHandlerContext();
+
+  return useCommands<EntitySubGridCommandContext>(
+    commands,
+    handlerContext,
+    (command) => ('isContextMenu' in command && command.isContextMenu) ?? false
+  ) as MenuItemCommandState[][];
+}

package/src/dialog/DialogProvider.tsx

@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren } from 'react';
+
+import { useCreateContextStore } from '../mutable/context';
+import { DialogContext, DialogContextState } from './context';
+
+interface DialogProviderProps {}
+
+export const DialogProvider: FC<PropsWithChildren<DialogProviderProps>> = ({
+  children,
+}) => {
+  const contextState = useCreateContextStore<DialogContextState>({
+    items: [],
+  });
+
+  return (
+    <DialogContext.Provider value={contextState}>
+      {children}
+    </DialogContext.Provider>
+  );
+};