Implement routes and transitions

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

@@ -1,44 +1,54 @@
 <template>
-  <ClientDetail :client="client" @update="updateClient" @deleted="deleteClient" v-if="client" />
+  <ClientDetail
+    :client="client"
+    @update="updateClient"
+    @deleted="deleteClient"
+    v-if="client"
+    :key="clientId"
+  />
   <ClientSkeleton v-else />
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue'
+import { ref, toRef, watch, onMounted } from 'vue'
 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'
 
-const props = defineProps<{ clientId: string | null }>()
+const props = defineProps<{ id: string | null; parentId: string | null }>()
+
+const clientId = toRef(() => props.id)
 
 const client = ref<Client>()
 
 const treeState = useTreeState()
 
+const emit = defineEmits<{ (e: 'clientDeleted', data: string): void }>()
+
 async function loadClient() {
-  if (!props.clientId) return
-  client.value = await treeState.getClient()
+  console.log('loadClient called: ', props.id)
+  if (!props.id) return
+  client.value = await treeState.getClient(props.id)
 }
 
-async function deleteClient(clientId: string) {
-  console.log(`Delete ${localClient.value.id}`)
+async function deleteClient(deleteId: string) {
   const response = await SshecretAdmin.deleteClientApiV1ClientsIdDelete({
-    path: { id: clientId },
+    path: { id: idKey(deleteId) },
   })
   if (response.status !== 200) {
     console.error(response)
     return
   }
 
-  emit('clientDeleted', clientId)
-  props.clientId = null
+  emit('clientDeleted', deleteId)
 }
 
 async function updateClient(updated: ClientCreate) {
   const response = await SshecretAdmin.updateClientApiV1ClientsIdPut({
-    path: { id: localClient.value.id },
+    path: { id: idKey(localClient.value.id) },
     body: data,
   })
   client.value = response.data
@@ -47,7 +57,7 @@ async function updateClient(updated: ClientCreate) {
 onMounted(loadClient)
 
 watch(
-  () => props.client_id,
+  () => props.id,
   () => loadClient(),
   { immediate: true },
 )