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

package/src/datagrid/column-filter/constants.ts

@@ -0,0 +1,493 @@
+import type { AttributeType } from '@headless-adminapp/core/attributes';
+
+import { OperatorOptionConfig, OperatorStrings } from './types';
+
+export const defaultOperatorStrings: OperatorStrings = {
+  equals: 'Equals',
+  doesNotEqual: 'Does not equal',
+  contains: 'Contains',
+  doesNotContain: 'Does not contain',
+  beginsWith: 'Begins with',
+  doesNotBeginWith: 'Does not begin with',
+  endsWith: 'Ends with',
+  doesNotEndWith: 'Does not end with',
+  containsData: 'Contains data',
+  doesNotContainData: 'Does not contain data',
+  greaterThan: 'Greater than',
+  greaterThanOrEquals: 'Greater than or equals',
+  lessThan: 'Less than',
+  lessThanOrEquals: 'Less than or equals',
+  between: 'Between',
+  on: 'On',
+  onOrAfter: 'On or after',
+  onOrBefore: 'On or before',
+  today: 'Today',
+  yesterday: 'Yesterday',
+  tomorrow: 'Tomorrow',
+  thisWeek: 'This week',
+  thisMonth: 'This month',
+  thisYear: 'This year',
+  thisFiscalYear: 'This fiscal year',
+  nextWeek: 'Next week',
+  nextSevenDays: 'Next 7 days',
+  nextMonth: 'Next month',
+  nextYear: 'Next year',
+  nextFiscalYear: 'Next fiscal year',
+  nextXHours: 'Next X hours',
+  nextXDays: 'Next X days',
+  nextXWeeks: 'Next X weeks',
+  nextXMonths: 'Next X months',
+  nextXYears: 'Next X years',
+  lastWeek: 'Last week',
+  lastSevenDays: 'Last 7 days',
+  lastMonth: 'Last month',
+  lastYear: 'Last year',
+  lastFiscalYear: 'Last fiscal year',
+  lastXHours: 'Last X hours',
+  lastXDays: 'Last X days',
+  lastXWeeks: 'Last X weeks',
+  lastXMonths: 'Last X months',
+  lastXYears: 'Last X years',
+  olderthanXHours: 'Older than X hours',
+  olderthanXDays: 'Older than X days',
+  olderthanXWeeks: 'Older than X weeks',
+  olderthanXMonths: 'Older than X months',
+  olderthanXYears: 'Older than X years',
+  inFiscalYear: 'In fiscal year',
+};
+
+const stringOperatorOptions: OperatorOptionConfig[] = [
+  {
+    value: 'eq',
+    labelKey: 'equals',
+    controls: ['string'],
+  },
+  {
+    value: 'ne',
+    labelKey: 'doesNotEqual',
+    controls: ['string'],
+  },
+  {
+    value: 'like',
+    labelKey: 'contains',
+    controls: ['string'],
+  },
+  {
+    value: 'not-like',
+    labelKey: 'doesNotContain',
+    controls: ['string'],
+  },
+  {
+    value: 'begins-with',
+    labelKey: 'beginsWith',
+    controls: ['string'],
+  },
+  {
+    value: 'not-begin-with',
+    labelKey: 'doesNotBeginWith',
+    controls: ['string'],
+  },
+  {
+    value: 'ends-with',
+    labelKey: 'endsWith',
+    controls: ['string'],
+  },
+  {
+    value: 'not-end-with',
+    labelKey: 'doesNotEndWith',
+    controls: ['string'],
+  },
+  {
+    value: 'not-null',
+    labelKey: 'containsData',
+    controls: [],
+  },
+  {
+    value: 'null',
+    labelKey: 'doesNotContainData',
+    controls: [],
+  },
+];
+
+const numberOperatorOptions: OperatorOptionConfig[] = [
+  {
+    value: 'eq',
+    labelKey: 'equals',
+    controls: ['number'],
+  },
+  {
+    value: 'ne',
+    labelKey: 'doesNotEqual',
+    controls: ['number'],
+  },
+  {
+    value: 'not-null',
+    labelKey: 'containsData',
+    controls: [],
+  },
+  {
+    value: 'null',
+    labelKey: 'doesNotContainData',
+    controls: [],
+  },
+  {
+    value: 'gt',
+    labelKey: 'greaterThan',
+    controls: ['number'],
+  },
+  {
+    value: 'gte',
+    labelKey: 'greaterThanOrEquals',
+    controls: ['number'],
+  },
+  {
+    value: 'lt',
+    labelKey: 'lessThan',
+    controls: ['number'],
+  },
+  {
+    value: 'lte',
+    labelKey: 'lessThanOrEquals',
+    controls: ['number'],
+  },
+  {
+    value: 'between',
+    labelKey: 'between',
+    controls: ['number', 'number'],
+  },
+];
+
+const moneyOperatorOptions: OperatorOptionConfig[] = [
+  {
+    value: 'eq',
+    labelKey: 'equals',
+    controls: ['money'],
+  },
+  {
+    value: 'ne',
+    labelKey: 'doesNotEqual',
+    controls: ['money'],
+  },
+  {
+    value: 'not-null',
+    labelKey: 'containsData',
+    controls: [],
+  },
+  {
+    value: 'null',
+    labelKey: 'doesNotContainData',
+    controls: [],
+  },
+  {
+    value: 'gt',
+    labelKey: 'greaterThan',
+    controls: ['money'],
+  },
+  {
+    value: 'gte',
+    labelKey: 'greaterThanOrEquals',
+    controls: ['money'],
+  },
+  {
+    value: 'lt',
+    labelKey: 'lessThan',
+    controls: ['money'],
+  },
+  {
+    value: 'lte',
+    labelKey: 'lessThanOrEquals',
+    controls: ['money'],
+  },
+  {
+    value: 'between',
+    labelKey: 'between',
+    controls: ['money', 'money'],
+  },
+];
+
+const dateOperatorOptions: OperatorOptionConfig[] = [
+  {
+    value: 'on',
+    labelKey: 'on',
+    controls: ['date'],
+  },
+  {
+    value: 'on-or-after',
+    labelKey: 'onOrAfter',
+    controls: ['date'],
+  },
+  {
+    value: 'on-or-before',
+    labelKey: 'onOrBefore',
+    controls: ['date'],
+  },
+  {
+    value: 'today',
+    labelKey: 'today',
+    controls: [],
+  },
+  {
+    value: 'yesterday',
+    labelKey: 'yesterday',
+    controls: [],
+  },
+  {
+    value: 'tomorrow',
+    labelKey: 'tomorrow',
+    controls: [],
+  },
+  {
+    value: 'this-week',
+    labelKey: 'thisWeek',
+    controls: [],
+  },
+  {
+    value: 'this-month',
+    labelKey: 'thisMonth',
+    controls: [],
+  },
+  {
+    value: 'this-year',
+    labelKey: 'thisYear',
+    controls: [],
+  },
+  {
+    value: 'this-fiscal-year',
+    labelKey: 'thisFiscalYear',
+    controls: [],
+  },
+  {
+    value: 'next-week',
+    labelKey: 'nextWeek',
+    controls: [],
+  },
+  {
+    value: 'next-seven-days',
+    labelKey: 'nextSevenDays',
+    controls: [],
+  },
+  {
+    value: 'next-month',
+    labelKey: 'nextMonth',
+    controls: [],
+  },
+  {
+    value: 'next-year',
+    labelKey: 'nextYear',
+    controls: [],
+  },
+  {
+    value: 'next-fiscal-year',
+    labelKey: 'nextFiscalYear',
+    controls: [],
+  },
+  {
+    value: 'next-x-hours',
+    labelKey: 'nextXHours',
+    controls: [],
+  },
+  {
+    value: 'next-x-days',
+    labelKey: 'nextXDays',
+    controls: [],
+  },
+  {
+    value: 'next-x-weeks',
+    labelKey: 'nextXWeeks',
+    controls: [],
+  },
+  {
+    value: 'next-x-months',
+    labelKey: 'nextXMonths',
+    controls: [],
+  },
+  {
+    value: 'next-x-years',
+    labelKey: 'nextXYears',
+    controls: [],
+  },
+  {
+    value: 'last-week',
+    labelKey: 'lastWeek',
+    controls: [],
+  },
+  {
+    value: 'last-seven-days',
+    labelKey: 'lastSevenDays',
+    controls: [],
+  },
+  {
+    value: 'last-month',
+    labelKey: 'lastMonth',
+    controls: [],
+  },
+  {
+    value: 'last-year',
+    labelKey: 'lastYear',
+    controls: [],
+  },
+  {
+    value: 'last-fiscal-year',
+    labelKey: 'lastFiscalYear',
+    controls: [],
+  },
+  {
+    value: 'last-x-hours',
+    labelKey: 'lastXHours',
+    controls: ['number'],
+  },
+  {
+    value: 'last-x-days',
+    labelKey: 'lastXDays',
+    controls: ['number'],
+  },
+  {
+    value: 'last-x-weeks',
+    labelKey: 'lastXWeeks',
+    controls: ['number'],
+  },
+  {
+    value: 'last-x-months',
+    labelKey: 'lastXMonths',
+    controls: ['number'],
+  },
+  {
+    value: 'last-x-years',
+    labelKey: 'lastXYears',
+    controls: ['number'],
+  },
+  {
+    value: 'olderthan-x-hours',
+    labelKey: 'olderthanXHours',
+    controls: ['number'],
+  },
+  {
+    value: 'olderthan-x-days',
+    labelKey: 'olderthanXDays',
+    controls: ['number'],
+  },
+  {
+    value: 'olderthan-x-weeks',
+    labelKey: 'olderthanXWeeks',
+    controls: ['number'],
+  },
+  {
+    value: 'olderthan-x-months',
+    labelKey: 'olderthanXMonths',
+    controls: ['number'],
+  },
+  {
+    value: 'olderthan-x-years',
+    labelKey: 'olderthanXYears',
+    controls: ['number'],
+  },
+  {
+    value: 'in-fiscal-year',
+    labelKey: 'inFiscalYear',
+    controls: [],
+  },
+  {
+    value: 'between',
+    labelKey: 'between',
+    controls: ['date', 'date'],
+  },
+  {
+    value: 'not-null',
+    labelKey: 'containsData',
+    controls: [],
+  },
+  {
+    value: 'null',
+    labelKey: 'doesNotContainData',
+    controls: [],
+  },
+];
+
+const choiceOperatorOptions: OperatorOptionConfig[] = [
+  {
+    value: 'in',
+    labelKey: 'equals',
+    controls: ['choice'],
+  },
+  {
+    value: 'not-in',
+    labelKey: 'doesNotEqual',
+    controls: ['choice'],
+  },
+  {
+    value: 'not-null',
+    labelKey: 'containsData',
+    controls: [],
+  },
+  {
+    value: 'null',
+    labelKey: 'doesNotContainData',
+    controls: [],
+  },
+];
+
+const lookupOperatorOptions: OperatorOptionConfig[] = [
+  {
+    value: 'in',
+    labelKey: 'equals',
+    controls: ['lookup'],
+  },
+  {
+    value: 'not-in',
+    labelKey: 'doesNotEqual',
+    controls: ['lookup'],
+  },
+  {
+    value: 'not-null',
+    labelKey: 'containsData',
+    controls: [],
+  },
+  {
+    value: 'null',
+    labelKey: 'doesNotContainData',
+    controls: [],
+  },
+];
+
+const booleanOperatorOptions: OperatorOptionConfig[] = [
+  {
+    value: 'in',
+    labelKey: 'equals',
+    controls: ['boolean'],
+  },
+  {
+    value: 'not-in',
+    labelKey: 'doesNotEqual',
+    controls: ['boolean'],
+  },
+  {
+    value: 'not-null',
+    labelKey: 'containsData',
+    controls: [],
+  },
+  {
+    value: 'null',
+    labelKey: 'doesNotContainData',
+    controls: [],
+  },
+];
+
+const idOperatorOptions: OperatorOptionConfig[] = [];
+
+const attachmentOperatorOptions: OperatorOptionConfig[] = [];
+
+export const operatorOptions: Record<AttributeType, OperatorOptionConfig[]> = {
+  id: idOperatorOptions,
+  boolean: booleanOperatorOptions,
+  choice: choiceOperatorOptions,
+  choices: choiceOperatorOptions,
+  date: dateOperatorOptions,
+  lookup: lookupOperatorOptions,
+  money: moneyOperatorOptions,
+  number: numberOperatorOptions,
+  string: stringOperatorOptions,
+  attachment: attachmentOperatorOptions,
+  mixed: [],
+  daterange: [],
+  lookups: [],
+};

package/src/datagrid/column-filter/index.ts

@@ -0,0 +1,3 @@
+export { getLocalizedOperatorOptions } from './utils';
+export { defaultOperatorStrings } from './constants';
+export type { OperatorStrings } from './types';

package/src/datagrid/column-filter/types.ts

@@ -0,0 +1,68 @@
+import type { AttributeType } from '@headless-adminapp/core/attributes';
+import type { OperatorKey } from '@headless-adminapp/core/transport';
+
+export interface OperatorStrings {
+  equals: string;
+  doesNotEqual: string;
+  contains: string;
+  doesNotContain: string;
+  beginsWith: string;
+  doesNotBeginWith: string;
+  endsWith: string;
+  doesNotEndWith: string;
+  containsData: string;
+  doesNotContainData: string;
+  greaterThan: string;
+  greaterThanOrEquals: string;
+  lessThan: string;
+  lessThanOrEquals: string;
+  between: string;
+  on: string;
+  onOrAfter: string;
+  onOrBefore: string;
+  today: string;
+  yesterday: string;
+  tomorrow: string;
+  thisWeek: string;
+  thisMonth: string;
+  thisYear: string;
+  thisFiscalYear: string;
+  nextWeek: string;
+  nextSevenDays: string;
+  nextMonth: string;
+  nextYear: string;
+  nextFiscalYear: string;
+  nextXHours: string;
+  nextXDays: string;
+  nextXWeeks: string;
+  nextXMonths: string;
+  nextXYears: string;
+  lastWeek: string;
+  lastSevenDays: string;
+  lastMonth: string;
+  lastYear: string;
+  lastFiscalYear: string;
+  lastXHours: string;
+  lastXDays: string;
+  lastXWeeks: string;
+  lastXMonths: string;
+  lastXYears: string;
+  olderthanXHours: string;
+  olderthanXDays: string;
+  olderthanXWeeks: string;
+  olderthanXMonths: string;
+  olderthanXYears: string;
+  inFiscalYear: string;
+}
+
+export type OperatorOptionConfig = {
+  value: OperatorKey;
+  labelKey: keyof OperatorStrings;
+  controls: AttributeType[];
+};
+
+export type OperatorOption = {
+  value: OperatorKey;
+  label: string;
+  controls: AttributeType[];
+};

package/src/datagrid/column-filter/utils.ts

@@ -0,0 +1,19 @@
+import type { AttributeType } from '@headless-adminapp/core/attributes';
+
+import { operatorOptions } from './constants';
+import { OperatorOption, OperatorStrings } from './types';
+
+export const getLocalizedOperatorOptions = (
+  strings: OperatorStrings
+): Record<AttributeType, OperatorOption[]> => {
+  return Object.entries(operatorOptions).reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      [key]: value.map((option) => ({
+        ...option,
+        label: strings[option.labelKey],
+      })),
+    }),
+    {} as Record<AttributeType, OperatorOption[]>
+  );
+};

package/src/datagrid/context.ts

@@ -0,0 +1,66 @@
+import { LocalizedDataLookup } from '@headless-adminapp/core/attributes';
+import { CommandItemExperience } from '@headless-adminapp/core/experience/command';
+import {
+  ColumnCondition,
+  EntityMainGridCommandContext,
+  EntitySubGridCommandContext,
+  SortingState,
+  View,
+  ViewColumn,
+} from '@headless-adminapp/core/experience/view';
+import {
+  InferredSchemaType,
+  Schema,
+  SchemaAttributes,
+} from '@headless-adminapp/core/schema';
+import {
+  Filter,
+  RetriveRecordsResult,
+} from '@headless-adminapp/core/transport';
+
+import { createContext } from '../mutable/context';
+
+export interface TransformedViewColumn<
+  S extends SchemaAttributes = SchemaAttributes
+> extends ViewColumn<S> {
+  id: string;
+  label: string;
+}
+
+export interface GridContextState<
+  S extends SchemaAttributes = SchemaAttributes,
+  CommandContext extends
+    | EntityMainGridCommandContext
+    | EntitySubGridCommandContext = EntityMainGridCommandContext
+> {
+  // from props
+  schema: Schema<S>;
+  view: View<S>;
+  viewLookup: LocalizedDataLookup[];
+  onChangeView: (viewId: string) => void;
+  extraFilter?: Filter;
+  commands: CommandItemExperience<CommandContext>[][];
+  maxRecords?: number;
+
+  // internal state (visual and filters)
+  columns: TransformedViewColumn<S>[];
+  searchText: string;
+  columnFilters: Partial<Record<keyof S, ColumnCondition>>;
+  sorting: SortingState<S>;
+
+  // internal state (selection)
+  selectedIds: string[];
+
+  // internal state (data)
+  data: RetriveRecordsResult<InferredSchemaType<S>> | null;
+  dataState: {
+    isFetching: boolean;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+  };
+  fetchNextPage: () => void;
+  isSubGrid: boolean;
+  allowViewSelection: boolean;
+}
+
+export const GridContext = createContext<GridContextState>();

package/src/datagrid/hooks/index.ts

@@ -0,0 +1,19 @@
+export * from './useChangeView';
+export * from './useGridColumnFilter';
+export * from './useGridColumns';
+export * from './useGridCommands';
+export * from './useGridData';
+export * from './useGridDataState';
+export * from './useGridExtraFilter';
+export * from './useGridOptions';
+export * from './useGridPagination';
+export * from './useGridRefresh';
+export * from './useGridSchema';
+export * from './useGridSelection';
+export * from './useGridSorting';
+export * from './useGridViewLookupData';
+export * from './useMainGridCommands';
+export * from './useMaxRecords';
+export * from './useSearchText';
+export * from './useSelectedView';
+export * from './useSubGridCommands';

package/src/datagrid/hooks/useChangeView.ts

@@ -0,0 +1,18 @@
+import { useCallback } from 'react';
+
+import { useContextSelector } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useChangeView() {
+  const onChangeView = useContextSelector(
+    GridContext,
+    (state) => state.onChangeView
+  );
+
+  return useCallback(
+    (viewId: string) => {
+      onChangeView(viewId);
+    },
+    [onChangeView]
+  );
+}

package/src/datagrid/hooks/useGridColumnFilter.ts

@@ -0,0 +1,28 @@
+import { ColumnCondition } from '@headless-adminapp/core/experience/view';
+import { useCallback } from 'react';
+
+import { useContextSelector, useContextSetValue } from '../../mutable/context';
+import { GridContext } from '../context';
+
+export function useGridColumnFilter() {
+  const columnFilters = useContextSelector(
+    GridContext,
+    (state) => state.columnFilters
+  );
+
+  const setValue = useContextSetValue(GridContext);
+
+  const setColumnFilter = useCallback(
+    (columnName: string, value: ColumnCondition | undefined) => {
+      setValue((state) => ({
+        columnFilters: {
+          ...state.columnFilters,
+          [columnName]: value,
+        },
+      }));
+    },
+    [setValue]
+  );
+
+  return [columnFilters, setColumnFilter] as const;
+}