From 834687644463a925b90dafe0d5c60c249cea963e Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Fri, 1 Mar 2024 17:48:21 +0100
Subject: [PATCH] fix(ui): rerender shared toggle buttons properly
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>
---
 ui/web/src/components/buttons/ToggleButton.vue        |  3 +++
 .../src/components/charging-stations/CSConnector.vue  |  9 ++++++++-
 ui/web/src/components/charging-stations/CSData.vue    |  8 ++++++++
 ui/web/src/components/charging-stations/CSTable.vue   |  3 +++
 ui/web/src/views/ChargingStationsView.vue             | 11 +++++++++++
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/ui/web/src/components/buttons/ToggleButton.vue b/ui/web/src/components/buttons/ToggleButton.vue
index 0c36be22..dd1805ca 100644
--- a/ui/web/src/components/buttons/ToggleButton.vue
+++ b/ui/web/src/components/buttons/ToggleButton.vue
@@ -17,6 +17,8 @@ const props = defineProps<{
   off?: () => void
 }>()
 
+const $emit = defineEmits(['clicked'])
+
 const id = props.shared === true ? `shared-toggle-button-${props.id}` : `toggle-button-${props.id}`
 
 const state = ref({
@@ -39,6 +41,7 @@ const click = (): void => {
   } else {
     props.off?.()
   }
+  $emit('clicked', getFromLocalStorage<boolean>(id, props.status ?? false))
 }
 </script>
 
diff --git a/ui/web/src/components/charging-stations/CSConnector.vue b/ui/web/src/components/charging-stations/CSConnector.vue
index d3e37d63..36bb971f 100644
--- a/ui/web/src/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/components/charging-stations/CSConnector.vue
@@ -10,7 +10,7 @@
     </td>
     <td class="connectors-table__column">
       <ToggleButton
-        :id="`${hashId}-start-transaction`"
+        :id="`${hashId}-${connectorId}-start-transaction`"
         :shared="true"
         :on="
           () => {
@@ -25,6 +25,11 @@
             $router.push({ name: 'charging-stations' })
           }
         "
+        @clicked="
+          () => {
+            $emit('need-refresh')
+          }
+        "
       >
         Start Transaction
       </ToggleButton>
@@ -50,6 +55,8 @@ const props = defineProps<{
   atgStatus?: Status
 }>()
 
+const $emit = defineEmits(['need-refresh'])
+
 const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 
 const $toast = useToast()
diff --git a/ui/web/src/components/charging-stations/CSData.vue b/ui/web/src/components/charging-stations/CSData.vue
index 375fb3bc..c43616f7 100644
--- a/ui/web/src/components/charging-stations/CSData.vue
+++ b/ui/web/src/components/charging-stations/CSData.vue
@@ -41,6 +41,11 @@
             $router.push({ name: 'charging-stations' })
           }
         "
+        @clicked="
+          () => {
+            $emit('need-refresh')
+          }
+        "
       >
         Set Supervision Url
       </ToggleButton>
@@ -69,6 +74,7 @@
             :connector-id="index + 1"
             :connector="connector"
             :atg-status="getATGStatus(index + 1)"
+            @need-refresh="$emit('need-refresh')"
           />
         </tbody>
       </table>
@@ -88,6 +94,8 @@ const props = defineProps<{
   chargingStation: ChargingStationData
 }>()
 
+const $emit = defineEmits(['need-refresh'])
+
 const getConnectorStatuses = (): ConnectorStatus[] => {
   if (Array.isArray(props.chargingStation.evses) && props.chargingStation.evses.length > 0) {
     const connectorStatuses: ConnectorStatus[] = []
diff --git a/ui/web/src/components/charging-stations/CSTable.vue b/ui/web/src/components/charging-stations/CSTable.vue
index 9371d962..7c4105ae 100644
--- a/ui/web/src/components/charging-stations/CSTable.vue
+++ b/ui/web/src/components/charging-stations/CSTable.vue
@@ -23,6 +23,7 @@
         v-for="chargingStation in chargingStations"
         :key="chargingStation.stationInfo.hashId"
         :charging-station="chargingStation"
+        @need-refresh="$emit('need-refresh')"
       />
     </tbody>
   </table>
@@ -35,6 +36,8 @@ import type { ChargingStationData } from '@/types'
 defineProps<{
   chargingStations: ChargingStationData[]
 }>()
+
+const $emit = defineEmits(['need-refresh'])
 </script>
 
 <style>
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index cbd8a34b..c49449f6 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -67,6 +67,11 @@
             $router.push({ name: 'charging-stations' })
           }
         "
+        @clicked="
+          () => {
+            state.renderChargingStations = randomUUID()
+          }
+        "
       >
         Add Charging Stations
       </ToggleButton>
@@ -83,6 +88,12 @@
       "
       :key="state.renderChargingStations"
       :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
+      @need-refresh="
+        () => {
+          state.renderAddChargingStations = randomUUID()
+          state.renderChargingStations = randomUUID()
+        }
+      "
     />
   </Container>
 </template>
-- 
2.34.1