fix(ui): rerender shared toggle buttons properly

Signed-off-by: Jérôme Benoit <jerome.benoit@sap.com>

diff --git a/ui/web/src/components/buttons/ToggleButton.vue b/ui/web/src/components/buttons/ToggleButton.vue
index 0c36be2292f1406096f1149fcf887b09dda966a6..dd1805ca11a1e43dde08d3bb726a018177f88b29 100644 (file)
--- 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 d3e37d637e096ce456acc610c16da2b90762171f..36bb971f6c3e0316a3432643aedb4b9463a26e6a 100644 (file)
--- 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 375fb3bc0e6f53d52ed679d89b340f7d6a69e34c..c43616f7567b1b398ae4bf0c772fdcfa20f960ff 100644 (file)
--- 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 9371d9622c88f8977a7fb371747b7ce98ee6ce9c..7c4105ae5267133efb9ebc73d2ec648bf2c8646e 100644 (file)
--- 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 cbd8a34ba64bf13ad17f8e57a679cb67aa455c63..c49449f636080a922362f3618d4334ff3354bada 100644 (file)
--- 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>