Port index.vue to composition api

dashboard/src/Index.vue

@@ -1,7 +1,7 @@
-<script>
+<script setup>
 
+import { onMounted, ref } from 'vue';
 import { Notification } from 'pankow';
-
 import AppsView from './views/AppsView.vue';
 import AppstoreView from './views/AppstoreView.vue';
 import DomainsView from './views/DomainsView.vue';
@@ -14,10 +14,6 @@ import SupportView from './views/SupportView.vue';
 import UserDirectoryView from './views/UserDirectoryView.vue';
 import VolumesView from './views/VolumesView.vue';
 
-import ProfileModel from './models/ProfileModel.js';
-
-const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
-
 const VIEWS = {
   APPS: 'apps',
   APPSTORE: 'appstore',
@@ -32,79 +28,50 @@ const VIEWS = {
   VOLUMES: 'volumes',
 };
 
-export default {
-  name: 'Index',
-  components: {
-    AppsView,
-    AppstoreView,
-    DomainsView,
-    EventlogView,
-    NetworkView,
-    Notification,
-    ProfileView,
-    ServicesView,
-    SettingsView,
-    SupportView,
-    UserDirectoryView,
-    VolumesView,
-  },
-  data() {
-    return {
-      VIEWS,
-      accessToken: localStorage.token,
-      profile: {},
-      view: ''
-    };
-  },
-  methods: {
-  },
-  async mounted() {
-    if (!localStorage.token) {
-      console.error('Set localStorage.token');
-      return;
-    }
+const view = ref('');
 
-    const profileModel = ProfileModel.create(API_ORIGIN, localStorage.token);
-    this.profile = await profileModel.get();
+function onHashChange() {
+  const v = location.hash.slice(2);
 
-    const that = this;
-    function onHashChange() {
-      const view = location.hash.slice(2);
-
-      if (view === VIEWS.APPS) {
-        that.view = VIEWS.APPS;
-      } else if (view.indexOf(VIEWS.APPSTORE) === 0) {
-        that.view = VIEWS.APPSTORE;
-      } else if (view === VIEWS.DOMAINS) {
-        that.view = VIEWS.DOMAINS;
-      } else if (view === VIEWS.EVENTLOG) {
-        that.view = VIEWS.EVENTLOG;
-      } else if (view === VIEWS.NETWORK) {
-        that.view = VIEWS.NETWORK;
-      } else if (view === VIEWS.PROFILE) {
-        that.view = VIEWS.PROFILE;
-      } else if (view === VIEWS.SERVICES) {
-        that.view = VIEWS.SERVICES;
-      } else if (view === VIEWS.SETTINGS) {
-        that.view = VIEWS.SETTINGS;
-      } else if (view === VIEWS.SUPPORT) {
-        that.view = VIEWS.SUPPORT;
-      }  else if (view === VIEWS.USER_DIRECTORY) {
-        that.view = VIEWS.USER_DIRECTORY;
-      } else if (view === VIEWS.VOLUMES) {
-        that.view = VIEWS.VOLUMES;
-      } else {
-        that.view = '';
-      }
-
-      // hack for layout to avoid consuming space if vue view is not active
-      document.getElementById('app').style.height = that.view ? 'auto' : '0';
-    }
-
-    window.addEventListener('hashchange', onHashChange);
-    onHashChange();
+  if (v === VIEWS.APPS) {
+    view.value = VIEWS.APPS;
+  } else if (v.indexOf(VIEWS.APPSTORE) === 0) {
+    view.value = VIEWS.APPSTORE;
+  } else if (v === VIEWS.DOMAINS) {
+    view.value = VIEWS.DOMAINS;
+  } else if (v === VIEWS.EVENTLOG) {
+    view.value = VIEWS.EVENTLOG;
+  } else if (v === VIEWS.NETWORK) {
+    view.value = VIEWS.NETWORK;
+  } else if (v === VIEWS.PROFILE) {
+    view.value = VIEWS.PROFILE;
+  } else if (v === VIEWS.SERVICES) {
+    view.value = VIEWS.SERVICES;
+  } else if (v === VIEWS.SETTINGS) {
+    view.value = VIEWS.SETTINGS;
+  } else if (v === VIEWS.SUPPORT) {
+    view.value = VIEWS.SUPPORT;
+  }  else if (v === VIEWS.USER_DIRECTORY) {
+    view.value = VIEWS.USER_DIRECTORY;
+  } else if (v === VIEWS.VOLUMES) {
+    view.value = VIEWS.VOLUMES;
+  } else {
+    view.value = '';
   }
-};
+
+  // hack for layout to avoid consuming space if vue view is not active
+  document.getElementById('app').style.height = view.value ? 'auto' : '0';
+}
+
+onMounted(async () => {
+  if (!localStorage.token) {
+    console.error('Set localStorage.token');
+    return;
+  }
+
+  window.addEventListener('hashchange', onHashChange);
+  onHashChange();
+});
 
 </script>