Update Vue components to composition API

web/siteplan/src/App.vue

@@ -13,73 +13,67 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import Menubar from '@/components/toolbar/Menubar.vue'
 import Toolbar from '@/components/toolbar/Toolbar.vue'
 import axios from 'axios'
-import { Options, Vue } from 'vue-class-component'
+import { onMounted, ref } from 'vue'
 import SvgCatalogService from './service/SvgCatalogService'
 import { store } from './store'
 import Configuration from './util/Configuration'
 import PlanProToolboxTest from './util/PlanProToolboxTest'
 import { ToolboxConfiguration } from './util/ToolboxConfiguration'
-@Options({
-  async created () {
-    store.commit('setLoading', true)
-    // Download the siteplan font
-    await axios({
-      method: 'GET',
-      url: 'font',
-      responseType: 'blob'
-    })
-      .then(response => {
-        const reader = new FileReader()
-        reader.onload = () => {
-          store.commit(
-            'setSiteplanfont',
-            `
+
+const isShowMenu = ref(false)
+const loading = ref(true)
+
+function showMenu (value: boolean): void {
+  isShowMenu.value = value
+}
+
+onMounted (async () => {
+  store.commit('setLoading', true)
+  // Download the siteplan font
+  await axios({
+    method: 'GET',
+    url: 'font',
+    responseType: 'blob'
+  })
+    .then(response => {
+      const reader = new FileReader()
+      reader.onload = () => {
+        store.commit(
+          'setSiteplanfont',
+          `
         @font-face {
           font-family: 'siteplanfont';
           src: url('${reader.result}') format('truetype');
         }`
-          )
-        }
-        reader.readAsDataURL(new Blob([response.data]))
-      })
-      .catch(() => {
-        console.warn('Siteplan Font not available')
-      })
-    // Wait until the svg catalog service is ready
-    await SvgCatalogService.getInstance().isReady()
-    // Download the toolbox configuration
-    await axios
-      .get<ToolboxConfiguration>('/configuration.json')
-      .then(response => {
-        store.commit('setpptConfiguration', response.data)
-        store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
-        store.commit('setPlanProModelType', response.data.planproModelType)
-        // run unit tests
-        if (Configuration.developmentMode()) {
-          PlanProToolboxTest.run()
-        }
+        )
+      }
+      reader.readAsDataURL(new Blob([response.data]))
+    })
+    .catch(() => {
+      console.warn('Siteplan Font not available')
+    })
+  // Wait until the svg catalog service is ready
+  await SvgCatalogService.getInstance().isReady()
+  // Download the toolbox configuration
+  await axios
+    .get<ToolboxConfiguration>('/configuration.json')
+    .then(response => {
+      store.commit('setpptConfiguration', response.data)
+      store.commit('setSheetCutCRS', response.data.defaultSheetCutCRS)
+      store.commit('setPlanProModelType', response.data.planproModelType)
+      // run unit tests
+      if (Configuration.developmentMode()) {
+        PlanProToolboxTest.run()
+      }
 
-        this.loading = false
-      })
-  },
-  components: {
-    Toolbar,
-    Menubar
-  }
+      loading.value = false
+    })
 })
-export default class App extends Vue {
-  isShowMenu = false
-  altClientHeight = 0
-  loading = true
 
-  showMenu (value: boolean): void {
-    this.isShowMenu = value
-  }
-}
 </script>
 <style>
 html,
@@ -95,13 +89,16 @@ body {
   height: 100vh;
   flex-direction: column;
 }
+
 #view {
   display: flex;
   flex: 1;
 }
+
 #menubar {
   flex-grow: 1;
 }
+
 #mainView {
   flex-grow: 5;
 }