@zohodesk/library-platform 1.1.13 → 1.2.0-exp.1

package/es/platform/column-chooser/frameworks/EventHandlersFactory.js

@@ -1,14 +1,15 @@
 import Service from "../adapters/gateways/Service";
 import Presenter from "../adapters/presenters/Presenter";
 import Repository from "../adapters/gateways/Repository";
-import { COLUMN_CHOOSER_BEHAVIOUR_OPENED } from "../../../bc/column-chooser/Constants";
-import { COLUMN_CHOOSER_SELECT_REQUESTED, COLUMN_CHOOSER_REORDER_REQUESTED, COLUMN_CHOOSER_SEARCH_REQUESTED, COLUMN_CHOOSER_SAVE_REQUESTED, COLUMN_CHOOSER_CLOSE_REQUESTED } from "../../../cc/table-column-chooser/Constants";
+import { COLUMN_CHOOSER_BEHAVIOUR_UPDATED } from "../../../bc/column-chooser/Constants";
+import { COLUMN_CHOOSER_SELECT_REQUESTED, COLUMN_CHOOSER_REORDER_REQUESTED, COLUMN_CHOOSER_SEARCH_REQUESTED, COLUMN_CHOOSER_SAVE_REQUESTED, COLUMN_CHOOSER_CLOSE_REQUESTED, COLUMN_CHOOSER_OPEN_REQUESTED } from "../../../cc/table-column-chooser/Constants";
 import ColumnChooserOpenController from "../adapters/controllers/ColumnChooserOpenController";
 import ColumnChooserSelectController from "../adapters/controllers/ColumnChooserSelectController";
 import ColumnChooserReorderController from "../adapters/controllers/ColumnChooserReorderController";
 import ColumnChooserSaveController from "../adapters/controllers/ColumnChooserSaveController";
 import ColumnChooserSearchController from "../adapters/controllers/ColumnChooserSearchController";
 import ColumnChooserCloseController from "../adapters/controllers/ColumnChooserCloseController";
+import ColumnChooserUpdateController from "../adapters/controllers/ColumnChooserUpdateController";
 export default class EventHandlersFactory {
   static create() {
     const repository = new Repository();
@@ -18,12 +19,13 @@ export default class EventHandlersFactory {
       presenter
     });
     return {
-      [COLUMN_CHOOSER_BEHAVIOUR_OPENED]: new ColumnChooserOpenController(service).handle,
+      [COLUMN_CHOOSER_OPEN_REQUESTED]: new ColumnChooserOpenController(service).handle,
       [COLUMN_CHOOSER_SELECT_REQUESTED]: new ColumnChooserSelectController(service).handle,
       [COLUMN_CHOOSER_REORDER_REQUESTED]: new ColumnChooserReorderController(service).handle,
       [COLUMN_CHOOSER_SEARCH_REQUESTED]: new ColumnChooserSearchController(service).handle,
       [COLUMN_CHOOSER_SAVE_REQUESTED]: new ColumnChooserSaveController(service).handle,
-      [COLUMN_CHOOSER_CLOSE_REQUESTED]: new ColumnChooserCloseController(service).handle
+      [COLUMN_CHOOSER_CLOSE_REQUESTED]: new ColumnChooserCloseController(service).handle,
+      [COLUMN_CHOOSER_BEHAVIOUR_UPDATED]: new ColumnChooserUpdateController(service).handle
     };
   }
 

package/es/platform/components/index.js

@@ -1,3 +1,4 @@
 export { default as TableConnectedFactory } from "./table-connected/frameworks/TableConnectedFactory";
 export { default as FormConnectedFactory } from "./form-connected/frameworks/FormConnectedFactory";
+export { SmartNavigation, createSmartNavigation } from "./smart-navigation/frameworks/one-unification/SmartNavigation";
 export { default as SmartActionBandFactory } from "./smart-action-band/frameworks/SmartActionBandFactory";

package/es/platform/components/smart-action-band/adapters/presenters/ActionBandTranslator.js

@@ -1,6 +1,8 @@
 import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
 import DefaultClientActions from "./utils/DefaultClientActions";
 import { ActionBandLocations } from "../../../../../bc/action-band/Constants";
+import { i18NProviderUtils } from '@zohodesk/i18n';
+import { filterClientActionsByLocation } from "../../../../client-actions/behaviour/zclient-actions/adapters/presenters/FilterUtils";
 export default class ActionBandTranslator {
   static transformState(state) {
     const {
@@ -8,13 +10,17 @@ export default class ActionBandTranslator {
       moduleName,
       reloadConfig,
       searchConfig,
-      sortConfig
+      sortConfig,
+      columnChooserConfig,
+      textOverflowConfig
     } = state.properties;
     const {
       zclientAction,
       zclientScriptsEventMapping,
       zfield,
-      sortBy
+      sortBy,
+      textOverflow,
+      columnChooser
     } = state.behaviours;
     const {
       context
@@ -25,15 +31,26 @@ export default class ActionBandTranslator {
     } = zclientAction || {};
     let sorttableFields = zfield.fields.filter(field => field.isSortable === true);
     const combinedClientActions = Array.isArray(clientActions) ? [...clientActions] : [];
+    const availableFields = zfield.fields;
+    const columnChooserProps = getColumnChooserProps(columnChooser, availableFields, context, moduleName, columnChooserConfig);
 
-    if (reloadConfig?.isEnabled) {
-      combinedClientActions.push(DefaultClientActions.createReloadAction());
+    if (columnChooserConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createColumnChooserAction({ ...columnChooserProps,
+        textOverflowConfig: {
+          isEnabled: textOverflowConfig.isEnabled,
+          mode: textOverflow.mode
+        }
+      }));
     }
 
     if (searchConfig?.isEnabled) {
       combinedClientActions.push(DefaultClientActions.createSearchAction());
     }
 
+    if (reloadConfig?.isEnabled) {
+      combinedClientActions.push(DefaultClientActions.createReloadAction());
+    }
+
     if (sortConfig?.isEnabled) {
       combinedClientActions.push(DefaultClientActions.createSortByAction(sortBy, sortConfig, sorttableFields));
     }
@@ -67,7 +84,52 @@ export default class ActionBandTranslator {
 
 }
 
-const mapper = clientAction => ({
-  actionBandLeftActions: clientAction.filter(action => action.location === ActionBandLocations.LEFT_ACTIONS),
-  actionBandRightActions: clientAction.filter(action => action.location === ActionBandLocations.RIGHT_ACTIONS)
-});
+function mapper(clientActions) {
+  return {
+    actionBandLeftActions: filterClientActionsByLocation(clientActions, ActionBandLocations.LEFT_ACTIONS),
+    actionBandRightActions: filterClientActionsByLocation(clientActions, ActionBandLocations.RIGHT_ACTIONS)
+  };
+}
+
+function getColumnChooserProps(columnChooser) {
+  let availableFields = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let context = arguments.length > 2 ? arguments[2] : undefined;
+  let moduleName = arguments.length > 3 ? arguments[3] : undefined;
+  let columnChooserConfig = arguments.length > 4 ? arguments[4] : undefined;
+  const {
+    searchText: searchString,
+    fieldsOrder,
+    selected,
+    isMaxSelectionReached
+  } = columnChooser;
+  const fieldMap = mapFieldsToObject(availableFields);
+  const moduleConfig = context.modules?.find(module => module.apiKey === moduleName);
+  const disabledFieldName = moduleConfig?.nameField;
+  const restrictedFields = columnChooserConfig?.fieldRestrictionConfig || [];
+  const hasRestrictions = Array.isArray(restrictedFields) && restrictedFields.length > 0;
+  const columnChooserOptions = fieldsOrder.map(fieldName => getOption(fieldMap[fieldName], restrictedFields.includes(fieldName) || !!selected[fieldName], restrictedFields.includes(fieldName) || !hasRestrictions && disabledFieldName === fieldName));
+  return {
+    options: columnChooserOptions,
+    searchString,
+    hasSearch: searchString !== '' || columnChooserOptions.length > 3,
+    errorMessage: isMaxSelectionReached ? i18NProviderUtils.getI18NValue("support.ticket.table.max.colmun") : ''
+  };
+}
+
+function getOption(field, checked, disabled) {
+  return {
+    id: field?.name || '',
+    disabled,
+    locked: false,
+    // TODO - field.isLocked,
+    value: field?.i18NLabel || '',
+    checked
+  };
+}
+
+function mapFieldsToObject(availableFields) {
+  return availableFields.reduce((acc, field) => {
+    acc[field.name] = field;
+    return acc;
+  }, {});
+}

package/es/platform/components/smart-action-band/adapters/presenters/utils/DefaultClientActions.js

@@ -142,6 +142,38 @@ class DefaultClientActions {
     });
   }
 
+  static createColumnChooserAction(_ref) {
+    let {
+      options,
+      searchString,
+      hasSearch,
+      errorMessage,
+      textOverflowConfig
+    } = _ref;
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'TableColumnChooser',
+        name: 'ColumnChooser',
+        propertiesValueMapping: {
+          options,
+          searchString,
+          hasSearch,
+          errorMessage,
+          textOverflowConfig
+        },
+        eventMappings: [],
+        id: '4000000080013'
+      },
+      conditions: {
+        fields: [],
+        pattern: '1'
+      },
+      location: ActionBandLocations.LEFT_ACTIONS,
+      id: '4000000080019',
+      name: 'ColumnChooser Action'
+    });
+  }
+
 }
 
 export default DefaultClientActions;

package/es/platform/components/smart-action-band/frameworks/EventHandlersFactory.js

@@ -5,7 +5,10 @@ import { platformSDK } from "../../../sdk/frameworks/Sdk";
 import ActionBandSdkFactory from "./SmartActionBandSdkFactory";
 import { SEARCH_TYPE_CLEARED } from "../../../../bc/search-box/Constants";
 import { SmartActionBandConstants } from "../../../../cc/action-band";
-import { SORT_BY_UPDATED } from "../../../../bc/sort-by/Constants"; // NOTE: Remove unused import
+import { SORT_BY_UPDATED } from "../../../../bc/sort-by/Constants";
+import { TableTextOverflowConstants } from "../../../../cc/table-text-overflow";
+import { TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED, TEXT_OVERFLOW_BEHAVIOUR_UPDATED } from "../../../../bc/clip-wrap/Constants";
+import { COLUMN_CHOOSER_SAVED } from "../../../../cc/table-column-chooser/Constants"; // NOTE: Remove unused import
 // import SortByInitializeController from '@platform/components/smart-action-band/adapters/controllers/SortByInitializeController';
 
 function createHandlerWithSdk(handler) {
@@ -36,6 +39,17 @@ export default class EventHandlersFactory {
     // const presenter = new Presenter();
     // const service = new Service({ repository, presenter });
 
+    const textOverFlowUpdate = args => {
+      const {
+        action,
+        dispatch
+      } = args;
+      dispatch({
+        type: TEXT_OVERFLOW_BEHAVIOUR_UPDATE_REQUESTED,
+        payload: action.payload
+      });
+    };
+
     const defaultEventHandlers = {
       // [SEARCH_TYPE_UPDATED]: ({ action, dispatch }) => {
       //   const { payload } = action;
@@ -67,6 +81,33 @@ export default class EventHandlersFactory {
           type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_SORT_APPLIED,
           payload
         });
+      },
+      [TableTextOverflowConstants.TEXT_OVERFLOW_UPDATED]: textOverFlowUpdate,
+      [TEXT_OVERFLOW_BEHAVIOUR_UPDATED]: _ref3 => {
+        let {
+          action,
+          dispatch
+        } = _ref3;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_TEXT_OVERFLOW_UPDATED,
+          payload
+        });
+      },
+      [COLUMN_CHOOSER_SAVED]: _ref4 => {
+        let {
+          action,
+          dispatch
+        } = _ref4;
+        const {
+          payload
+        } = action;
+        dispatch({
+          type: SmartActionBandConstants.ExternalConstants.SMART_ACTION_BAND_COLUMN_CHOOSER_SAVED,
+          payload
+        });
       }
     };
     return mergeEventHandlers([defaultEventHandlers, wrapped]);

package/es/platform/components/smart-action-band/frameworks/SmartActionBandFactory.js

@@ -14,6 +14,8 @@ import ZHttpBehaviourFactory from "../../../zhttp/frameworks/ZHttpBehaviourFacto
 import ActionBandBehaviourFactory from "../../../../library/behaviours/action-band/frameworks/ActionBandBehaviourFactory";
 import ZFieldBehaviourFactory from "../../../zfield/frameworks/ZFieldBehaviourFactory";
 import SortByBehaviourFactory from "../../../../library/behaviours/sort-by/frameworks/ui/SortByBehaviourFactory";
+import ClipWrapBehaviourFactory from "../../../../library/behaviours/clip-wrap/frameworks/ui/ClipWrapBehaviourFactory";
+import ColumnChooserBehaviourFactory from "../../../column-chooser/frameworks/ColumnChooserBehaviourFactory";
 
 function combineDataSourceWithDefault(dataSource) {
   return { ...defaultDataSource,
@@ -47,8 +49,9 @@ export default class SmartActionBandFactory {
         getClientScripts: _dataSource.httpTemplates.getClientScripts
       }), ZFieldBehaviourFactory.create({
         availableFields: _dataSource.httpTemplates.getAvailableFields,
+        updateSelectedFields: _dataSource.httpTemplates.updateSelectedFields,
         selectedFields: _dataSource.httpTemplates.getSelectedFields
-      }), ActionBandBehaviourFactory.create(), SortByBehaviourFactory.create()]
+      }), ActionBandBehaviourFactory.create(), ClipWrapBehaviourFactory.create(), SortByBehaviourFactory.create(), ColumnChooserBehaviourFactory.create()]
     });
   }
 

package/es/platform/components/smart-navigation/adapters/presenters/OneUnifiedNavigationTranslator.js

@@ -0,0 +1,248 @@
+import { ONE_UNIFICATION } from "../../../../../cc/one-unification/Constants";
+import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
+// ============================================================================
+// Constants & Configuration
+// ============================================================================
+const EMPTY_STATE_CONFIG = {
+  label: 'No Archived views',
+  iconSlot: {
+    id: 'tab-home-icon',
+    width: 120,
+    height: 96
+  },
+  action: {
+    label: 'Learn More',
+    key: 'learn-more',
+    externalLink: 'https://help.zoho.com/portal/kb/articles/archiving-custom-views',
+    role: 'primary'
+  }
+}; // ============================================================================
+// Translator Service (Use Case)
+// ============================================================================
+
+class NavigationTranslatorService {
+  overlayModules = [];
+  onDemandModules = [];
+  clientActions = [];
+  selectedModule = null;
+  iconMap = {};
+
+  initialize(overlayModules, onDemandModules, clientActions, selectedModule, iconMap) {
+    this.overlayModules = overlayModules || [];
+    this.onDemandModules = onDemandModules || [];
+    this.clientActions = clientActions || [];
+    this.selectedModule = selectedModule || '';
+    this.iconMap = iconMap || {};
+  }
+
+  translateToViewModel(modules, departments) {
+    const viewModel = {
+      loadOnDiv: ONE_UNIFICATION.ELEMENTS.SIDE_PANE,
+      appName: 'Zoho Desk',
+      appLogoURL: '',
+      isCommonSearchEnabled: true,
+      switcher: this.translateDepartments(departments),
+      modules: this.translateModules(modules)
+    };
+    globalThis.__UNIFIED_NAVIGATION_VIEW_MODEL__ = viewModel;
+
+    if (process.env.NODE_ENV === 'development') {}
+
+    return viewModel;
+  }
+
+  translateDepartments(departments) {
+    if (!Array.isArray(departments) || departments.length === 0) {
+      return {};
+    }
+
+    return {
+      label: 'Departments',
+      key: ONE_UNIFICATION.ELEMENTS.DEPARTMENT_SWITCHER,
+      isSearchEnabled: true,
+      isSwitcherConfirmationEnabled: true,
+      options: departments.map(dept => ({
+        label: dept.displayLabel,
+        key: dept.apiKey,
+        iconLink: ''
+      }))
+    };
+  }
+
+  translateModules(modules) {
+    if (!Array.isArray(modules)) {
+      return [];
+    }
+
+    return modules.map(module => this.translateModule(module));
+  }
+
+  translateModule(module) {
+    const viewModel = this.createBaseModuleViewModel(module);
+    this.applyOnDemandConfig(viewModel, module);
+    this.applyIconConfig(viewModel, module);
+    this.applyClientActionsConfig(viewModel, module);
+    this.applyOverlayConfig(viewModel, module);
+    this.applySubModulesConfig(viewModel, module);
+    this.applySelectedModuleConfig(viewModel, module);
+    return viewModel;
+  }
+
+  createBaseModuleViewModel(module) {
+    return {
+      label: module.displayLabel,
+      key: module.apiKey,
+      selected: module.isActive || false,
+      moduleSpecificConfig: {
+        enableLiveSearch: true,
+        loadOnDemand: false,
+        actionIcons: []
+      }
+    };
+  }
+
+  applyOnDemandConfig(viewModel, module) {
+    if (this.onDemandModules.includes(module.apiKey)) {
+      viewModel.moduleSpecificConfig.loadOnDemand = true;
+      viewModel.moduleSpecificConfig.loadOnDemandConfig = {
+        loadingText: 'Loading...',
+        reloadOnReopen: true,
+        showMore: {
+          mode: 'pagination',
+          batchSize: 10
+        }
+      };
+    }
+  }
+
+  applyClientActionsConfig(viewModel, module) {
+    if (this.clientActions.length === 0) {
+      return;
+    }
+
+    const resolvedActions = ClientActionsTranslator.transform(this.clientActions, 'SmartNavigation', module.apiKey, module);
+
+    if (!resolvedActions || resolvedActions.length === 0) {
+      return;
+    }
+
+    const actionById = resolvedActions.reduce((accumulator, action) => {
+      accumulator[action.id] = action;
+      return accumulator;
+    }, {});
+    resolvedActions.forEach(clientAction => {
+      if (!clientAction) {
+        return;
+      }
+
+      const configKey = this.getActionConfigKey(clientAction);
+
+      if (configKey) {
+        viewModel.moduleSpecificConfig[configKey] = true;
+      }
+
+      const moreOptions = this.getMoreOptions(clientAction);
+
+      if (moreOptions.length > 0) {
+        viewModel.moduleSpecificConfig.moreOptions = moreOptions;
+      }
+    });
+  }
+
+  applyIconConfig(viewModel, module) {
+    const icon = this.iconMap[module.apiKey];
+
+    if (icon) {
+      viewModel.iconSlot = {
+        type: 'svg',
+        href: icon
+      };
+    }
+  }
+
+  getActionConfigKey(action) {
+    const ACTION_NAME = {
+      add: 'isAddEnabled',
+      more: 'isMoreEnabled',
+      search: 'isSearchEnabled'
+    };
+    const resolvedComponent = action.component || '';
+    const actionProperties = action.properties || {};
+    const icon = actionProperties.icon || '';
+
+    if (resolvedComponent === 'MoreActions') {
+      return ACTION_NAME.more;
+    }
+
+    if (resolvedComponent === 'SearchInput') {
+      return ACTION_NAME.search;
+    }
+
+    if (resolvedComponent === 'ActionIcon' && icon === 'plus') {
+      return ACTION_NAME.add;
+    }
+
+    return null;
+  }
+
+  getMoreOptions(action) {
+    const actionProperties = action?.properties;
+
+    if (!Array.isArray(actionProperties?.options)) {
+      return [];
+    }
+
+    return actionProperties.options;
+  }
+
+  applyOverlayConfig(viewModel, module) {
+    if (this.overlayModules.includes(module.apiKey)) {
+      viewModel.moduleSpecificConfig.accordionMode = 'Focused';
+    }
+  }
+
+  applySubModulesConfig(viewModel, module) {
+    if (!module.subModules || !Array.isArray(module.subModules)) {
+      return;
+    }
+
+    viewModel.canBeEmpty = true;
+
+    if (module.subModules.length === 0) {
+      viewModel.emptyStateConfig = EMPTY_STATE_CONFIG;
+      return;
+    }
+
+    viewModel.subModules = module.subModules.map(subModule => this.translateModule(subModule));
+  }
+
+  applySelectedModuleConfig(viewModel, module) {
+    if (module.apiKey === this.selectedModule) {
+      viewModel.selected = true;
+    }
+  }
+
+} // ============================================================================
+// Translator Function (Public API)
+// ============================================================================
+
+
+const translatorService = new NavigationTranslatorService();
+export function OneUnifiedNavigationTranslator(state) {
+  globalThis.__SMART_NAVIGATION_STATE__ = state;
+  const {
+    properties
+  } = state;
+  const {
+    modules,
+    departments,
+    selectedModule,
+    overLayModules,
+    onDemandModules,
+    clientActions,
+    iconMap
+  } = properties;
+  translatorService.initialize(overLayModules, onDemandModules, clientActions, selectedModule, iconMap);
+  return translatorService.translateToViewModel(modules, departments);
+}
+export const translateModule = translatorService.translateModule.bind(translatorService);

package/es/platform/components/smart-navigation/adapters/presenters/Present.js

@@ -0,0 +1,77 @@
+export const UnifiedNavigationPresenter = state => ({
+  apiKey: state.key || state.optionKey,
+  id: state.key
+}); // export const SmartNavigationPresenter = (state, data) => {
+//   const { modules: stateData } = state.properties;
+//   const findDataInModule = (moduleData, apiKey) => {
+//     const key1 = moduleData.apiKey || moduleData.key || moduleData.id || moduleData.optionKey;
+//     const key2 = apiKey;
+//     if (key1 === key2) {
+//       return moduleData;
+//     }
+//     if (moduleData.subModules && Array.isArray(moduleData.subModules)) {
+//       for (const subModule of moduleData.subModules) {
+//         const found = findDataInModule(subModule, apiKey);
+//         if (found) {
+//           return found;
+//         }
+//       }
+//     }
+//     return null;
+//   };
+//   for (const module of stateData) {
+//     const result = findDataInModule(module, data.key);
+//     if (result) {
+//       return result;
+//     }
+//   }
+//   return null;
+// };
+
+export class SmartNavigationPresenter {
+  constructor(state) {
+    this.state = state;
+  }
+
+  findModule(moduleKey) {
+    const {
+      modules: stateData
+    } = this.state.properties;
+
+    const findDataInModule = (moduleData, apiKey) => {
+      const key1 = moduleData.apiKey || moduleData.key || moduleData.id || moduleData.optionKey;
+      const key2 = apiKey;
+
+      if (key1 === key2) {
+        return moduleData;
+      }
+
+      if (moduleData.subModules && Array.isArray(moduleData.subModules)) {
+        for (const subModule of moduleData.subModules) {
+          const found = findDataInModule(subModule, apiKey);
+
+          if (found) {
+            return found;
+          }
+        }
+      }
+
+      return null;
+    };
+
+    for (const module of stateData) {
+      const result = findDataInModule(module, moduleKey);
+
+      if (result) {
+        return result;
+      }
+    }
+
+    return null;
+  }
+
+  findDepartment(departmentApiName) {
+    return this.state.properties.departments.find(dept => dept.apiKey === departmentApiName) || null;
+  }
+
+}