103 lines
7.0 KiB
HTML
103 lines
7.0 KiB
HTML
<template>
|
|
<div style="border-bottom-right-radius: 2.37rem;border-bottom-left-radius: 2.37rem;">
|
|
<!-- 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 modalStyling msc-modal">
|
|
<div class="slds-modal__container">
|
|
<!-- Modal/Popup Box LWC header here -->
|
|
<header class="slds-modal__header modalHeader msc-header" style="border-bottom: none;border-top-left-radius: 2.37rem;border-top-right-radius: 2.37rem">
|
|
|
|
|
|
<span style="display: flex;justify-content: space-between;align-items: center;gap:1rem;flex-wrap:nowrap;">
|
|
|
|
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate multiHeading" style="margin-left: 1.0rem;white-space:nowrap;">{label.Multi_Store_Control}</h2>
|
|
<button onclick={newStore} style="margin-right: 0.8rem;margin-top: 0.5rem;height: 2.75rem;padding:0 1.25rem;border: none;border-radius: 0.625rem;background: linear-gradient(120deg, #5fa832, #2f8fb0);font-size: 1rem;font-weight: 500;display: flex;align-items: center;justify-content: center;white-space:nowrap;flex-shrink:0;">
|
|
<!-- <span> <lightning-icon icon-name="utility:add" size="x-small" alternative-text="add" class="addIcon"></lightning-icon>
|
|
</span>-->
|
|
<h3 style="color: white;margin:0;white-space:nowrap;">+ {label.New}</h3>
|
|
</button>
|
|
|
|
</span>
|
|
</header>
|
|
<div class="slds-modal__content slds-p-around_medium modalBody" id="modal-content-id-3" style={modalBodyStyle}>
|
|
<!-- Show spinner if delete is clicked -->
|
|
<template lwc:if={isLoading}>
|
|
<div class="sw-loading-wrap">
|
|
<img src={pageLoadingGif} class="pageLoading-Gif">
|
|
</div>
|
|
</template>
|
|
<!-- Show modal body -->
|
|
<template lwc:else>
|
|
<!-- Store New Symbol-->
|
|
<!-- <lightning-layout>
|
|
<lightning-layout-item size="1"></lightning-layout-item>
|
|
<lightning-layout-item size="7" class="slds-m-bottom_medium">
|
|
<lightning-icon icon-name="utility:store" alternative-text="Store" class="green-utility-icon"></lightning-icon>
|
|
<b class="slds-m-left_x-small store-text">{label.Stores}</b>
|
|
</lightning-layout-item>
|
|
<lightning-layout-item size="4">
|
|
<lightning-button class="button" onclick={newStore} label={label.New} variant="Success"></lightning-button>
|
|
</lightning-layout-item>
|
|
</lightning-layout> -->
|
|
|
|
<lightning-layout multiple-rows=true >
|
|
|
|
|
|
|
|
<lightning-layout-item padding="horizontal-small" size="12" class="tabs">
|
|
<div class="storeTableHeader" style="display: grid;grid-template-columns: 1fr 8rem;align-items: center;font-weight: 400;font-family: inter,sans-serif;;min-height:60px;box-sizing:border-box;font-size: 0.875rem;background-color:#f5f5f5;padding: 0.5rem 1.5rem;border-radius: 0.625rem;">
|
|
<span>{label.Store_Name}</span>
|
|
<span>{label.Actions}</span>
|
|
</div>
|
|
</lightning-layout-item>
|
|
|
|
|
|
|
|
<lightning-layout-item padding="horizontal-small" size="12">
|
|
<div class="storeListContainer" style="display: flex; flex-direction: column; width: 100%;">
|
|
<template for:each={storeList} for:item="store" >
|
|
<div key={store.Id} style="display: grid; grid-template-columns: 1fr 8rem; align-items: center; padding: 0.75rem 1.5rem; border-top: 1px solid #E5E5E5;" class="storeRecord">
|
|
<span class="storeColor" onclick={selectedStore} data-value={store.Name} style="cursor: pointer;">
|
|
{store.Name}
|
|
</span>
|
|
<div style="display: flex; gap: 1rem; justify-content: flex-start;">
|
|
<!-- <button onclick={editStore} data-value={store.Name} class="edit-btn">
|
|
<lightning-icon icon-name="utility:edit" alternative-text="Edit" onclick={editStore} data-value={store.Name} size="x-small" class="edit"></lightning-icon>
|
|
</button> -->
|
|
|
|
<button
|
|
class="email-icon-btn"
|
|
data-value={store.Name}
|
|
onclick={editStore}
|
|
title="Edit"
|
|
>
|
|
<svg
|
|
width="15"
|
|
height="15"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
style="pointer-events:none"
|
|
>
|
|
<path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<button onclick={deleteStore} data-value={store.Name} style="background:none; border:none;padding:0.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; ">
|
|
<lightning-icon icon-name="utility:delete" alternative-text="Delete" onclick={deleteStore} data-value={store.Name} size="x-small" class="delete"></lightning-icon>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</lightning-layout-item>
|
|
|
|
</lightning-layout>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="slds-backdrop slds-backdrop_open"></div>
|
|
</div>
|
|
</template> |