Fix type errors

packages/sshecret-frontend/src/views/clients/ClientDetailView.vue

@@ -11,11 +11,11 @@
 
 <script setup lang="ts">
 import { ref, toRef, watch, onMounted } from 'vue'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
-import { ValidationError } from '@/api/errors'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
+import { ApiError, ValidationError } from '@/api/errors'
 import ClientSkeleton from '@/components/clients/ClientSkeleton.vue'
 import ClientDetail from '@/components/clients/ClientDetail.vue'
-import type { ClientCreate } from '@/client'
+import type { ClientCreate, Client } from '@/client'
 import { idKey } from '@/api/paths'
 import { SshecretAdmin } from '@/client'
 import { useTreeState } from '@/store/useTreeState'
@@ -32,7 +32,7 @@ const treeState = useTreeState()
 const emit = defineEmits<{ (e: 'clientDeleted', data: string): void }>()
 const alerts = useAlertsStore()
 
-const updateErrors = ref([])
+const updateErrors = ref<any[]>([])
 
 async function loadClient() {
   if (!props.id) return
@@ -56,9 +56,10 @@ function clearUpdateErrors() {
 }
 
 async function updateClient(updated: ClientCreate) {
+  if (!client.value) return
   const response = await SshecretAdmin.updateClientApiV1ClientsIdPut({
-    path: { id: idKey(localClient.value.id) },
-    body: data,
+    path: { id: idKey(client.value.id) },
+    body: updated,
   })
   try {
     const responseData = assertSdkResponseOk(response)
@@ -67,9 +68,12 @@ async function updateClient(updated: ClientCreate) {
   } catch (err) {
     if (err instanceof ValidationError) {
       updateErrors.value = err.errors
-    } else {
+    } else if (err instanceof ApiError) {
       const errorMessage = err.message ?? 'Unknown error'
       alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
+    } else {
+      console.error(err)
+      alerts.showAlert('Unexpected error from backend', 'error')
     }
   }
 }

packages/sshecret-frontend/src/views/clients/ClientPage.vue

@@ -4,7 +4,7 @@
       <MasterTabs selectedTab="clients" @change="tabSelected" />
     </template>
     <template #detail>
-      <RouterView :key="routeKey" />
+      <RouterView :key="route.path" />
     </template>
   </MasterDetail>
 </template>
@@ -24,6 +24,4 @@ function tabSelected(tabName: string) {
     router.push({ name: tabName })
   }
 }
-
-const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
 </script>

packages/sshecret-frontend/src/views/clients/ClientTreeList.vue

@@ -107,8 +107,8 @@ import { usePagination } from '@/composables/usePagination'
 import { SshecretAdmin } from '@/client/sdk.gen'
 
 import type { Client, ClientCreate } from '@/client/types.gen'
-import { ValidationError } from '@/api/errors'
-import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { ApiError, ValidationError } from '@/api/errors'
+import { assertSdkResponseOk } from '@/api/assertSdkResponseOk'
 
 import { useTreeState } from '@/store/useTreeState'
 import { useRouter, useRoute } from 'vue-router'
@@ -119,31 +119,26 @@ import ClientForm from '@/components/clients/ClientForm.vue'
 import PageNumbers from '@/components/common/PageNumbers.vue'
 import TreeItemSkeleton from '@/components/common/TreeItemSkeleton.vue'
 import { useAlertsStore } from '@/store/useAlertsStore'
+import type SlTreeItem from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js'
 
 import { useDebounce } from '@/composables/useDebounce'
 const treeState = useTreeState()
 
 const clientsPerPage = 20
-const totalClients = computed(() => treeState.clients?.total_results)
+const totalClients = computed<number>(() => treeState.clients?.total_results ?? 0)
 
-const clients = computed(() => treeState.clients.clients)
+const clients = computed(() => treeState.clients?.clients)
 const selectedClient = ref<Client | null>(null)
 const selectedSecret = ref<string | null>(null)
 
-const createErrors = ref([])
+const createErrors = ref<any[]>([])
 
 const createFormKey = ref<number>(0)
 const createDrawerOpen = ref<boolean>(false)
 
-const props = defineProps({
-  loadClient: {
-    type: String,
-    default: '',
-  },
-})
 const router = useRouter()
 
-const clientQuery = toRef(() => props.loadClient)
+const clientQuery = ref<string>()
 
 const debouncedQuery = useDebounce(clientQuery, 300)
 const alerts = useAlertsStore()
@@ -160,12 +155,16 @@ async function loadClients() {
 }
 
 function updateClient(updated: Client) {
+  if (!clients.value) {
+    return
+  }
   const index = clients.value.findIndex((c) => c.name === updated.name)
   if (index >= 0) {
     clients.value[index] = updated
   }
 }
-function itemSelected(event: Event) {
+
+function itemSelected(event: CustomEvent<{ selection: SlTreeItem[] }>) {
   if (event.detail.selection) {
     const el = event.detail.selection[0] as HTMLElement
     const childType = el.dataset.type
@@ -186,8 +185,12 @@ async function createClient(data: ClientCreate) {
   const response = await SshecretAdmin.createClientApiV1ClientsPost({ body: data })
   try {
     const responseData = assertSdkResponseOk(response)
-    clients.value.unshift(responseData)
-    totalClients.value += 1
+    if (clients.value) {
+      clients.value.unshift(responseData)
+    }
+    if (treeState.clients) {
+      treeState.clients.total_results += 1
+    }
     createDrawerOpen.value = false
     createFormKey.value += 1
     treeState.selectClient(responseData.id)
@@ -196,9 +199,12 @@ async function createClient(data: ClientCreate) {
   } catch (err) {
     if (err instanceof ValidationError) {
       createErrors.value = err.errors
-    } else {
+    } else if (err instanceof ApiError) {
       const errorMessage = err.message ?? 'Unknown error'
       alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
+    } else {
+      console.error(err)
+      alerts.showAlert('Error communicating with backend', 'error', 'Unexpected Error')
     }
   }
 }
@@ -209,6 +215,7 @@ function clearCreateErrors() {
 }
 
 async function clientDeleted(id: string) {
+  if (!clients.value) return
   const index = clients.value.findIndex((c) => c.id === id)
   if (index >= 0) {
     clients.value.splice(index, 1)