chore: set toggle endpoint state in the ui

chore: - change cypress check summary test

fix: - fix compiler-sfc warning

cypress/integration/check_summary/enabled-attributes.spec.js

@@ -29,7 +29,6 @@ describe('Testing enabled attributes amount', () => {
     'checks if number is updated',
     { retries: { runMode: 2, openMode: 2 } },
     () => {
-      cy.get('[data-test="endpoint-body-toggler-show"]').click()
       cy.fixture('data').then((data) => {
         cy.get('[data-test="endpoint-enabled-attributes-amount"]').then(($div2) => {
           const num2 = parseFloat($div2.text())

src/components/ZclEndpointCard.vue

@@ -69,8 +69,8 @@ limitations under the License.
             </q-tooltip>
           </q-btn>
           <q-btn
-            v-if="showAllInformationOfEndpoint"
-            @click.stop="toggleShowAllInformationOfEndpoint"
+            v-if="getEndpointInformation"
+            @click.stop="toggleShowAllInformationOfEndpoint(false)"
             flat
             dense
             icon="mdi-chevron-up"
@@ -82,13 +82,13 @@ limitations under the License.
             flat
             dense
             icon="mdi-chevron-down"
-            @click.stop="toggleShowAllInformationOfEndpoint"
+            @click.stop="toggleShowAllInformationOfEndpoint(true)"
             size="sm"
             data-test="endpoint-body-toggler-show"
           />
         </div>
       </div>
-      <q-list dense bordered v-if="showAllInformationOfEndpoint">
+      <q-list dense bordered v-if="getEndpointInformation">
         <br />
         <q-item class="row">
           <div class="col-6">
@@ -305,8 +305,8 @@ export default {
         )
       })
     },
-    toggleShowAllInformationOfEndpoint() {
-      this.showAllInformationOfEndpoint = !this.showAllInformationOfEndpoint
+    toggleShowAllInformationOfEndpoint(value) {
+      this.$store.commit('zap/toggleShowEndpoint', { id: this.endpointReference, value: value })
     },
     getEndpointCardData() {
       Vue.prototype
@@ -411,11 +411,16 @@ export default {
         return this.$store.state.zap.isClusterOptionChanged
       },
     },
+    getEndpointInformation: {
+      get() {
+        return this.$store.state.zap.showEndpointData[this.endpointReference]
+      }
+    }
   },
   watch: {
     isSelectedEndpoint(newValue) {
       if (newValue) {
-        this.showAllInformationOfEndpoint = true
+        this.$store.commit('zap/toggleShowEndpoint', { id: this.endpointReference, value: true })
       }
     },
     isClusterOptionChanged(val) {

src/layouts/ZclLayout.vue

@@ -326,7 +326,7 @@ export default {
 </script>
 
 <style scoped>
-/deep/ .q-tab-panel {
+:deep() .q-tab-panel {
   max-height: calc(100vh - 100px);
   overflow: hidden;
 }

src/store/zap/mutations.js

@@ -541,6 +541,12 @@ export function updateIsProfileIdShown (state, value) {
   value == 0 ? state.isProfileIdShown  = false : state.isProfileIdShown  = true
 }
 
+// This function will update the cluster stage if cluster changed it will update the endpoint data
 export function updateIsClusterOptionChanged(state, value) {
   state.isClusterOptionChanged = value
+}
+
+// This function will toggle showEndpointData state and save that state
+export function toggleShowEndpoint(state, item) {
+  Vue.set(state.showEndpointData, item.id, item.value)
 }
\ No newline at end of file

src/store/zap/state.js

@@ -145,6 +145,7 @@ export default function () {
       zclSdkExtClusterToUcComponentMap: [],
     },
     allEndpointsData: {},
-    isClusterOptionChanged: false
+    isClusterOptionChanged: false,
+    showEndpointData: {}
   }
 }