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

package/src/datagrid/DataGridProvider/DataResolver.tsx

@@ -0,0 +1,281 @@
+import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import {
+  InferredSchemaType,
+  Schema,
+  SchemaAttributes,
+} from '@headless-adminapp/core/schema';
+import { Filter } from '@headless-adminapp/core/transport';
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo } from 'react';
+
+import { useDebouncedValue } from '../../hooks/useDebouncedValue';
+import { useMetadata } from '../../metadata/hooks/useMetadata';
+import { useContextSetValue } from '../../mutable/context';
+import { useDataService } from '../../transport';
+import { GridContext } from '../context';
+import {
+  useDataGridSchema,
+  useGridColumnFilter,
+  useGridColumns,
+  useGridExtraFilter,
+  useGridSorting,
+  useMaxRecords,
+  useSearchText,
+  useSelectedView,
+} from '../hooks';
+import { transformColumnFilter } from './utils';
+
+const ROWS_PER_PAGE = 100;
+const MAX_RECORDS = 10000;
+
+function mergeConditions(
+  schema: Schema,
+  filter: Filter | null | undefined,
+  extraFilter: Filter | null | undefined,
+  columnFilters: Partial<Record<string, ColumnCondition>> | undefined,
+  getSchema: (logicalName: string) => Schema
+): Filter | null {
+  const conditions: any[] = [];
+
+  if (filter) {
+    conditions.push(filter);
+  }
+
+  if (extraFilter) {
+    conditions.push(extraFilter);
+  }
+
+  if (columnFilters) {
+    const transformedColumnFilters = transformColumnFilter(
+      columnFilters,
+      schema,
+      getSchema
+    );
+
+    if (transformedColumnFilters) {
+      conditions.push({
+        type: 'and',
+        conditions: Object.entries(transformedColumnFilters).map(
+          ([field, condition]) => {
+            return {
+              field,
+              operator: condition!.operator,
+              value: condition!.value,
+              extendedKey: condition!.extendedKey,
+            };
+          }
+        ),
+      });
+    }
+  }
+
+  if (conditions.length === 0) {
+    return null;
+  }
+
+  if (conditions.length === 1) {
+    return conditions[0];
+  }
+
+  return {
+    type: 'and',
+    conditions,
+  };
+}
+
+export function DataResolver<S extends SchemaAttributes = SchemaAttributes>() {
+  const schema = useDataGridSchema();
+  const view = useSelectedView();
+
+  const dataService = useDataService();
+  const [sorting] = useGridSorting();
+  const [searchText] = useSearchText();
+  const extraFilter = useGridExtraFilter();
+  const [columnFilters] = useGridColumnFilter();
+  const gridColumns = useGridColumns();
+  const maxRecords = useMaxRecords() ?? MAX_RECORDS;
+
+  const { getSchema } = useMetadata();
+
+  const setState = useContextSetValue(GridContext);
+
+  const [search] = useDebouncedValue(searchText, 500);
+
+  const columns = useMemo(
+    () =>
+      Array.from(
+        new Set([
+          ...gridColumns.filter((x) => !x.expandedKey).map((x) => x.name),
+          schema.primaryAttribute,
+        ])
+      ),
+    [gridColumns, schema.primaryAttribute]
+  );
+
+  const expand = useMemo(
+    () =>
+      gridColumns
+        .filter((x) => x.expandedKey)
+        .reduce((acc, x) => {
+          if (!acc[x.name]) {
+            acc[x.name] = [];
+          }
+
+          if (!acc[x.name].includes(x.expandedKey!)) {
+            acc[x.name].push(x.expandedKey!);
+          }
+          return acc;
+        }, {} as Record<string, string[]>),
+    [gridColumns]
+  );
+
+  const queryKey = useMemo(
+    () => [
+      'data',
+      'retriveRecords',
+      schema.logicalName,
+      search,
+      view.experience.filter,
+      extraFilter,
+      sorting,
+      columnFilters,
+      columns,
+      expand,
+      maxRecords,
+    ],
+    [
+      columnFilters,
+      columns,
+      expand,
+      extraFilter,
+      schema.logicalName,
+      search,
+      sorting,
+      view.experience.filter,
+      maxRecords,
+    ]
+  );
+
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    return () => {
+      // Clear all pages except the first one when the component is unmounted
+      queryClient.setQueryData(
+        queryKey,
+        (oldData: { pageParams: unknown[]; pages: unknown[] }) => {
+          if (!oldData) {
+            return oldData;
+          }
+
+          if (!oldData.pageParams.length || !oldData.pages.length) {
+            return oldData;
+          }
+
+          return {
+            pageParams: [oldData.pageParams[0]],
+            pages: [oldData.pages[0]],
+          };
+        }
+      );
+    };
+  }, [queryClient, queryKey]);
+
+  const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage } =
+    useInfiniteQuery({
+      queryKey: queryKey,
+      queryFn: async (queryContext) => {
+        const params: {
+          pageIndex: number;
+        } = queryContext.pageParam ?? {
+          pageIndex: 0,
+        };
+
+        const skip = params.pageIndex * ROWS_PER_PAGE;
+        const limit = Math.min(ROWS_PER_PAGE, Math.max(0, maxRecords - skip));
+
+        if (limit <= 0) {
+          return {
+            params: params,
+            data: {
+              logicalName: schema.logicalName,
+              count: 0,
+              records: [],
+            },
+          };
+        }
+
+        const result = await dataService.retriveRecords<InferredSchemaType<S>>({
+          logicalName: schema.logicalName,
+          search,
+          columns: columns as unknown as Array<keyof InferredSchemaType<S>>,
+          expand,
+          filter: mergeConditions(
+            schema,
+            view.experience.filter,
+            extraFilter,
+            columnFilters,
+            getSchema
+          ),
+          skip,
+          limit,
+          sort: sorting as any,
+        });
+        return {
+          params: params,
+          data: result,
+        };
+      },
+      getNextPageParam: (lastPage) => {
+        if (
+          lastPage.data.count <
+          ROWS_PER_PAGE * (lastPage.params.pageIndex + 1)
+        ) {
+          return undefined;
+        }
+
+        return {
+          pageIndex: lastPage.params.pageIndex + 1,
+        };
+      },
+      initialPageParam: {
+        pageIndex: 0,
+      },
+    });
+
+  useEffect(() => {
+    setState({
+      fetchNextPage: fetchNextPage,
+    });
+  }, [fetchNextPage, setState]);
+
+  useEffect(() => {
+    if (!data?.pages.length) {
+      setState({
+        data: null,
+      });
+      return;
+    }
+
+    const finalData = {
+      logicalName: data?.pages?.[0].data.logicalName,
+      count: data?.pages?.[0].data.count ?? 0,
+      records: data?.pages.map((x) => x.data.records).flat() ?? [],
+    };
+    setState({
+      data: finalData,
+    });
+  }, [data, setState]);
+
+  useEffect(() => {
+    setState({
+      dataState: {
+        isFetching,
+        hasNextPage,
+        isFetchingNextPage,
+      },
+    });
+  }, [hasNextPage, isFetching, isFetchingNextPage, setState]);
+
+  return null;
+}

package/src/datagrid/DataGridProvider/index.tsx

@@ -0,0 +1,134 @@
+import { LocalizedDataLookup } from '@headless-adminapp/core/attributes';
+import { CommandItemExperience } from '@headless-adminapp/core/experience/command';
+import {
+  EntityMainGridCommandContext,
+  EntitySubGridCommandContext,
+  View,
+} from '@headless-adminapp/core/experience/view';
+import { Schema, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Filter } from '@headless-adminapp/core/transport';
+import { PropsWithChildren, useCallback, useEffect, useRef } from 'react';
+
+import { useLocale } from '../../locale/useLocale';
+import { useMetadata } from '../../metadata/hooks/useMetadata';
+import { ContextValue, useCreateContextStore } from '../../mutable/context';
+import { GridContext, GridContextState } from '../context';
+import { DataResolver } from './DataResolver';
+import { transformViewColumns } from './transformViewColumns';
+
+export interface DataGridProviderProps<
+  S extends SchemaAttributes = SchemaAttributes,
+  CommandContext extends
+    | EntityMainGridCommandContext
+    | EntitySubGridCommandContext = EntityMainGridCommandContext
+> {
+  schema: Schema<S>;
+  views: LocalizedDataLookup[];
+  view: View<S>;
+  extraFilter?: Filter;
+  commands: CommandItemExperience<CommandContext>[][];
+  onChangeView: (viewId: string) => void;
+  isSubGrid?: boolean;
+  allowViewSelection?: boolean;
+  maxRecords?: number;
+}
+
+export function DataGridProvider<
+  S extends SchemaAttributes = SchemaAttributes,
+  CommandContext extends
+    | EntityMainGridCommandContext
+    | EntitySubGridCommandContext = EntityMainGridCommandContext
+>(props: PropsWithChildren<DataGridProviderProps<S, CommandContext>>) {
+  const onChangeViewRef = useRef(props.onChangeView);
+  onChangeViewRef.current = props.onChangeView;
+  const { schemaStore } = useMetadata();
+  const [{ language }] = useLocale();
+
+  const handleViewChange = useCallback((viewId: string) => {
+    onChangeViewRef.current(viewId);
+  }, []);
+
+  const contextValue = useCreateContextStore<
+    GridContextState<S, CommandContext>
+  >({
+    schema: props.schema,
+    columnFilters: {},
+    data: {
+      logicalName: props.schema.logicalName,
+      records: [],
+      count: 0,
+    },
+    searchText: '',
+    selectedIds: [],
+    sorting: props.view.experience.defaultSorting ?? [],
+    view: props.view,
+    commands: props.commands,
+    columns: transformViewColumns(
+      props.view.logicalName,
+      props.view.experience.grid.columns,
+      schemaStore,
+      language
+    ),
+    viewLookup: props.views,
+    extraFilter: props.extraFilter,
+    dataState: {
+      hasNextPage: false,
+      isFetching: false,
+      isFetchingNextPage: false,
+    },
+    fetchNextPage: () => {},
+    onChangeView: handleViewChange,
+    isSubGrid: props.isSubGrid ?? false,
+    allowViewSelection: props.allowViewSelection ?? false,
+    maxRecords: props.maxRecords,
+  });
+
+  useEffect(() => {
+    contextValue.setValue({
+      view: props.view,
+      searchText: '',
+      selectedIds: [],
+      sorting: props.view.experience.defaultSorting ?? [],
+      columns: transformViewColumns(
+        props.view.logicalName,
+        props.view.experience.grid.columns,
+        schemaStore,
+        language
+      ),
+      maxRecords: props.maxRecords,
+    });
+  }, [props.view, props.maxRecords, contextValue, schemaStore, language]);
+
+  useEffect(() => {
+    contextValue.setValue({
+      schema: props.schema,
+      searchText: '',
+      selectedIds: [],
+    });
+  }, [props.schema, contextValue]);
+
+  useEffect(() => {
+    contextValue.setValue({
+      extraFilter: props.extraFilter,
+    });
+  }, [props.extraFilter, contextValue]);
+
+  useEffect(() => {
+    contextValue.setValue({
+      commands: props.commands,
+    });
+  }, [props.commands, contextValue]);
+
+  return (
+    <GridContext.Provider
+      value={
+        contextValue as unknown as ContextValue<
+          GridContextState<SchemaAttributes>
+        >
+      }
+    >
+      <DataResolver />
+      {props.children}
+    </GridContext.Provider>
+  );
+}

package/src/datagrid/DataGridProvider/transformViewColumns.ts

@@ -0,0 +1,54 @@
+import { ViewColumn } from '@headless-adminapp/core/experience/view';
+import { SchemaAttributes } from '@headless-adminapp/core/schema';
+import { ISchemaStore } from '@headless-adminapp/core/store';
+
+import { localizedLabel } from '../../builders/CommandBuilder';
+import { TransformedViewColumn } from '../context';
+
+export function transformViewColumns<S extends SchemaAttributes>(
+  logicalName: string,
+  columns: ViewColumn<S>[],
+  schemaStore: ISchemaStore,
+  language: string
+): TransformedViewColumn<S>[] {
+  const schema = schemaStore.getSchema(logicalName);
+
+  return columns
+    .map((column) => {
+      const attribute = schema.attributes[column.name as string];
+
+      if (!attribute) {
+        return null;
+      }
+
+      const label = localizedLabel(language, attribute);
+
+      if (column.expandedKey) {
+        if (attribute.type !== 'lookup') {
+          return null;
+        }
+
+        const lookupSchema = schemaStore.getSchema(attribute.entity);
+        const lookupAttribute = lookupSchema.attributes[column.expandedKey];
+
+        if (!lookupAttribute) {
+          return null;
+        }
+
+        const lookupLabel = localizedLabel(language, lookupAttribute);
+
+        return {
+          ...column,
+          id: `${column.name as string}.${column.expandedKey}`,
+          label: `${lookupLabel} (${label})`,
+        };
+      }
+
+      return {
+        ...column,
+        id: column.name as string,
+        label: label,
+      };
+    })
+    .filter(Boolean) as unknown as TransformedViewColumn<S>[];
+}

package/src/datagrid/DataGridProvider/utils.ts

@@ -0,0 +1,89 @@
+import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import { Schema } from '@headless-adminapp/core/schema';
+import dayjs from 'dayjs';
+
+export function transformColumnFilter(
+  filter: Partial<Record<string, ColumnCondition>>,
+  schema: Schema,
+  getSchema: (logicalName: string) => Schema
+) {
+  const transformedResult = Object.entries(filter).reduce(
+    (acc, [id, value]) => {
+      const [key, extendedKey] = id.split('.');
+      let attribute = schema.attributes[key];
+
+      if (!attribute) {
+        return acc;
+      }
+
+      if (extendedKey) {
+        if (attribute.type !== 'lookup') {
+          throw new Error(
+            `Invalid column filter key: ${id}. Key ${key} is not a lookup column.`
+          );
+        }
+
+        const lookupSchema = getSchema(attribute.entity);
+        attribute = lookupSchema.attributes[extendedKey];
+      }
+
+      if (!attribute) {
+        return acc;
+      }
+
+      if (value) {
+        let transformedValue: any = undefined;
+
+        switch (value.operator) {
+          case 'eq':
+          case 'ne':
+          case 'begins-with':
+          case 'not-begin-with':
+          case 'like':
+          case 'not-like':
+          case 'ends-with':
+          case 'not-end-with':
+          case 'gt':
+          case 'gte':
+          case 'lt':
+          case 'lte':
+          case 'last-x-days':
+          case 'last-x-hours':
+            transformedValue = value.value[0];
+            break;
+          case 'on':
+          case 'on-or-after':
+          case 'on-or-before':
+            transformedValue = dayjs(value.value[0]).format('YYYY-MM-DD');
+            break;
+          case 'in':
+          case 'not-in':
+            if (attribute.type === 'lookup') {
+              transformedValue = value.value[0].map((x: any) => x.id);
+            } else {
+              transformedValue = value.value[0];
+            }
+            break;
+          case 'between':
+            transformedValue = value.value;
+            break;
+        }
+
+        acc[key] = {
+          operator: value.operator,
+          value: transformedValue,
+          extendedKey,
+        };
+      }
+
+      return acc;
+    },
+    {} as Record<string, ColumnCondition>
+  );
+
+  if (Object.keys(transformedResult).length === 0) {
+    return null;
+  }
+
+  return transformedResult;
+}