charangirijala · charangirijala · Nov 8, 2024 · Nov 8, 2024
diff --git a/force-app/main/default/lwc/UtilityComponents/lwc/splitscreen/splitscreen.js b/force-app/main/default/lwc/UtilityComponents/lwc/splitscreen/splitscreen.js
@@ -1,30 +1,88 @@
-import { LightningElement, track, api } from "lwc";
+import { LightningElement, track, wire } from "lwc";
+import {
+  subscribe,
+  publish,
+  APPLICATION_SCOPE,
+  MessageContext
+} from "lightning/messageService";
+import LOG_ANALYSIS_STATE from "@salesforce/messageChannel/Log_Analysis_Viewer_State__c";
 
 export default class Splitscreen extends LightningElement {
-  @api closeLog;
-  @api fullScreen;
+  closeLog;
+  msgChannelSub = null;
+  fullScreen;
   @track leftWidth = 50;
   isResizing = false;
+  @wire(MessageContext)
+  messageContext;
 
+  connectedCallback() {
+    if (!this.msgChannelSub) {
+      this.subscribeToMessageChannel();
+    }
+  }
+  renderedCallback() {
+    if (this.fullScreen === false && !this.isResizing) {
+      this.leftWidth = 50;
+    }
+  }
+  subscribeToMessageChannel() {
+    if (!this.msgChannelSub) {
+      this.msgChannelSub = subscribe(
+        this.messageContext,
+        LOG_ANALYSIS_STATE,
+        (message) => {
+          this.setVars(message);
+        },
+        { scope: APPLICATION_SCOPE }
+      );
+    }
+  }
+  setVars(message) {
+    if (message.closeLog !== null) {
+      this.closeLog = message.closeLog;
+    }
+    if (message.fullScreen !== null) {
+      this.fullScreen = message.fullScreen;
+    }
+  }
   //changes for close and fullscreen buttons
   get leftSectionStyle() {
     if (this.closeLog) {
+      // console.log("LeftWidth: 100%");
+      this.leftWidth = 100;
       return "width: 100%;";
     } else if (!this.fullScreen) {
+      // console.log("LeftWidth: ", this.leftWidth);
       return `width: ${this.leftWidth}%;`;
     }
+    // console.log("LeftWidth: ", 0);
+    this.leftWidth = 0;
     return "width: 0%;";
   }
   //changes for close and fullscreen buttons
   get rightSectionStyle() {
-    if (this.closeLog) { return 'width: 0%;' }
-    else if (!this.fullScreen) { return `width: ${100 - this.leftWidth}%;` }
-    else { return 'width: 100%;' }
+    if (this.closeLog) {
+      return "width: 0%;";
+    } else if (!this.fullScreen) {
+      return `width: ${100 - this.leftWidth}%;`;
+    }
+    return "width: 100%;";
   }
 
   startResize(event) {
     this.isResizing = true;
+
+    if (this.closeLog === null || this.closeLog === true) {
+      const payload = { closeLog: false };
+      publish(this.messageContext, LOG_ANALYSIS_STATE, payload);
+    }
+    if (this.fullScreen === null || this.fullScreen === true) {
+      const payload = { fullScreen: false };
+      publish(this.messageContext, LOG_ANALYSIS_STATE, payload);
+    }
     event.preventDefault();
+    // console.log("Resizing Started");
     window.addEventListener("mousemove", this.resize.bind(this));
     window.addEventListener("mouseup", this.stopResize.bind(this));
   }
@@ -33,8 +91,11 @@ export default class Splitscreen extends LightningElement {
     if (!this.isResizing) return;
     const containerWidth =
       this.template.querySelector(".split-screen").offsetWidth;
+    // console.log("Container width: " + containerWidth);
+    // console.log("Mouse X: " + event.clientX);
     const newLeftWidth = (event.clientX / containerWidth) * 100;
-    this.leftWidth = Math.max(10, Math.min(90, newLeftWidth));
+    this.leftWidth = Math.max(0, Math.min(100, newLeftWidth));
+    // console.log("Left width: " + this.leftWidth + "%");
   }
 
   stopResize() {

diff --git a/force-app/main/default/lwc/detailedLogViewer/detailedLogViewer.js b/force-app/main/default/lwc/detailedLogViewer/detailedLogViewer.js
@@ -11,7 +11,7 @@ import LOG_ANALYSIS_STATE from "@salesforce/messageChannel/Log_Analysis_Viewer_S
 import { api, LightningElement, wire } from "lwc";
 
 export default class DetailedLogViewer extends LightningElement {
-  minimize=true
+  minimize = false;
   @api idLimitMin;
   @api idLimitMax;
   logIdSubs = null;
@@ -28,15 +28,16 @@ export default class DetailedLogViewer extends LightningElement {
   }
 
   //changes for fullscreen button
-  get iconName(){
-    return this.minimize ? "utility:new_window" : "utility:minimize_window";
+  get iconName() {
+    return this.minimize ? "utility:minimize_window" : "utility:new_window";
   }
-  fullscreen(){
+  fullscreen() {
     console.log("[detailedLogViewer.js] Going Full Screen");
-      this.dispatchEvent(new CustomEvent("fullscreen",{
-        detail:{isFullScreen:this.minimize}
-      }));
-      this.minimize=!(this.minimize);
+    this.minimize = !this.minimize;
+    const payload = {
+      fullScreen: this.minimize
+    };
+    publish(this.messageContext, LOG_ANALYSIS_STATE, payload);
   }
 
   connectedCallback() {
@@ -47,14 +48,17 @@ export default class DetailedLogViewer extends LightningElement {
       this.logIdSubs = subscribe(
         this.messageContext,
         LOG_ANALYSIS_STATE,
-        (message) => this.setLogId(message),
+        (message) => this.setVars(message),
         { scope: APPLICATION_SCOPE }
       );
     }
   }
 
-  setLogId(message) {
+  setVars(message) {
     this.logId = message.logId;
+    if (message.fullScreen !== null) {
+      this.minimize = message.fullScreen;
+    }
   }
   recheckLimits() {
     const id = parseInt(this.logId);

diff --git a/force-app/main/default/lwc/logAnalysisView/logAnalysisView.html b/force-app/main/default/lwc/logAnalysisView/logAnalysisView.html
@@ -1,6 +1,6 @@
 <!-- sldsValidatorIgnore -->
 <template>
-  <c-splitscreen full-screen={fullScreen} close-log={closeLog}>
+  <c-splitscreen>
     <div slot="left-content">
       <template for:each={test} for:item="t">
         <div key={t.a} class="slds-hide">{t.a} {t.b}</div>
@@ -113,14 +113,15 @@
                     </button>
                   </template>
                   <template lwc:else>
-                      <button
+                    <button
                       class="slds-button slds-text-body_small button-on-focus"
                       data-unqid={node.Id}
                       onclick={openLogViewer}
                       tabindex="-1"
                       title="Open Detailed View"
                     >
-                    <span class="font-monospace">{node.name}</span></button>
+                      <span class="font-monospace">{node.name}</span>
+                    </button>
                   </template>
                 </div>
               </th>

diff --git a/force-app/main/default/lwc/logAnalysisView/logAnalysisView.js b/force-app/main/default/lwc/logAnalysisView/logAnalysisView.js
@@ -1,4 +1,9 @@
-import { publish, MessageContext } from "lightning/messageService";
+import {
+  publish,
+  MessageContext,
+  subscribe,
+  APPLICATION_SCOPE
+} from "lightning/messageService";
 
 import LOG_ANALYSIS_STATE from "@salesforce/messageChannel/Log_Analysis_Viewer_State__c";
 import { api, LightningElement, track, wire } from "lwc";
@@ -82,8 +87,9 @@ class LogLine {
   }
 }
 export default class LogAnalysisView extends LightningElement {
-  closeLog = false
-  fullScreen = false
+  closeLogSub = null;
+  closeLog;
+  fullScreen = false;
   @api codeUnits;
   idLimitMin = IdBase;
   idLimitMax;
@@ -106,8 +112,10 @@ export default class LogAnalysisView extends LightningElement {
   currentLogIdx = 0;
   //close button
   setLogViewCol() {
-    console.log("close log true")
-    this.closeLog = true
+    console.log("close log true");
+    this.closeLog = true;
+    const payload = { closeLog: true };
+    publish(this.messageContext, LOG_ANALYSIS_STATE, payload);
     //this.logViewCol = 12;
   }
   get detailedLogViewDisplay() {
@@ -125,7 +133,7 @@ export default class LogAnalysisView extends LightningElement {
     const payload = { logId: codeUnitId };
     publish(this.messageContext, LOG_ANALYSIS_STATE, payload);
     //adding for re-opening log
-    this.closeLog=false
+    this.closeLog = false;
   }
   setSelectedTreeNode(event) {
     this.test[0].a = this.test[0].a === "102" ? "103" : "102";
@@ -137,6 +145,9 @@ export default class LogAnalysisView extends LightningElement {
     }
   }
   connectedCallback() {
+    if (!this.closeLogSub) {
+      this.subscribeToMessageChannel();
+    }
     //prepare cuInHierarchy from codeunit data
     this.codeUnits.forEach((cu) => {
       const parent = new CUHierarchy(cu.codeUnitName, cu.codeUnitType);
@@ -152,7 +163,22 @@ export default class LogAnalysisView extends LightningElement {
     });
     this.idLimitMax = this.idLimitMin + this.treeNodes.length - 1;
   }
+  subscribeToMessageChannel() {
+    if (!this.closeLogSub) {
+      this.closeLogSub = subscribe(
+        this.messageContext,
+        LOG_ANALYSIS_STATE,
+        (message) => {
+          this.setCloseLog(message);
+        },
+        { scope: APPLICATION_SCOPE }
+      );
+    }
+  }
 
+  setCloseLog(message) {
+    this.closeLog = message.closeLog;
+  }
   generateTreeNodes(row, level, posinset, parentId) {
     const fRow = new TreeNode(
       row.Id,
@@ -273,8 +299,4 @@ export default class LogAnalysisView extends LightningElement {
       }
     });
   }
-  //adding for fullscreen button
-  goFullScreen(event){
-    this.fullScreen=event.detail.isFullScreen
-  }
 }
diff --git a/force-app/main/default/messageChannels/Log_Analysis_Viewer_State.messageChannel-meta.xml b/force-app/main/default/messageChannels/Log_Analysis_Viewer_State.messageChannel-meta.xml
@@ -6,5 +6,16 @@
 <lightningMessageFields>
 <fieldName>logId</fieldName>
 <description>This is the log Id that is currently active</description>
+
 </lightningMessageFields>
+<lightningMessageFields>
+<fieldName>closeLog</fieldName>
+<description
+    >This is a boolean used to check if the state detailedLogViewer is open or not</description>
+    </lightningMessageFields>
+    <lightningMessageFields>
+        <fieldName>fullScreen</fieldName>
+        <description
+    >This is a boolean used to check if the state detailedLogViewer is fullScreen or not</description>
+    </lightningMessageFields>
 </LightningMessageChannel>