@zohodesk/library-platform 1.1.1 → 1.1.2-exp.0

package/es/platform/zlist/adapters/controllers/RecordSuccessCallbackController.js

@@ -0,0 +1,28 @@
+import AbstractController from "./AbstractController";
+
+class RecordSuccessCallbackController extends AbstractController {
+  handle(event) {
+    const {
+      state,
+      updateState,
+      dispatch,
+      action
+    } = event;
+    const {
+      payload,
+      metaData
+    } = action;
+    const {
+      recordSuccessCallbackUseCase
+    } = this.service;
+    recordSuccessCallbackUseCase.updateDependency(state, updateState);
+    recordSuccessCallbackUseCase.execute({
+      dispatch,
+      payload,
+      metaData
+    });
+  }
+
+}
+
+export default RecordSuccessCallbackController;

package/es/platform/zlist/adapters/controllers/SortController.js

@@ -11,9 +11,7 @@ class SortController extends AbstractController {
       action,
       dispatch
     } = event;
-    const {
-      sortBy
-    } = action.payload;
+    const sortBy = action.payload;
     sortUseCase.updateDependency(state, updateState);
     sortUseCase.execute({
       sortBy,

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

@@ -1,6 +1,7 @@
 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; }
 
 import ListFactory from "../../applications/entities-factory/ListFactory";
+import SortBy from "../../domain/entities/SortBy";
 
 class Repository {
   constructor() {
@@ -13,13 +14,16 @@ class Repository {
 
   getList() {
     const {
-      sortBy,
       departmentId,
       viewId,
       moduleName,
       query,
       context
     } = this.state.properties;
+    const {
+      sortBy,
+      errorRecordFailed
+    } = this.getZListState();
     const list = ListFactory.createList({
       context,
       query: {
@@ -28,12 +32,20 @@ class Repository {
         moduleName,
         ...query
       },
-      sortBy,
-      limit: 50
+      sortBy: new SortBy(sortBy.id, sortBy.name, sortBy.order),
+      limit: 50,
+      errorRecordFailed
     });
     return list;
   }
 
+  getZListState() {
+    const {
+      zlist
+    } = this.state.behaviours;
+    return zlist;
+  }
+
 }
 
 export default Repository;

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

@@ -12,6 +12,7 @@ import RecordExecuteSucceededUseCase from "../../applications/usecases/RecordExe
 import RecordExecuteFailedUseCase from "../../applications/usecases/RecordExecuteFailedUseCase";
 import UpdateSuccessUseCase from "../../applications/usecases/UpdateSuccessUseCase";
 import DeleteSuccessUseCase from "../../applications/usecases/DeleteSuccessUseCase";
+import RecordSuccessCallbackUsecase from "../../applications/usecases/RecordSuccessCallbackUsecase";
 
 class Service {
   constructor(dependencies) {
@@ -31,6 +32,8 @@ class Service {
 
     _defineProperty(this, "recordExecuteSucceededUseCase", void 0);
 
+    _defineProperty(this, "recordSuccessCallbackUseCase", void 0);
+
     _defineProperty(this, "recordExecuteFailedUseCase", void 0);
 
     _defineProperty(this, "sortUseCase", void 0);
@@ -49,6 +52,7 @@ class Service {
     this.deleteMultipleRecordUseCase = new DeleteMultipleRecordUseCase(this.dependencies);
     this.deleteSingleRecordUseCase = new DeleteSingleRecordUseCase(this.dependencies);
     this.recordExecuteSucceededUseCase = new RecordExecuteSucceededUseCase(this.dependencies);
+    this.recordSuccessCallbackUseCase = new RecordSuccessCallbackUsecase(this.dependencies);
     this.recordExecuteFailedUseCase = new RecordExecuteFailedUseCase(this.dependencies);
     this.recordUpdateUseCase = new RecordUpdateUseCase(this.dependencies);
     this.updateSuccessUseCase = new UpdateSuccessUseCase(this.dependencies);

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

@@ -0,0 +1,26 @@
+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; }
+
+class Presenter {
+  constructor() {
+    _defineProperty(this, "updateState", void 0);
+
+    _defineProperty(this, "state", void 0);
+  }
+
+  updateDependencies(state, updateState) {
+    this.updateState = updateState;
+    this.state = state;
+  }
+
+  updateView(zlist) {
+    this.state = { ...this.state,
+      behaviours: { ...this.state.behaviours,
+        zlist
+      }
+    };
+    this.updateState(this.state);
+  }
+
+}
+
+export default Presenter;

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";
@@ -5,11 +7,19 @@ import RowsTranslator from "./translators/RowsTranslator";
 import Pipeline from "./utils/Pipeline";
 import RowCursor from "../../../../cc/table-list/data-types/RowCursor";
 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 = [];
 
 const fallbackToDefault = (value, defaultValue) => [undefined, null].includes(value) ? defaultValue : value;
 
 export default class TableTranslator {
   static transformState(state) {
+    var _localStorageBehaviou, _localStorageBehaviou2;
+
     const {
       behaviours,
       properties
@@ -18,14 +28,33 @@ export default class TableTranslator {
       componentMapping,
       context
     } = properties;
+    const {
+      localStorage: localStorageBehaviour,
+      columnResizer,
+      keyboardControls
+    } = behaviours;
+    const {
+      resizeConfig,
+      preferences,
+      keyboardControlsConfig
+    } = properties;
     context['servicePrefix'] = 'supportapi/zd'; // FIX: servicePrefix defaultValue should be available from properties
 
     const {
+      zlist,
       zrecord,
       zfield,
       zclientAction
     } = fallbackToDefault(behaviours, {}); // FIX: behaviours should be available by default
 
+    const {
+      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
@@ -36,7 +65,7 @@ export default class TableTranslator {
       isFetching: isClientActionsFetching
     } = fallbackToDefault(zclientAction, {}); // FIX: zclientAction should be available by defaultlt
 
-    const fieldComponentMapping = componentMapping.fields;
+    const fieldComponentMapping = fallbackToDefault(componentMapping.fields, {});
     const rowActionsUiType = componentMapping.rowActionsComponentName;
     const {
       fields: availableFields,
@@ -47,15 +76,23 @@ export default class TableTranslator {
 
     const isLoading = !!(isRecordsFetching || isAvailableFieldsFetching || isSelectedFieldsFetching);
     const fields = selectedFields === null || selectedFields === void 0 ? void 0 : selectedFields.map(selectedField => availableFields === null || availableFields === void 0 ? void 0 : availableFields.find(availableField => availableField.name === selectedField)).filter(f => f != undefined);
+    const newClientActions = DefaultClientActions.createSortActions(fields, clientActions || EMPTY_ARRAY);
     const {
       headerActions,
       fieldActions,
       rowActions,
       noLocation
-    } = mapClientActions(clientActions || []);
+    } = mapClientActions(newClientActions || EMPTY_ARRAY);
     const isRowClickable = noLocation.some(action => action.uiComponentMapping.eventMappings.some(mapping => mapping.sourceEvent === TableListConstants.TABLE_LIST_ROW_CLICKED));
     const rowCursor = isRowClickable ? RowCursor.Pointer : RowCursor.Default;
-    const headersTranslator = new HeadersTranslator(fields, headerActions, context);
+    const {
+      moduleName,
+      viewId
+    } = properties; // TODO: move this to a separate file as selector
+
+    const localStorageFieldWidths = fallbackToDefault(localStorageBehaviour === null || localStorageBehaviour === void 0 ? void 0 : (_localStorageBehaviou = localStorageBehaviour[moduleName]) === null || _localStorageBehaviou === void 0 ? void 0 : (_localStorageBehaviou2 = _localStorageBehaviou[viewId]) === null || _localStorageBehaviou2 === void 0 ? void 0 : _localStorageBehaviou2.modifiedWidths, EMPTY_OBJECT);
+    const modifiedWidths = calculateFieldWidths(fields, localStorageFieldWidths, preferences);
+    const headersTranslator = new HeadersTranslator(fields, headerActions, context, modifiedWidths, sortBy);
     const rowsTranslator = new RowsTranslator(records, fields, rowActions, context, fieldComponentMapping, rowActionsUiType, fieldActions); // const actionTranslator = new ClientActionsTranslator(clientActions, records, fields, pageContext);
     // const translators = [headersTranslator.getTranslator(), rowsTranslator.getTranslator(), actionTranslator.getTranslator()];
 
@@ -65,16 +102,27 @@ export default class TableTranslator {
     return {
       properties,
       behaviours,
-      selection: behaviours === null || behaviours === void 0 ? void 0 : behaviours.selection,
-      rowCursor,
-      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,7 +2,24 @@ import EmptyViewModel from "./EmptyViewModel";
 import * as FieldTranslators from "./fields";
 import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
 
-function ColumnTranslator(field, 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 {
@@ -31,6 +48,14 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions) {
     return EmptyViewModel();
   }
 
+  if (field.type == "LookUp") {
+    value.url = getLookupUrlConstructions({
+      field,
+      value,
+      context
+    });
+  }
+
   return {
     actions,
     ...fieldTranslator(field, value, {

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

@@ -1,8 +1,8 @@
-import ColumnSizeTranslator from "./ColumnSizeTranslator";
 import ColumnAlignmentTranslator from "./ColumnAlignmentTranslator";
 import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
+import { SortOrder } from "../../../../zlist/domain/entities/interfaces/Properties";
 
-function HeaderTranslator(field, actions, context) {
+function HeaderTranslator(field, actions, context, modifiedWidths, sortBy) {
   const {
     id,
     name,
@@ -10,18 +10,43 @@ function HeaderTranslator(field, actions, context) {
     isSortable,
     type
   } = field;
+  const newField = { ...field,
+    sort: translateSortBy(field.id, sortBy)
+  };
   const transformedActions = ClientActionsTranslator.transform(actions, { ...context,
-    field
+    field: newField
   });
+  const width = modifiedWidths[name];
   return {
     id: id,
     name: name,
     text: displayLabel,
     sortable: isSortable,
     alignment: ColumnAlignmentTranslator(type),
-    width: ColumnSizeTranslator(type),
+    width,
     actions: transformedActions
   };
 }
 
-export default HeaderTranslator;
+export default HeaderTranslator;
+
+function translateSortBy(id, sortBy) {
+  const newSortBy = { ...sortBy,
+    tooltip: ''
+  };
+
+  if (sortBy.id === id) {
+    if (sortBy.order === SortOrder.ASC) {
+      newSortBy.tooltip = 'Click to Sort Descending';
+    } else if (newSortBy.order === SortOrder.DES) {
+      newSortBy.tooltip = 'Click to Sort Ascending';
+    } else if (newSortBy.order === SortOrder.NONE) {
+      newSortBy.tooltip = 'Click to Sort';
+    }
+  } else {
+    newSortBy.order = SortOrder.NONE;
+    newSortBy.tooltip = 'Click to Sort';
+  }
+
+  return newSortBy;
+}

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

@@ -1,9 +1,11 @@
 import HeaderTranslator from "./Header";
 export default class HeadersTranslator {
-  constructor(fields, actions, context) {
+  constructor(fields, actions, context, modifiedWidths, sortBy) {
     this.fields = fields;
     this.actions = actions;
     this.context = context;
+    this.modifiedWidths = modifiedWidths;
+    this.sortBy = sortBy;
     this.pipe = this.pipe.bind(this);
   }
 
@@ -12,7 +14,7 @@ export default class HeadersTranslator {
       return [];
     }
 
-    return this.fields.map(field => HeaderTranslator(field, this.actions, this.context));
+    return this.fields.map(field => HeaderTranslator(field, this.actions, this.context, this.modifiedWidths, this.sortBy));
   }
 
   pipe(viewModel) {

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

@@ -0,0 +1,98 @@
+const defaultResizerUiState = {
+  isEnabled: false,
+  isCurrentlyResizing: false,
+  currentlyResizingColumn: '',
+  extraWidth: 0,
+  initialPosition: 0,
+  resizedPosition: 0,
+  tooltip: ''
+};
+export function ResizerStateTranslator(_ref) {
+  let {
+    columnResizer,
+    resizeConfig,
+    headerNames,
+    modifiedWidths
+  } = _ref;
+  const {
+    isEnabled: isEnabled,
+    minWidth,
+    maxWidth
+  } = resizeConfig;
+
+  if (!columnResizer || !headerNames || headerNames.length === 0) {
+    return { ...defaultResizerUiState,
+      isEnabled
+    };
+  }
+
+  const {
+    isResizing,
+    allowedWidth,
+    columnName,
+    initialPosition,
+    resizedPosition
+  } = columnResizer.resizerState; // const extraWidth = allowedWidth - (resizedPosition - initialPosition);
+  // MUST: be calculated based on the columnName and modifiedWidths
+
+  const extraWidth = calculateExtraSpaceWidth({
+    headerNames,
+    modifiedWidths,
+    columnName,
+    maxWidth
+  });
+  const tooltip = tooltipI18nHandler({
+    minWidth,
+    maxWidth,
+    width: allowedWidth
+  });
+  return {
+    isEnabled,
+    isCurrentlyResizing: isResizing,
+    currentlyResizingColumn: columnName,
+    extraWidth,
+    initialPosition,
+    resizedPosition,
+    tooltip
+  };
+}
+
+function tooltipI18nHandler(_ref2) {
+  let {
+    minWidth,
+    maxWidth,
+    width
+  } = _ref2;
+
+  if (width === maxWidth) {
+    // return `Max width (${width}px) reached`;
+    return `Max Limit Reached ${width}`;
+  }
+
+  if (width === minWidth) {
+    // return `Min width (${width}px) reached`;
+    return `Min Limit Reached ${width}`;
+  } // return `Width: ${width}px`;
+
+
+  return `Width - ${width}px`;
+}
+
+function calculateExtraSpaceWidth(_ref3) {
+  let {
+    headerNames,
+    modifiedWidths,
+    columnName,
+    maxWidth
+  } = _ref3;
+  const index = headerNames.indexOf(columnName);
+
+  if (index === -1) {
+    return 0;
+  }
+
+  const resizableSpace = headerNames.slice(index + 1).reduce((resizableSpace, columnName) => {
+    return resizableSpace + modifiedWidths[columnName];
+  }, 0);
+  return Math.max(0, maxWidth - resizableSpace);
+}

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

package/es/platform/zlist/adapters/presenters/translators/fields/FormulaFieldTranslator.js

@@ -0,0 +1,26 @@
+import FieldTypes from "../../../../../../cc/fields/field/Types";
+import FormulaFieldModel from "../../../../../../cc/fields/formula/Model";
+
+const FormulaFieldTranslator = (field, value, appendToActionPayload) => {
+  const {
+    uiType,
+    name
+  } = field;
+  const fieldTypeFactory = {
+    STRING: FieldTypes.SingleLineField,
+    BOOLEAN: FieldTypes.CheckboxField,
+    DECIMAL: FieldTypes.DecimalField,
+    CURRENCY: FieldTypes.CurrencyField,
+    DATE: FieldTypes.DateField,
+    DATETIME: FieldTypes.DateTimeField
+  };
+  const setFieldType = fieldTypeFactory[field.returnType] || FieldTypes.SingleLineField;
+  return FormulaFieldModel({
+    uiType: uiType || setFieldType,
+    appendToActionPayload,
+    name,
+    value
+  });
+};
+
+export default FormulaFieldTranslator;

package/es/platform/zlist/adapters/presenters/translators/fields/LookUpFieldTranslator.js

@@ -8,19 +8,19 @@ const LookUpFieldTranslator = (field, value, appendToActionPayload) => {
   } = field;
   const {
     id,
-    firstName,
-    lastName,
-    photoURL = ''
+    name: nameValue,
+    photoURL,
+    url
   } = value;
-  const lookupName = `${firstName} ${lastName}`;
   return LookupFieldModel({
     uiType: uiType || FieldTypes.LookUpField,
     appendToActionPayload,
     name,
     value: {
       id,
-      name: lookupName,
-      photoURL
+      name: nameValue,
+      photoURL,
+      url
     }
   });
 };