@zohodesk/library-platform 1.1.2 → 1.1.3

package/es/platform/column-chooser/domain/entities/ColumnChooserImp.js

@@ -0,0 +1,95 @@
+export default class ColumnChooserImp {
+  constructor() {
+    let isSaved = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    let reorderEntity = arguments.length > 1 ? arguments[1] : undefined;
+    let searchEntity = arguments.length > 2 ? arguments[2] : undefined;
+    let selectEntity = arguments.length > 3 ? arguments[3] : undefined;
+    this.isSaved = isSaved;
+    this.reorderEntity = reorderEntity;
+    this.searchEntity = searchEntity;
+    this.selectEntity = selectEntity;
+  }
+
+  markAsSaved() {
+    this.isSaved = true;
+  }
+
+  hasBeenSaved() {
+    return this.isSaved;
+  }
+
+  markAsUnsaved() {
+    this.isSaved = false;
+  }
+
+  init(order, selectedArray) {
+    this.reorderEntity.initOrder(order);
+    this.selectEntity.resetSelection(selectedArray);
+    this.searchEntity.setSearchText('');
+  }
+
+  setSearchText(searchStr) {
+    this.searchEntity.setSearchText(searchStr);
+  }
+
+  select(id) {
+    if (!this.selectEntity.isMaxSelectionReached()) {
+      this.selectEntity.select(id);
+      this.rearrangeSelectedFirst();
+    }
+  }
+
+  deselect(id) {
+    if (this.selectEntity.getSelectedCount() > 1) {
+      this.selectEntity.deselect(id);
+      this.rearrangeSelectedFirst();
+    }
+  }
+
+  rearrangeSelectedFirst() {
+    const order = this.reorderEntity.getOrder();
+    const selected = this.selectEntity.getSelected();
+    const selectedArray = [];
+    const unselectedArray = [];
+    order.forEach(field => {
+      if (selected[field]) {
+        selectedArray.push(field);
+      } else {
+        unselectedArray.push(field);
+      }
+    });
+    this.reorderEntity.initOrder([...selectedArray, ...unselectedArray]);
+  }
+
+  arrayMoveImmutable(fromIndex, toIndex) {
+    this.reorderEntity.arrayMoveImmutable(fromIndex, toIndex);
+  }
+
+  getOrder() {
+    return this.reorderEntity.getOrder();
+  }
+
+  getSelectedWithOrder() {
+    const order = this.reorderEntity.getOrder();
+    const selected = this.selectEntity.getSelected();
+    return order.filter(field => selected[field]);
+  }
+
+  toObject() {
+    const isSaved = this.hasBeenSaved();
+    const order = this.reorderEntity.getOrder();
+    const selected = this.selectEntity.getSelected();
+    const fieldsOrder = this.searchEntity.filterOptions(order);
+    const searchText = this.searchEntity.getSearchText();
+    const isMaxSelectionReached = this.selectEntity.isMaxSelectionReached();
+    return {
+      order,
+      selected,
+      isSaved,
+      isMaxSelectionReached,
+      fieldsOrder,
+      searchText
+    };
+  }
+
+}

package/es/platform/column-chooser/domain/entities/ReorderEntityImp.js

@@ -0,0 +1,35 @@
+export default class ReorderEntityImp {
+  constructor(order) {
+    this.order = order;
+  }
+
+  initOrder(order) {
+    this.order = [...order];
+  }
+
+  moveTo(id, index) {
+    const currentIndex = this.order.indexOf(id);
+    this.arrayMoveImmutable(currentIndex, index);
+  }
+
+  arrayMoveImmutable(fromIndex, toIndex) {
+    if (fromIndex === toIndex) {
+      return;
+    }
+
+    const newOrder = [...this.order];
+    const startIndex = fromIndex < 0 ? newOrder.length + fromIndex : fromIndex;
+
+    if (startIndex >= 0 && startIndex < newOrder.length) {
+      const endIndex = toIndex < 0 ? newOrder.length + toIndex : toIndex;
+      const [item] = newOrder.splice(fromIndex, 1);
+      newOrder.splice(endIndex, 0, item);
+      this.order = newOrder;
+    }
+  }
+
+  getOrder() {
+    return this.order;
+  }
+
+}

package/es/platform/column-chooser/domain/entities/SearchEntityImp.js

@@ -0,0 +1,28 @@
+export default class SearchEntityImp {
+  constructor(searchText, getValue) {
+    this.searchText = searchText;
+    this.getValue = getValue;
+  }
+
+  getSearchText() {
+    return this.searchText;
+  }
+
+  setSearchText(term) {
+    this.searchText = term;
+  }
+
+  filterOptions(options) {
+    if (!this.searchText) {
+      return options;
+    }
+
+    return options.filter(option => this.matches(this.getValue(option)));
+  }
+
+  matches(value) {
+    if (!this.searchText) return true;
+    return value.toLowerCase().includes(this.searchText.toLowerCase());
+  }
+
+}

package/es/platform/column-chooser/domain/entities/SelectEntityImp.js

@@ -0,0 +1,58 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+export default class SelectEntityImp {
+  constructor(selected, maxCount) {
+    this.selected = selected;
+    this.maxCount = maxCount;
+
+    _defineProperty(this, "selectedCount", void 0);
+
+    this.calculateSelectedCount();
+  }
+
+  getSelectedCount() {
+    this.calculateSelectedCount();
+    return this.selectedCount;
+  }
+
+  resetSelection(selectedArray) {
+    // Clear all current selections
+    this.selected = {}; // Select items in the given order, up to maxCount
+
+    for (let i = 0; i < selectedArray.length && (this.maxCount === 0 || i < this.maxCount); i++) {
+      this.selected[selectedArray[i]] = true;
+    }
+
+    this.calculateSelectedCount();
+  }
+
+  calculateSelectedCount() {
+    this.selectedCount = Object.values(this.selected).filter(Boolean).length;
+    return this.selectedCount;
+  }
+
+  select(item) {
+    if (this.isMaxSelectionReached()) {
+      return; // throw new Error(`Cannot select more than ${this.maxCount} items`);
+    }
+
+    this.selected[item] = true;
+    this.calculateSelectedCount();
+  }
+
+  isMaxSelectionReached() {
+    return this.maxCount > 0 && this.selectedCount >= this.maxCount;
+  }
+
+  deselect(item) {
+    if (this.selected[item]) {
+      delete this.selected[item];
+      this.calculateSelectedCount();
+    }
+  }
+
+  getSelected() {
+    return this.selected;
+  }
+
+}

package/es/platform/column-chooser/domain/entities/interfaces/ColumnChooser.js

@@ -0,0 +1 @@
+export {};

package/es/platform/column-chooser/domain/entities/interfaces/ReorderEntity.js

@@ -0,0 +1 @@
+export {};

package/es/platform/column-chooser/domain/entities/interfaces/SearchEntity.js

@@ -0,0 +1 @@
+export {};

package/es/platform/column-chooser/domain/entities/interfaces/SelectEntity.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+import Properties from "../../../bc/column-chooser/Properties";
+import EventHandlersFactory from "./EventHandlersFactory";
+export default class ColumnChooserBehaviourFactory {
+  static create() {
+    return {
+      name: 'columnChooser',
+      setInitialState: () => ({
+        order: [],
+        selected: {},
+        isMaxSelectionReached: false,
+        fieldsOrder: [],
+        searchText: ''
+      }),
+      eventHandlers: EventHandlersFactory.create(),
+      properties: Properties
+    };
+  }
+
+}

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

@@ -0,0 +1,30 @@
+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 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";
+export default class EventHandlersFactory {
+  static create() {
+    const repository = new Repository();
+    const presenter = new Presenter();
+    const service = new Service({
+      repository,
+      presenter
+    });
+    return {
+      [COLUMN_CHOOSER_BEHAVIOUR_OPENED]: 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
+    };
+  }
+
+}

package/es/platform/data-source/http-template/updateSelectedFields.js

@@ -0,0 +1,28 @@
+const updateSelectedFields = {
+  name: 'selectedFields',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/views/{{viewId}}/selectedFields',
+  parameters: `{}`,
+  type: 'PUT',
+  requestBody: '{"fields": {{fields}}}',
+  transformer: res => res.fields,
+  properties: {
+    viewId: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    departmentId: {
+      required: true,
+      defaultValue: 1,
+      typeMetadata: {
+        schema: {
+          type: 'number'
+        }
+      }
+    }
+  }
+};
+export default updateSelectedFields;

package/es/platform/data-source/index.js

@@ -13,6 +13,7 @@ import fetchLayoutRules from "./http-template/fetchLayoutRules";
 import fetchDependencyMappings from "./http-template/fetchDependencyMappings";
 import fetchValidationRules from "./http-template/fetchValidationRules";
 import createRecord from "./http-template/createRecord";
+import updateSelectedFields from "./http-template/updateSelectedFields";
 let dataSource = {
   httpTemplates: {
     [RecordApiActionName.GET_RECORDS]: getRecords,
@@ -23,6 +24,7 @@ let dataSource = {
     [RecordApiActionName.GET_CLIENTACTIONS]: getClientActions,
     getAvailableFields,
     getSelectedFields,
+    updateSelectedFields,
     fetchMyLayouts,
     fetchMyForm,
     fetchLayoutRules,

package/es/platform/zfield/domain/entities/fields-manager/FieldsManager.js

@@ -61,7 +61,7 @@ class FieldManager {
     const {
       apiName
     } = metaData;
-    return apiName === 'availableFields' || apiName === 'selectedFields';
+    return apiName === 'availableFields' || apiName === 'selectedFields' || apiName === FieldApiName.UPDATE_SELECTED_FIELDS;
   }
 
   startFetching(apiName) {
@@ -85,6 +85,8 @@ class FieldManager {
       this.fields = data;
     } else if (apiName === FieldApiName.SELECTED_FIELDS) {
       this.selectedFields = data;
+    } else if (apiName === FieldApiName.UPDATE_SELECTED_FIELDS) {
+      this.selectedFields = data;
     }
   }
 

package/es/platform/zfield/domain/entities/interfaces/FieldApiName.js

@@ -1,6 +1,7 @@
 var FieldApiName = /*#__PURE__*/function (FieldApiName) {
   FieldApiName["AVAILABLE_FIELDS"] = "availableFields";
   FieldApiName["SELECTED_FIELDS"] = "selectedFields";
+  FieldApiName["UPDATE_SELECTED_FIELDS"] = "updateSelectedFields";
   return FieldApiName;
 }(FieldApiName || {});
 

package/es/platform/zfield/frameworks/ZFieldBehaviourFactory.js

@@ -4,7 +4,12 @@ class ZFieldBehaviourFactory {
   static create(apiTemplates) {
     return {
       name: 'zfield',
-      setInitialState: () => ({}),
+      setInitialState: () => ({
+        fields: [],
+        selectedFields: [],
+        isFieldsFetching: false,
+        isSelectedFieldsFetching: false
+      }),
       eventHandlers: ActionHandlerFactory.create(apiTemplates),
       properties: {}
     };

package/es/platform/zlist/adapters/gateways/Repository.js

@@ -21,7 +21,8 @@ class Repository {
       context
     } = this.state.properties;
     const {
-      sortBy
+      sortBy,
+      errorRecordFailed
     } = this.getZListState();
     const list = ListFactory.createList({
       context,
@@ -32,7 +33,8 @@ class Repository {
         ...query
       },
       sortBy: new SortBy(sortBy.id, sortBy.name, sortBy.order),
-      limit: 50
+      limit: 50,
+      errorRecordFailed
     });
     return list;
   }

package/es/platform/zlist/adapters/presenters/SelectionTranslator.js

@@ -0,0 +1,92 @@
+/* eslint-disable @zohodesk/architecturerules/define-property-schema */
+
+/* eslint-disable max-lines-per-function */
+import ClientActionsTranslator from "../../../client-actions/translators/client-actions-translator";
+import DefaultClientActions from "./utils/DefaultClientActions";
+export default function SelectionTranslator(state) {
+  const {
+    behaviours,
+    properties
+  } = state;
+  const {
+    columnChooserConfig,
+    selectionConfig,
+    context,
+    moduleName
+  } = properties;
+  const {
+    zfield,
+    selection,
+    columnChooser
+  } = behaviours;
+  const {
+    selected,
+    hasAllSelected
+  } = selection;
+  const availableFields = zfield.fields;
+  const columnChooserProps = getColumnChooserProps(columnChooser, availableFields, context, moduleName);
+  const clientActions = generateClientActions(selectionConfig, columnChooserConfig, hasAllSelected, columnChooserProps);
+  const contextAppliedActions = ClientActionsTranslator.transform(clientActions, context);
+  return {
+    selected,
+    hasAllSelected,
+    actions: contextAppliedActions
+  };
+}
+
+function generateClientActions(selectionConfig, columnChooserConfig, hasAllSelected, columnChooserProps) {
+  const clientActions = [];
+
+  if (selectionConfig.isEnabled) {
+    if (columnChooserConfig.isEnabled) {
+      const columnChooserAction = DefaultClientActions.createColumnChooserAction(columnChooserProps);
+      clientActions.push(columnChooserAction);
+    } else if (selectionConfig.isSelectAllEnabled) {
+      const selectAllColumnsAction = DefaultClientActions.createSelectAllAction(hasAllSelected);
+      clientActions.push(selectAllColumnsAction);
+    }
+  }
+
+  return clientActions;
+}
+
+function getColumnChooserProps(columnChooser) {
+  var _context$modules, _context$modules$find;
+
+  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;
+  const {
+    searchText: searchString,
+    fieldsOrder,
+    selected,
+    isMaxSelectionReached
+  } = columnChooser;
+  const fieldMap = mapFieldsToObject(availableFields);
+  const disabledFieldName = (_context$modules = context.modules) === null || _context$modules === void 0 ? void 0 : (_context$modules$find = _context$modules.find(module => module.apiKey === moduleName)) === null || _context$modules$find === void 0 ? void 0 : _context$modules$find.nameField;
+  const columnChooserOptions = fieldsOrder.map(fieldName => getOption(fieldMap[fieldName], !!selected[fieldName], disabledFieldName === fieldName));
+  return {
+    options: columnChooserOptions,
+    searchString,
+    hasSearch: searchString !== '' || columnChooserOptions.length > 3,
+    errorMessage: isMaxSelectionReached ? "You've reached the limit of 15 columns." : ''
+  };
+}
+
+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/zlist/adapters/presenters/TableTranslator.js

@@ -1,3 +1,5 @@
+/* eslint-disable @zohodesk/architecturerules/define-property-schema */
+
 /* eslint-disable max-lines-per-function */
 import { Width as ColumnWidth } from "../../../../cc/table-list/data-types/Header";
 import HeadersTranslator from "./translators/HeadersTranslator";
@@ -8,6 +10,7 @@ import { TableListConstants } from "../../../../cc/table-list";
 import { ResizerStateTranslator } from "./translators/ResizerStateTranslator";
 import { calculateFieldWidths } from "./utils/calculateFieldWidths";
 import DefaultClientActions from "./utils/DefaultClientActions";
+import SelectionTranslator from "./SelectionTranslator";
 const EMPTY_OBJECT = {};
 const EMPTY_ARRAY = [];
 
@@ -27,11 +30,13 @@ export default class TableTranslator {
     } = properties;
     const {
       localStorage: localStorageBehaviour,
-      columnResizer
+      columnResizer,
+      keyboardControls
     } = behaviours;
     const {
       resizeConfig,
-      preferences
+      preferences,
+      keyboardControlsConfig
     } = properties;
     context['servicePrefix'] = 'supportapi/zd'; // FIX: servicePrefix defaultValue should be available from properties
 
@@ -46,6 +51,10 @@ export default class TableTranslator {
       sortBy
     } = fallbackToDefault(zlist, {}); // FIX: zlist should be available by default
 
+    const {
+      focussedIndex
+    } = fallbackToDefault(keyboardControls, {}); // FIX: KeyboardControls should be available by default
+
     const {
       records,
       isFetching: isRecordsFetching
@@ -93,23 +102,27 @@ export default class TableTranslator {
     return {
       properties,
       behaviours,
-      selection: behaviours === null || behaviours === void 0 ? void 0 : behaviours.selection,
-      sortBy,
-      rowCursor,
-      resizerState: ResizerStateTranslator({
-        columnResizer: columnResizer,
-        resizeConfig: resizeConfig,
-        headerNames: selectedFields,
-        modifiedWidths
-      }),
-      rowActionsConfig: {
-        hasActions: Boolean(rowActions === null || rowActions === void 0 ? void 0 : rowActions.length),
-        // Boolean(newRowActions?.length),
-        columnWidth: ColumnWidth.XSmall
-      },
-      isLoading,
-      emptyStateUiType: componentMapping.emptyState || '',
-      data
+      viewModel: {
+        selection: SelectionTranslator(state),
+        focussedRow: focussedIndex,
+        sortBy,
+        rowCursor,
+        resizerState: ResizerStateTranslator({
+          columnResizer: columnResizer,
+          resizeConfig: resizeConfig,
+          headerNames: selectedFields,
+          modifiedWidths
+        }),
+        rowActionsConfig: {
+          hasActions: Boolean(rowActions === null || rowActions === void 0 ? void 0 : rowActions.length),
+          // Boolean(newRowActions?.length),
+          columnWidth: ColumnWidth.XSmall
+        },
+        keyboardControlsConfig,
+        isLoading,
+        emptyStateUiType: componentMapping.emptyState || '',
+        data
+      }
     };
   }
 

package/es/platform/zlist/adapters/presenters/translators/ColumnTranslator.js

@@ -2,16 +2,38 @@ import EmptyViewModel from "./EmptyViewModel";
 import * as FieldTranslators from "./fields";
 import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
 
-function ColumnTranslator(fieldModel, record, fieldComponentMapping, fieldActions) {
+//hacking temp url construction for lookup
+function getLookupUrlConstructions(_ref) {
+  var _field$lookup, _field$lookup$module;
+
+  let {
+    field,
+    value,
+    context
+  } = _ref;
+  let {
+    orgName,
+    departmentName
+  } = context;
+  let lookupModuleName = field === null || field === void 0 ? void 0 : (_field$lookup = field.lookup) === null || _field$lookup === void 0 ? void 0 : (_field$lookup$module = _field$lookup.module) === null || _field$lookup$module === void 0 ? void 0 : _field$lookup$module.apiName;
+  return `/agent/${orgName}/${departmentName}/${lookupModuleName}/details/${value.id}`;
+}
+
+function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context) {
   var _record$cf;
 
-  const field = { ...fieldModel
-  };
   const {
     isCustomField,
     name,
     type
   } = field;
+  let fieldToUiValue;
+  const fieldEntry = fieldComponentMapping[name];
+
+  if (typeof fieldEntry == 'string') {
+    console.warn(`The string format for componentMapping will soon be deprecated. Please update to the new JSON format. REF : ${JSON.stringify(fieldEntry)}`);
+  }
+
   const value = isCustomField ? (_record$cf = record.cf) === null || _record$cf === void 0 ? void 0 : _record$cf[name] : record[name];
   const actions = ClientActionsTranslator.transform(fieldActions, {
     field,
@@ -33,9 +55,46 @@ function ColumnTranslator(fieldModel, record, fieldComponentMapping, fieldAction
     return EmptyViewModel();
   }
 
+  if (field.type == "LookUp") {
+    value.url = getLookupUrlConstructions({
+      field,
+      value,
+      context
+    });
+  }
+
+  let finalValue = value;
+
+  if (fieldToUiValue !== undefined) {
+    finalValue = fieldToUiValue;
+  }
+
+  if (fieldEntry && typeof fieldEntry === 'object') {
+    let data = {
+      actions,
+      ...fieldTranslator(field, finalValue, {
+        recordId: record.id
+      })
+    };
+    data.value = fieldEntry.fieldToUIComponentTranslator({
+      field,
+      record,
+      context
+    });
+    data.type = fieldEntry.UIComponentName;
+    console.log(data, "====>>> custom field modal");
+    return data;
+  }
+
+  console.log({
+    actions,
+    ...fieldTranslator(field, finalValue, {
+      recordId: record.id
+    })
+  }, "====>>> normal pre-defined field modal");
   return {
     actions,
-    ...fieldTranslator(field, value, {
+    ...fieldTranslator(field, finalValue, {
       recordId: record.id
     })
   };

package/es/platform/zlist/adapters/presenters/translators/Row.js

@@ -15,7 +15,7 @@ export default function RowTranslator(_ref) {
   });
   return {
     id: record.id,
-    columns: fields.map(field => ColumnTranslator(field, record, fieldComponentMapping, fieldActions)),
+    columns: fields.map(field => ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context)),
     rowActionLocation: {
       type: rowActionsUiType,
       actions