@zohodesk/library-platform 1.0.2-exp.1.1 → 1.0.2-exp.1.3

package/es/library/dot/legacy-to-new-arch/table-column-sort/frameworks/ui/TableColumnSortView.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import SortDropdown from '@zohodesk-private/desk-components/es/table/SortDropdown/SortDropdown';
+import { TableColumnSortConstants } from "../../../../../../cc/table-column-sort"; // @ts-ignore
+
+import style from "./css/TableColumnSort.module.css";
+
+function TableColumnSortView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    value,
+    ascendingLabel,
+    descendingLabel
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(SortDropdown, {
+    selectedValue: value,
+    ascendingLabel: ascendingLabel,
+    descendingLabel: descendingLabel,
+    onSort: _ref2 => {
+      let {
+        value
+      } = _ref2;
+      return dispatch({
+        type: TableColumnSortConstants.SORT_CLICKED,
+        payload: {
+          value
+        }
+      });
+    },
+    customStyle: {
+      parentContainer: `${style.parentContainer} ${value !== 'none' ? style.active : ''}`
+    },
+    customAttributes_container: {
+      ref
+    }
+  });
+}
+
+export default TableColumnSortView;

package/es/library/dot/legacy-to-new-arch/table-column-sort/frameworks/ui/css/TableColumnSort.module.css

@@ -0,0 +1,10 @@
+.parentContainer {
+  visibility: hidden;
+  opacity: 0;
+}
+
+:global(.GLOBAL_ZDDC_tableHead:hover) .parentContainer,
+.active {
+  visibility: visible;
+  opacity: 1;
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-multiselect-field/frameworks/ui/ColouredMultiSelectField.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import ColouredMultiSelectProperties from "../../../../../../../cc/fields/coloured-multi-select/Properties";
+import ColouredMultiSelectEvents from "../../../../../../../cc/fields/coloured-multi-select/Events";
+import { ColouredMultiSelectFieldView } from "./ColouredMultiSelectFieldView";
+const ColouredMultiSelectField = createCustomComponent({
+  name: 'ColouredMultiSelectField',
+  View: ColouredMultiSelectFieldView,
+  properties: ColouredMultiSelectProperties,
+  events: ColouredMultiSelectEvents,
+  eventHandlers: {}
+});
+export default ColouredMultiSelectField;

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-multiselect-field/frameworks/ui/ColouredMultiSelectFieldView.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Tags } from "../../../..";
+export function ColouredMultiSelectFieldView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    value,
+    options
+  } = state.properties;
+  const selectedOptions = value.map(item => {
+    const option = options.find(opt => opt.value === item);
+    return {
+      id: option.value,
+      label: option.value,
+      color: option.colorCode
+    };
+  });
+  return /*#__PURE__*/React.createElement(Tags, {
+    getRef: ref,
+    tags: selectedOptions
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-picklist-field/frameworks/ui/ColouredPickListField.js

@@ -0,0 +1,14 @@
+import { createCustomComponent } from "../../../../../../custom-component";
+import ColouredPickListProperties from "../../../../../../../cc/fields/coloured-pick-list/Properties";
+import ColouredPickListEvents from "../../../../../../../cc/fields/coloured-pick-list/Events";
+import TextToFieldClickBehaviourFactory from "../../../../../../behaviours/text-to-field-click/frameworks/ui/TextToFieldClickBehaviourFactory";
+import { ColouredPickListFieldView } from "./ColouredPickListFieldView";
+const ColouredPickListField = createCustomComponent({
+  name: 'ColouredPickListField',
+  View: ColouredPickListFieldView,
+  properties: ColouredPickListProperties,
+  behaviours: [TextToFieldClickBehaviourFactory.create()],
+  events: ColouredPickListEvents,
+  eventHandlers: {}
+});
+export default ColouredPickListField;

package/es/library/dot/legacy-to-new-arch/table-field-components/coloured-picklist-field/frameworks/ui/ColouredPickListFieldView.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import ColoredTag from '@zohodesk-private/desk-components/es/ColoredTag/ColoredTag';
+import { TagsConstants } from "../../../../../../../cc/tags";
+export function ColouredPickListFieldView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  const {
+    value,
+    options
+  } = state.properties;
+  const selectedOption = options.find(option => option.value === value);
+  return /*#__PURE__*/React.createElement(ColoredTag, {
+    $data_id: value,
+    $data_text: value,
+    $data_color: selectedOption.colorCode || '',
+    $event_onClick: id => {
+      dispatch({
+        type: TagsConstants.TAG_CLICKED,
+        payload: {
+          id
+        }
+      });
+    },
+    $customProps_tag: {
+      getRef: ref
+    }
+  });
+}

package/es/library/dot/legacy-to-new-arch/table-field-components/index.js

@@ -8,6 +8,8 @@ import PhoneField from "./phone-field/frameworks/ui/PhoneField";
 import CurrencyField from "./currency-field/frameworks/ui/CurrencyField";
 import LookUpField from "./lookup-field/frameworks/ui/LookupField";
 import PickListField from "./picklist-field/frameworks/ui/PickListField";
+import ColouredPickListField from "./coloured-picklist-field/frameworks/ui/ColouredPickListField";
+import ColouredMultiSelectField from "./coloured-multiselect-field/frameworks/ui/ColouredMultiSelectField";
 import PercentageField from "./percentage-field/frameworks/ui/PercentageField";
 import DateField from "./date-field/frameworks/ui/DateField";
 import DateTimeField from "./datetime-field/frameworks/ui/DateTimeField";
@@ -24,6 +26,8 @@ const FieldComponents = {
   [FieldTypes.CurrencyField]: CurrencyField,
   [FieldTypes.LookUpField]: LookUpField,
   [FieldTypes.PickListField]: PickListField,
+  [FieldTypes.ColouredPickListField]: ColouredPickListField,
+  [FieldTypes.ColouredMultiSelectField]: ColouredMultiSelectField,
   [FieldTypes.PercentageField]: PercentageField,
   [FieldTypes.DateField]: DateField,
   [FieldTypes.DateTimeField]: DateTimeField,

package/es/platform/client-actions/components/row-actions-renderer/frameworks/ui/RowActionsRenderer.module.css

@@ -1,7 +1,7 @@
 [dir=ltr] .actions {
-    padding-left: var(--zd_size4) 
+    padding-left: var(--zd_size6) 
 }[dir=rtl] .actions {
-    padding-right: var(--zd_size4) 
+    padding-right: var(--zd_size6) 
 }
 
 .gap_small {

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

@@ -1,11 +1,73 @@
+async function getValidJsonResArray(res, key) {
+  if (res.status === 204) {
+    return null;
+  }
+
+  if (res.ok) {
+    const json = await res.json();
+    return json[key] || [];
+  }
+
+  throw new Error(`Error: ${res.status} ${res.statusText}`);
+}
+
 let getAvailableFields = {
   name: 'availableFields',
   api: '/{{servicePrefix}}/{{orgName}}/api/v1/views/availableFields',
   parameters: `{
+        "servicePrefix": "{{servicePrefix}}",
+        "orgName": "{{orgName}}",
         "departmentId":"{{departmentId}}",
         "module":"{{moduleName}}"
     }`,
   type: 'GET',
+  getResponse: async _ref => {
+    let {
+      params,
+      payload,
+      headers
+    } = _ref;
+
+    try {
+      const {
+        servicePrefix,
+        orgName,
+        departmentId,
+        moduleName
+      } = params;
+      const availableFieldsUrl = `/${servicePrefix}/${orgName}/api/v1/views/availableFields?departmentId=${departmentId}&module=${moduleName}`;
+      const res = await fetch(availableFieldsUrl, {
+        method: 'GET',
+        headers
+      });
+      const availableFields = await getValidJsonResArray(res, 'fields');
+      const organizationFieldsUrl = `/${servicePrefix}/${orgName}/api/v1/organizationFields?departmentId=${departmentId}&module=${moduleName}`;
+      const ores = await fetch(organizationFieldsUrl, {
+        method: 'GET',
+        headers
+      });
+      const organizationFields = await getValidJsonResArray(ores, 'data');
+      return {
+        fields: availableFields.map(field => {
+          const organizationField = organizationFields.find(orgField => orgField.apiName === field.name);
+
+          if (!organizationField) {
+            return field;
+          }
+
+          return { ...field,
+            pickListValues: organizationField.pickListValues,
+            subType: organizationField.subType
+          };
+        })
+      };
+    } catch (error) {
+      throw {
+        error,
+        message: 'Error fetching available fields'
+      };
+    }
+  },
   transformer: res => res.fields,
   properties: {
     moduleName: {

package/es/platform/zdata-source/domain/entities/APITemplate.js

@@ -67,12 +67,13 @@ class APITemplate {
     };
 
     if (this.getResponseInTemplate) {
-      apiDetails.getResponse = () => {
+      apiDetails.getResponse = headers => {
         const payload = JSON.parse(this.getPayloadString(obj));
         const params = JSON.parse(this.getParameter(obj));
         return this.getResponseInTemplate({
           payload,
-          params
+          params,
+          headers
         });
       };
     }

package/es/platform/zhttp/applications/usecases/FetchUseCase.js

@@ -33,7 +33,7 @@ class FetchUseCase extends AbstractUseCase {
     try {
       // NOTE: getResponse is hacky solution to get the data using function call instead of fetch, So any handling added to here needs to be added to fetch and vise versa
       if (typeof getResponse === 'function') {
-        const data = await getResponse();
+        const data = await getResponse(headers);
 
         if (data === undefined) {
           dispatch({

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,15 @@ class Repository {
 
   getList() {
     const {
-      sortBy,
       departmentId,
       viewId,
       moduleName,
       query,
       context
     } = this.state.properties;
+    const {
+      sortBy
+    } = this.getZListState();
     const list = ListFactory.createList({
       context,
       query: {
@@ -28,12 +31,19 @@ class Repository {
         moduleName,
         ...query
       },
-      sortBy,
+      sortBy: new SortBy(sortBy.id, sortBy.name, sortBy.order),
       limit: 50
     });
     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/TableTranslator.js

@@ -7,7 +7,9 @@ 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";
 const EMPTY_OBJECT = {};
+const EMPTY_ARRAY = [];
 
 const fallbackToDefault = (value, defaultValue) => [undefined, null].includes(value) ? defaultValue : value;
 
@@ -34,11 +36,16 @@ export default class TableTranslator {
     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 {
       records,
       isFetching: isRecordsFetching
@@ -60,12 +67,13 @@ 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 {
@@ -75,7 +83,7 @@ export default class TableTranslator {
 
     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);
+    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()];
 
@@ -86,6 +94,7 @@ export default class TableTranslator {
       properties,
       behaviours,
       selection: behaviours === null || behaviours === void 0 ? void 0 : behaviours.selection,
+      sortBy,
       rowCursor,
       resizerState: ResizerStateTranslator({
         columnResizer: columnResizer,

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

@@ -1,7 +1,8 @@
 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, modifiedWidths) {
+function HeaderTranslator(field, actions, context, modifiedWidths, sortBy) {
   const {
     id,
     name,
@@ -9,8 +10,11 @@ function HeaderTranslator(field, actions, context, modifiedWidths) {
     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 {
@@ -24,4 +28,25 @@ function HeaderTranslator(field, actions, context, modifiedWidths) {
   };
 }
 
-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,10 +1,11 @@
 import HeaderTranslator from "./Header";
 export default class HeadersTranslator {
-  constructor(fields, actions, context, modifiedWidths) {
+  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);
   }
 
@@ -13,7 +14,7 @@ export default class HeadersTranslator {
       return [];
     }
 
-    return this.fields.map(field => HeaderTranslator(field, this.actions, this.context, this.modifiedWidths));
+    return this.fields.map(field => HeaderTranslator(field, this.actions, this.context, this.modifiedWidths, this.sortBy));
   }
 
   pipe(viewModel) {

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

@@ -1,24 +1,44 @@
 import FieldTypes from "../../../../../../cc/fields/field/Types";
 import MultiListFieldModel from "../../../../../../cc/fields/multi-select/Model";
+import ColouredMultiListFieldModel from "../../../../../../cc/fields/coloured-multi-select/Model";
 
 const MultiSelectFieldTranslator = (field, value, appendToActionPayload) => {
   const {
     uiType,
-    name
+    name,
+    subType,
+    pickListValues
   } = field;
-  const updatedValue = value.split(';').map(item => {
-    if (item === '') {
-      return '-None-';
-    }
+  const updatedValue = value.split(';').map(item => item === '' ? '-None-' : item);
+
+  if (['colored', 'ColorCoded'].includes(subType)) {
+    return ColouredMultiSelectFieldTranslator(field, updatedValue, appendToActionPayload);
+  }
 
-    return item;
-  });
   return MultiListFieldModel({
     uiType: uiType || FieldTypes.MultiSelectField,
     appendToActionPayload,
     name,
+    options: pickListValues,
     value: updatedValue
   });
 };
 
-export default MultiSelectFieldTranslator;
+export default MultiSelectFieldTranslator;
+
+const ColouredMultiSelectFieldTranslator = (field, value, appendToActionPayload) => {
+  const {
+    uiType,
+    name,
+    pickListValues
+  } = field;
+  return ColouredMultiListFieldModel({
+    uiType: uiType || FieldTypes.ColouredMultiSelectField,
+    appendToActionPayload,
+    name,
+    options: pickListValues.map(option => ({ ...option,
+      colorCode: option.colorCode || ''
+    })),
+    value
+  });
+};

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

@@ -1,17 +1,43 @@
 import FieldTypes from "../../../../../../cc/fields/field/Types";
 import PickListFieldModel from "../../../../../../cc/fields/pick-list/Model";
+import ColouredPickListFieldModel from "../../../../../../cc/fields/coloured-pick-list/Model";
 
 const PickListFieldTranslator = (field, value, appendToActionPayload) => {
   const {
     uiType,
-    name
+    name,
+    pickListValues,
+    subType
   } = field;
+
+  if (['colored', 'ColorCoded'].includes(subType)) {
+    return ColouredPickListFieldTranslator(field, value, appendToActionPayload);
+  }
+
   return PickListFieldModel({
     uiType: uiType || FieldTypes.PickListField,
     appendToActionPayload,
+    options: pickListValues,
     name,
     value
   });
 };
 
-export default PickListFieldTranslator;
+export default PickListFieldTranslator;
+
+const ColouredPickListFieldTranslator = (field, value, appendToActionPayload) => {
+  const {
+    uiType,
+    name,
+    pickListValues
+  } = field;
+  return ColouredPickListFieldModel({
+    uiType: uiType || FieldTypes.ColouredPickListField,
+    appendToActionPayload,
+    options: pickListValues.map(option => ({ ...option,
+      colorCode: option.colorCode || ''
+    })),
+    name,
+    value
+  });
+};