@wix/patterns 1.382.0 → 1.385.0

package/src/state/CustomColumnsDragAndDropState.ts

@@ -1,4 +1,3 @@
-import { CustomColumnsState } from './CustomColumnsState';
 import { CollectionOptimisticActions, FiltersMap } from '@wix/bex-core';
 import { arrayMove } from '@wix/wix-style-react-incubator/dnd-kit/sortable';
 import { addEventListener } from '@wix/bex-core/util';
@@ -8,9 +7,19 @@ import { Column } from '../model';
 import { action, computed, makeObservable } from 'mobx';
 import { RectState } from './RectState';
 import { indexOfCompareFn } from './indexOfCompareFn';
+import { CustomColumnsPanelStateBase } from './CustomColumnsPanelStateBase';
+
+export interface DragAndDropColumnsDataSource {
+  readonly columns: Column[];
+  readonly selectedColumns: {
+    readonly value: { id: string; isSelected?: boolean }[];
+    refresh(value: { id: string; isSelected?: boolean }[]): void;
+  };
+}
 
 export interface CustomColumnsDragAndDropStateParams<T, F extends FiltersMap> {
-  readonly customColumns: CustomColumnsState<T, F>;
+  readonly customColumns: CustomColumnsPanelStateBase<T, F>;
+  readonly dataSource: DragAndDropColumnsDataSource;
   readonly components: typeof CustomColumnsDragAndDrop;
   readonly modalsContainerRef: {
     current: HTMLElement | null | undefined;
@@ -20,7 +29,7 @@ export interface CustomColumnsDragAndDropStateParams<T, F extends FiltersMap> {
 export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   readonly container;
   readonly customColumns;
-  readonly table;
+  readonly dataSource;
   readonly columnsActions;
   readonly components;
 
@@ -40,14 +49,14 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   readonly listRect;
 
   constructor(params: CustomColumnsDragAndDropStateParams<T, F>) {
-    const { customColumns, components } = params;
+    const { customColumns, dataSource, components } = params;
     this.components = components;
     this.container = customColumns.container;
     this.listRect = new RectState({
       container: customColumns.container,
     });
     this.customColumns = customColumns;
-    this.table = customColumns.table;
+    this.dataSource = dataSource;
     this.columnsActions = new CollectionOptimisticActions({
       container: this.container,
       collection: this.customColumns.columnsCollection,
@@ -68,7 +77,7 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   }
 
   get orderedColumnsByReorderDisabled() {
-    return this.table.columns.reduce(
+    return this.dataSource.columns.reduce(
       (state, column) => {
         column.reorderDisabled
           ? state.reorderDisabled.push(column)
@@ -81,10 +90,10 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
   }
 
   get orderedColumns(): Column[] {
-    const { table } = this;
+    const { dataSource } = this;
     const {
       selectedColumns: { value: selectedColumns },
-    } = table;
+    } = dataSource;
 
     const { reorderDisabled, regular } = this.orderedColumnsByReorderDisabled;
 
@@ -112,7 +121,7 @@ export class CustomColumnsDragAndDropState<T, F extends FiltersMap> {
 
   _onCustomColumnsReorder(columnId: string, overColumnId: string) {
     const {
-      table: { selectedColumns },
+      dataSource: { selectedColumns },
     } = this;
 
     const columnsArray = selectedColumns.value;

package/src/state/CustomColumnsEntityPageState.ts

@@ -0,0 +1,181 @@
+import { TransitionState } from '@wix/bex-core';
+import { reaction } from 'mobx';
+import { Column } from '../model';
+import { CustomColumnsActionName } from './CustomColumnsState';
+import { SidePanelsState } from './SidePanelsState';
+import { CustomColumnsPanelStateBase } from './CustomColumnsPanelStateBase';
+import { SchemaFieldsState } from './SchemaCard/SchemaFieldsState';
+import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
+import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
+import type { Field, SchemaConfig } from '../types/SchemaConfig';
+
+export interface CustomColumnsEntityPageStateParams {
+  panels: SidePanelsState;
+  container: import('@wix/bex-core').WixPatternsContainer;
+  fieldsState: SchemaFieldsState;
+  schema: SchemaConfig;
+  showFieldTypeIcons?: boolean;
+  dragAndDrop?: typeof CustomColumnsDragAndDrop;
+  modalsContainerRef: {
+    current: HTMLElement | null | undefined;
+  };
+}
+
+function fieldToColumn(
+  field: Field & { isPii?: boolean; isSystem?: boolean; isPrimary?: boolean },
+  hideable: boolean,
+): Column {
+  return {
+    id: field.id,
+    name: field.displayName,
+    title: field.displayName,
+    render: () => null,
+    fieldType: field.type as Column['fieldType'],
+    hideable,
+    isPii: field.isPii,
+    isSystem: field.isSystem,
+    isPrimary: field.isPrimary,
+    validation: field.validation?.required
+      ? [{ type: 'required' as const, message: '' }]
+      : undefined,
+  };
+}
+
+export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
+  readonly panels: SidePanelsState;
+  readonly fieldsState: SchemaFieldsState;
+  readonly _showFieldTypeIcons: boolean;
+  readonly _schema: SchemaConfig;
+  readonly _dragAndDrop?: CustomColumnsDragAndDropState<unknown, any>;
+
+  constructor(params: CustomColumnsEntityPageStateParams) {
+    super({
+      container: params.container,
+      queryName: 'entity-page-custom-columns',
+    });
+
+    this.panels = params.panels;
+    this.fieldsState = params.fieldsState;
+    this._showFieldTypeIcons = params.showFieldTypeIcons ?? true;
+    this._schema = params.schema;
+
+    if (params.dragAndDrop) {
+      const { fieldsState } = params;
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const self = this;
+      const { CustomColumnsDragAndDropState: DnDState } = params.dragAndDrop;
+      this._dragAndDrop = new DnDState({
+        customColumns: this,
+        dataSource: {
+          get columns() {
+            return self.orderedColumns;
+          },
+          selectedColumns: {
+            get value() {
+              return fieldsState.orderedFields.map((f) => ({
+                id: f.id,
+                isSelected: fieldsState.isFieldVisible(f.id),
+              }));
+            },
+            refresh(reordered) {
+              fieldsState.setFieldOrder(
+                reordered.map((s) => ({
+                  id: s.id,
+                  isVisible: s.isSelected ?? true,
+                })),
+              );
+            },
+          },
+        },
+        components: params.dragAndDrop,
+        modalsContainerRef: params.modalsContainerRef,
+      });
+    }
+
+    this.initBaseObservables();
+  }
+
+  get orderedColumns(): Column[] {
+    const { fields } = this._schema;
+    return this.fieldsState.orderedFields
+      .map((viewConfig) => {
+        const field = fields[viewConfig.id];
+        if (!field) {
+          return null;
+        }
+        const isRequired = field.validation?.required === true;
+        const hideable = !isRequired;
+        return fieldToColumn(field, hideable);
+      })
+      .filter(Boolean) as Column[];
+  }
+
+  get showFieldTypeIcons() {
+    return this._showFieldTypeIcons;
+  }
+
+  get collectionDataExtension() {
+    return null;
+  }
+
+  get sidePanelTransition(): TransitionState<string> | undefined {
+    return this.panels.sidePanel.transition;
+  }
+
+  get dragAndDrop() {
+    return this._dragAndDrop;
+  }
+
+  customizeColumnsInSidePanelBi(_params: {
+    actionName: CustomColumnsActionName;
+  }) {
+    // BI reporting — to be wired
+  }
+
+  onClose() {
+    this.panels.closeSidePanel();
+  }
+
+  init() {
+    const disposers = [
+      reaction(
+        () => this.fieldsState.orderedFields,
+        async () => {
+          const fields = this.fieldsState.orderedFields;
+          this.select.clear();
+          this.select.forceSetMany(
+            fields.map((field) => ({
+              value: { id: field.id },
+              status: this.fieldsState.isFieldVisible(field.id)
+                ? this.select.finalStatus
+                : this.select.startStatus,
+            })),
+          );
+          await this.columnsCollection.refreshAllPages();
+        },
+        { fireImmediately: true },
+      ),
+      reaction(
+        () => this.select.selectedValues,
+        () => {
+          const fields = this.fieldsState.orderedFields;
+          for (const field of fields) {
+            const isChecked = this.select.isChecked(field.id);
+            const isCurrentlyVisible = this.fieldsState.isFieldVisible(
+              field.id,
+            );
+            if (isChecked !== isCurrentlyVisible) {
+              this.fieldsState.setFieldVisibility(field.id, isChecked);
+            }
+          }
+        },
+      ),
+      this.columnsCollection.init(),
+      this._dragAndDrop?.init(),
+    ];
+
+    return () => {
+      disposers.forEach((d) => d?.());
+    };
+  }
+}

package/src/state/CustomColumnsPanelStateBase.ts

@@ -0,0 +1,109 @@
+import {
+  CollectionState,
+  FiltersMap,
+  SelectState,
+  TransitionState,
+  WixPatternsContainer,
+} from '@wix/bex-core';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { Column } from '../model';
+import { CustomColumnsActionName } from './CustomColumnsState';
+import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
+import type { CollectionDataExtensionState } from '../components/DataExtension';
+
+export interface CustomColumnsPanelStateBaseParams {
+  container: WixPatternsContainer;
+  queryName: string;
+}
+
+export abstract class CustomColumnsPanelStateBase<
+  T = unknown,
+  F extends FiltersMap = FiltersMap,
+> {
+  readonly container: WixPatternsContainer;
+  readonly columnsCollection: CollectionState<Column, FiltersMap>;
+
+  readonly select = new SelectState<{ id: string }>({
+    keyGetter: (column) => column.id,
+  });
+
+  searchValue = '';
+
+  onColumnClick?: (column: Column, checked: boolean) => unknown;
+
+  constructor(params: CustomColumnsPanelStateBaseParams) {
+    this.container = params.container;
+
+    this.columnsCollection = new CollectionState({
+      ...this.container,
+      events: {},
+      queryName: params.queryName,
+      fetchData: async () => {
+        const items = this.filteredColumns.filter(
+          (column) => column.hiddenFromCustomColumnsSelection !== true,
+        );
+        return { items };
+      },
+      filters: {},
+      itemKey: (item) => item.id,
+      itemName: (item) => item.name,
+    });
+  }
+
+  protected initBaseObservables() {
+    makeObservable(this, {
+      searchValue: observable,
+      setSearchValue: action.bound,
+      orderedColumns: computed,
+      filteredColumns: computed,
+    });
+  }
+
+  abstract get orderedColumns(): Column[];
+
+  abstract get showFieldTypeIcons(): boolean;
+
+  abstract get collectionDataExtension():
+    | CollectionDataExtensionState<T, F>
+    | null
+    | undefined;
+
+  abstract get sidePanelTransition(): TransitionState<string> | undefined;
+
+  abstract get dragAndDrop(): CustomColumnsDragAndDropState<T, F> | undefined;
+
+  abstract customizeColumnsInSidePanelBi(params: {
+    actionName: CustomColumnsActionName;
+  }): void;
+
+  abstract onClose(): void;
+
+  abstract init(): () => void;
+
+  get filteredColumns(): Column[] {
+    const { orderedColumns, searchValue } = this;
+
+    if (!searchValue.trim()) {
+      return orderedColumns;
+    }
+
+    const searchLower = searchValue.toLowerCase();
+    return orderedColumns.filter((column) => {
+      const name =
+        column.name ||
+        (typeof column.title === 'string' ? column.title : column.id);
+      return name.toLowerCase().includes(searchLower);
+    });
+  }
+
+  setSearchValue = action((value: string) => {
+    this.searchValue = value;
+    this.columnsCollection.refreshAllPages();
+  });
+
+  onColumnCheckboxToggle = action((column: Column) => {
+    const { select, onColumnClick } = this;
+    select.toggle(column);
+    onColumnClick?.(column, select.isChecked(column.id));
+  });
+}

package/src/state/CustomColumnsState.ts

@@ -1,14 +1,10 @@
 import {
-  CollectionState,
   FiltersMap,
-  SelectState,
   TaskState,
-  TransitionState,
   TypedEmitter,
   withoutDefaults,
-  WixPatternsContainer,
 } from '@wix/bex-core';
-import { action, computed, makeObservable, reaction, observable } from 'mobx';
+import { action, computed, makeObservable, reaction } from 'mobx';
 import { ToolbarCollectionState } from './ToolbarCollectionState';
 import { Column } from '../model';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
@@ -21,27 +17,15 @@ import {
 } from '@wix/bex-core/bi';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
 import type { CollectionDataExtensionState } from '../components/DataExtension';
+import { CustomColumnsPanelStateBase } from './CustomColumnsPanelStateBase';
+
+export type { CustomColumnsDragAndDropState };
+export type { CollectionDataExtensionState };
 
 export type CustomColumnsPanelState<
   T = unknown,
   F extends FiltersMap = FiltersMap,
-> = {
-  readonly columnsCollection: CollectionState<Column, FiltersMap>;
-  readonly searchValue: string;
-  readonly orderedColumns: Column[];
-  readonly dragAndDrop?: CustomColumnsDragAndDropState<T, F>;
-  readonly select: SelectState<{ id: string }>;
-  setSearchValue(value: string): void;
-  onColumnCheckboxToggle(column: Column): void;
-  customizeColumnsInSidePanelBi(params: {
-    actionName: CustomColumnsActionName;
-  }): void;
-  init(): () => void;
-  readonly showFieldTypeIcons: boolean;
-  readonly collectionDataExtension?: CollectionDataExtensionState<T, F> | null;
-  readonly sidePanelTransition?: TransitionState<string>;
-  onClose(): void;
-};
+> = CustomColumnsPanelStateBase<T, F>;
 
 type StoredColumn =
   | { id?: string; name?: string; isSelected?: boolean }
@@ -55,7 +39,7 @@ const asStoredColumnsOrNull = (customColumnsResult: unknown) =>
 
 export interface CustomColumnsStateParams<T, F extends FiltersMap> {
   readonly table: ToolbarCollectionState<T, F>;
-  readonly container: WixPatternsContainer;
+  readonly container: import('@wix/bex-core').WixPatternsContainer;
   readonly dragAndDrop?: typeof CustomColumnsDragAndDrop;
   readonly modalsContainerRef: {
     current: HTMLElement | null | undefined;
@@ -64,18 +48,16 @@ export interface CustomColumnsStateParams<T, F extends FiltersMap> {
 
 export type CustomColumnsActionName = 'visibility' | 'reorder';
 
-export class CustomColumnsState<T, F extends FiltersMap> {
+export class CustomColumnsState<
+  T,
+  F extends FiltersMap,
+> extends CustomColumnsPanelStateBase<T, F> {
   readonly table;
-  readonly container;
-
-  readonly columnsCollection;
 
-  readonly dragAndDrop;
+  readonly dragAndDrop: CustomColumnsDragAndDropState<T, F> | undefined;
 
   readonly customColumnsHistory;
 
-  onColumnClick?: (column: Column, checked: boolean) => unknown;
-
   _didFirstColumnsMerge?: boolean;
   _performedCustomColumnsActions: Map<CustomColumnsActionName, boolean> =
     new Map();
@@ -84,50 +66,34 @@ export class CustomColumnsState<T, F extends FiltersMap> {
 
   _touched = false;
 
-  searchValue = '';
-
-  readonly select = new SelectState<{ id: string }>({
-    keyGetter: (column) => column.id,
-  });
-
   readonly events = new EventEmitter() as TypedEmitter<{
     beforeInitialFetch: () => void;
   }>;
 
   constructor(params: CustomColumnsStateParams<T, F>) {
-    this.table = params.table;
-    this.container = params.container;
-
-    this.columnsCollection = new CollectionState({
-      ...this.container,
-      events: {},
+    super({
+      container: params.container,
       queryName: [
-        this.container.environment.componentId,
-        this.table.collection.queryName,
+        params.container.environment.componentId,
+        params.table.collection.queryName,
         'customColumns',
       ]
         .filter(Boolean)
         .join('/'),
-      fetchData: async () => {
-        const { filteredColumns } = this;
-
-        const items = filteredColumns.filter(
-          (column) => column.hiddenFromCustomColumnsSelection !== true,
-        );
-
-        return {
-          items,
-        };
-      },
-      filters: {},
-      itemKey: (item) => item.id,
-      itemName: (item) => item.name,
     });
 
+    this.table = params.table;
+
     if (params.dragAndDrop) {
       const { CustomColumnsDragAndDropState } = params.dragAndDrop;
       this.dragAndDrop = new CustomColumnsDragAndDropState({
         customColumns: this,
+        dataSource: {
+          get columns() {
+            return params.table.columns;
+          },
+          selectedColumns: params.table.selectedColumns,
+        },
         components: params.dragAndDrop,
         modalsContainerRef: params.modalsContainerRef,
       });
@@ -140,14 +106,11 @@ export class CustomColumnsState<T, F extends FiltersMap> {
         })
       : null;
 
+    this.initBaseObservables();
     makeObservable(this, {
-      searchValue: observable,
       persistCustomColumns: action.bound,
-      setSearchValue: action.bound,
       toSelectedColumns: computed,
-      orderedColumns: computed,
       selectedOrderedColumns: computed,
-      filteredColumns: computed,
       init: action,
     });
   }
@@ -260,12 +223,6 @@ export class CustomColumnsState<T, F extends FiltersMap> {
     return mergeTargetSelectedColumns;
   }
 
-  onColumnCheckboxToggle = action((column: Column) => {
-    const { select, onColumnClick } = this;
-    select.toggle(column);
-    onColumnClick?.(column, select.isChecked(column.id));
-  });
-
   getStickyColumnsCount({ stickyColumns }: { stickyColumns: number }) {
     const {
       dragAndDrop,
@@ -526,25 +483,4 @@ export class CustomColumnsState<T, F extends FiltersMap> {
     );
     this.table.sidePanel.close();
   }
-
-  get filteredColumns(): Column[] {
-    const { orderedColumns, searchValue } = this;
-
-    if (!searchValue.trim()) {
-      return orderedColumns;
-    }
-
-    const searchLower = searchValue.toLowerCase();
-    return orderedColumns.filter((column) => {
-      const name =
-        column.name ||
-        (typeof column.title === 'string' ? column.title : column.id);
-      return name.toLowerCase().includes(searchLower);
-    });
-  }
-
-  setSearchValue = action((value: string) => {
-    this.searchValue = value;
-    this.columnsCollection.refreshAllPages();
-  });
 }

package/src/state/EditableTable/EditableTableState.ts

@@ -16,13 +16,22 @@ import { CellInteractionState } from './CellInteractionState';
 import { CellValueState } from './CellValueState';
 import { ClipboardState } from './ClipboardState';
 import { MutationState } from './MutationState';
+import { FieldActionsState } from './FieldActionsState';
 import type { EditableTableMutationHandlers } from './MutationState';
 import type { Cell, EditableColumn, ValidationResult } from './types';
+import type { FieldActions } from '../../types/SchemaConfig';
+
+export interface EditableTableFieldActionsPermissions {
+  addDisabled?: boolean;
+  editDisabled?: boolean;
+  deleteDisabled?: boolean;
+}
 
 export interface EditableTablePermissions {
   addItemDisabled?: boolean;
   updateItemDisabled?: boolean;
   removeItemDisabled?: boolean;
+  fieldActions?: EditableTableFieldActionsPermissions;
 }
 
 export interface EditableTableStateParams<T, F extends FiltersMap> {
@@ -31,6 +40,7 @@ export interface EditableTableStateParams<T, F extends FiltersMap> {
   readonly toolbar?: ToolbarCollectionState<T, F>;
   readonly permissions?: EditableTablePermissions;
   readonly mutations: EditableTableMutationHandlers<T>;
+  readonly fieldActions?: FieldActions;
   readonly createOptimisticActions: (
     collection: CollectionState<T, F>,
   ) => CollectionOptimisticActions<T, F>;
@@ -63,6 +73,7 @@ export class EditableTableState<T, F extends FiltersMap>
   readonly deleteConfirmModal = new ConditionalModalState<
     Partial<MessageModalLayoutProps>
   >();
+  readonly fieldActions: FieldActionsState;
 
   addItemDisabled = false;
   updateItemDisabled = false;
@@ -99,6 +110,11 @@ export class EditableTableState<T, F extends FiltersMap>
       params.mutations,
       params.createOptimisticActions,
     );
+    this.fieldActions = new FieldActionsState(
+      params.collection.translate,
+      params.fieldActions,
+      params.permissions?.fieldActions,
+    );
 
     makeObservable(this, {
       addItemDisabled: observable,

package/src/state/EditableTable/FieldActionsState.ts

@@ -0,0 +1,61 @@
+import { action, makeObservable } from 'mobx';
+import { ConditionalModalState, TaskState } from '@wix/bex-core';
+import type { Translate } from '@wix/bex-core';
+import type { MessageModalLayoutProps } from '@wix/design-system';
+import type { FieldActions } from '../../types/SchemaConfig';
+import type { EditableTableFieldActionsPermissions } from './EditableTableState';
+
+export class FieldActionsState {
+  readonly handlers: FieldActions | undefined;
+  readonly permissions: EditableTableFieldActionsPermissions | undefined;
+  readonly translate: Translate;
+
+  readonly confirmModal = new ConditionalModalState<
+    Partial<MessageModalLayoutProps>
+  >();
+  readonly deleteTask = new TaskState<unknown>();
+
+  constructor(
+    translate: Translate,
+    handlers?: FieldActions,
+    permissions?: EditableTableFieldActionsPermissions,
+  ) {
+    this.translate = translate;
+    this.handlers = handlers;
+    this.permissions = permissions;
+    makeObservable(this, {
+      confirmDelete: action,
+    });
+  }
+
+  confirmDelete(fieldId: string) {
+    const deleteField = this.handlers?.deleteField;
+    if (!deleteField) {
+      return;
+    }
+    const t = this.translate;
+    this.confirmModal.open({
+      theme: 'destructive',
+      title: t('cairo.deleteModal.title'),
+      content: t('cairo.deleteModal.body'),
+      primaryButtonText: t('cairo.delete.button'),
+      secondaryButtonText: t('cairo.cancel.button'),
+      primaryButtonOnClick: () => {
+        this._runDelete(fieldId, deleteField);
+      },
+    });
+  }
+
+  private _runDelete = async (
+    fieldId: string,
+    deleteField: (id: string) => Promise<unknown>,
+  ) => {
+    await this.deleteTask.run(
+      () => deleteField(fieldId),
+      (err) => console.error('[EditableTable] deleteField failed', err),
+    );
+    if (this.deleteTask.status.isSuccess) {
+      this.confirmModal.close();
+    }
+  };
+}

package/src/state/EditableTable/index.ts

@@ -3,6 +3,7 @@ export type {
   EditableTableStateParams,
   EditableTableStatePublicAPI,
   EditableTablePermissions,
+  EditableTableFieldActionsPermissions,
 } from './EditableTableState';
 
 export type { EditableTableMutationHandlers } from './MutationState';
@@ -12,4 +13,5 @@ export type {
   ValidationResult,
   CellType,
   EditableColumn,
+  CellTypeConfigMap,
 } from './types';