Dashboard and error handling

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

@@ -11,25 +11,30 @@
 
 <script setup lang="ts">
 import { ref, toRef, watch, onMounted } from 'vue'
+import { assertSdkResponseOk } from '@/api/AssertSdkResponseOk'
+import { ValidationError } from '@/api/errors'
 import ClientSkeleton from '@/components/clients/ClientSkeleton.vue'
 import ClientDetail from '@/components/clients/ClientDetail.vue'
 import type { ClientCreate } from '@/client'
 import { idKey } from '@/api/paths'
 import { SshecretAdmin } from '@/client'
 import { useTreeState } from '@/store/useTreeState'
+import { useAlertsStore } from '@/store/useAlertsStore'
 
-const props = defineProps<{ id: string | null; parentId: string | null }>()
-
+interface Props {
+  id: string
+  parentId?: string
+}
+const props = defineProps<Props>()
 const clientId = toRef(() => props.id)
-
 const client = ref<Client>()
-
 const treeState = useTreeState()
-
 const emit = defineEmits<{ (e: 'clientDeleted', data: string): void }>()
+const alerts = useAlertsStore()
+
+const updateErrors = ref([])
 
 async function loadClient() {
-  console.log('loadClient called: ', props.id)
   if (!props.id) return
   client.value = await treeState.getClient(props.id)
 }
@@ -46,12 +51,27 @@ async function deleteClient(deleteId: string) {
   emit('clientDeleted', deleteId)
 }
 
+function clearUpdateErrors() {
+  updateErrors.value = []
+}
+
 async function updateClient(updated: ClientCreate) {
   const response = await SshecretAdmin.updateClientApiV1ClientsIdPut({
     path: { id: idKey(localClient.value.id) },
     body: data,
   })
-  client.value = response.data
+  try {
+    const responseData = assertSdkResponseOk(response)
+    client.value = responseData
+    clearUpdateErrors()
+  } catch (err) {
+    if (err instanceof ValidationError) {
+      updateErrors.value = err.errors
+    } else {
+      const errorMessage = err.message ?? 'Unknown error'
+      alerts.showAlert(`Error from backend: ${errorMessage}`, 'error')
+    }
+  }
 }
 
 onMounted(loadClient)