From 7e31543058b67b8ca9991b01820f88ab7f4f16b0 Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Tue, 5 Mar 2024 21:32:25 +0100
Subject: [PATCH] refactor: cleanup vue.js global properties usage
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>
---
 .../actions/AddChargingStations.vue           | 18 +++-------
 .../components/actions/SetSupervisionUrl.vue  |  6 ++--
 .../components/actions/StartTransaction.vue   |  6 ++--
 ui/web/src/global-properties.d.ts             | 10 ++++++
 ui/web/src/main.ts                            | 18 +++++-----
 ui/web/src/views/ChargingStationsView.vue     | 35 ++++++++-----------
 6 files changed, 41 insertions(+), 52 deletions(-)
 create mode 100644 ui/web/src/global-properties.d.ts

diff --git a/ui/web/src/components/actions/AddChargingStations.vue b/ui/web/src/components/actions/AddChargingStations.vue
index 5eb51f35..2cac1322 100644
--- a/ui/web/src/components/actions/AddChargingStations.vue
+++ b/ui/web/src/components/actions/AddChargingStations.vue
@@ -4,11 +4,8 @@
   <select v-model="state.template">
     <option disabled value="">Please select a template</option>
     <option
-      v-for="template in app?.appContext.config.globalProperties.$templates"
-      v-show="
-        Array.isArray(app?.appContext.config.globalProperties.$templates) &&
-        app.appContext.config.globalProperties.$templates.length > 0
-      "
+      v-for="template in $templates.value"
+      v-show="Array.isArray($templates.value) && $templates.value.length > 0"
     >
       {{ template }}
     </option>
@@ -71,7 +68,7 @@
     id="action-button"
     @click="
       () => {
-        uiClient
+        $uiClient
           .addChargingStations(state.template, state.numberOfStations, {
             supervisionUrls: state.supervisionUrl.length > 0 ? state.supervisionUrl : undefined,
             autoStart: convertToBoolean(state.autoStart),
@@ -97,8 +94,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, ref } from 'vue'
-import { useToast } from 'vue-toast-notification'
+import { ref } from 'vue'
 import Button from '@/components/buttons/Button.vue'
 import { convertToBoolean } from '@/composables'
 
@@ -119,12 +115,6 @@ const state = ref<{
   ocppStrictCompliance: true,
   enableStatistics: false
 })
-
-const app = getCurrentInstance()
-
-const uiClient = app?.appContext.config.globalProperties.$uiClient
-
-const $toast = useToast()
 </script>
 
 <style>
diff --git a/ui/web/src/components/actions/SetSupervisionUrl.vue b/ui/web/src/components/actions/SetSupervisionUrl.vue
index 2a419677..887b1d4c 100644
--- a/ui/web/src/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/components/actions/SetSupervisionUrl.vue
@@ -14,7 +14,7 @@
     id="action-button"
     @click="
       () => {
-        uiClient
+        $uiClient
           .setSupervisionUrl(hashId, state.supervisionUrl)
           .then(() => {
             $toast.success('Supervision url successfully set')
@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, ref } from 'vue'
+import { ref } from 'vue'
 import Button from '@/components/buttons/Button.vue'
 
 defineProps<{
@@ -45,8 +45,6 @@ defineProps<{
 const state = ref<{ supervisionUrl: string }>({
   supervisionUrl: ''
 })
-
-const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 </script>
 
 <style>
diff --git a/ui/web/src/components/actions/StartTransaction.vue b/ui/web/src/components/actions/StartTransaction.vue
index f2a3242f..18145d8d 100644
--- a/ui/web/src/components/actions/StartTransaction.vue
+++ b/ui/web/src/components/actions/StartTransaction.vue
@@ -9,7 +9,7 @@
     id="action-button"
     @click="
       () => {
-        uiClient
+        $uiClient
           .startTransaction(hashId, convertToInt(connectorId), state.idTag)
           .then(() => {
             $toast.success('Transaction successfully started')
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { getCurrentInstance, ref } from 'vue'
+import { ref } from 'vue'
 import Button from '@/components/buttons/Button.vue'
 import { convertToInt } from '@/composables'
 
@@ -42,8 +42,6 @@ defineProps<{
 const state = ref<{ idTag: string }>({
   idTag: ''
 })
-
-const uiClient = getCurrentInstance()?.appContext.config.globalProperties.$uiClient
 </script>
 
 <style>
diff --git a/ui/web/src/global-properties.d.ts b/ui/web/src/global-properties.d.ts
new file mode 100644
index 00000000..f20cc81a
--- /dev/null
+++ b/ui/web/src/global-properties.d.ts
@@ -0,0 +1,10 @@
+export {}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $configuration: Ref<ConfigurationData>
+    $templates: Ref<string[]>
+    $chargingStations: Ref<ChargingStationData[]>
+    $uiClient: UIClient
+  }
+}
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 5d34ae91..8181374e 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -1,6 +1,6 @@
-import { type App as AppType, createApp } from 'vue'
+import { type App as AppType, createApp, ref } from 'vue'
 import ToastPlugin from 'vue-toast-notification'
-import type { ConfigurationData } from '@/types'
+import type { ChargingStationData, ConfigurationData } from '@/types'
 import { router } from '@/router'
 import { UIClient, getFromLocalStorage, setToLocalStorage } from '@/composables'
 import App from '@/App.vue'
@@ -19,24 +19,24 @@ const initializeApp = (app: AppType, config: ConfigurationData) => {
     config.uiServer = [config.uiServer]
   }
   if (app.config.globalProperties.$configuration == null) {
-    app.config.globalProperties.$configuration = config
+    app.config.globalProperties.$configuration = ref<ConfigurationData>(config)
   }
-  if (!Array.isArray(app.config.globalProperties.$templates)) {
-    app.config.globalProperties.$templates = []
+  if (!Array.isArray(app.config.globalProperties.$templates.value)) {
+    app.config.globalProperties.$templates = ref<string[]>([])
   }
-  if (!Array.isArray(app.config.globalProperties.$chargingStations)) {
-    app.config.globalProperties.$chargingStations = []
+  if (!Array.isArray(app.config.globalProperties.$chargingStations.value)) {
+    app.config.globalProperties.$chargingStations = ref<ChargingStationData[]>([])
   }
   if (
     getFromLocalStorage<number | undefined>('uiServerConfigurationIndex', undefined) == null ||
     getFromLocalStorage<number>('uiServerConfigurationIndex', 0) >
-      app.config.globalProperties.$configuration.uiServer.length - 1
+      app.config.globalProperties.$configuration.value.uiServer.length - 1
   ) {
     setToLocalStorage<number>('uiServerConfigurationIndex', 0)
   }
   if (app.config.globalProperties.$uiClient == null) {
     app.config.globalProperties.$uiClient = UIClient.getInstance(
-      app.config.globalProperties.$configuration.uiServer[
+      app.config.globalProperties.$configuration.value.uiServer[
         getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
       ]
     )
diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index 621c7122..a3f91ec9 100644
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -13,13 +13,9 @@
               if (
                 getFromLocalStorage<number>('uiServerConfigurationIndex', 0) !== state.uiServerIndex
               ) {
-                uiClient.setConfiguration(
-                  app?.appContext.config.globalProperties.$configuration.uiServer[
-                    state.uiServerIndex
-                  ]
-                )
+                $uiClient.setConfiguration($configuration.value.uiServer[state.uiServerIndex])
                 registerWSEventListeners()
-                uiClient.registerWSEventListener(
+                $uiClient.registerWSEventListener(
                   'open',
                   () => {
                     setToLocalStorage<number>('uiServerConfigurationIndex', state.uiServerIndex)
@@ -29,15 +25,15 @@
                   },
                   { once: true }
                 )
-                uiClient.registerWSEventListener(
+                $uiClient.registerWSEventListener(
                   'error',
                   () => {
                     state.uiServerIndex = getFromLocalStorage<number>(
                       'uiServerConfigurationIndex',
                       0
                     )
-                    uiClient.setConfiguration(
-                      app?.appContext.config.globalProperties.$configuration.uiServer[
+                    $uiClient.setConfiguration(
+                      $configuration.value.uiServer[
                         getFromLocalStorage<number>('uiServerConfigurationIndex', 0)
                       ]
                     )
@@ -98,12 +94,9 @@
       />
     </Container>
     <CSTable
-      v-show="
-        Array.isArray(app?.appContext.config.globalProperties.$chargingStations) &&
-        app.appContext.config.globalProperties.$chargingStations.length > 0
-      "
+      v-show="Array.isArray($chargingStations.value) && $chargingStations.value.length > 0"
       :key="state.renderChargingStations"
-      :charging-stations="app?.appContext.config.globalProperties.$chargingStations"
+      :charging-stations="$chargingStations.value"
       @need-refresh="
         () => {
           state.renderAddChargingStations = randomUUID()
@@ -171,7 +164,7 @@ const app = getCurrentInstance()
 
 const clearChargingStations = (): void => {
   if (app != null) {
-    app.appContext.config.globalProperties.$chargingStations = []
+    app.appContext.config.globalProperties.$chargingStations.value = []
   }
   state.value.renderChargingStations = randomUUID()
 }
@@ -206,12 +199,12 @@ const getTemplates = (): void => {
       .listTemplates()
       .then((response: ResponsePayload) => {
         if (app != null) {
-          app.appContext.config.globalProperties.$templates = response.templates
+          app.appContext.config.globalProperties.$templates.value = response.templates
         }
       })
       .catch((error: Error) => {
         if (app != null) {
-          app.appContext.config.globalProperties.$templates = []
+          app.appContext.config.globalProperties.$templates.value = []
         }
         $toast.error('Error at fetching charging station templates')
         console.error('Error at fetching charging station templates:', error)
@@ -229,12 +222,12 @@ const getChargingStations = (): void => {
       .listChargingStations()
       .then((response: ResponsePayload) => {
         if (app != null) {
-          app.appContext.config.globalProperties.$chargingStations = response.chargingStations
+          app.appContext.config.globalProperties.$chargingStations.value = response.chargingStations
         }
       })
       .catch((error: Error) => {
         if (app != null) {
-          app.appContext.config.globalProperties.$chargingStations = []
+          app.appContext.config.globalProperties.$chargingStations.value = []
         }
         $toast.error('Error at fetching charging stations')
         console.error('Error at fetching charging stations:', error)
@@ -273,7 +266,7 @@ onUnmounted(() => {
 })
 
 const uiServerConfigurations: { index: number; configuration: UIServerConfigurationSection }[] =
-  app?.appContext.config.globalProperties.$configuration.uiServer.map(
+  app?.appContext.config.globalProperties.$configuration.value.uiServer.map(
     (configuration: UIServerConfigurationSection, index: number) => ({
       index,
       configuration
@@ -299,7 +292,7 @@ const stopSimulator = (): void => {
     .stopSimulator()
     .then(() => {
       if (app != null) {
-        app.appContext.config.globalProperties.$chargingStations = []
+        app.appContext.config.globalProperties.$chargingStations.value = []
       }
       $toast.success('Simulator successfully stopped')
     })
-- 
2.34.1