@zohodesk/library-platform 1.1.1 → 1.1.2

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

@@ -0,0 +1,51 @@
+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
+    },
+    customProps: {
+      dropBoxProps: {
+        customClass: {
+          customDropBoxWrap: style.sortDropbox
+        }
+      }
+    }
+  });
+}
+
+export default TableColumnSortView;

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

@@ -0,0 +1,15 @@
+.parentContainer {
+  visibility: hidden;
+  opacity: 0;
+}
+
+:global(.GLOBAL_ZDDC_tableHead:hover) .parentContainer,
+:global(.GLOBAL_ZDDC_tableHead):has(.sortDropbox) .parentContainer,
+.active {
+  visibility: visible;
+  opacity: 1;
+}
+
+.sortDropbox {
+  /** **/
+}

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/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextArea.js

@@ -0,0 +1,11 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { TextAreaProperties, TextAreaEvents } from "../../../../../../cc";
+import TextAreaView from "./TextAreaView";
+let TextArea = createCustomComponent({
+  name: "TextArea",
+  View: TextAreaView,
+  properties: TextAreaProperties,
+  events: TextAreaEvents,
+  eventHandlers: {}
+});
+export default TextArea;

package/es/library/dot/legacy-to-new-arch/text-area/frameworks/ui/TextAreaView.js

@@ -0,0 +1,52 @@
+import React from "react";
+import Textarea from '@zohodesk/components/es/Textarea/Textarea';
+import TextAreaConstants from "../../../../../../cc/textarea/Constants";
+
+function TextAreaView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  let {
+    dispatch
+  } = helpers;
+  let {
+    id,
+    maxLength,
+    placeholder,
+    value,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(Textarea, {
+    getRef: ref,
+    htmlId: id,
+    maxLength: maxLength,
+    placeHolder: placeholder,
+    text: value,
+    isReadOnly: readonly,
+    isDisabled: disabled,
+    animated: true,
+    size: "xsmall",
+    customAttributes: {
+      required
+    },
+    onFocus: () => dispatch({
+      type: TextAreaConstants.TEXTAREA_FOCUSED
+    }),
+    onBlur: () => dispatch({
+      type: TextAreaConstants.TEXTAREA_BLURED
+    }),
+    onChange: value => {
+      dispatch({
+        type: TextAreaConstants.TEXTAREA_CHANGED,
+        payload: {
+          value
+        }
+      });
+    }
+  });
+}
+
+export default TextAreaView;

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBox.js

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import TextBoxProperties from "../../../../../../cc/textbox/Properties";
+import TextBoxEvents from "../../../../../../cc/textbox/Events";
+import TextBoxView from "./TextBoxView";
+let TextBox = createCustomComponent({
+  name: "TextBox",
+  View: TextBoxView,
+  properties: TextBoxProperties,
+  events: TextBoxEvents,
+  eventHandlers: {}
+});
+export default TextBox;

package/es/library/dot/legacy-to-new-arch/textbox/frameworks/ui/TextBoxView.js

@@ -0,0 +1,55 @@
+import React from "react";
+import TextBox from "@zohodesk/components/es/TextBoxIcon/TextBoxIcon";
+import TextBoxConstants from "../../../../../../cc/textbox/Constants";
+
+function TextBoxView(_ref, ref) {
+  let {
+    state,
+    helpers
+  } = _ref;
+  const {
+    dispatch
+  } = helpers;
+  const {
+    id,
+    name,
+    type,
+    maxLength,
+    placeholder,
+    value,
+    required,
+    disabled,
+    readonly
+  } = state.properties;
+  return /*#__PURE__*/React.createElement(TextBox, {
+    inputRef: ref,
+    htmlId: id,
+    name: name,
+    type: type,
+    maxLength: maxLength,
+    placeHolder: placeholder,
+    value: value,
+    isReadOnly: readonly,
+    isDisabled: disabled,
+    size: "xmedium",
+    onFocus: () => dispatch({
+      type: TextBoxConstants.TEXTBOX_FOCUSED
+    }),
+    onBlur: () => dispatch({
+      type: TextBoxConstants.TEXTBOX_BLURED
+    }),
+    customProps: {
+      TextBoxProps: {
+        required
+      }
+    },
+    onChange: value => dispatch({
+      type: TextBoxConstants.TEXTBOX_CHANGED,
+      payload: {
+        value
+      }
+    })
+  });
+}
+
+export default TextBoxView;

package/es/library/index.js

@@ -1,3 +1,8 @@
 export { default as ComponentRegistry } from "./custom-component/frameworks/ui/ComponentRegistry";
 export { default as createCustomComponent } from "./custom-component/frameworks/ui/CreateCustomComponent";
-export { default as TableList } from "./dot/components/table-list/frameworks/ui/TableList";
+export { default as TableList } from "./dot/components/table-list/frameworks/ui/TableList";
+export { default as Form } from "./dot/components/form/frameworks/ui/Form";
+export { default as Section } from "./dot/components/section/frameworks/ui/Section";
+import * as _FormLibraryFields from "./dot/components/form-fields";
+export { _FormLibraryFields as FormLibraryFields };
+export { ConvertSlotToComponent } from "./slot";

package/es/library/slot/frameworks/ui/ConvertSlotToComponent.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import ComponentRegistry from "../../../custom-component/frameworks/ui/ComponentRegistry";
+export default function ConvertSlotToComponent(slot) {
+  if (Array.isArray(slot) === false) {
+    return null;
+  }
+
+  return slot.map((component, index) => {
+    if (component == null) {
+      return null;
+    }
+
+    const {
+      type,
+      properties
+    } = component;
+    const Child = ComponentRegistry.get(type);
+    return /*#__PURE__*/React.createElement(Child, {
+      key: index,
+      ...properties
+    });
+  });
+}

package/es/library/slot/index.js

@@ -0,0 +1 @@
+export { default as ConvertSlotToComponent } from "./frameworks/ui/ConvertSlotToComponent";

package/es/library/translator-common/adapters/presenter/TransFormState.js

@@ -0,0 +1,6 @@
+/* eslint-disable @zohodesk/architecturerules/return-void */
+export default function TransFormState(state) {
+  return { ...state,
+    viewModel: state.properties
+  };
+}

package/es/library/translator-common/index.js

@@ -0,0 +1 @@
+export { default as TransFormState } from "./adapters/presenter/TransFormState";

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/createRecord.js

@@ -0,0 +1,27 @@
+const createRecord = {
+  name: 'createRecord',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/{{moduleName}}',
+  parameters: `{}`,
+  type: 'POST',
+  transformer: data => data,
+  requestBody: '{{record}}',
+  properties: {
+    moduleName: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    record: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'object'
+        }
+      }
+    }
+  }
+};
+export default createRecord;

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

@@ -0,0 +1,18 @@
+const fetchDependencyMappings = {
+  name: 'fetchDependencyMappings',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/dependencyMappings',
+  parameters: `{"layoutId":"{{layoutId}}"}`,
+  type: 'GET',
+  transformer: data => data,
+  properties: {
+    layoutId: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  }
+};
+export default fetchDependencyMappings;

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

@@ -0,0 +1,29 @@
+// Assuming GetTemplate interface is defined
+const fetchLayoutRules = {
+  name: 'fetchLayoutRules',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/layouts/{{layoutId}}/layoutRules',
+  parameters: `{"activeRulesOnly":{{activeRulesOnly}}}`,
+  type: 'GET',
+  transformer: data => data,
+  properties: {
+    layoutId: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    activeRulesOnly: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'boolean'
+        }
+      },
+      defaultValue: true // Assuming true as a default if parameter is optional
+
+    }
+  }
+};
+export default fetchLayoutRules;

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

@@ -0,0 +1,19 @@
+// Assuming similar structure to PatchTemplate
+const fetchMyForm = {
+  name: 'myFormFetch',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/myForm',
+  parameters: `{"layoutId":"{{layoutId}}"}`,
+  type: 'GET',
+  transformer: data => data,
+  properties: {
+    layoutId: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  }
+};
+export default fetchMyForm;

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

@@ -0,0 +1,43 @@
+// Assumed you have a GetTemplate interface similar to PatchTemplate
+const fetchMyLayouts = {
+  name: 'myLayoutsFetch',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/myLayouts',
+  parameters: `{"module":"{{module}}","departmentId":"{{departmentId}}","from":"{{from}}","limit":"{{limit}}"}`,
+  type: 'GET',
+  transformer: data => data,
+  properties: {
+    module: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    departmentId: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    from: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    limit: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    }
+  }
+};
+export default fetchMyLayouts;

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

@@ -0,0 +1,29 @@
+// Assuming GetTemplate interface is similar to PatchTemplate
+const fetchValidationRules = {
+  name: 'fetchValidationRules',
+  api: '/{{servicePrefix}}/{{orgName}}/api/v1/layouts/{{layoutId}}/validationRules',
+  parameters: `{"activeRulesOnly":{{activeRulesOnly}}}`,
+  type: 'GET',
+  transformer: data => data,
+  properties: {
+    layoutId: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'string'
+        }
+      }
+    },
+    activeRulesOnly: {
+      required: true,
+      typeMetadata: {
+        schema: {
+          type: 'boolean'
+        }
+      },
+      defaultValue: true // Assuming default behavior if not provided
+
+    }
+  }
+};
+export default fetchValidationRules;

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

@@ -1,11 +1,74 @@
+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,
+        module
+      } = params;
+      const availableFieldsUrl = `/${servicePrefix}/${orgName}/api/v1/views/availableFields?departmentId=${departmentId}&module=${module}`;
+      const res = await fetch(availableFieldsUrl, {
+        method: 'GET',
+        headers
+      });
+      const availableFields = await getValidJsonResArray(res, 'fields');
+      const organizationFieldsUrl = `/${servicePrefix}/${orgName}/api/v1/organizationFields?departmentId=${departmentId}&module=${module}`;
+      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,
+            returnType: organizationField.returnType,
+            subType: organizationField.subType
+          };
+        })
+      };
+    } catch (error) {
+      throw {
+        error,
+        message: 'Error fetching available fields'
+      };
+    }
+  },
   transformer: res => res.fields,
   properties: {
     moduleName: {

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

@@ -4,7 +4,7 @@ let getClientActions = {
   parameters: `{
         "from":{{from}},
         "limit":{{limit}},
-        "library": "{{library}}",
+        "component": "{{component}}",
         "module": "{{moduleName}}"
     }`,
   type: 'GET',

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

@@ -7,15 +7,27 @@ import getSelectedFields from "./http-template/getSelectedFields";
 import getClientActions from "./http-template/getClientActions";
 import { RecordApiActionName } from "../../bc/zrecord/Constants";
 import deleteRecord from "./http-template/deleteRecord";
+import fetchMyLayouts from "./http-template/fetchMyFormLayout";
+import fetchMyForm from "./http-template/fetchMyForm";
+import fetchLayoutRules from "./http-template/fetchLayoutRules";
+import fetchDependencyMappings from "./http-template/fetchDependencyMappings";
+import fetchValidationRules from "./http-template/fetchValidationRules";
+import createRecord from "./http-template/createRecord";
 let dataSource = {
   httpTemplates: {
     [RecordApiActionName.GET_RECORDS]: getRecords,
     [RecordApiActionName.UPDATE_RECORD]: updateRecord,
     [RecordApiActionName.DELETE_RECORDS]: deleteRecords,
     [RecordApiActionName.DELETE_RECORD]: deleteRecord,
+    [RecordApiActionName.CREATE_RECORD]: createRecord,
     [RecordApiActionName.GET_CLIENTACTIONS]: getClientActions,
     getAvailableFields,
-    getSelectedFields
+    getSelectedFields,
+    fetchMyLayouts,
+    fetchMyForm,
+    fetchLayoutRules,
+    fetchDependencyMappings,
+    fetchValidationRules
   }
 };
 export default dataSource; // let ticketsRecordSerice = createRecord(tickets, () => {});

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