Updated:

- new appinitialization based on 'getPiniaInstance' error
- core updates for basic functionality of app

web-app/.env

@@ -1,2 +1 @@
 VITE_VUE_APP_JOIN_COMMUNITY_LINK=https://merginmaps.com/community/join
-PUBLIC_PATH=/

web-app/package.json

@@ -90,8 +90,9 @@
     "typescript": "^5.0.4",
     "unplugin-vue-components": "^0.25.1",
     "url": "^0.11.0",
-    "vite": "^4.3.9",
+    "vite": "^4.4.7",
     "vite-plugin-dts": "^2.2.0",
+    "vite-plugin-static-copy": "^0.17.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vue-tsc": "^1.6.5",
     "vue-typegen": "^0.2.0",

web-app/packages/admin-app/src/App.vue

@@ -49,6 +49,7 @@ import { CheckForUpdates } from '@mergin/admin-lib'
 import {
   DialogWindows,
   GlobalWarning,
+  initCsrfToken,
   initRequestInterceptors,
   initResponseInterceptors,
   Notifications,
@@ -110,6 +111,10 @@ export default defineComponent({
     }
   },
   async created() {
+    // App initialization
+    const response = await this.initApp()
+    initCsrfToken(response)
+    await this.fetchConfig()
     if (this.loggedUser) {
       // here is loaded current workspace on startup (and reloaded in watcher when user has changed)
       await this.checkCurrentWorkspace()
@@ -130,7 +135,7 @@ export default defineComponent({
     initResponseInterceptors(resetUser)
   },
   methods: {
-    ...mapActions(useInstanceStore, ['fetchPing']),
+    ...mapActions(useInstanceStore, ['fetchPing', 'initApp', 'fetchConfig']),
     ...mapActions(useNotificationStore, { notificationError: 'error' }),
     ...mapActions(useUserStore, ['checkCurrentWorkspace', 'updateLoggedUser']),
     ...mapActions(useAppStore, ['setServerError'])

web-app/packages/admin-app/src/app.ts

@@ -15,7 +15,7 @@ import {
   dateUtils,
   textUtils,
   numberUtils,
-  http,
+  getHttpService,
   MerginComponentUuidMixin,
   useAppStore
 } from '@mergin/lib'
@@ -33,7 +33,7 @@ import vuetify from '@/plugins/vuetify/vuetify'
 Vue.config.productionTip = false
 Vue.use(PortalVue)
 Vue.use(VueMeta)
-Vue.prototype.$http = http
+Vue.prototype.$http = getHttpService()
 
 Vue.filter('filesize', (value, unit, digits = 2, minUnit = 'B') => {
   return numberUtils.formatFileSize(value, unit, digits, minUnit)
@@ -50,12 +50,6 @@ Vue.mixin(MerginComponentUuidMixin)
 
 const createMerginApp = (): Vue => {
   const pinia = getPiniaInstance()
-  addRouterToPinia(router)
-
-  router.onError((e) => {
-    const appStore = useAppStore(pinia)
-    appStore.setServerError(e.message)
-  })
 
   return new Vue({
     router,

web-app/packages/admin-app/src/main.ts

@@ -6,54 +6,48 @@ import { AdminModule } from '@mergin/admin-lib'
 import {
   DialogModule,
   FormModule,
-  http,
-  initCsrfToken,
+  getHttpService,
   InstanceModule,
   LayoutModule,
   moduleUtils,
   NotificationModule,
   ProjectModule,
   UserModule,
-  useInstanceStore
+  useAppStore
 } from '@mergin/lib'
 
 import { createMerginApp } from './app'
-import router from './router'
-import { getPiniaInstance } from './store'
-
-// initialize modules
-moduleUtils.initializeAppModule(LayoutModule)
-moduleUtils.initializeAppModule(UserModule, {
-  httpService: http,
-  routerService: router
-})
-moduleUtils.initializeAppModule(NotificationModule)
-moduleUtils.initializeAppModule(DialogModule)
-moduleUtils.initializeAppModule(FormModule)
-moduleUtils.initializeAppModule(ProjectModule, {
-  httpService: http,
-  routerService: router
-})
-moduleUtils.initializeAppModule(InstanceModule, {
-  httpService: http
-})
-moduleUtils.initializeAppModule(AdminModule, {
-  httpService: http,
-  routerService: router
-})
+import { createRouter } from './router'
+import { createPiniaInstance } from './store'
 
 async function main() {
   createPiniaInstance()
-  const pinia = getPiniaInstance()
-
-  const instanceStore = useInstanceStore(pinia)
-  // App initialization
-  const response = await instanceStore.initApp()
-  initCsrfToken(response)
-  await instanceStore.fetchConfig()
+  const httpService = getHttpService()
+  // initialize modules
+  moduleUtils.initializeAppModule(LayoutModule)
+  moduleUtils.initializeAppModule(UserModule, {
+    httpService
+  })
+  moduleUtils.initializeAppModule(NotificationModule)
+  moduleUtils.initializeAppModule(DialogModule)
+  moduleUtils.initializeAppModule(FormModule)
+  moduleUtils.initializeAppModule(ProjectModule, {
+    httpService
+  })
+  moduleUtils.initializeAppModule(InstanceModule, {
+    httpService
+  })
+  moduleUtils.initializeAppModule(AdminModule, {
+    httpService
+  })
+  createMerginApp().$mount('#app')
 
-  const app = createMerginApp()
-  app.$mount('#app')
+  const router = createRouter()
+  router.onError((e) => {
+    console.error(e)
+    const appStore = useAppStore()
+    appStore.setServerError(e.message)
+  })
 }
 
 main()

web-app/packages/admin-app/src/router.ts

@@ -2,25 +2,229 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 
-import { NotFoundView, routeUtils, Router } from '@mergin/lib'
+import {
+  NotFoundView,
+  routeUtils,
+  Router,
+  errorUtils,
+  FileDetailView,
+  FileBrowserView,
+  ProjectVersionsView,
+  VersionDetailView,
+  FileVersionDetailView,
+  useUserStore
+} from '@mergin/lib'
 import Vue from 'vue'
 
-Vue.use(Router)
+import {
+  AccountView,
+  ProfileView,
+  SettingsView,
+  ProjectSettingsView,
+  ProjectsView,
+  ProjectView,
+  LoginView,
+  useAdminStore
+} from '@mergin/admin-lib'
+import { addRouterToPinia } from './store'
 
 const router = new Router({
   mode: 'history',
-  base: import.meta.env.BASE_URL,
-  routes: [
+  base: import.meta.env.BASE_URL
+})
+
+Vue.use(Router)
+
+export const createRouter = () => {
+  const routes = [
     {
       path: '*',
       component: NotFoundView
+    },
+    {
+      beforeEnter: (to, from, next) => {
+        const userStore = useUserStore()
+        if (userStore.isSuperUser) {
+          next('/dashboard')
+        } else {
+          next()
+        }
+      },
+      path: '/login/:reset?',
+      name: 'login',
+      component: LoginView,
+      props: true,
+      meta: { public: true }
+    },
+    {
+      path: '/',
+      name: 'admin',
+      alias: '/dashboard',
+      beforeEnter: (to, from, next) => {
+        next('/accounts')
+      },
+      props: {
+        default: true
+      }
+    },
+    {
+      path: '/accounts',
+      name: 'accounts',
+      component: AccountView,
+      props: true,
+      beforeEnter: (to, from, next) => {
+        const userStore = useUserStore()
+        routeUtils.isAuthenticatedGuard(to, from, next, userStore)
+        routeUtils.isSuperUser(to, from, next, userStore)
+      }
+    },
+    {
+      path: '/user/:username',
+      name: 'profile',
+      component: ProfileView,
+      props: true,
+      beforeEnter: async (to, from, next) => {
+        const adminStore = useAdminStore()
+        adminStore.setUserAdminProfile(null)
+        try {
+          await adminStore.fetchUserProfileByName({
+            username: to.params.username
+          })
+          next()
+        } catch (e) {
+          next(
+            Error(errorUtils.getErrorMessage(e, 'Failed to fetch user profile'))
+          )
+        }
+      }
+    },
+    {
+      path: '/projects',
+      name: 'projects',
+      component: ProjectsView,
+      props: true,
+      children: [
+        {
+          path: ':namespace',
+          name: 'namespace-projects',
+          component: ProjectsView,
+          props: true
+        }
+      ]
+    },
+    {
+      path: '/projects/:namespace/:projectName',
+      name: 'project',
+      component: ProjectView,
+      props(route) {
+        return {
+          namespace: route.params.namespace,
+          projectName: route.params.projectName,
+          asAdmin: true
+        }
+      },
+      redirect: { name: 'project-tree' },
+      children: [
+        {
+          path: 'blob/:location*',
+          name: 'blob',
+          component: FileDetailView,
+          props(route) {
+            return {
+              asAdmin: true,
+              namespace: route.params.namespace,
+              projectName: route.params.projectName,
+              location: route.params.location
+            }
+          }
+        },
+        {
+          path: 'tree/:location*',
+          name: 'project-tree',
+          component: FileBrowserView,
+          props(route) {
+            return {
+              asAdmin: true,
+              namespace: route.params.namespace,
+              projectName: route.params.projectName,
+              location: route.params.location
+            }
+          }
+        },
+        {
+          path: 'settings',
+          name: 'project-settings',
+          component: ProjectSettingsView,
+          props(route) {
+            return {
+              asAdmin: true,
+              namespace: route.params.namespace,
+              projectName: route.params.projectName
+            }
+          }
+        },
+        {
+          path: 'history',
+          name: 'project-versions',
+          component: ProjectVersionsView,
+          props(route) {
+            return {
+              asAdmin: true,
+              namespace: route.params.namespace,
+              projectName: route.params.projectName
+            }
+          }
+        },
+        {
+          path: 'history/:version_id',
+          name: 'project-versions-detail',
+          component: VersionDetailView,
+          props(route) {
+            return {
+              asAdmin: true,
+              namespace: route.params.namespace,
+              projectName: route.params.projectName,
+              version_id: route.params.version_id
+            }
+          }
+        },
+        {
+          path: 'history/:version_id/:path',
+          name: 'file-version-detail',
+          component: FileVersionDetailView,
+          props(route) {
+            return {
+              asAdmin: true,
+              namespace: route.params.namespace,
+              projectName: route.params.projectName,
+              version_id: route.params.version_id,
+              path: route.params.path
+            }
+          }
+        }
+      ]
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: SettingsView,
+      props: true
     }
   ]
-})
 
-/** Handles redirect to /login when user is not authenticated. */
-router.beforeEach((to, from, next) => {
-  routeUtils.isAuthenticatedGuard(to, from, next)
-  routeUtils.isSuperUser(to, from, next)
-})
+  routes.forEach((route) => {
+    router.addRoute(route)
+  })
+
+  /** Handles redirect to /login when user is not authenticated. */
+  router.beforeEach((to, from, next) => {
+    const userStore = useUserStore()
+    routeUtils.isAuthenticatedGuard(to, from, next, userStore)
+    routeUtils.isSuperUser(to, from, next, userStore)
+  })
+  addRouterToPinia(router)
+
+  return router
+}
+
 export default router