refactor: admin system info to vue3 comp api

ux/src/pages/AdminGeneral.vue

@@ -589,8 +589,8 @@ async function save () {
       type: 'positive',
       message: t('admin.general.saveSuccess')
     })
+    await adminStore.fetchSites()
     if (adminStore.currentSiteId === siteStore.id) {
-      await adminStore.fetchSites()
       siteStore.$patch({
         title: state.config.title,
         description: state.config.description,

ux/src/pages/AdminSystem.vue

@@ -4,8 +4,8 @@ q-page.admin-system
     .col-auto
       img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-processor.svg')
     .col.q-pl-md
-      .text-h5.text-primary.animated.fadeInLeft {{ $t('admin.system.title') }}
-      .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ $t('admin.system.subtitle') }}
+      .text-h5.text-primary.animated.fadeInLeft {{ t('admin.system.title') }}
+      .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.system.subtitle') }}
     .col-auto
       q-btn.q-mr-sm.acrylic-btn(
         icon='las la-question-circle'
@@ -16,20 +16,20 @@ q-page.admin-system
         type='a'
         )
       q-btn.q-mr-sm.acrylic-btn(
-        icon='las la-redo-alt'
+        icon='fa-solid fa-rotate'
         flat
         color='secondary'
-        :loading='loading > 0'
+        :loading='state.loading > 0'
         @click='load'
         )
       q-btn.acrylic-btn(
         ref='copySysInfoBtn'
         flat
-        icon='las la-clipboard'
+        icon='fa-regular fa-clipboard'
         label='Copy System Info'
         color='primary'
         @click=''
-        :disabled='loading > 0'
+        :disabled='state.loading > 0'
       )
   q-separator(inset)
   .row.q-pa-md.q-col-gutter-md
@@ -43,18 +43,18 @@ q-page.admin-system
         q-item
           blueprint-icon(icon='breakable', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.currentVersion') }}
-            q-item-label(caption) {{$t('admin.system.currentVersionHint')}}
+            q-item-label {{ t('admin.system.currentVersion') }}
+            q-item-label(caption) {{t('admin.system.currentVersionHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.currentVersion }}
+            q-item-label.dark-value(caption) {{ state.info.currentVersion }}
         q-separator(inset)
         q-item
           blueprint-icon(icon='cloud-checked', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.latestVersion') }}
-            q-item-label(caption) {{$t('admin.system.latestVersionHint')}}
+            q-item-label {{ t('admin.system.latestVersion') }}
+            q-item-label(caption) {{t('admin.system.latestVersionHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.latestVersion }}
+            q-item-label.dark-value(caption) {{ state.info.latestVersion }}
 
       //- -----------------------
       //- CLIENT
@@ -62,44 +62,44 @@ q-page.admin-system
       q-no-ssr
         q-card.q-mt-md.q-pb-sm.shadow-1
           q-card-section
-            .text-subtitle1 {{$t('admin.system.client')}}
+            .text-subtitle1 {{t('admin.system.client')}}
           q-item
             blueprint-icon(icon='navigation-toolbar-top', :hue-rotate='-45')
             q-item-section
-              q-item-label {{$t('admin.system.browser')}}
-              q-item-label(caption) {{$t('admin.system.browserHint')}}
+              q-item-label {{t('admin.system.browser')}}
+              q-item-label(caption) {{t('admin.system.browserHint')}}
             q-item-section
               q-item-label.dark-value(caption) {{ clientBrowser }}
           q-separator(inset)
           q-item
             blueprint-icon(icon='computer', :hue-rotate='-45')
             q-item-section
-              q-item-label {{$t('admin.system.clientPlatform')}}
-              q-item-label(caption) {{$t('admin.system.clientPlatformHint')}}
+              q-item-label {{t('admin.system.clientPlatform')}}
+              q-item-label(caption) {{t('admin.system.clientPlatformHint')}}
             q-item-section
               q-item-label.dark-value(caption) {{ clientPlatform }}
           q-separator(inset)
           q-item
             blueprint-icon(icon='translation', :hue-rotate='-45')
             q-item-section
-              q-item-label {{$t('admin.system.clientLanguage')}}
-              q-item-label(caption) {{$t('admin.system.clientLanguageHint')}}
+              q-item-label {{t('admin.system.clientLanguage')}}
+              q-item-label(caption) {{t('admin.system.clientLanguageHint')}}
             q-item-section
               q-item-label.dark-value(caption) {{ clientLanguage }}
           q-separator(inset)
           q-item
             blueprint-icon(icon='cookies', :hue-rotate='-45')
             q-item-section
-              q-item-label {{$t('admin.system.clientCookies')}}
-              q-item-label(caption) {{$t('admin.system.clientCookiesHint')}}
+              q-item-label {{t('admin.system.clientCookies')}}
+              q-item-label(caption) {{t('admin.system.clientCookiesHint')}}
             q-item-section
               q-item-label.dark-value(caption) {{ clientCookies }}
           q-separator(inset)
           q-item
             blueprint-icon(icon='widescreen', :hue-rotate='-45')
             q-item-section
-              q-item-label {{$t('admin.system.clientViewport')}}
-              q-item-label(caption) {{$t('admin.system.clientViewportHint')}}
+              q-item-label {{t('admin.system.clientViewport')}}
+              q-item-label(caption) {{t('admin.system.clientViewportHint')}}
             q-item-section
               q-item-label.dark-value(caption) {{ clientViewport }}
 
@@ -109,86 +109,86 @@ q-page.admin-system
       //- -----------------------
       q-card.q-pb-sm.shadow-1
         q-card-section
-          .text-subtitle1 {{$t('admin.system.engines')}}
+          .text-subtitle1 {{t('admin.system.engines')}}
         q-item
           blueprint-icon(icon='nodejs', :hue-rotate='-45')
           q-item-section
             q-item-label Node.js
-            q-item-label(caption) {{$t('admin.system.nodejsHint')}}
+            q-item-label(caption) {{t('admin.system.nodejsHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.nodeVersion }}
+            q-item-label.dark-value(caption) {{ state.info.nodeVersion }}
         q-separator(inset)
         q-item
           blueprint-icon(icon='postgresql', :hue-rotate='-45')
           q-item-section
-            q-item-label {{$t('admin.system.database')}}
-            q-item-label(caption) {{$t('admin.system.databaseHint')}}
+            q-item-label {{t('admin.system.database')}}
+            q-item-label(caption) {{t('admin.system.databaseHint')}}
           q-item-section
             q-item-label.dark-value(caption) PostgreSQL {{dbVersion}}
         q-separator(inset)
         q-item
           blueprint-icon(icon='database', :hue-rotate='-45')
           q-item-section
-            q-item-label {{$t('admin.system.databaseHost')}}
-            q-item-label(caption) {{$t('admin.system.databaseHostHint')}}
+            q-item-label {{t('admin.system.databaseHost')}}
+            q-item-label(caption) {{t('admin.system.databaseHostHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.dbHost }}
+            q-item-label.dark-value(caption) {{ state.info.dbHost }}
 
       //- -----------------------
       //- HOST INFORMATION
       //- -----------------------
       q-card.q-mt-md.q-pb-sm.shadow-1
         q-card-section
-          .text-subtitle1 {{ $t('admin.system.hostInfo') }}
+          .text-subtitle1 {{ t('admin.system.hostInfo') }}
         q-item
           blueprint-icon(:icon='platformLogo', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.os') }}
-            q-item-label(caption) {{$t('admin.system.osHint')}}
+            q-item-label {{ t('admin.system.os') }}
+            q-item-label(caption) {{t('admin.system.osHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ (info.platform === 'docker') ? 'Docker Container (Linux)' : info.operatingSystem }}
+            q-item-label.dark-value(caption) {{ (state.info.platform === 'docker') ? 'Docker Container (Linux)' : state.info.operatingSystem }}
         q-separator(inset)
         q-item
           blueprint-icon(icon='server', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.hostname') }}
-            q-item-label(caption) {{$t('admin.system.hostnameHint')}}
+            q-item-label {{ t('admin.system.hostname') }}
+            q-item-label(caption) {{t('admin.system.hostnameHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.hostname }}
+            q-item-label.dark-value(caption) {{ state.info.hostname }}
         q-separator(inset)
         q-item
           blueprint-icon(icon='processor', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.cpuCores') }}
-            q-item-label(caption) {{$t('admin.system.cpuCoresHint')}}
+            q-item-label {{ t('admin.system.cpuCores') }}
+            q-item-label(caption) {{t('admin.system.cpuCoresHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.cpuCores }}
+            q-item-label.dark-value(caption) {{ state.info.cpuCores }}
         q-separator(inset)
         q-item
           blueprint-icon(icon='memory-slot', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.totalRAM') }}
-            q-item-label(caption) {{$t('admin.system.totalRAMHint')}}
+            q-item-label {{ t('admin.system.totalRAM') }}
+            q-item-label(caption) {{t('admin.system.totalRAMHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.ramTotal }}
+            q-item-label.dark-value(caption) {{ state.info.ramTotal }}
         q-separator(inset)
         q-item
           blueprint-icon(icon='program', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.workingDirectory') }}
-            q-item-label(caption) {{$t('admin.system.workingDirectoryHint')}}
+            q-item-label {{ t('admin.system.workingDirectory') }}
+            q-item-label(caption) {{t('admin.system.workingDirectoryHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.workingDirectory }}
+            q-item-label.dark-value(caption) {{ state.info.workingDirectory }}
         q-separator(inset)
         q-item
           blueprint-icon(icon='automation', :hue-rotate='-45')
           q-item-section
-            q-item-label {{ $t('admin.system.configFile') }}
-            q-item-label(caption) {{$t('admin.system.configFileHint')}}
+            q-item-label {{ t('admin.system.configFile') }}
+            q-item-label(caption) {{t('admin.system.configFileHint')}}
           q-item-section
-            q-item-label.dark-value(caption) {{ info.configFile }}
+            q-item-label.dark-value(caption) {{ state.info.configFile }}
 
-  //-                 v-list-item-action-text {{ $t('admin.system.published') }} {{ info.latestVersionReleaseDate | moment('from') }}
+  //-                 v-list-item-action-text {{ t('admin.system.published') }} {{ state.info.latestVersionReleaseDate | moment('from') }}
   //-           v-card-actions(v-if='info.upgradeCapable && !isLatestVersion && info.platform === `docker`', :class='$vuetify.theme.dark ? `grey darken-3-d5` : `indigo lighten-5`')
   //-             .caption.indigo--text.pl-3(:class='$vuetify.theme.dark ? `text--lighten-4` : ``') Wiki.js can perform the upgrade to the latest version for you.
   //-             v-spacer
@@ -226,180 +226,208 @@ q-page.admin-system
   //-       )
 </template>
 
-<script>
-import _get from 'lodash/get'
+<script setup>
 import cloneDeep from 'lodash/cloneDeep'
 import gql from 'graphql-tag'
-import { createMetaMixin } from 'quasar'
+import { useI18n } from 'vue-i18n'
+import { useMeta, useQuasar } from 'quasar'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import ClipboardJS from 'clipboard'
 
-// import { SelfBuildingSquareSpinner } from 'epic-spinners'
+import { useAdminStore } from 'src/stores/admin'
+import { useSiteStore } from 'src/stores/site'
+import { useDataStore } from 'src/stores/data'
+import { useRoute, useRouter } from 'vue-router'
 
-export default {
-  mixins: [
-    createMetaMixin(function () {
-      return {
-        title: this.$t('admin.system.title')
-      }
-    })
-  ],
-  components: {
-    // SelfBuildingSquareSpinner
-  },
-  data () {
-    return {
-      clip: null,
-      loading: 0,
-      isUpgrading: false,
-      isUpgradingStarted: false,
-      upgradeProgress: 0,
-      info: {
-        platform: ''
+// QUASAR
+
+const $q = useQuasar()
+
+// STORES
+
+const adminStore = useAdminStore()
+const siteStore = useSiteStore()
+const dataStore = useDataStore()
+
+// ROUTER
+
+const router = useRouter()
+const route = useRoute()
+
+// I18N
+
+const { t } = useI18n()
+
+// META
+
+useMeta({
+  title: t('admin.system.title')
+})
+
+// DATA
+
+const state = reactive({
+  clip: null,
+  loading: 0,
+  isUpgrading: false,
+  isUpgradingStarted: false,
+  upgradeProgress: 0,
+  info: {
+    platform: ''
+  }
+})
+
+// REFS
+
+const copySysInfoBtn = ref(null)
+
+// COMPUTED
+
+const dbVersion = computed(() => {
+  return state.info?.dbVersion?.replace(/(?:\r\n|\r|\n)/g, ', ')
+})
+const platformLogo = computed(() => {
+  switch (state.info.platform) {
+    case 'docker':
+      return 'docker-container'
+    case 'darwin':
+      return 'apple-logo'
+    case 'linux':
+      if (this.info.operatingSystem.indexOf('Ubuntu') >= 0) {
+        return 'ubuntu'
+      } else {
+        return 'linux'
       }
-    }
-  },
-  computed: {
-    dbVersion () {
-      return _get(this.info, 'dbVersion', '').replace(/(?:\r\n|\r|\n)/g, ', ')
-    },
-    platformLogo () {
-      switch (this.info.platform) {
-        case 'docker':
-          return 'docker-container'
-        case 'darwin':
-          return 'apple-logo'
-        case 'linux':
-          if (this.info.operatingSystem.indexOf('Ubuntu') >= 0) {
-            return 'ubuntu'
-          } else {
-            return 'linux'
-          }
-        case 'win32':
-          return 'windows8'
-        default:
-          return 'washing-machine'
+    case 'win32':
+      return 'windows8'
+    default:
+      return 'washing-machine'
+  }
+})
+const isLatestVersion = computed(() => {
+  return state.info.currentVersion === state.info.latestVersion
+})
+const clientBrowser = computed(() => {
+  return !import.meta.env.SSR ? navigator.userAgent : ''
+})
+const clientPlatform = computed(() => {
+  return !import.meta.env.SSR ? navigator.platform : ''
+})
+const clientLanguage = computed(() => {
+  return !import.meta.env.SSR ? navigator.language : ''
+})
+const clientCookies = computed(() => {
+  return !import.meta.env.SSR ? navigator.cookieEnabled : ''
+})
+const clientViewport = computed(() => {
+  return !import.meta.env.SSR ? `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}` : ''
+})
+
+// METHODS
+
+async function load () {
+  state.loading++
+  $q.loading.show()
+  const resp = await APOLLO_CLIENT.query({
+    query: gql`
+      query getSystemInfo {
+        systemInfo {
+          configFile
+          cpuCores
+          currentVersion
+          dbHost
+          dbVersion
+          hostname
+          latestVersion
+          latestVersionReleaseDate
+          nodeVersion
+          operatingSystem
+          platform
+          ramTotal
+          upgradeCapable
+          workingDirectory
+        }
       }
-    },
-    isLatestVersion () {
-      return this.info.currentVersion === this.info.latestVersion
-    },
-    clientBrowser () {
-      return !import.meta.env.SSR ? navigator.userAgent : ''
-    },
-    clientPlatform () {
-      return !import.meta.env.SSR ? navigator.platform : ''
-    },
-    clientLanguage () {
-      return !import.meta.env.SSR ? navigator.language : ''
-    },
-    clientCookies () {
-      return !import.meta.env.SSR ? navigator.cookieEnabled : ''
-    },
-    clientViewport () {
-      return !import.meta.env.SSR ? `${document.documentElement.clientWidth}x${document.documentElement.clientHeight}` : ''
+    `,
+    fetchPolicy: 'network-only'
+  })
+  state.info = cloneDeep(resp?.data?.systemInfo)
+  $q.loading.hide()
+  state.loading--
+}
+
+// async function performUpgrade () {
+//   state.isUpgrading = true
+//   state.isUpgradingStarted = false
+//   state.upgradeProgress = 0
+//   this.$store.commit('loadingStart', 'admin-system-upgrade')
+//   try {
+//     const respRaw = await APOLLO_CLIENT.mutate({
+//       mutation: gql`
+//         mutation performUpdate {
+//           system {
+//             performUpgrade {
+//               responseResult {
+//                 succeeded
+//                 errorCode
+//                 slug
+//                 message
+//               }
+//             }
+//           }
+//         }
+//       `
+//     })
+//     const resp = _get(respRaw, 'data.system.performUpgrade.responseResult', {})
+//     if (resp.succeeded) {
+//       this.isUpgradingStarted = true
+//       const progressInterval = setInterval(() => {
+//         this.upgradeProgress += 0.83
+//       }, 500)
+//       setTimeout(() => {
+//         clearInterval(progressInterval)
+//         window.location.reload(true)
+//       }, 60000)
+//     } else {
+//       throw new Error(resp.message)
+//     }
+//   } catch (err) {
+//     this.$store.commit('pushGraphError', err)
+//     this.$store.commit('loadingStop', 'admin-system-upgrade')
+//     this.isUpgrading = false
+//   }
+// }
+
+// MOUNTED
+
+onMounted(() => {
+  load()
+  const clip = new ClipboardJS(copySysInfoBtn.value.$el, {
+    text: () => {
+      return `Wiki.js ${state.info.currentVersion}
+Postgres ${dbVersion.value}
+Node.js ${state.info.nodeVersion}
+OS: ${state.info.operatingSystem}
+Platform: ${state.info.platform}
+CPU Cores: ${state.info.cpuCores}
+Total RAM: ${state.info.ramTotal}`
     }
-  },
-  mounted () {
-    this.load()
-    this.clip = new ClipboardJS(this.$refs.copySysInfoBtn.$el, {
-      text: () => {
-        return `Wiki.js ${this.info.currentVersion}
-Postgres ${this.dbVersion}
-Node.js ${this.info.nodeVersion}
-OS: ${this.info.operatingSystem}
-Platform: ${this.info.platform}
-CPU Cores: ${this.info.cpuCores}
-Total RAM: ${this.info.ramTotal}`
-      }
-    })
+  })
 
-    this.clip.on('success', () => {
-      this.$q.notify({
-        message: 'Info copied successfully',
-        icon: 'las la-clipboard'
-      })
+  clip.on('success', () => {
+    $q.notify({
+      message: 'Info copied successfully',
+      icon: 'las la-clipboard'
     })
-    this.clip.on('error', () => {
-      this.$q.notify({
-        type: 'negative',
-        message: 'Failed to copy to system info'
-      })
+  })
+  clip.on('error', () => {
+    $q.notify({
+      type: 'negative',
+      message: 'Failed to copy to system info'
     })
-  },
-  methods: {
-    async load () {
-      this.loading++
-      this.$q.loading.show()
-      const resp = await this.$apollo.query({
-        query: gql`
-          query getSystemInfo {
-            systemInfo {
-              configFile
-              cpuCores
-              currentVersion
-              dbHost
-              dbVersion
-              hostname
-              latestVersion
-              latestVersionReleaseDate
-              nodeVersion
-              operatingSystem
-              platform
-              ramTotal
-              upgradeCapable
-              workingDirectory
-            }
-          }
-        `,
-        fetchPolicy: 'network-only'
-      })
-      this.info = cloneDeep(resp?.data?.systemInfo)
-      this.$q.loading.hide()
-      this.loading--
-    },
-    async performUpgrade () {
-      this.isUpgrading = true
-      this.isUpgradingStarted = false
-      this.upgradeProgress = 0
-      this.$store.commit('loadingStart', 'admin-system-upgrade')
-      try {
-        const respRaw = await this.$apollo.mutate({
-          mutation: gql`
-            mutation performUpdate {
-              system {
-                performUpgrade {
-                  responseResult {
-                    succeeded
-                    errorCode
-                    slug
-                    message
-                  }
-                }
-              }
-            }
-          `
-        })
-        const resp = _get(respRaw, 'data.system.performUpgrade.responseResult', {})
-        if (resp.succeeded) {
-          this.isUpgradingStarted = true
-          const progressInterval = setInterval(() => {
-            this.upgradeProgress += 0.83
-          }, 500)
-          setTimeout(() => {
-            clearInterval(progressInterval)
-            window.location.reload(true)
-          }, 60000)
-        } else {
-          throw new Error(resp.message)
-        }
-      } catch (err) {
-        this.$store.commit('pushGraphError', err)
-        this.$store.commit('loadingStop', 'admin-system-upgrade')
-        this.isUpgrading = false
-      }
-    }
-  }
-}
+  })
+})
+
 </script>
 
 <style lang='scss'>

ux/src/router/routes.js

@@ -48,7 +48,7 @@ const routes = [
       // { path: 'extensions', component: () => import('../pages/AdminExtensions.vue') },
       // { path: 'mail', component: () => import('../pages/AdminMail.vue') },
       // { path: 'security', component: () => import('../pages/AdminSecurity.vue') },
-      // { path: 'system', component: () => import('../pages/AdminSystem.vue') },
+      { path: 'system', component: () => import('../pages/AdminSystem.vue') },
       // { path: 'utilities', component: () => import('../pages/AdminUtilities.vue') },
       // { path: 'webhooks', component: () => import('../pages/AdminWebhooks.vue') },
       { path: 'flags', component: () => import('../pages/AdminFlags.vue') }