601 lines
42 KiB
HTML
601 lines
42 KiB
HTML
<template>
|
||
|
||
<!-- Custom in-component toasts (solid brand background). -->
|
||
<template if:true={toasts.length}>
|
||
<div class="sw-toast-container">
|
||
<template for:each={toasts} for:item="t">
|
||
<div key={t.id} class={t.cssClass}>
|
||
<span class="sw-toast-icon">{t.iconLabel}</span>
|
||
<div class="sw-toast-body">
|
||
<div class="sw-toast-title">{t.title}</div>
|
||
<div class="sw-toast-message">{t.message}</div>
|
||
</div>
|
||
<button class="sw-toast-close" data-id={t.id} onclick={handleToastClose} title="Dismiss">×</button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="modalbackdrop"></div>
|
||
<div class="modalbox">
|
||
<!-- Content of the modal box -->
|
||
</div>
|
||
<div class="slds-box slds-box_xx-small slds-m-bottom_large slds-theme_shade">
|
||
<div class="sme-field-mapping fm-accordion-header">
|
||
<!-- Object icon. LWC cannot bind raw SVG markup from JS, so the
|
||
correct inline <svg> is picked by objectApiName-based getters
|
||
in fieldMappingChild.js. All use stroke="currentColor" so they
|
||
inherit the green set on .iconColor. -->
|
||
<span class="iconColor">
|
||
<!-- Product -->
|
||
<template lwc:if={isProduct}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
||
<path d="M3.3 7L12 12l8.7-5M12 22V12"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Variant -->
|
||
<template lwc:elseif={isVariant}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="9" y="9" width="13" height="13" rx="2"></rect>
|
||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Account -->
|
||
<template lwc:elseif={isAccount}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="12" cy="7" r="4"></circle>
|
||
</svg>
|
||
</template>
|
||
<!-- Contact : same refined 3-person icon used on the Record Type page -->
|
||
<template lwc:elseif={isContact}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="5" cy="7.5" r="2.3"></circle>
|
||
<path d="M2 19c0-2.7 1.7-4.5 4-4.5 1.2 0 2.2.4 3 1.2"></path>
|
||
<circle cx="12" cy="5.5" r="3.2"></circle>
|
||
<path d="M8 20c0-4 1.7-6 4-6s4 2 4 6"></path>
|
||
<circle cx="19" cy="7.5" r="2.3"></circle>
|
||
<path d="M22 19c0-2.7-1.7-4.5-4-4.5-1.2 0-2.2.4-3 1.2"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Draft Order -->
|
||
<template lwc:elseif={isDraftOrder}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||
<path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Draft Order Product -->
|
||
<template lwc:elseif={isDraftOrderItem}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M9 2h6a1 1 0 0 1 1 1v2H8V3a1 1 0 0 1 1-1z"></path>
|
||
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
|
||
<path d="M9 12h6M9 16h6"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Order -->
|
||
<template lwc:elseif={isOrder}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="9" cy="21" r="1"></circle>
|
||
<circle cx="20" cy="21" r="1"></circle>
|
||
<path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Order Product -->
|
||
<template lwc:elseif={isOrderItem}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
|
||
<line x1="7" y1="7" x2="7.01" y2="7"></line>
|
||
</svg>
|
||
</template>
|
||
<!-- Opportunity : same crown icon used on the Record Type page -->
|
||
<template lwc:elseif={isOpportunity}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 7l4 4 4-7 4 7 4-4-2 11H6L4 7Z"></path>
|
||
<path d="M6 18h12"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Opportunity Product -->
|
||
<template lwc:elseif={isOppLineItem}>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 2l9 5-9 5-9-5 9-5z"></path>
|
||
<path d="M3 12l9 5 9-5M3 17l9 5 9-5"></path>
|
||
</svg>
|
||
</template>
|
||
<!-- Fallback: any object not matched above -->
|
||
<template lwc:else>
|
||
<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
||
<path d="M8 12h8"></path>
|
||
</svg>
|
||
</template>
|
||
</span>
|
||
<span class="text-style fm-accordion-title">{objectName} {label.Field_Mapping}</span>
|
||
<span class="fm-field-count">{fieldCountLabel}</span>
|
||
<button class={defaultToggleClass} onclick={handleDefaultToggleClick}>
|
||
<span class="obj-toggle-knob"></span>
|
||
</button>
|
||
<lightning-icon class="field-mapping-dropArrow fm-chevron" icon-name="utility:chevronup" size="x-small" alternative-text="collapse" lwc:if={openTable}
|
||
onclick={openCloseTable}></lightning-icon>
|
||
<lightning-icon class="field-mapping-dropArrow fm-chevron" icon-name="utility:chevrondown" size="x-small" alternative-text="expand" lwc:else
|
||
onclick={openCloseTable}></lightning-icon>
|
||
</div>
|
||
<lightning-layout multiple-rows="true" style="margin: 0; padding: 0;">
|
||
<lightning-layout-item aria-multiline="false" size="12" style="display:none;"></lightning-layout-item>
|
||
|
||
<!-- ########################################################################################################################################## -->
|
||
|
||
<!-- FOR TESTING PURPOSE
|
||
<lightning-layout-item padding="around-small " size="12" lwc:if={useDefault} >
|
||
<lightning-textarea label="SHOPIFY FIELD" value={shopifyFields}></lightning-textarea>
|
||
<lightning-textarea label="SALESFORCE FIELD" value={salesforceFields}></lightning-textarea>
|
||
<lightning-textarea label="DEFAULT MAPPING" value={defaultMapping}></lightning-textarea>
|
||
<lightning-textarea label="REQUIRED MAPPING" value={requiredMapping}></lightning-textarea>
|
||
</lightning-layout-item> -->
|
||
|
||
<template lwc:if={openTable}>
|
||
<!-- DEFAULT MAPPING -->
|
||
<lightning-layout-item padding="around-small " size="12" lwc:if={useDefault}>
|
||
<div lwc:if={hasDefault} class="fm-default-body">
|
||
|
||
<lightning-layout multiple-rows="true" key={acc.Id} class="field-text-color slds-theme_default" style="border-radius: 0.625rem;">
|
||
<!-- This header belongs to the "toggle ON" (Default Mapping)
|
||
view -- left as original left-aligned styling per request;
|
||
only the "toggle OFF" Required/Optional Fields headers
|
||
below are centered. -->
|
||
<lightning-layout-item padding="around-small" size="6">
|
||
<span class="fm-col-salesforce">{label.Salesforce}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<span class="fm-col-default">{label.DEFAULT}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<span class="fm-col-default">OVERRIDE</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<span class="fm-col-shopify">{label.Shopify}</span>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
|
||
<template for:each={defaultMappingList} for:item="obj" for:index="index">
|
||
<lightning-layout multiple-rows="true" key={obj.Id}>
|
||
<lightning-layout-item padding="around-small" size="6">
|
||
<lightning-layout multiple-rows="true">
|
||
<lightning-layout-item padding="around-none" size="4" class="custom-tooltip">
|
||
<div class="myElement">
|
||
{obj.defaultSalesforceFieldLabel}
|
||
</div>
|
||
<div>
|
||
<span
|
||
class="myElement tooltip-defaultLabel">{obj.salesforceFieldLabel}</span>
|
||
</div>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<lightning-input checked={obj.defaultValue} type="checkbox"
|
||
class="fm-default-checkbox"
|
||
disabled={obj.defaultCheckboxDisabled}></lightning-input>
|
||
</lightning-layout-item>
|
||
<!-- OVERRIDE checkbox — inverse of DEFAULT -->
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<template lwc:if={obj.defaultValue}>
|
||
<lightning-input type="checkbox" class="fm-default-checkbox fm-override-checkbox" disabled></lightning-input>
|
||
</template>
|
||
<template lwc:else>
|
||
<lightning-input checked type="checkbox" class="fm-default-checkbox fm-override-checkbox" disabled></lightning-input>
|
||
</template>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<template lwc:if={obj.defaultValue}>
|
||
<div class="container fm-shopify-value-box">{obj.shopifyFieldName}</div>
|
||
</template>
|
||
<template lwc:else>
|
||
<div class="container">{obj.shopifyFieldName}</div>
|
||
</template>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
</template>
|
||
|
||
</div>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item padding="around-small" size="12" lwc:else>
|
||
|
||
<!--Required fields -->
|
||
|
||
<!-- ############################################################################################################################# -->
|
||
<div lwc:if={hasRequired}>
|
||
|
||
<h2 class="header-Background fm-heading-required"><b>*</b>{label.REQUIRED_FIELDS}</h2>
|
||
<div style="width: 100%;">
|
||
<div class="sme-field-mapping-parent">
|
||
|
||
<lightning-layout-item padding="around-small" size="12" >
|
||
<lightning-layout multiple-rows="true" key={acc.Id}
|
||
class="field-text-color slds-theme_default" style="border-radius: 0.625rem;">
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<span class="fm-col-salesforce fm-col-center">{label.Salesforce}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<span class="fm-col-default fm-col-center">{label.DATA_TYPE}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<span class="fm-col-default fm-col-center">{label.DEFAULT}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<span class="fm-col-default fm-col-center">OVERRIDE</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<span class="fm-col-shopify fm-col-center">{label.Shopify}</span>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
</lightning-layout-item>
|
||
|
||
<template for:each={requiredFieldMapping} for:item="obj" for:index="index">
|
||
|
||
<lightning-layout multiple-rows="true" key={obj.Id} lwc:if={obj.showRecords}>
|
||
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<p class="fm-required-label sme-fm-text">{obj.requiredFieldLabel}</p>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<p class="sme-fm-text">{obj.salesforceFieldType}</p>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<lightning-input checked={obj.defaultValue} data-value={obj.Id} data-id="required"
|
||
onchange={handleDefaultCheckbox} type="checkbox"
|
||
class="fm-default-checkbox"
|
||
disabled={obj.defaultCheckboxDisabled}></lightning-input>
|
||
</lightning-layout-item>
|
||
|
||
<!-- OVERRIDE checkbox — inverse of DEFAULT -->
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<template lwc:if={obj.defaultValue}>
|
||
<lightning-input type="checkbox" class="fm-default-checkbox fm-override-checkbox " disabled></lightning-input>
|
||
</template>
|
||
<template lwc:else>
|
||
<lightning-input checked type="checkbox" class="fm-default-checkbox fm-override-checkbox" disabled></lightning-input>
|
||
</template>
|
||
</lightning-layout-item>
|
||
|
||
<!-- If default checkbox is selected -->
|
||
<template lwc:if={obj.defaultValue}>
|
||
<div style="display: flex;flex-direction: column;gap: 6px;">
|
||
<lightning-layout-item size="3" padding="around-small">
|
||
<lightning-input type={obj.dataTypeInput} name={obj.dataTypeInput} variant="label-hidden"
|
||
data-id="required" data-value={obj.Id} placeholder={label.Enter_a_value}
|
||
value={obj.selectedfields}
|
||
onchange={handleDataInputValues} class="fm-default-input sme-fm-text"></lightning-input>
|
||
<!-- Show error message when field is empty -->
|
||
<template lwc:if={obj.showError}>
|
||
<div size="3"
|
||
class="tooltipCss slds-popover slds-popover_tooltip slds-nubbin_top-left slds-slide-from-bottom-to-top"
|
||
role="tooltip" id="help1"> <!--style="position:absolute;"-->
|
||
<span>
|
||
<lightning-icon
|
||
class="slds-popover__body error-utility-icon slds-p-left_small slds-p-bottom_x-small"
|
||
icon-name="utility:clear" size="x-small">
|
||
</lightning-icon>
|
||
</span>
|
||
<span class="slds-popover__body slds-p-top_xx-small"
|
||
style="padding: 0px 5px;"> {label.This_field_is_Required}</span>
|
||
</div>
|
||
</template>
|
||
|
||
</lightning-layout-item>
|
||
</div>
|
||
</template>
|
||
|
||
<template lwc:else>
|
||
|
||
<template lwc:if={obj.flag}>
|
||
<lightning-layout-item size="3" padding="around-small" class="custom-tooltip">
|
||
<!-- <div if:true={obj.shopifyFieldName}>
|
||
<span class="tooltip-content"
|
||
style="word-wrap: break-word;">{obj.shopifyFieldName}</span>
|
||
</div> -->
|
||
<!-- SHOW BOX -->
|
||
<!-- class="container slds-m-top_small slds-box slds-box_x-small slds-text-title_caps showHover" -->
|
||
<div if:true={obj.shopifyFieldName}>
|
||
<!-- DON'T REPLACE THE IF WITH LWC:IF -->
|
||
<!-- <div class="slds-align_absolute-center font-color"
|
||
if:true={obj.shopifyNested}>
|
||
<span class="container">{obj.shopifyNested}
|
||
</span>
|
||
</div> -->
|
||
<!-- <hr class="horizontal-line-class" if:true={obj.shopifyNested}>
|
||
<div class="slds-align_absolute-center font-color"><span
|
||
class="container">{obj.shopifyFieldName}</span></div> -->
|
||
|
||
<div class="slds-align_absolute-center font-color">
|
||
<lightning-pill-container items={obj.selectedfieldsList}
|
||
data-row-id={obj.Id}
|
||
onitemremove={handleItemRemove}></lightning-pill-container>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- REMOVE BOX -->
|
||
<div if:false={obj.shopifyFieldName}
|
||
class="slds-box slds-box_medium slds-m-top_small slds-text-title_caps">
|
||
<span class="container">{obj.shopifyFieldName}</span>
|
||
</div>
|
||
<!-- Show error message when field is empty -->
|
||
<template lwc:if={obj.showError}>
|
||
|
||
<div class="tooltipCss slds-popover slds-popover_tooltip slds-nubbin_top-left slds-slide-from-bottom-to-top"
|
||
role="tooltip" id="help2">
|
||
<span>
|
||
<lightning-icon
|
||
class="slds-popover__body error-utility-icon slds-p-left_small slds-p-bottom_x-small"
|
||
icon-name="utility:clear" size="x-small">
|
||
</lightning-icon>
|
||
</span>
|
||
<span class="slds-popover__body slds-p-top_xx-small"
|
||
style="padding: 0px 5px;"> {label.This_field_is_Required}
|
||
</span>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
</lightning-layout-item>
|
||
</template>
|
||
<template lwc:else>
|
||
|
||
<lightning-layout-item size="3" padding="around-small">
|
||
|
||
<lightning-combobox name="progress" variant="label-hidden" class="sme-fm-text"
|
||
value={obj.selectedfields} placeholder={label.SELECT_ANY_SHOPIFY_FIELD}
|
||
options={obj.shopifyOptions} onchange={changeShopifyField}
|
||
data-value={obj.Id} data-id="required">
|
||
</lightning-combobox>
|
||
|
||
<!-- Show error message when field is empty -->
|
||
<template lwc:if={obj.showError}>
|
||
<div class="tooltipCss slds-popover slds-popover_tooltip slds-nubbin_top-left slds-slide-from-bottom-to-top"
|
||
role="tooltip" id="help3">
|
||
<span>
|
||
<lightning-icon
|
||
class="slds-popover__body error-utility-icon slds-p-left_small slds-p-bottom_x-small"
|
||
icon-name="utility:clear" size="x-small">
|
||
</lightning-icon>
|
||
</span>
|
||
<span class="slds-popover__body slds-p-top_xx-small"
|
||
style="padding: 0px 5px;"> {label.This_field_is_Required}</span>
|
||
</div>
|
||
</template>
|
||
</lightning-layout-item>
|
||
</template>
|
||
|
||
<!-- <lightning-layout-item padding="around-small" size="3" class="slds-m-top_large">
|
||
<lightning-button lwc:if={obj.canAccessMergeFields}
|
||
label={label.Multiple_Fields} title={label.Multiple_Fields}
|
||
onclick={selectMultiple} class="slds-m-left_x-small button buttons"
|
||
data-value={obj.Id} data-id="required"></lightning-button>
|
||
</lightning-layout-item> -->
|
||
|
||
</template>
|
||
<!-- Empty ACTION cell to fill 6th column of grid -->
|
||
<lightning-layout-item padding="around-small" size="1"></lightning-layout-item>
|
||
</lightning-layout>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="horizontalLineCss slds-m-around_small">
|
||
<!-- ########################################################################################################################################## -->
|
||
<div lwc:if={hasOptional}>
|
||
<!--Optional fields-->
|
||
<h2 class="header-Background">{label.OPTIONAL_FIELDS}</h2>
|
||
<div style="width: 100%;">
|
||
<div class="sme-field-mapping-parent">
|
||
|
||
<lightning-layout multiple-rows="true" class="field-text-color slds-theme_default" style="border-radius: 0.625rem;">
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<span class="fm-col-salesforce fm-col-center">{label.Salesforce}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<span class="fm-col-default fm-col-center">{label.DATA_TYPE}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<span class="fm-col-default fm-col-center">{label.DEFAULT}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<span class="fm-col-default fm-col-center">OVERRIDE</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<span class="fm-col-shopify fm-col-center">{label.Shopify}</span>
|
||
</lightning-layout-item>
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<span class="fm-col-default fm-col-center">{label.ACTION}</span>
|
||
</lightning-layout-item>
|
||
</lightning-layout>
|
||
|
||
<!-- Data for Variable Fields -->
|
||
<template for:each={objectFieldMapping} for:item="obj" for:index="index">
|
||
<lightning-layout multiple-rows="true" key={obj.Id} lwc:if={obj.showRecords}>
|
||
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<lightning-combobox name="progress" variant="label-hidden" class="sme-fm-text"
|
||
value={obj.salesforcefields} placeholder={label.SELECT_ANY_SALESFORCE_FIELD}
|
||
options={obj.salesforceOptions} onchange={changeSalesforceField}
|
||
data-value={obj.Id} disabled={obj.disabledSalesforceCombobox}>
|
||
</lightning-combobox>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<p class="slds-align-center uppercase sme-fm-text">{obj.salesforceFieldType}</p>
|
||
</lightning-layout-item>
|
||
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<lightning-input checked={obj.defaultValue} data-value={obj.Id} data-id="optional"
|
||
onchange={handleDefaultCheckbox} type="checkbox"
|
||
class="fm-default-checkbox"
|
||
disabled={obj.defaultCheckboxDisabled}></lightning-input>
|
||
</lightning-layout-item>
|
||
|
||
<!-- OVERRIDE checkbox — inverse of DEFAULT -->
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<template lwc:if={obj.defaultValue}>
|
||
<lightning-input type="checkbox" class="fm-default-checkbox fm-override-checkbox" disabled></lightning-input>
|
||
</template>
|
||
<template lwc:else>
|
||
<lightning-input checked type="checkbox" class="fm-default-checkbox fm-override-checkbox" disabled></lightning-input>
|
||
</template>
|
||
</lightning-layout-item>
|
||
|
||
<!-- If default checkbox is selected -->
|
||
<template lwc:if={obj.defaultValue}>
|
||
|
||
<lightning-layout-item padding="around-small" size="3" class="fm-default-input">
|
||
<lightning-input class={obj.shopifyFieldCSS} type={obj.dataTypeInput} variant="label-hidden"
|
||
name={obj.dataTypeInput} data-value={obj.Id} data-id="optional"
|
||
label={obj.shopifyFieldLabel} value={obj.selectedfields}
|
||
checked={obj.selectedfields} onchange={handleDataInputValues}
|
||
placeholder={obj.dataTypeInput}></lightning-input>
|
||
</lightning-layout-item>
|
||
|
||
<!-- This is for Space -->
|
||
<!-- <lightning-layout-item padding="around-small" size="3"></lightning-layout-item> -->
|
||
|
||
</template>
|
||
|
||
<template lwc:else>
|
||
|
||
<template lwc:if={obj.flag}>
|
||
<lightning-layout-item padding="around-small" size="3" class="custom-tooltip">
|
||
<!-- <div if:true={obj.shopifyFieldName}>
|
||
<span class="tooltip-content"
|
||
style="word-wrap: break-word;">{obj.shopifyFieldName}</span>
|
||
</div> -->
|
||
<!-- SHOW BOX -->
|
||
<div if:true={obj.shopifyFieldName}>
|
||
|
||
<!-- DON'T REPLACE THE IF WITH LWC:IF showHover tooltip -->
|
||
<!-- <div class="slds-align_absolute-center font-color"
|
||
if:true={obj.shopifyNested}>
|
||
<span class="container">{obj.shopifyNested}
|
||
</span>
|
||
</div> -->
|
||
<!-- <hr class="horizontal-line-class" if:true={obj.shopifyNested}> -->
|
||
<div class="slds-align_absolute-center font-color">
|
||
<lightning-pill-container items={obj.selectedfieldsList}
|
||
data-row-id={obj.Id}
|
||
onitemremove={handleItemRemove}></lightning-pill-container>
|
||
</div>
|
||
</div>
|
||
<!-- REMOVE BOX -->
|
||
<div if:false={obj.shopifyFieldName}>
|
||
<span class="container" label={obj.shopifyFieldName}></span>
|
||
</div>
|
||
|
||
</lightning-layout-item>
|
||
</template>
|
||
<template lwc:else>
|
||
|
||
<lightning-layout-item padding="around-small" size="3">
|
||
<lightning-combobox name="progress" variant="label-hidden" class="sme-fm-text"
|
||
value={obj.selectedfields} placeholder={label.SELECT_ANY_SHOPIFY_FIELD}
|
||
options={obj.shopifyOptions} onchange={changeShopifyField}
|
||
data-value={obj.Id} disabled={obj.disabledShopifyCombobox}>
|
||
</lightning-combobox>
|
||
</lightning-layout-item>
|
||
|
||
</template>
|
||
|
||
|
||
<!-- <lightning-layout-item padding="around-small" size="2" class="slds-m-top_large">
|
||
<lightning-button lwc:if={obj.canAccessMergeFields}
|
||
label={label.Multiple_Fields} title={label.Multiple_Fields}
|
||
onclick={selectMultiple}
|
||
class=" multiple-field-btn slds-m-left_x-small button buttons"
|
||
data-value={obj.Id}></lightning-button>
|
||
</lightning-layout-item> -->
|
||
|
||
</template>
|
||
|
||
<lightning-layout-item padding="around-small" size="1">
|
||
<lightning-icon class="red-delete-icon" icon-name="utility:delete" size="x-small"
|
||
alternative-text="Approved" onclick={deleteObjectRow} data-value={obj.Id}
|
||
data-id="optional"></lightning-icon>
|
||
</lightning-layout-item>
|
||
|
||
</lightning-layout>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<hr class="horizontalLineCss slds-m-around_small">
|
||
|
||
<div class="slds-align_absolute-center fm-add-row-wrapper">
|
||
<button class="fm-add-row-btn" onclick={addObjectRow} disabled={disabledAddRow}>
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"></path></svg>
|
||
<span>{label.Add_Row}</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</lightning-layout-item>
|
||
</template>
|
||
</lightning-layout>
|
||
</div>
|
||
|
||
<template lwc:if={openMultiSelectField} >
|
||
<!-- Modal/Popup Box LWC starts here -->
|
||
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
|
||
<div class="slds-modal__container">
|
||
<!-- Modal/Popup Box LWC header here -->
|
||
<header class="slds-modal__header modalHeader slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
|
||
<h2 class="slds-text-heading_medium slds-hyphenate" style="color:#95be45">
|
||
{label.Select_Multiple_Fields}
|
||
</h2>
|
||
|
||
<!-- RIGHT: close button -->
|
||
<button class="slds-button slds-button_icon slds-button_icon-bare" title={label.Close}
|
||
onclick={closeModal}>
|
||
<lightning-icon icon-name="utility:close" alternative-text="close" size="small">
|
||
</lightning-icon>
|
||
<span class="slds-assistive-text">{label.Close}</span>
|
||
</button>
|
||
</header>
|
||
|
||
<!-- Choose the nested field body -->
|
||
<div class="slds-modal__content slds-p-around_medium modalbody text-style" id="modal-content-id-2">
|
||
|
||
<lightning-combobox name="progress"
|
||
label={label.SELECT_PARENT}
|
||
value={nestedValue}
|
||
placeholder={label.Select_Options}
|
||
options={nestedFieldList}
|
||
onchange={handleNestedMergeField}>
|
||
</lightning-combobox>
|
||
|
||
<!-- show listbox body -->
|
||
<template lwc:if={showMergeFieldList}>
|
||
<lightning-dual-listbox
|
||
name="Shopify-Fields"
|
||
label={label.Shopify_Fields}
|
||
source-label={label.Available}
|
||
selected-label={label.Selected}
|
||
field-level-help={label.Select_the_fields_you_want_to_merge}
|
||
options={mergeFieldList}
|
||
value={selectedValues}
|
||
onchange={selectedList}>
|
||
</lightning-dual-listbox>
|
||
</template>
|
||
</div>
|
||
<!-- Modal/Popup Box LWC footer starts here -->
|
||
<template lwc:if={showMergeFieldList}>
|
||
<footer class="slds-modal__footer modalFooter">
|
||
<lightning-button label={label.Cancel} variant="neutral" onclick={closeModal} style="float: left;"></lightning-button>
|
||
<lightning-button label={label.Apply_and_Close} variant="success" onclick={handleMergeFields}></lightning-button>
|
||
</footer>
|
||
</template>
|
||
</div>
|
||
</section>
|
||
<div class="slds-backdrop slds-backdrop_open"></div>
|
||
</template>
|
||
</template> |