Admin settings redesign

web-app/packages/admin-app/package.json

@@ -22,7 +22,6 @@
     "@tabler/icons-webfont": "^2.42.0",
     "axios": "^0.28.1",
     "lodash": "^4.17.21",
-    "material-icons": "^0.2.3",
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",
     "primevue": "3.43.0",

web-app/packages/admin-app/src/modules/layout/components/Sidebar.vue

@@ -24,6 +24,12 @@ const sidebarItems = computed<SideBarItemModel[]>(() => [
     to: '/projects',
     icon: 'ti ti-article',
     active: route.matched.some((item) => item.name === AdminRoutes.PROJECTS)
+  },
+  {
+    title: 'Settings',
+    to: '/settings',
+    icon: 'ti ti-settings',
+    active: route.matched.some((item) => item.name === AdminRoutes.SETTINGS)
   }
 ])
 </script>

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

@@ -5,11 +5,9 @@
 import {
   AccountsView,
   AccountDetailView,
-  //   SettingsView,
-  //   ProjectSettingsView,
+  SettingsView,
   ProjectsView,
   ProjectView,
-  //   LoginView,
   //   useAdminStore
   AdminRoutes
 } from '@mergin/admin-lib'
@@ -95,7 +93,7 @@ export const createRouter = (pinia: Pinia) => {
           header: AppHeader
         },
         props: true
-      }
+      },
 
       //   redirect: { name: 'project-tree' },
       //   children: [
@@ -178,12 +176,16 @@ export const createRouter = (pinia: Pinia) => {
       //     }
       //   ]
       // },
-      // {
-      //   path: '/settings',
-      //   name: 'settings',
-      //   component: SettingsView,
-      //   props: true
-      // }
+      {
+        path: '/settings',
+        name: AdminRoutes.SETTINGS,
+        components: {
+          default: SettingsView,
+          sidebar: Sidebar,
+          header: AppHeader
+        },
+        props: true
+      }
     ]
   })
 

web-app/packages/admin-lib/src/modules/admin/adminApi.ts

@@ -58,7 +58,7 @@ export const AdminApi = {
     )
   },
 
-  async getServerVersion(): Promise<
+  async getLatestServerVersion(): Promise<
     AxiosResponse<LatestServerVersionResponse>
   > {
     return AdminModule.httpService.get('/v1/latest-version')

web-app/packages/admin-lib/src/modules/admin/components/AdminProjectsTable.vue

@@ -45,6 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
           @sort="onSort"
           @row-click="rowClick"
           data-cy="projects-table"
+          :row-class="(data) => (data.removed_at ? 'opacity-80' : '')"
         >
           <template v-for="header in headers" :key="header.field">
             <PColumn
@@ -273,6 +274,8 @@ export default defineComponent({
     },
 
     rowClick(event: DataTableRowClickEvent) {
+      if (event.data.removed_at) return
+
       this.$router.push({
         name: AdminRoutes.PROJECT,
         params: {

web-app/packages/admin-lib/src/modules/admin/components/CheckForUpdates.vue

@@ -5,9 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 -->
 
 <template>
-  <app-container
-    v-if="adminStore.displayUpdateAvailable && adminStore.info_url"
-  >
+  <app-container v-if="adminStore.displayUpdateAvailable">
     <app-section-banner>
       <template #title>Update available 🎉!</template>
       <template #description
@@ -26,22 +24,19 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script lang="ts" setup>
-import { useInstanceStore, AppSectionBanner, AppContainer } from '@mergin/lib'
+import { AppSectionBanner, AppContainer } from '@mergin/lib'
+import { onMounted } from 'vue'
 
 import { useAdminStore } from '@/modules/admin/store'
 
-const instanceStore = useInstanceStore()
 const adminStore = useAdminStore()
 
-adminStore.getCheckUpdateFromCookies()
-adminStore.checkVersions({
-  major: instanceStore.configData?.major,
-  minor: instanceStore.configData?.minor,
-  fix: instanceStore.configData?.fix ?? null
+onMounted(async () => {
+  await adminStore.checkVersions()
 })
 
 function openUpdateUrl() {
-  window.open(adminStore.info_url, '_blank')
+  window.open(adminStore.latestServerVersion?.info_url, '_blank')
 }
 </script>
 

web-app/packages/admin-lib/src/modules/admin/components/index.ts

@@ -4,9 +4,7 @@
 
 export { default as AdminLayout } from './AdminLayout.vue'
 export { default as CheckForUpdates } from './CheckForUpdates.vue'
-export { default as CheckForUpdatesCard } from './CheckForUpdatesCard.vue'
 export { default as CreateUserForm } from './CreateUserForm.vue'
 export { default as ServerNotConfigured } from './ServerNotConfigured.vue'
-export { default as UsageInformationCard } from './UsageInformationCard.vue'
 export { default as AdminProjectsTable } from './AdminProjectsTable.vue'
 export { default as AccountsTable } from './AccountsTable.vue'

web-app/packages/admin-lib/src/modules/admin/routes.ts

@@ -8,7 +8,8 @@ export enum AdminRoutes {
   ACCOUNTS = 'accounts',
   ACCOUNT = 'account',
   PROJECTS = 'projects',
-  PROJECT = 'project'
+  PROJECT = 'project',
+  SETTINGS = 'settings'
 }
 
 export const getRoutes = (): RouteRecord[] => []

web-app/packages/admin-lib/src/modules/admin/store.ts

@@ -16,7 +16,9 @@ import { defineStore, getActivePinia } from 'pinia'
 import Cookies from 'universal-cookie'
 import { AdminApi } from '@/modules/admin/adminApi'
 import {
+  LatestServerVersionResponse,
   PaginatedAdminProjectsParams,
+  PaginatedAdminProjectsResponse,
   UpdateUserPayload,
   UsersResponse
 } from '@/modules/admin/types'
@@ -29,14 +31,14 @@ export interface AdminState {
     count: number
   }
   projects: {
-    items: any[]
+    items: PaginatedAdminProjectsResponse[]
     count: number
     loading: boolean
   }
   user?: UserResponse
   checkForUpdates?: boolean
-  info_url?: string
   isServerConfigHidden: boolean
+  latestServerVersion?: LatestServerVersionResponse
 }
 
 const cookies = new Cookies()
@@ -56,16 +58,44 @@ export const useAdminStore = defineStore('adminModule', {
     },
     user: null,
     checkForUpdates: undefined,
-    info_url: undefined,
-    isServerConfigHidden: false
+    isServerConfigHidden: false,
+    latestServerVersion: undefined
   }),
-
   getters: {
     displayUpdateAvailable: (state) => {
-      return !!state.checkForUpdates
+      if (!state.checkForUpdates) {
+        return false
+      }
+
+      const instanceStore = useInstanceStore()
+      const config = instanceStore.configData
+
+      if (!state.latestServerVersion || !config) {
+        return false
+      }
+
+      const { major, minor, fix } = state.latestServerVersion
+
+      if (
+        (config.major || config.major === 0) &&
+        (config.minor || config.minor === 0)
+      ) {
+        if (major > config.major) {
+          return true
+        } else if (major === config.major) {
+          if (minor > config.minor) {
+            return true
+          } else if (minor === config.minor) {
+            if (fix > config.fix) {
+              return true
+            }
+          }
+        }
+      }
+
+      return false
     }
   },
-
   actions: {
     setLoading(value) {
       this.loading = value
@@ -76,9 +106,6 @@ export const useAdminStore = defineStore('adminModule', {
     setCheckForUpdates(value) {
       this.checkForUpdates = value
     },
-    setInfoUrl(value: string) {
-      this.info_url = value
-    },
     setIsServerConfigHidden(value: boolean) {
       this.isServerConfigHidden = value
     },
@@ -167,31 +194,22 @@ export const useAdminStore = defineStore('adminModule', {
       }
     },
 
-    async checkVersions(payload) {
+    async getLatestServerVersion() {
+      const notificationStore = useNotificationStore()
       try {
-        const response = await AdminApi.getServerVersion()
-        const { major, minor, fix } = response.data
-        // compare payload - major, minor and fix version from config with latest-version from server
-        if (
-          (payload.major || payload.major === 0) &&
-          (payload.minor || payload.minor === 0)
-        ) {
-          let isUpdate = false
-          if (major > payload.major) {
-            isUpdate = true
-          } else if (major === payload.major) {
-            if (minor > payload.minor) {
-              isUpdate = true
-            } else if (minor === payload.minor) {
-              if (fix > payload.fix) {
-                isUpdate = true
-              }
-            }
-          }
-          if (isUpdate) {
-            this.setInfoUrl(response.data.info_url)
-          }
-        }
+        const response = await AdminApi.getLatestServerVersion()
+        this.latestServerVersion = response.data
+      } catch (e) {
+        notificationStore.error({ text: errorUtils.getErrorMessage(e) })
+      }
+    },
+
+    async checkVersions() {
+      try {
+        await this.getCheckUpdateFromCookies()
+        if (!this.checkForUpdates) return
+
+        await this.getLatestServerVersion()
       } catch (e) {
         console.error(e)
       }