feat(admin): migrate nav + auth to vue 3 composition, convert lodash to lodash-es

ux/package.json

@@ -69,6 +69,7 @@
     "js-cookie": "3.0.1",
     "jwt-decode": "3.1.2",
     "lodash": "4.17.21",
+    "lodash-es": "4.17.21",
     "luxon": "2.4.0",
     "pinia": "2.0.14",
     "pug": "3.0.2",

ux/src/layouts/AdminLayout.vue

@@ -95,7 +95,7 @@ q-layout.admin(view='hHh Lpr lff')
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-tree-structure.svg')
           q-item-section {{ t('admin.navigation.title') }}
-        q-item(:to='`/_admin/` + adminStore.currentSiteId + `/rendering`', v-ripple, active-class='bg-primary text-white')
+        q-item(:to='`/_admin/` + adminStore.currentSiteId + `/rendering`', v-ripple, active-class='bg-primary text-white', disabled)
           q-item-section(avatar)
             q-icon(name='img:/_assets/icons/fluent-rich-text-converter.svg')
           q-item-section {{ t('admin.rendering.title') }}

ux/src/pages/AdminApi.vue

@@ -116,7 +116,7 @@ q-page.admin-api
 
 <script setup>
 import gql from 'graphql-tag'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { useMeta, useQuasar } from 'quasar'
 import { computed, onMounted, reactive, watch } from 'vue'

ux/src/pages/AdminExtensions.vue

@@ -99,7 +99,7 @@ q-page.admin-extensions
 
 <script setup>
 import gql from 'graphql-tag'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { useMeta, useQuasar } from 'quasar'
 import { computed, onMounted, reactive, watch } from 'vue'

ux/src/pages/AdminFlags.vue

@@ -82,7 +82,7 @@ q-page.admin-flags
 <script setup>
 import gql from 'graphql-tag'
 import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue'
-import _transform from 'lodash/transform'
+import { transform } from 'lodash-es'
 import { useMeta, useQuasar } from 'quasar'
 import { useI18n } from 'vue-i18n'
 

ux/src/pages/AdminGeneral.vue

@@ -391,7 +391,7 @@ q-page.admin-general
 
 <script setup>
 import gql from 'graphql-tag'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { useMeta, useQuasar } from 'quasar'
 import { onMounted, reactive, watch } from 'vue'

ux/src/pages/AdminGroups.vue

@@ -93,7 +93,7 @@ q-page.admin-groups
 
 <script setup>
 import gql from 'graphql-tag'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { useMeta, useQuasar } from 'quasar'
 import { computed, onBeforeUnmount, onMounted, reactive, watch } from 'vue'

ux/src/pages/AdminLocale.vue

@@ -143,9 +143,7 @@ q-page.admin-locale
 
 <script setup>
 import gql from 'graphql-tag'
-import filter from 'lodash/filter'
-import _get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep, filter } from 'lodash-es'
 
 import LocaleInstallDialog from '../components/LocaleInstallDialog.vue'
 
@@ -278,7 +276,7 @@ async function download (lc) {
       locale: lc.code
     }
   })
-  const resp = _get(respRaw, 'data.localization.downloadLocale.responseResult', {})
+  const resp = respRaw?.data?.localization?.downloadLocale?.responseResult || {}
   if (resp.succeeded) {
     lc.isDownloading = false
     lc.isInstalled = true
@@ -331,7 +329,7 @@ async function save () {
       namespaces: state.namespaces
     }
   })
-  const resp = _get(respRaw, 'data.localization.updateLocale.responseResult', {})
+  const resp = respRaw?.data?.localization?.updateLocale?.responseResult || {}
   if (resp.succeeded) {
     // Change UI language
     this.$i18n.locale = state.selectedLocale

ux/src/pages/AdminLogin.vue

@@ -176,8 +176,7 @@ q-page.admin-login
 </template>
 
 <script setup>
-import { get } from 'vuex-pathify'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import gql from 'graphql-tag'
 import draggable from 'vuedraggable'
 

ux/src/pages/AdminMail.vue

@@ -298,9 +298,7 @@ q-page.admin-mail
 </template>
 
 <script setup>
-import toSafeInteger from 'lodash/toSafeInteger'
-import _get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep, toSafeInteger } from 'lodash-es'
 import gql from 'graphql-tag'
 
 import { useI18n } from 'vue-i18n'
@@ -477,7 +475,7 @@ async function sendTest () {
           sendMailTest(
             recipientEmail: $recipientEmail
           ) {
-            status {
+            operation {
               succeeded
               slug
               message
@@ -489,8 +487,8 @@ async function sendTest () {
         recipientEmail: state.testEmail
       }
     })
-    if (!_get(resp, 'data.sendMailTest.status.succeeded', false)) {
-      throw new Error(_get(resp, 'data.sendMailTest.status.message', 'An unexpected error occurred.'))
+    if (!resp?.data?.sendMailTest?.operation?.succeeded) {
+      throw new Error(resp?.data?.sendMailTest?.operation?.message || 'An unexpected error occurred.')
     }
 
     state.testEmail = ''

ux/src/pages/AdminSecurity.vue

@@ -323,9 +323,8 @@ q-page.admin-mail
 </template>
 
 <script setup>
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import gql from 'graphql-tag'
-import _get from 'lodash/get'
 import filesize from 'filesize'
 import filesizeParser from 'filesize-parser'
 
@@ -492,7 +491,7 @@ async function save () {
         uploadMaxFileSize: filesizeParser(state.humanUploadMaxFileSize || '0')
       }
     })
-    const resp = _get(respRaw, 'data.updateSystemSecurity.status', {})
+    const resp = respRaw?.data?.updateSystemSecurity?.status || {}
     if (resp.succeeded) {
       $q.notify({
         type: 'positive',

ux/src/pages/AdminStorage.vue

@@ -583,10 +583,8 @@ q-page.admin-storage
 </template>
 
 <script setup>
-import find from 'lodash/find'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep, find, transform } from 'lodash-es'
 import gql from 'graphql-tag'
-import transform from 'lodash/transform'
 import * as VNetworkGraph from 'v-network-graph'
 
 import { useI18n } from 'vue-i18n'

ux/src/pages/AdminSystem.vue

@@ -227,7 +227,7 @@ q-page.admin-system
 </template>
 
 <script setup>
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import gql from 'graphql-tag'
 import { useI18n } from 'vue-i18n'
 import { useMeta, useQuasar } from 'quasar'

ux/src/pages/AdminTheme.vue

@@ -203,8 +203,7 @@ q-page.admin-theme
 
 <script setup>
 import gql from 'graphql-tag'
-import cloneDeep from 'lodash/cloneDeep'
-import startCase from 'lodash/startCase'
+import { cloneDeep, startCase } from 'lodash-es'
 import { useI18n } from 'vue-i18n'
 import { useMeta, useQuasar } from 'quasar'
 import { onMounted, reactive, watch } from 'vue'

ux/src/pages/AdminUsers.vue

@@ -106,7 +106,7 @@ q-page.admin-groups
 
 <script setup>
 import gql from 'graphql-tag'
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import { DateTime } from 'luxon'
 import { useI18n } from 'vue-i18n'
 import { useMeta, useQuasar } from 'quasar'

ux/src/pages/AdminWebhooks.vue

@@ -92,7 +92,7 @@ q-page.admin-webhooks
 </template>
 
 <script setup>
-import cloneDeep from 'lodash/cloneDeep'
+import { cloneDeep } from 'lodash-es'
 import gql from 'graphql-tag'
 
 import { useI18n } from 'vue-i18n'

ux/src/router/routes.js

@@ -35,12 +35,12 @@ const routes = [
       { path: ':siteid/editors', component: () => import('../pages/AdminEditors.vue') },
       { path: ':siteid/locale', component: () => import('../pages/AdminLocale.vue') },
       { path: ':siteid/login', component: () => import('../pages/AdminLogin.vue') },
-      // { path: ':siteid/navigation', component: () => import('../pages/AdminNavigation.vue') },
+      { path: ':siteid/navigation', component: () => import('../pages/AdminNavigation.vue') },
       // { path: ':siteid/rendering', component: () => import('../pages/AdminRendering.vue') },
       { path: ':siteid/storage/:id?', component: () => import('../pages/AdminStorage.vue') },
       { path: ':siteid/theme', component: () => import('../pages/AdminTheme.vue') },
       // -> Users
-      // { path: 'auth', component: () => import('../pages/AdminAuth.vue') },
+      { path: 'auth', component: () => import('../pages/AdminAuth.vue') },
       { path: 'groups/:id?/:section?', component: () => import('../pages/AdminGroups.vue') },
       { path: 'users/:id?/:section?', component: () => import('../pages/AdminUsers.vue') },
       // -> System