@zohodesk/library-platform 1.1.12 → 1.2.0

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

@@ -1,23 +1,23 @@
 import EmptyViewModel from "./EmptyViewModel";
 import * as FieldTranslators from "./fields";
 import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
+import { isValidFieldVariation } from "./FieldVariations";
 
-//hacking temp url construction for lookup
-function getLookupUrlConstructions(_ref) {
+function ColumnTranslator(_ref) {
   let {
     field,
-    value,
-    context
+    record,
+    fieldComponentMapping,
+    fieldActions,
+    context,
+    preferences,
+    instanceName,
+    moduleName,
+    textOverflowConfig,
+    nameFieldsConfig,
+    recordReadStatusConfig,
+    componentMapping
   } = _ref;
-  let {
-    orgName,
-    departmentName
-  } = context;
-  let lookupModuleName = field?.lookup?.module?.apiName;
-  return `/agent/${orgName}/${departmentName}/${lookupModuleName}/details/${value.id}`;
-}
-
-function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context, preferences, instanceName, textOverflowConfig, moduleName, nameFieldsConfig, recordReadStatusConfig) {
   const {
     isCustomField,
     name,
@@ -32,7 +32,6 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, co
     __DEVELOPMENT__ && console.warn(`The string format for componentMapping will soon be deprecated. Please update to the new JSON format. REF : ${JSON.stringify(fieldEntry)}`);
   }
 
-  let tempValue = undefined;
   let value = isCustomField ? record.cf?.[name] : record[name];
   const actions = ClientActionsTranslator.transform(fieldActions, instanceName, moduleName, {
     field,
@@ -43,8 +42,12 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, co
     return EmptyViewModel(name);
   }
 
-  if (fieldComponentMapping[name]) {
-    field.uiType = fieldComponentMapping[name];
+  if (field.uiType && !isValidFieldVariation(type, field.uiType)) {
+    __DEVELOPMENT__ && console.warn(`The uiType ${field.uiType} is not a valid variation for field type ${type}. Ignoring the uiType.`);
+  }
+
+  if (typeof fieldEntry === 'string') {
+    field.uiType = fieldEntry;
   }
 
   let nameFieldTypes = ['Text'];
@@ -58,22 +61,9 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, co
     return EmptyViewModel(name);
   }
 
-  if (field.type == "LookUp") {
-    // temp fix for when lookup field don't have value !object
-    tempValue = typeof value !== 'object' ? {
-      name: value,
-      id: value
-    } : value;
-    tempValue.url = getLookupUrlConstructions({
-      field,
-      value,
-      context
-    });
-  }
-
   const translatorArgs = {
     field,
-    value: tempValue ? tempValue : value,
+    value,
     appendToActionPayload: {
       recordId: record.id
     },
@@ -96,31 +86,49 @@ function ColumnTranslator(field, record, fieldComponentMapping, fieldActions, co
     ...fieldTranslator(translatorArgs)
   };
 
-  if (fieldEntry && typeof fieldEntry === 'object') {
-    viewModel.type = fieldEntry.UIComponentName;
-
-    if (fieldEntry.fieldToUIComponentTranslator) {
-      viewModel.value = fieldEntry.fieldToUIComponentTranslator({
-        field,
-        record,
-        context
-      });
-    }
-
-    if (fieldEntry.translator) {
-      const newViewModel = fieldEntry.translator({
+  if (componentMapping && componentMapping.translator) {
+    return { ...viewModel,
+      ...componentMapping.translator({
         viewModel,
         field,
-        context
-      });
-      newViewModel.type = fieldEntry.UIComponentName;
-      return newViewModel;
+        record,
+        context,
+        preferences
+      })
+    };
+  } else {
+    //will be deprecated soon
+    if (fieldEntry && typeof fieldEntry === 'object') {
+      viewModel.type = fieldEntry.UIComponentName;
+
+      if (fieldEntry.fieldToUIComponentTranslator) {
+        viewModel.value = fieldEntry.fieldToUIComponentTranslator({
+          field,
+          record,
+          context
+        });
+      }
+
+      if (fieldEntry.translator) {
+        const newViewModel = fieldEntry.translator({
+          viewModel: viewModel,
+          field,
+          record,
+          context,
+          preferences
+        });
+        return { ...newViewModel,
+          type: fieldEntry.UIComponentName ? fieldEntry.UIComponentName : field.uiType,
+          appendToActionPayload: {
+            recordId: record.id,
+            ...newViewModel.appendToActionPayload
+          }
+        };
+      }
     }
 
     return viewModel;
   }
-
-  return viewModel;
 }
 
 export default ColumnTranslator;

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

@@ -0,0 +1,25 @@
+import FieldTypes from "../../../../../cc/fields/field/Types";
+const variationsMap = {
+  'Boolean': [FieldTypes.CheckboxField, FieldTypes.SwitchField] // 'Date': ['DatePicker', 'DateTimePicker'],
+  // 'Text': ['SingleLineText', 'MultiLineText', 'RichText'],
+  // Add more field types and their variations as needed
+
+};
+export const isValidFieldVariation = (fieldType, uiType) => {
+  const validVariations = variationsMap[fieldType];
+  return validVariations ? validVariations.includes(uiType) : false;
+};
+/*
+
+Smart Table Field UI Variants:
+• Boolean - CheckBox, Switch, Text
+• Lookup - Link, Tag (Chip), LabeledAvatar
+• SingleLine - Text, Link (Name field)
+• MultiPicklist - TagsList, TagsDropdown
+• ColoredMultiPicklist - TagsList
+• ColoredPicklist - ColoredTag
+• URL - Link, Text
+• Email - Email
+• Date, DateTime, Picklist, Currency, Integer, Decimal, Phone, Percentage - Text
+
+*/

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

@@ -1,9 +1,10 @@
 import { Alignment } from "../../../../../cc/table-list/data-types/Header";
 import ClientActionsTranslator from "../../../../client-actions/translators/client-actions-translator";
-import { SortOrder } from "../../../../zlist/domain/entities/interfaces/Properties";
+import { SortModelOrder } from "../../../../zlist/domain/entities/interfaces/Properties";
 import { i18NProviderUtils } from '@zohodesk/i18n';
+import { SortOrder } from "../../../../../bc/zlist/Types";
 
-function HeaderTranslator(field, actions, context, modifiedWidths, sortBy, records, instanceName, moduleName) {
+function HeaderTranslator(field, actions, context, modifiedWidths, sortConfig, records, instanceName, moduleName) {
   const {
     id,
     name,
@@ -11,7 +12,7 @@ function HeaderTranslator(field, actions, context, modifiedWidths, sortBy, recor
     isSortable
   } = field;
   const newField = { ...field,
-    sort: translateSortBy(field.id, sortBy)
+    sort: translateSortBy(field.name, sortConfig)
   };
   const transformedActions = ClientActionsTranslator.transform(actions, instanceName, moduleName, { ...context,
     field: newField,
@@ -30,26 +31,33 @@ function HeaderTranslator(field, actions, context, modifiedWidths, sortBy, recor
 }
 
 export default HeaderTranslator;
+const defaultSortBy = {
+  name: '',
+  order: SortModelOrder.NONE,
+  // FIX: i18n key
+  tooltip: 'Click to Sort'
+};
 
-function translateSortBy(id, sortBy) {
-  const newSortBy = { ...sortBy,
-    tooltip: ''
-  };
+function translateSortBy(name, sortConfig) {
+  if (!sortConfig || !name || !sortConfig.fieldName || name !== sortConfig.fieldName) {
+    return defaultSortBy;
+  }
+
+  if (sortConfig.order === SortOrder.ASC) {
+    return {
+      name: sortConfig.fieldName,
+      order: SortModelOrder.ASC,
+      tooltip: i18NProviderUtils.getI18NValue('support.localization.tooltip.descending')
+    };
+  }
 
-  if (sortBy.id === id) {
-    if (sortBy.order === SortOrder.ASC) {
-      // newSortBy.tooltip = 'Click to Sort Descending';
-      newSortBy.tooltip = i18NProviderUtils.getI18NValue("support.localization.tooltip.descending");
-    } else if (newSortBy.order === SortOrder.DES) {
-      // newSortBy.tooltip = 'Click to Sort Ascending';
-      newSortBy.tooltip = i18NProviderUtils.getI18NValue("support.localization.tooltip.ascending");
-    } else if (newSortBy.order === SortOrder.NONE) {
-      newSortBy.tooltip = 'Click to Sort';
-    }
-  } else {
-    newSortBy.order = SortOrder.NONE;
-    newSortBy.tooltip = 'Click to Sort';
+  if (sortConfig.order === SortOrder.DES) {
+    return {
+      name: sortConfig.fieldName,
+      order: SortModelOrder.DES,
+      tooltip: i18NProviderUtils.getI18NValue('support.localization.tooltip.ascending')
+    };
   }
 
-  return newSortBy;
+  return defaultSortBy;
 }

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

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

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

@@ -14,14 +14,28 @@ export default function RowTranslator(_ref) {
     textOverflowConfig,
     moduleName,
     nameFieldsConfig,
-    recordReadStatusConfig
+    recordReadStatusConfig,
+    componentMapping
   } = _ref;
   const actions = ClientActionsTranslator.transform(rowActions, instanceName, moduleName, { ...context,
     record
   });
   return {
     id: record.id,
-    columns: fields.map(field => ColumnTranslator(field, record, fieldComponentMapping, fieldActions, context, preferences, instanceName, textOverflowConfig, moduleName, nameFieldsConfig, recordReadStatusConfig)),
+    columns: fields.map(field => ColumnTranslator({
+      field,
+      record,
+      fieldComponentMapping,
+      fieldActions,
+      context,
+      preferences,
+      instanceName,
+      moduleName,
+      textOverflowConfig,
+      nameFieldsConfig,
+      recordReadStatusConfig,
+      componentMapping: componentMapping.find(item => item.fieldName === field.name)
+    })),
     rowActionLocation: {
       type: rowActionsUiType,
       actions

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

@@ -1,6 +1,6 @@
 import RowTranslator from "./Row";
 export default class RowsTranslator {
-  constructor(records, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, textOverflowConfig, moduleName, nameFieldsConfig, recordReadStatusConfig) {
+  constructor(records, fields, rowActions, context, preferences, fieldComponentMapping, rowActionsUiType, fieldActions, instanceName, textOverflowConfig, moduleName, nameFieldsConfig, recordReadStatusConfig, componentMapping) {
     this.records = records;
     this.fields = fields;
     this.rowActions = rowActions;
@@ -14,6 +14,7 @@ export default class RowsTranslator {
     this.moduleName = moduleName;
     this.nameFieldsConfig = nameFieldsConfig;
     this.recordReadStatusConfig = recordReadStatusConfig;
+    this.componentMapping = componentMapping;
     this.pipe = this.pipe.bind(this);
   }
 
@@ -23,6 +24,7 @@ export default class RowsTranslator {
     }
 
     return this.records.map(record => RowTranslator({
+      componentMapping: this.componentMapping,
       record,
       fields: this.fields,
       fieldComponentMapping: this.fieldComponentMapping,

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

@@ -1,6 +1,5 @@
 // import FieldModel from '@platform/zfield/entities/interfaces/FieldModel';
 import FieldTypes from "../../../../../../cc/fields/field/Types";
-import BooleanFieldModel from "../../../../../../cc/fields/boolean/Model";
 
 const BooleanFieldTranslator = _ref => {
   let {
@@ -12,23 +11,99 @@ const BooleanFieldTranslator = _ref => {
   } = _ref;
   const {
     uiType,
-    name
+    name,
+    displayLabel
   } = field;
+  let newValue = value;
 
   if (value === 'true') {
-    value = true;
+    newValue = true;
   } else if (value === 'false') {
-    value = false;
+    newValue = false;
   }
 
-  return BooleanFieldModel({
-    uiType: uiType || FieldTypes.CheckboxField,
-    name,
-    appendToActionPayload,
-    isRead,
-    value,
-    textOverflowMode
-  });
+  switch (uiType) {
+    case FieldTypes.TextField:
+      return {
+        type: FieldTypes.TextField,
+        fieldName: name,
+        text: value,
+        isDotted: textOverflowMode === 'clip',
+        weight: isRead ? undefined : 'bold',
+        tooltip: value,
+        appendToActionPayload,
+        isRead,
+        textOverflowMode
+      };
+
+    case FieldTypes.HighlightedValueField:
+      return {
+        type: FieldTypes.HighlightedValueField,
+        fieldName: name,
+        text: value,
+        color: newValue ? 'green' : 'red',
+        tooltip: value,
+        cursor: 'default',
+        appendToActionPayload,
+        isRead,
+        textOverflowMode
+      };
+
+    case FieldTypes.RadioDropdownField:
+      {
+        const options = [{
+          id: 'true',
+          value: 'true',
+          secondaryValue: ''
+        }, {
+          id: 'false',
+          value: 'false',
+          secondaryValue: ''
+        }];
+        const highlightedValueColor = newValue ? 'green' : 'red';
+        return {
+          type: FieldTypes.RadioDropdownField,
+          fieldName: name,
+          fieldType: 'boolean',
+          options,
+          color: highlightedValueColor,
+          selectedId: value,
+          selectedValue: value,
+          dropdownHeading: displayLabel,
+          isDotted: textOverflowMode === 'clip',
+          weight: isRead ? undefined : 'bold',
+          hasSearch: false,
+          isDisabled: false,
+          isReadOnly: false,
+          appendToActionPayload,
+          isRead,
+          textOverflowMode
+        };
+      }
+
+    case FieldTypes.SwitchField:
+      return {
+        type: FieldTypes.SwitchField,
+        fieldName: name,
+        checked: newValue,
+        disabled: false,
+        tooltip: '',
+        appendToActionPayload,
+        isRead,
+        textOverflowMode
+      };
+
+    case FieldTypes.CheckboxField:
+    default:
+      return {
+        type: FieldTypes.CheckboxField,
+        fieldName: name,
+        checked: newValue,
+        appendToActionPayload,
+        isRead,
+        textOverflowMode
+      };
+  }
 };
 
 export default BooleanFieldTranslator;

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

@@ -1,7 +1,49 @@
 import FieldTypes from "../../../../../../cc/fields/field/Types";
-import CurrencyFieldModel from "../../../../../../cc/fields/currency/Model";
 
-const CurrencyFieldTranslator = _ref => {
+function isValidNumber() {
+  let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const rejexPattern = new RegExp('^(\\d+\\.?\\d*|\\.\\d+)$');
+  const isValidInt = rejexPattern.test(value);
+  return isValidInt;
+}
+
+function formatCurrency(_ref) {
+  let {
+    value,
+    locale = 'IN',
+    symbol = 'Rs.'
+  } = _ref;
+  const isValidInt = isValidNumber(value);
+
+  if (isValidInt && symbol) {
+    const currencyArr = new Intl.NumberFormat(`en-${locale}`).formatToParts(value);
+    let currencyVal = '';
+    currencyArr.map(val => {
+      if (val.type == 'group') {
+        currencyVal += ',';
+      } else if (val.type == 'integer') {
+        currencyVal += val.value;
+      }
+    });
+
+    if (value.indexOf('.') != -1) {
+      const fractionVal = value.split(".")[1];
+
+      for (let i = fractionVal.length - 1; i >= 0; i--) {
+        if (fractionVal[i] != 0) {
+          currencyVal += `.${fractionVal.slice(0, i + 1)}`;
+          break;
+        }
+      }
+    }
+
+    return `${symbol}${currencyVal}`;
+  }
+
+  return value;
+}
+
+const CurrencyFieldTranslator = _ref2 => {
   let {
     field,
     value,
@@ -10,7 +52,7 @@ const CurrencyFieldTranslator = _ref => {
     preferences,
     textOverflowMode,
     isRead
-  } = _ref;
+  } = _ref2;
   const {
     uiType,
     name
@@ -19,16 +61,29 @@ const CurrencyFieldTranslator = _ref => {
   let contextCurrencyLocale = context?.currencyLocale;
   let prefCurrencySymbol = preferences?.fields?.[field.apiName]?.currencySymbol;
   let contextCurrencySymbol = context?.currencySymbol;
-  return CurrencyFieldModel({
-    uiType: uiType || FieldTypes.CurrencyField,
-    appendToActionPayload,
-    name,
-    currencyLocale: prefCurrencyLocale || contextCurrencyLocale,
-    currencySymbol: prefCurrencySymbol || contextCurrencySymbol,
-    isRead,
+  let locale = prefCurrencyLocale || contextCurrencyLocale;
+  let symbol = prefCurrencySymbol || contextCurrencySymbol;
+  let formatedValue = formatCurrency({
     value,
-    textOverflowMode
+    locale,
+    symbol
   });
+
+  switch (uiType) {
+    case FieldTypes.TextField:
+    default:
+      return {
+        type: FieldTypes.TextField,
+        fieldName: name,
+        text: formatedValue,
+        isDotted: textOverflowMode === 'clip',
+        weight: isRead ? undefined : 'bold',
+        tooltip: formatedValue,
+        appendToActionPayload,
+        isRead,
+        textOverflowMode
+      };
+  }
 };
 
 export default CurrencyFieldTranslator;

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

@@ -1,6 +1,6 @@
 // import FieldModel from '@platform/zfield/entities/interfaces/FieldModel';
 import FieldTypes from "../../../../../../cc/fields/field/Types";
-import DateFieldModel from "../../../../../../cc/fields/date/Model";
+import { DateAndTimeFormat } from "../../utils/DateAndTimeFormat";
 
 const DateFieldTranslator = _ref => {
   let {
@@ -8,20 +8,45 @@ const DateFieldTranslator = _ref => {
     value,
     appendToActionPayload,
     textOverflowMode,
-    isRead
+    isRead,
+    context
   } = _ref;
   const {
     uiType,
     name
   } = field;
-  return DateFieldModel({
-    uiType: uiType || FieldTypes.DateField,
-    appendToActionPayload,
-    name,
-    isRead,
+  const {
+    dateFormat,
+    timeFormat,
+    delimiter,
+    isShortenDateTimeInfo
+  } = context.dateTimeFormat; // const appContext = platformSDK.app.getContext();
+  // const { dateFormat, timeFormat, delimiter } = appContext.dateTimeFormat;
+
+  const newDateValue = DateAndTimeFormat({
+    dateFormatType: dateFormat,
+    timeFormatType: timeFormat,
+    delimiter: delimiter,
     value,
-    textOverflowMode
+    isDateTimeField: false,
+    isShortenDateTimeInfo
   });
+
+  switch (uiType) {
+    case FieldTypes.TextField:
+    default:
+      return {
+        type: FieldTypes.TextField,
+        fieldName: name,
+        text: newDateValue,
+        isDotted: textOverflowMode === 'clip',
+        weight: isRead ? undefined : 'bold',
+        tooltip: newDateValue,
+        appendToActionPayload,
+        isRead,
+        textOverflowMode
+      };
+  }
 };
 
 export default DateFieldTranslator;

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

@@ -1,6 +1,6 @@
 // import FieldModel from '@platform/zfield/entities/interfaces/FieldModel';
 import FieldTypes from "../../../../../../cc/fields/field/Types";
-import DateTimeFieldModel from "../../../../../../cc/fields/datetime/Model";
+import { DateAndTimeFormat } from "../../utils/DateAndTimeFormat";
 
 const DateTimeFieldTranslator = _ref => {
   let {
@@ -8,20 +8,45 @@ const DateTimeFieldTranslator = _ref => {
     value,
     appendToActionPayload,
     textOverflowMode,
-    isRead
+    isRead,
+    context
   } = _ref;
   const {
     uiType,
     name
   } = field;
-  return DateTimeFieldModel({
-    uiType: uiType || FieldTypes.DateTimeField,
-    appendToActionPayload,
-    name,
-    isRead,
+  const {
+    dateFormat,
+    timeFormat,
+    delimiter,
+    isShortenDateTimeInfo
+  } = context.dateTimeFormat; // const appContext = platformSDK.app.getContext();
+  // const { dateFormat, timeFormat, delimiter } = appContext.dateTimeFormat;
+
+  const newDateValue = DateAndTimeFormat({
+    dateFormatType: dateFormat,
+    timeFormatType: timeFormat,
+    delimiter: delimiter,
     value,
-    textOverflowMode
+    isDateTimeField: true,
+    isShortenDateTimeInfo
   });
+
+  switch (uiType) {
+    case FieldTypes.TextField:
+    default:
+      return {
+        type: FieldTypes.TextField,
+        fieldName: name,
+        text: newDateValue,
+        isDotted: textOverflowMode === 'clip',
+        weight: isRead ? undefined : 'bold',
+        tooltip: newDateValue,
+        appendToActionPayload,
+        isRead,
+        textOverflowMode
+      };
+  }
 };
 
 export default DateTimeFieldTranslator;