From b5598d071154bc9578d1ad100aeac762184deee1 Mon Sep 17 00:00:00 2001
From: brave-hawk <richard.munyao@gmail.com>
Date: Tue, 20 May 2025 22:18:39 +0200
Subject: [PATCH] Feat #1: Interpration on how to allow edit of CMS Pages
 internal/External links

---
 .../sfpegCmsPageEditor.html                   | 32 +++++++++++-
 .../sfpegCmsPageEditor/sfpegCmsPageEditor.js  | 50 +++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.html b/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.html
index 8d9df2a..3681b8a 100644
--- a/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.html
+++ b/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.html
@@ -241,7 +241,27 @@
                 </template>
 
                 <div class="slds-p-horizontal_medium">
-                    <!-- Links Edit Mode Display -->
+                    <!-- START Edit Link modal -->
+                    <template if:true={isEditLinkModalOpen}>
+                        <div class="slds-modal slds-fade-in-open">
+                            <div class="slds-modal__container">
+                                <header class="slds-modal__header">
+                                    <h3 class="slds-text-heading_medium">Edit Link</h3>
+                                </header>
+                                <div class="slds-modal__content slds-p-around_medium">
+                                    <lightning-input type="text" name="label" required label={lblLabel} value={selectedLink.label} lwc:ref="editModalLabel"></lightning-input>
+                                    <lightning-input type="text" name="title" required label={lblTitle} value={selectedLink.title} lwc:ref="editModalTitle"></lightning-input>
+                                    <lightning-input type="text" name="url" required label={lblUrl} value={selectedLink.url} field-level-help={lblUrlHelp} lwc:ref="editModalURL"></lightning-input>
+                                </div>
+                                <footer class="slds-modal__footer">
+                                    <button class="slds-button slds-button_neutral" onclick={closeEditLinkModal}>Cancel</button>
+                                    <button class="slds-button slds-button_brand slds-m-left_small" onclick={handleUpdateLink}>Save</button>
+                                </footer>
+                            </div>
+                        </div>
+                        <div class="slds-backdrop slds-backdrop_open"></div>
+                    </template>
+                    <!-- End Edit Link modal -->
                     <template lwc:if={isLinkEdit}>
                         <lightning-layout multiple-rows="true" pull-to-boundary="small">
                             <lightning-layout-item padding="horizontal-small" size="12" medium-device-size="6">
@@ -268,6 +288,16 @@
                                                                                 onclick={handleMoveLinkUp} >
                                                         </lightning-button-icon>
                                                     </div>
+                                                    <div class="slds-col">
+                                                        <lightning-button-icon  icon-name="utility:edit"
+                                                                                icon-class="slds-text-color_default"
+                                                                                value={iterLink.label}
+                                                                                title={lblEdit}
+                                                                                size="small"
+                                                                                variant="bare"
+                                                                                onclick={handleEditLink} >
+                                                        </lightning-button-icon>
+                                                    </div>
                                                     <div class="slds-col">
                                                         <lightning-button-icon  icon-name="utility:delete"
                                                                                 icon-class="slds-text-color_destructive"
diff --git a/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.js b/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.js
index 968a5a6..000b3cc 100644
--- a/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.js
+++ b/force-app/cmsUtilities/cmsEdition/lwc/sfpegCmsPageEditor/sfpegCmsPageEditor.js
@@ -75,6 +75,9 @@ export default class SfpegCmsPageEditor extends LightningElement {
     isVariantEdit = false;
     isPageEdit = false;
     isLinkEdit = false;
+    isEditLinkModalOpen = false;
+    selectedLink = { label: '', title: '', url: '', target: '' };
+    selectedLinkIndex;
 
     //------------------------------------------------
     // Custom Labels
@@ -445,6 +448,17 @@ export default class SfpegCmsPageEditor extends LightningElement {
         this.applyChanges();
         console.log("handleMoveLinkDown: END / links update requested");
     }
+    handleEditLink(event){
+        console.log("handleEditLink: START with link ",event.target.value);
+        let linkIndex = this.links.findIndex(item => item.label == event.target.value);
+        console.log("handleEditLink: linkIndex found ",linkIndex);
+        this.isEditLinkModalOpen = !this.isEditLinkModalOpen;
+        console.log("handleEditLink: isEditLinkModalOpen Status: ",this.isEditLinkModalOpen);
+        console.log("handleEditLink: link params: ", JSON.stringify(this.links[linkIndex]));
+        this.selectedLink = {... this.links[linkIndex]};       
+        this.selectedLinkIndex = linkIndex;
+        console.log("handleEditLink: END / links update requested");
+    }
     handleRemoveLink(event){
         console.log("handleRemoveLink: START with link ",event.target.value);
 
@@ -489,6 +503,42 @@ export default class SfpegCmsPageEditor extends LightningElement {
         this.applyChanges();
         console.log("handleAddLink: END / Links update requested");
     }
+    
+    closeEditLinkModal(event){
+        console.log("closeEditLinkModal: START with event",event);
+        this.isEditLinkModalOpen = !this.isEditLinkModalOpen;
+        console.log("closeEditLinkModal: isEditLinkModalOpen",this.isEditLinkModalOpen);
+        console.log("closeEditLinkModal: END ");
+    }
+
+    handleUpdateLink(event){
+        console.log("handleUpdateLink: START with event",event);
+        event.preventDefault();
+        console.log("handleUpdateLink: current links ",JSON.stringify(this.links));
+        let linkIndex = this.selectedLinkIndex;
+        console.log("handleUpdateLink: linkIndex: ",linkIndex);
+        let labelInput = this.refs.editModalLabel;
+        let titleInput = this.refs.editModalTitle;
+        let urlInput = this.refs.editModalURL;
+        // Sanity check: Guard against refs not being available
+        if (!labelInput || !titleInput || !urlInput) {
+            console.error('handleUpdateLink: Edit link Modal input references are not available.');
+            this.isEditLinkModalOpen = !this.isEditLinkModalOpen;
+            return;
+        }
+
+        let link2Update = {};    
+        link2Update["label"] = labelInput.value;
+        link2Update["title"] = titleInput.value;
+        link2Update["url"] = urlInput.value;
+        link2Update["target"] = (urlInput.value.startsWith('http') ? '_blank' : '_self');      
+        console.log("handleUpdateLink: link2Update: ",JSON.stringify(link2Update)); 
+        this.links[linkIndex] = link2Update;
+        console.log("handleUpdateLink: this.links after update: ",JSON.stringify(this.links)); 
+        this.applyChanges();
+        this.isEditLinkModalOpen = !this.isEditLinkModalOpen;
+        console.log("handleUpdateLink: END ");
+    }
 
 
     //------------------------------------------------