From e4d5d533bbafbe192ca3d494586236213a75e0e3 Mon Sep 17 00:00:00 2001 From: Aishik Biswas Date: Tue, 27 Jun 2023 20:19:02 +0530 Subject: [PATCH] Added extra check and toggle for custom statuses in conversation properties (#869) * feat: new Toggle for converstaion properties * fix: extra check * style: bug fixes * fix: review comments * Revert "fix: review comments" This reverts commit 0f782c3c38716305ccc8b153cd84a25f5a080cb9. * fix: form mapper changes * fix: spread * fix: semantics * fix: exztra check removal --- .../form-builder/assets/form-mapper.json | 8 ++- .../form-builder/components/field-editor.scss | 22 ++++++ .../form-builder/components/field-editor.tsx | 69 +++++++++++++++++++ .../form-builder/form-builder.e2e.ts | 8 +++ .../form-builder/utils/form-builder-utils.ts | 11 +++ packages/crayons-i18n/i18n/en-US.json | 1 + 6 files changed, 117 insertions(+), 2 deletions(-) diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/assets/form-mapper.json b/packages/crayons-extended/custom-objects/src/components/form-builder/assets/form-mapper.json index 726d1a79c..9f911f369 100644 --- a/packages/crayons-extended/custom-objects/src/components/form-builder/assets/form-mapper.json +++ b/packages/crayons-extended/custom-objects/src/components/form-builder/assets/form-mapper.json @@ -241,7 +241,9 @@ "freePlanFieldAddDisabledButton": "", "noCreatePermissionFieldAddDisabledHeader": "", "noCreatePermissionFieldAddDisabledMessage": "", - "boolShowRelationshipTypeSelect": true + "boolShowRelationshipTypeSelect": true, + "boolShowCustomToggle": false, + "showCustomToggleField": "" }, "labels": { "headerProduct": "", @@ -442,7 +444,9 @@ "freePlanFieldAddDisabledButton": "freePlanFieldAddDisabledButton", "noCreatePermissionFieldAddDisabledHeader": "noCreatePermissionFieldAddDisabledHeader", "noCreatePermissionFieldAddDisabledMessage": "noCreatePermissionFieldAddDisabledMessage", - "boolShowRelationshipTypeSelect": false + "boolShowRelationshipTypeSelect": false, + "boolShowCustomToggle": true, + "showCustomToggleField": "status" }, "labels": { "headerProduct": "headerProductConvProps", diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss b/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss index 448f0a9fa..af24e0899 100644 --- a/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss +++ b/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss @@ -262,6 +262,28 @@ height: auto; box-sizing: border-box; } + + .fw-field-editor-status-toggle { + border: 1px solid $color-smoke-100; + + .fw-field-editor-status-toggle-item { + display: grid; + font-size: $font-size-14; + font-weight: $font-weight-600; + grid-template-columns: 1fr 1fr; + padding-inline-start: $font-size-20; + padding-block-end: 8px; + padding-inline-end: 0; + padding-block-start: 8px; + + &.header { + background: $color-smoke-50; + border: 1px solid $color-smoke-100; + border-width: 0 1px 1px 1px; + font-size: $font-size-12; + } + } + } } } diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx b/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx index 78eda0a8d..9b1fbaf59 100644 --- a/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx +++ b/packages/crayons-extended/custom-objects/src/components/form-builder/components/field-editor.tsx @@ -22,6 +22,7 @@ import { getMaximumLimitsConfig, deriveInternalNameFromLabel, hasPermission, + checkIfCustomToggleField, } from '../utils/form-builder-utils'; import formMapper from '../assets/form-mapper.json'; import presetSchema from '../assets/form-builder-preset.json'; @@ -571,6 +572,10 @@ export class FieldEditor { } } + if (checkIfCustomToggleField(this.productName, this.dataProvider.name)) { + objValues['choices'] = [...this.dataProvider.choices]; + } + if (boolValidForm) { if (!this.isNewField) { objValues[this.KEY_INTERNAL_NAME] = this.dataProvider.name; @@ -680,6 +685,14 @@ export class FieldEditor { } }; + private statusToggleHandler = (event: CustomEvent) => { + this.isValuesChanged = true; + const objPayload = this.dataProvider; + const id = (event.target as HTMLInputElement).id; + const choice = objPayload.choices.find((item) => item.id === id); + choice.choice_options.resolution_timer = event.detail.checked; + }; + private lookupChangeHandler = (event: CustomEvent) => { event.stopImmediatePropagation(); event.stopPropagation(); @@ -952,6 +965,51 @@ export class FieldEditor { ); } + private renderStatusToggle(objFormValue) { + const strBaseClassName = 'fw-field-editor'; + const choices = objFormValue.choices; + return ( +
+
+ {i18nText('fieldLabel')} + {i18nText('ertText')} +
+ {choices.map((dataItem) => { + let toggle = null; + if ( + dataItem?.choice_options && + Object.keys(dataItem?.choice_options).length + ) { + toggle = ( + + + + ); + } + return ( +
+ +
+ +
+ + {toggle} +
+ ); + })} +
+ ); + } + private renderLookup(boolDisableLookup) { const objFormValue = this.dataProvider; @@ -1059,6 +1117,12 @@ export class FieldEditor { const boolSupportInternalName = objProductConfig.editInternalName; const strBaseClassName = 'fw-field-editor'; const objFieldBuilder = this.fieldBuilderOptions; + + /** Adding extra check for status type */ + const isStatusType = checkIfCustomToggleField( + this.productName, + objFormValue.name + ); const strInputLabel = hasCustomProperty(objFieldBuilder, 'label') ? objFieldBuilder.label : ''; @@ -1096,6 +1160,10 @@ export class FieldEditor { } } + const elementStatusToggle = isStatusType + ? this.renderStatusToggle(objFormValue) + : null; + const elementDropdown = isDropdownType && !boolIgnoreDropdownChoices ? this.renderDropdown(boolDisableDropdowns) @@ -1167,6 +1235,7 @@ export class FieldEditor { isDefaultNonCustomField, boolEditAllowed )} + {elementStatusToggle} {isDropdownType && (
{elementDropdown} diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.e2e.ts b/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.e2e.ts index ab1bdfdf5..01cc8c6b7 100644 --- a/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.e2e.ts +++ b/packages/crayons-extended/custom-objects/src/components/form-builder/form-builder.e2e.ts @@ -357,6 +357,7 @@ describe('fw-form-builder', () => { account_id: '0', internal_name: 'open', value: 'Open', + choice_options: {}, field_id: 'e189019d-ac50-4852-a17f-97acf2b05582', position: 1, }, @@ -365,6 +366,9 @@ describe('fw-form-builder', () => { account_id: '0', internal_name: 'waiting_on_customer', value: 'Waiting on customer', + choice_options: { + resolution_timer: true, + }, field_id: 'e189019d-ac50-4852-a17f-97acf2b05582', position: 2, }, @@ -373,6 +377,9 @@ describe('fw-form-builder', () => { account_id: '0', internal_name: 'waiting_on_internal_teams', value: 'Waiting on internal teams', + choice_options: { + resolution_timer: true, + }, field_id: 'e189019d-ac50-4852-a17f-97acf2b05582', position: 3, }, @@ -381,6 +388,7 @@ describe('fw-form-builder', () => { account_id: '0', internal_name: 'resolved', value: 'Resolved', + choice_options: {}, field_id: 'e189019d-ac50-4852-a17f-97acf2b05582', position: 4, }, diff --git a/packages/crayons-extended/custom-objects/src/components/form-builder/utils/form-builder-utils.ts b/packages/crayons-extended/custom-objects/src/components/form-builder/utils/form-builder-utils.ts index ebfc1155d..69ea41ebc 100644 --- a/packages/crayons-extended/custom-objects/src/components/form-builder/utils/form-builder-utils.ts +++ b/packages/crayons-extended/custom-objects/src/components/form-builder/utils/form-builder-utils.ts @@ -264,3 +264,14 @@ export function createUUID() { ); return uuid; } + +export function checkIfCustomToggleField( + productName = 'CUSTOM_OBJECTS', + fieldName +) { + const dbConfig = formMapper[productName]; + return ( + dbConfig?.config?.boolShowCustomToggle && + fieldName === dbConfig?.config?.showCustomToggleField + ); +} diff --git a/packages/crayons-i18n/i18n/en-US.json b/packages/crayons-i18n/i18n/en-US.json index 2054174ea..75527b298 100644 --- a/packages/crayons-i18n/i18n/en-US.json +++ b/packages/crayons-i18n/i18n/en-US.json @@ -159,6 +159,7 @@ "freePlanFieldAddDisabledButton": "Explore plans", "noCreatePermissionFieldAddDisabledHeader": "You do not have permission to create new properties", "noCreatePermissionFieldAddDisabledMessage": "Please reach out to your admin for more details.", + "ertText": "Effective resolution timer", "errors": { "emptyFieldName": "Field label is required.", "emptyRelationshipType": "Relationship type is required.",