SyncMadeEasy/force-app/main/default/lwc/multiStoreController/multiStoreController.js

/*
****************************************************************************
Component Name     : MultiStoreController
Created Date       : 17/4/2024
@description       :  This component manages multiple stores
@author            : SME Team
Modification Log:
Ver   Date         Author                            
1.0   23/4/2024   SME Team                         
****************************************************************************
*/

import { LightningElement, track } from 'lwc';

// FETCHING RESOURCES FROM THE STATIC RESOURCES
import pageLoadingGif2 from "@salesforce/resourceUrl/SMEPageLoadingGIF2";

import Resources from "@salesforce/resourceUrl/Resources";

// CREATING INSTANCES OF APEX METHODS
import getConfigrations from '@salesforce/apex/ShopifyController.getConfigrations';
import removeStore from '@salesforce/apex/ShopifyController.removeStore';

//Custom Labels
import Multi_Store_Control from '@salesforce/label/c.Multi_Store_Control';
import Store_Name from '@salesforce/label/c.Store_Name';
import Actions from '@salesforce/label/c.Actions';
import Stores from '@salesforce/label/c.Stores';
import New from '@salesforce/label/c.New';

export default class MultiStoreController extends LightningElement {

    // LOCAL VARIABLES
    @track storeList=[];
    @track isLoading = false;

        //Custom Labels
    @track label = {
        Multi_Store_Control , Store_Name , Actions , Stores , New
    };
    pageLoadingGif = pageLoadingGif2;

    // Modal body height while the spinner (add/delete) is showing: captured
    // from the box's own current rendered height right before the store
    // rows are swapped out for the spinner, so the spinner box matches
    // whatever size the list box happened to be (2 stores vs 6 stores)
    // instead of a fixed height. Cleared once the list re-renders so the
    // box goes back to sizing itself naturally to the new row count.
    @track lockedHeightPx = null;

    get modalBodyStyle() {
        let style = 'border-bottom-left-radius: 2.37rem; border-bottom-right-radius: 2.37rem;';
        if (this.isLoading && this.lockedHeightPx) {
            style += ` height: ${this.lockedHeightPx}px;`;
        }
        return style;
    }

    toggleBodyScroll(disable = false) {
        console.log('SYNC MADE EASY: Multi Store => Toggle Body Scroll ');
    // const html = document.querySelector("html");
    if (disable) {
        document.body.style.overflow = "hidden";
    } else {
        document.body.style.overflow = "auto";
    }
}

    // Connected CallBack
    connectedCallback() {
        console.log('SYNC MADE EASY: Multi Store Connected Callback');
        
            this.toggleBodyScroll(true);   // ✅ Stop background scroll
        this.getStores();
    }
    
    
    //Add New Store
    newStore(){
        const customEvent = new CustomEvent('multistoreenable', {
            detail: { subject  : 'New',
            storeName : null}
        });
        this.dispatchEvent(customEvent);
        this.toggleBodyScroll(false);
    }

    //Edit Existing Store
    editStore(event){
        const editStoreId = event.target.dataset.value;
        const customEvent = new CustomEvent("multistoreenable", {
            detail: {subject : 'Edit',
                     storeName: editStoreId}
        });
        this.dispatchEvent(customEvent);
        this.toggleBodyScroll(false);
        }

    //Edit Existing Store
    deleteStore(event){
        this.showSpinnerHandler();
        console.log('SYNC MADE EASY: Multi Store => Delete Store');
        removeStore({store:event.target.dataset.value}).then((result)=>{
            if (result) {
                const customEvent = new CustomEvent("multistoreenable", {
                    detail: {subject : 'Delete',
                            storeName: null}
                });
                this.dispatchEvent(customEvent);
                this.getStores();
                this.closeSpinnerHandler();
            }
        }).catch((error)=>{
            this.closeSpinnerHandler();
        });
       
    }

    //Selected Store
    selectedStore(event){
        const editStoreId = event.target.dataset.value;
        this.selectedStoreName(editStoreId);
        this.toggleBodyScroll(false);
    }

    selectedStoreName(editStoreId){
        const customEvent = new CustomEvent("multistoreenable", {
            detail: {subject : 'Existing Store',
                     storeName: editStoreId}
        });
        this.dispatchEvent(customEvent);
    }

    //Get Stores
    getStores() {
        console.log('SYNC MADE EASY: Multi Store => Fetching Stores ');
        getConfigrations().then((result)=>{
            this.storeList = JSON.parse(result);
        }).catch((error)=>{
            this.handleSpinner();
        });
    }

    //Close Modal
    closeModal(){
        const selectEvent = new CustomEvent("closemodal", {
            detail: "closeModal"
            });
        this.dispatchEvent(selectEvent);
    }

    //This Method is used to close spinner 
    closeSpinnerHandler() {
        this.isLoading = false;
        this.lockedHeightPx = null;
    }

    //This Method is used to show spinner  
    showSpinnerHandler() {
        const modalBodyEl = this.template.querySelector('.modalBody');
        if (modalBodyEl) {
            this.lockedHeightPx = modalBodyEl.getBoundingClientRect().height;
        }
        this.isLoading = true;
    }
    
}