fix(webui): reset toggle button state after action completion (#1547)

* Initial plan

* Add resetToggleButtonState utility and reset toggle buttons on action completion

Co-authored-by: jerome-benoit <6537332+jerome-benoit@users.noreply.github.com>
* [autofix.ci] apply automated fixes

* docs(webui): add JSDoc for resetToggleButtonState utility

Co-authored-by: jerome-benoit <6537332+jerome-benoit@users.noreply.github.com>
* [autofix.ci] apply automated fixes

* fix(webui): reset toggle button state after action completion

Co-authored-by: jerome-benoit <6537332+jerome-benoit@users.noreply.github.com>
* [autofix.ci] apply automated fixes

* Update ui/web/src/composables/Utils.ts

* Update ui/web/src/composables/Utils.ts

* Update ui/web/src/composables/Utils.ts

* docs(webui): improve JSDoc formatting for resetToggleButtonState

Co-authored-by: jerome-benoit <6537332+jerome-benoit@users.noreply.github.com>
* [autofix.ci] apply automated fixes

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jerome-benoit <6537332+jerome-benoit@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Jérôme Benoit <jerome.benoit@piment-noir.org>

diff --git a/ui/web/src/components/actions/AddChargingStations.vue b/ui/web/src/components/actions/AddChargingStations.vue
index ae2dc602105ca276ea132ac385622b565f815124..06733bf40ab9977b05d8e9ba9b1dc7e245fd450f 100644 (file)
--- a/ui/web/src/components/actions/AddChargingStations.vue
+++ b/ui/web/src/components/actions/AddChargingStations.vue
@@ -100,6 +100,7 @@
             console.error('Error at adding charging stations:', error)
           })
           .finally(() => {
+            resetToggleButtonState('add-charging-stations', true)
             $router.push({ name: 'charging-stations' })
           })
       }
@@ -113,7 +114,7 @@
 import { getCurrentInstance, ref, watch } from 'vue'
 
 import Button from '@/components/buttons/Button.vue'
-import { convertToBoolean, randomUUID } from '@/composables'
+import { convertToBoolean, randomUUID, resetToggleButtonState } from '@/composables'
 
 const state = ref<{
   autoStart: boolean

diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index ae62b05f2d53441e28ba81163a8b459b2f4e8de5..c7affb90eff57eef990c77a4b58452fb7339dd1b 100644 (file)
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -26,6 +26,7 @@
             console.error('Error at setting supervision url:', error)
           })
           .finally(() => {
+            resetToggleButtonState(`${props.hashId}-set-supervision-url`, true)
             $router.push({ name: 'charging-stations' })
           })
       }
@@ -39,8 +40,9 @@
 import { ref } from 'vue'
 
 import Button from '@/components/buttons/Button.vue'
+import { resetToggleButtonState } from '@/composables'
 
-defineProps<{
+const props = defineProps<{
   chargingStationId: string
   hashId: string
 }>()

diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index 901d97bf85a8c8515a6591cf33658e383bb8b9c3..a93909736c653e7926bb56a38c9b820895d990fb 100644 (file)
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -47,12 +47,17 @@
                   console.error('Error at starting transaction:', error)
                 })
                 .finally(() => {
+                  resetToggleButtonState(
+                    `${props.hashId}-${props.connectorId}-start-transaction`,
+                    true
+                  )
                   $router.push({ name: 'charging-stations' })
                 })
             })
             .catch((error: Error) => {
               $toast.error('Error at authorizing RFID tag')
               console.error('Error at authorizing RFID tag:', error)
+              resetToggleButtonState(`${props.hashId}-${props.connectorId}-start-transaction`, true)
               $router.push({ name: 'charging-stations' })
             })
         } else {
@@ -66,6 +71,7 @@
               console.error('Error at starting transaction:', error)
             })
             .finally(() => {
+              resetToggleButtonState(`${props.hashId}-${props.connectorId}-start-transaction`, true)
               $router.push({ name: 'charging-stations' })
             })
         }
@@ -80,9 +86,9 @@
 import { ref } from 'vue'
 
 import Button from '@/components/buttons/Button.vue'
-import { convertToBoolean, convertToInt } from '@/composables'
+import { convertToBoolean, convertToInt, resetToggleButtonState } from '@/composables'
 
-defineProps<{
+const props = defineProps<{
   chargingStationId: string
   connectorId: string
   hashId: string

diff --git a/ui/web/src/composables/Utils.ts b/ui/web/src/composables/Utils.ts
index fef017132a6b903b0676d2dd0099461af83f3f9f..f490e8b7532fec13e1335ce2552e22209b372c6d 100644 (file)
--- a/ui/web/src/composables/Utils.ts
+++ b/ui/web/src/composables/Utils.ts
@@ -54,6 +54,16 @@ export const getLocalStorage = (): Storage => {
   return localStorage
 }
 
+/**
+ * Resets the state of a toggle button by removing its entry from localStorage.
+ * @param id - The identifier of the toggle button
+ * @param shared - Whether the toggle button is shared
+ */
+export const resetToggleButtonState = (id: string, shared = false): void => {
+  const key = shared ? `shared-toggle-button-${id}` : `toggle-button-${id}`
+  deleteFromLocalStorage(key)
+}
+
 export const randomUUID = (): `${string}-${string}-${string}-${string}-${string}` => {
   return crypto.randomUUID()
 }

diff --git a/ui/web/src/composables/index.ts b/ui/web/src/composables/index.ts
index f4a165a80a64277ac888a828600c2b5e8586965e..ab6d17992b43e17ad9bd164aa6a1afa216c8eef3 100644 (file)
--- a/ui/web/src/composables/index.ts
+++ b/ui/web/src/composables/index.ts
@@ -6,6 +6,7 @@ export {
   getFromLocalStorage,
   getLocalStorage,
   randomUUID,
+  resetToggleButtonState,
   setToLocalStorage,
   useUIClient,
 } from './Utils'