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

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
+  });
+};

package/es/platform/zlist/adapters/presenters/utils/DefaultClientActions.js

@@ -0,0 +1,54 @@
+import ClientAction from "../../../../client-actions/behaviour/zclient-actions/domain/entities/ClientAction";
+
+class DefaultClientActions {
+  static constructAction(clientAction) {
+    return new ClientAction(clientAction).toObject();
+  }
+
+  static constructSortAction() {
+    return this.constructAction({
+      uiComponentMapping: {
+        component: 'TableColumnSort',
+        name: 'SortBy',
+        propertiesValueMapping: {
+          value: '{{@context.field.sort.order}}',
+          ascendingLabel: 'Ascending',
+          descendingLabel: 'Descending'
+        },
+        eventMappings: [{
+          payloadValueMapping: {
+            id: '{{@context.field.id}}',
+            name: '{{@context.field.name}}',
+            order: `{{@payload.value}}`
+          },
+          sourceEvent: 'SORT#CLICKED',
+          targetEvent: 'SMART_TABLE#SORT',
+          id: '4000000080005'
+        }],
+        id: '4000000080003'
+      },
+      conditions: {
+        fields: [{
+          fieldName: 'field.isSortable',
+          condition: '=',
+          value: ['true']
+        }],
+        pattern: '1'
+      },
+      location: 'header_actions',
+      id: '4000000080009',
+      modules: ['MODULE'],
+      name: 'SortBy Action',
+      component: 'SmartTable',
+      modifiedTime: '2024-11-21T06:11:59.000Z',
+      createdTime: '2024-11-21T06:11:59.000Z'
+    });
+  }
+
+  static createSortActions(fields, clientActions) {
+    return [...clientActions, this.constructSortAction()];
+  }
+
+}
+
+export default DefaultClientActions;

package/es/platform/zlist/applications/interfaces/output/IPresenter.js

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

package/es/platform/zlist/applications/usecases/AbstractUseCase.js

@@ -4,11 +4,13 @@ class AbstractUseCase {
     this.execute = this.execute.bind(this);
   }
 
-  updateDependency(state) {
+  updateDependency(state, updateState) {
     const {
-      repository
+      repository,
+      presenter
     } = this.dependencies;
     repository.init(state);
+    presenter.updateDependencies(state, updateState);
   }
 
 }

package/es/platform/zlist/applications/usecases/RecordSuccessCallbackUsecase.js

@@ -0,0 +1,24 @@
+import AbstractUseCase from "./AbstractUseCase";
+
+class RecordSuccessCallbackUsecase extends AbstractUseCase {
+  execute(input) {
+    const {
+      dispatch,
+      payload,
+      metaData
+    } = input;
+    const {
+      repository,
+      presenter
+    } = this.dependencies;
+    const list = repository.getList();
+
+    if (list.isAcknowledgeBySortBy(metaData)) {
+      list.setSortBy(metaData);
+      presenter.updateView(list.toObject());
+    }
+  }
+
+}
+
+export default RecordSuccessCallbackUsecase;

package/es/platform/zlist/applications/usecases/SortUseCase.js

@@ -1,3 +1,4 @@
+import { SmartTableConstants } from "../../../../cc/table-connected";
 import AbstractUseCase from "./AbstractUseCase";
 
 class SortUseCase extends AbstractUseCase {
@@ -8,11 +9,16 @@ class SortUseCase extends AbstractUseCase {
     } = input;
     const {
       repository,
-      sortBy: sortByGateway
+      presenter
     } = this.dependencies;
     const list = repository.getList();
-    const sortByQueryString = sortByGateway.toQueryString(sortBy);
-    dispatch(list.createSortByRefetchAction(sortByQueryString));
+    list.setSortBy(sortBy);
+    dispatch(list.createRecordsRefetchAction());
+    dispatch({
+      type: SmartTableConstants.Events.SORTED,
+      payload: sortBy
+    });
+    presenter.updateView(list.toObject());
   }
 
 }

package/es/platform/zlist/domain/entities/List.js

@@ -3,6 +3,7 @@ import { FIELD_EXECUTE, FIELD_REFETCH } from "../../../../bc/zfield/Constants";
 import { ZLIST_RECORD_DELETE_FAILED, ZLIST_RECORD_DELETE_SUCCEEDED, ZLIST_RECORD_UPDATE_FAILED, ZLIST_RECORD_UPDATE_SUCCEEDED } from "../../../../bc/zlist/Constants";
 import { CLIENTACTION_BEHAVIOUR_EXECUTE } from "../../../client-actions/bc/zclient-actions/Constants";
 import { SmartTableConstants } from "../../../../cc/table-connected";
+import SortBy from "./SortBy";
 
 class List {
   constructor(limit, sortBy, query, context) {
@@ -12,6 +13,28 @@ class List {
     this.context = context;
   }
 
+  toObject() {
+    return {
+      sortBy: this.sortBy.toObject()
+    };
+  }
+
+  setSortBy(sortBy) {
+    this.sortBy = new SortBy(sortBy.id, sortBy.name, sortBy.order);
+  }
+
+  toggleSortBy() {
+    const {
+      id,
+      name
+    } = this.sortBy;
+    this.sortBy.doSorting(id, name);
+  }
+
+  isAcknowledgeBySortBy(metaData) {
+    return metaData && metaData['SMART_TABLE#SORTED'];
+  }
+
   createApiProps() {
     const {
       query,
@@ -21,17 +44,12 @@ class List {
     } = this;
     return {
       limit,
-      sortBy,
+      sortBy: sortBy.toQueryString(),
       ...query,
       ...context
     };
   }
 
-  createSortByRefetchAction(sortBy) {
-    this.sortBy = sortBy;
-    return this.createRecordsRefetchAction();
-  }
-
   getInitialMountFetchActions() {
     return [this.createRecordsFetchAction(), this.createAvailableFieldsFetchAction(), this.createSelectedFieldsFetchAction(), this.createClientActionsFetchAction()];
   }
@@ -288,15 +306,21 @@ class List {
     };
   }
 
-  createRecordsRefetchAction() {
+  createRecordsRefetchAction(triggerer) {
     const props = this.createApiProps();
+    const metaData = triggerer === 'sortBy' && {
+      ['SMART_TABLE#SORTED']: {
+        sortBy: this.sortBy.toObject()
+      }
+    };
     return {
       type: RECORD_REFETCH,
       payload: {
         actionName: RecordApiActionName.GET_RECORDS,
         props,
         apiName: 'records'
-      }
+      },
+      metaData
     };
   }