Derik update/bug/2603

shesha-reactjs/src/components/dataList/index.tsx

@@ -602,7 +602,7 @@ export const DataList: FC<Partial<IDataListProps>> = ({
     return (
       <div key={`row-${index}`}>
         <ConditionalWrap
-          condition={selectionMode !== 'none'}
+          condition={selectionMode === 'multiple'}
           wrap={(children) => (
             <Checkbox
               className={classNames(styles.shaDatalistComponentItemCheckbox, { selected })}
@@ -621,6 +621,10 @@ export const DataList: FC<Partial<IDataListProps>> = ({
               { selected },
             )}
             onClick={() => {
+              // For single and multiple selection modes, trigger selection when clicking on row
+              if (selectionMode === 'single' || selectionMode === 'multiple') {
+                onSelectRowLocal(index, item);
+              }
               // Trigger onListItemClick event
               if (onListItemClick) {
                 onListItemClick(index, item);

shesha-reactjs/src/components/dataTable/index.tsx

@@ -878,7 +878,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
     data: tableData,
     // Disable sorting if we're in create mode so that the new row is always the first
     defaultSorting: defaultSorting,
-    useMultiSelect: selectionMode === 'multiple' || selectionMode === 'single' || (selectionMode === undefined && useMultiSelect),
+    useMultiSelect: selectionMode === 'multiple' || (selectionMode === undefined && useMultiSelect),
     selectionMode,
     freezeHeaders,
     onSelectRow: selectionMode === 'none' ? undefined : onSelectRowLocal,

shesha-reactjs/src/components/reactTable/index.tsx

@@ -284,6 +284,7 @@ export const ReactTable: FC<IReactTableProps> = ({
     rows,
     columns: tableColumns,
     toggleAllRowsSelected,
+    toggleRowSelected,
   } = useTable(
     {
       columns: preparedColumns,
@@ -422,8 +423,19 @@ export const ReactTable: FC<IReactTableProps> = ({
   const onResizeClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>): void => event?.stopPropagation();
 
   const handleSelectRow = (row: Row<object>): void => {
-    if (!omitClick && !(canEditInline || canDeleteInline) && onSelectRow) {
-      onSelectRow(row?.index, row?.original);
+    if (!omitClick && !(canEditInline || canDeleteInline)) {
+      // For both single and multiple selection modes, update the row selection state
+      if (selectionMode === 'single' || selectionMode === 'multiple') {
+        if (selectionMode === 'single') {
+          // For single selection, first clear all selections then select this row
+          toggleAllRowsSelected(false);
+        }
+        toggleRowSelected(row.id);
+      }
+      // Call the onSelectRow callback
+      if (onSelectRow) {
+        onSelectRow(row?.index, row?.original);
+      }
     }
   };
 

shesha-reactjs/src/components/reactTable/tableRow.tsx

@@ -166,7 +166,7 @@ export const TableRow: FC<ISortableRowProps> = (props) => {
           styles.tr,
           styles.trBody,
           { [styles.trOdd]: striped && index % 2 === 0 },
-          { [styles.trSelected]: selectedRowIndex === row?.index },
+          { [styles.trSelected]: selectedRowIndex === row?.index || row?.isSelected },
         )}
         key={rowId}
       >

shesha-reactjs/src/designer-components/_legacyComponents/listControl/index.tsx

@@ -33,7 +33,7 @@ const ListComponent: IToolboxComponent<IListComponentProps> = {
           submitHttpVerb: 'POST',
           labelCol: prev['labelCol'] ?? 8,
           wrapperCol: prev['wrapperCol'] ?? 16,
-          selectionMode: prev['selectionMode'] ?? 'none',
+          selectionMode: prev['selectionMode'] ?? 'single',
           deleteConfirmMessage: prev['deleteConfirmMessage'] ?? `return '';`,
           totalRecords: 100,
           buttons: prev['buttons'] ?? [

shesha-reactjs/src/designer-components/button/configurableButton/index.tsx

@@ -7,11 +7,13 @@ import { useConfigurableActionDispatcher } from '@/providers/configurableActions
 import { useAvailableConstantsData } from '@/providers/form/utils';
 import { DataContextTopLevels, isNavigationActionConfiguration, useShaRouting, useTheme } from '@/index';
 import { useAsyncMemo } from '@/hooks/useAsyncMemo';
+import { IFullAuditedEntity } from '@/publicJsApis/entities';
 import { useStyles } from './style';
+
 export interface IConfigurableButtonProps extends Omit<IButtonItem, 'style' | 'itemSubType'> {
   style?: CSSProperties;
   form: FormInstance<any>;
-  dynamicItem?: any;
+  dynamicItem?: IFullAuditedEntity;
 }
 
 export const ConfigurableButton: FC<IConfigurableButtonProps> = (props) => {

shesha-reactjs/src/designer-components/dataList/dataListComponent.tsx

@@ -35,7 +35,7 @@ const DataListComponent: IToolboxComponent<IDataListComponentProps> = {
     .add<IDataListComponentProps>(0, (prev) => ({
       ...prev,
       formSelectionMode: 'name',
-      selectionMode: 'none',
+      selectionMode: 'single',
       items: [],
       // Set default form to the starter template
       // formId: { name: 'data-list-dummy-default', module: 'Shesha' }

shesha-reactjs/src/designer-components/dataTable/table/migrations/migrate-v13.ts

@@ -12,7 +12,7 @@ export const migrateV12toV13 = (props: ITableComponentProps, _context: SettingsM
     if (typeof useMultiselect === 'boolean') {
       // If useMultiselect was true, set selectionMode to 'multiple'
       // If useMultiselect was false, set selectionMode to 'none' (no checkboxes)
-      const newSelectionMode = useMultiselect ? 'multiple' : 'none';
+      const newSelectionMode = useMultiselect ? 'multiple' : 'single';
 
       // Remove the old useMultiselect property and set the new selectionMode
       const { useMultiselect: removed, ...propsWithoutUseMultiselect } = props;
@@ -28,6 +28,6 @@ export const migrateV12toV13 = (props: ITableComponentProps, _context: SettingsM
   // ensure selectionMode has a default value
   return {
     ...props,
-    selectionMode: props.selectionMode || 'none',
+    selectionMode: props.selectionMode || 'single',
   };
 };

shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx

@@ -44,8 +44,10 @@ const TableComponent: TableComponentDefinition = {
     return <TableComponentFactory model={model} />;
   },
   initModel: (model: ITableComponentProps) => {
+    const defaults = defaultStyles();
     return {
       ...model,
+      ...defaults,
       items: [],
       striped: true,
     };
@@ -60,7 +62,7 @@ const TableComponent: TableComponentDefinition = {
           ...prev,
           items: items,
           useMultiselect: prev['useMultiselect'] ?? false,
-          selectionMode: prev['selectionMode'] ?? 'none',
+          selectionMode: prev['selectionMode'] ?? 'single',
           crud: prev['crud'] ?? false,
           flexibleHeight: prev['flexibleHeight'] ?? false,
           striped: prev['striped'] ?? true,

shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx

@@ -352,6 +352,7 @@ export const TableWrapper: FC<ITableComponentProps> = (props) => {
             rowHoverBackgroundColor={props.rowHoverBackgroundColor}
             rowSelectedBackgroundColor={props.rowSelectedBackgroundColor}
             border={props.border}
+            striped={props.striped}
             hoverHighlight={props.hoverHighlight}
             backgroundColor={props.background?.color}
             headerFontSize={props.headerFontSize}

shesha-reactjs/src/designer-components/profileDropdown/index.tsx

@@ -1,15 +1,18 @@
 import {
+  IConfigurableActionConfiguration,
   ConfigurableForm,
   FormIdentifier,
   IConfigurableFormComponent,
   IToolboxComponent,
   useAuth,
   useForm,
-  useFormExpression,
   useGlobalState,
   useSidebarMenu,
   useSheshaApplication,
 } from '@/index';
+import { useConfigurableActionDispatcher } from '@/providers/configurableActionsDispatcher';
+import { useAvailableConstantsData } from '@/providers/form/utils';
+import { IFullAuditedEntity } from '@/publicJsApis/entities';
 import {
   ButtonGroupItemProps,
   IButtonGroup,
@@ -76,8 +79,9 @@ const ProfileDropdown: IToolboxComponent<IProfileDropdown> = {
     const { loginInfo, logoutUser } = useAuth();
     const { formData } = useForm();
     const { globalState } = useGlobalState();
-    const { executeActionViaConfiguration } = useFormExpression();
+    const { executeAction } = useConfigurableActionDispatcher();
     const { anyOfPermissionsGranted } = useSheshaApplication();
+    const allData = useAvailableConstantsData();
 
     const sidebar = useSidebarMenu(false);
     const { accountDropdownListItems } = sidebar || {};
@@ -138,7 +142,17 @@ const ProfileDropdown: IToolboxComponent<IProfileDropdown> = {
       return (isItem(item) && isVisibleBase(item)) || (isGroup(item) && isGroupVisible(item, getIsVisible));
     };
 
-    const menuItems = getMenuItem(finalItems, executeActionViaConfiguration, getIsVisible);
+    // Custom execute function that includes dynamicItem in the context
+    const executeActionWithDynamicContext = (actionConfiguration: IConfigurableActionConfiguration, dynamicItem?: IFullAuditedEntity): void => {
+      if (actionConfiguration) {
+        executeAction({
+          actionConfiguration,
+          argumentsEvaluationContext: { ...allData, dynamicItem },
+        });
+      }
+    };
+
+    const menuItems = getMenuItem(finalItems, executeActionWithDynamicContext, getIsVisible);
 
     const accountMenuItems = getAccountMenuItems(accountDropdownListItems, logoutUser);
 

shesha-reactjs/src/designer-components/profileDropdown/utils.tsx

@@ -1,5 +1,4 @@
 import {
-  IButtonItem,
   IConfigurableActionConfiguration,
   IconType,
   IHeaderAction,
@@ -10,7 +9,9 @@ import {
   ButtonGroupItemProps,
   IButtonGroup,
   isGroup,
+  isButtonItem,
 } from '@/providers/buttonGroupConfigurator/models';
+import { IFullAuditedEntity } from '@/publicJsApis/entities';
 import { IAuthenticator } from '@/providers/auth';
 import { LoginOutlined } from '@ant-design/icons';
 import { MenuProps } from 'antd';
@@ -46,7 +47,7 @@ const filterVisibleItems = (
 
 export const getMenuItem = (
   items: ButtonGroupItemProps[] = [],
-  execute: (payload: IConfigurableActionConfiguration) => void,
+  execute: (payload: IConfigurableActionConfiguration, dynamicItem?: IFullAuditedEntity) => void,
   visibilityChecker?: ItemVisibilityFunc,
 ): ItemType[] => {
   // Filter items based on visibility if checker is provided
@@ -55,6 +56,7 @@ export const getMenuItem = (
   return visibleItems.map((item) => {
     const { id, icon, label } = item;
     const childItems = isGroup(item) ? (item as IButtonGroup).childItems : undefined;
+    const dynamicItem = isButtonItem(item) ? item.dynamicItem : undefined;
 
     return {
       key: id,
@@ -64,7 +66,7 @@ export const getMenuItem = (
         </Fragment>
       ),
       children: childItems ? getMenuItem(childItems, execute, visibilityChecker) : undefined,
-      onClick: () => execute((item as IButtonItem)?.actionConfiguration),
+      onClick: () => isButtonItem(item) ? execute(item.actionConfiguration, dynamicItem) : undefined,
     };
   });
 };

shesha-reactjs/src/providers/buttonGroupConfigurator/models.ts

@@ -4,8 +4,10 @@ import { IConfigurableActionConfiguration } from '@/interfaces/configurableActio
 import { IDynamicActionsConfiguration } from '@/designer-components/dynamicActionsConfigurator/models';
 import { EditMode, IStyleType } from '@/index';
 import React from 'react';
+import { IFullAuditedEntity } from '@/publicJsApis/entities';
 import { ListItemWithId } from '@/components/listEditor/models';
 
+
 type ButtonGroupItemType = 'item' | 'group';
 
 export type ButtonGroupItemProps = IButtonGroupItem | IButtonGroup;
@@ -66,6 +68,7 @@ export interface IButtonGroupItem extends IButtonGroupItemBase, ListItemWithId {
 
 export interface IButtonItem extends Omit<IButtonGroupItem, 'type'> {
   actionConfiguration?: IConfigurableActionConfiguration;
+  dynamicItem?: IFullAuditedEntity;
 }
 
 export const isItem = (item: IButtonGroupItemBase): item is IButtonGroupItem => {