Removes User Profile Landing

frontend/pages/admin/merge.vue

@@ -64,7 +64,7 @@ const reset = () => {
         <LinkButton
           class="p-button-secondary p-button-text"
           icon="pi pi-external-link"
-          :to="fromUserId ? localePath(`/user/${fromUserId}/edit`) : undefined"
+          :to="fromUserId ? localePath(`/user/${fromUserId}`) : undefined"
           new-tab
         />
       </div>
@@ -82,7 +82,7 @@ const reset = () => {
         <LinkButton
           class="p-button-secondary p-button-text"
           icon="pi pi-external-link"
-          :to="toUserId ? localePath(`/user/${toUserId}/edit`) : undefined"
+          :to="toUserId ? localePath(`/user/${toUserId}`) : undefined"
           new-tab
         />
       </div>

frontend/pages/admin/users.vue

@@ -125,7 +125,7 @@ const reset = () => {
               always
             />
             <LinkButton
-              :to="localePath(`/user/${slotProps.data.id}/edit`)"
+              :to="localePath(`/user/${slotProps.data.id}`)"
               icon="pi pi-arrow-right"
               icon-pos="right"
               class="p-button-xs p-button-outlined"

frontend/pages/user/[id].vue

@@ -14,7 +14,6 @@ const [
 <template>
   <StandardContent v-if="user">
     <TitleBar :title="`User: ${user.name || user.id}`" />
-    <UserToolbar :user-id="id" />
     <NuxtPage />
     <StandardDebug
       :value="user"

frontend/pages/user/[id]/index.vue

@@ -1,12 +1,86 @@
 <script setup lang="ts">
-</script>
+import { userEditor } from '@/lib/editor'
 
-<template>
-  <div>
-    TODO(#58) implement some kind of user landing page.
+const pactaClient = usePACTA()
+const { fromParams } = useURLParams()
+const { loading: { withLoading }, permissionDenied: { setPermissionDenied } } = useModal()
+const router = useRouter()
+const localePath = useLocalePath()
+const i18n = useI18n()
+const { getMaybeMe } = useSession()
+
+const id = presentOrCheckURL(fromParams('id'))
+const prefix = `user/[${id}]`
 
-    For admins/the user themselves, this is where their portfolio library would go.
+const { isAdmin, maybeMe } = await getMaybeMe()
+const { data } = await useSimpleAsyncData(`${prefix}.getUser`, () => pactaClient.findUserById(id))
+const {
+  editorValues,
+  editorFields,
+  changes,
+  saveTooltip,
+  canSave,
+} = userEditor(presentOrCheckURL(data.value, 'no user in response'), i18n)
 
-    For other users looking at this it's probably a 404, or just very rudimentary data about a user
+const deleteUser = () => withLoading(
+  () => pactaClient.deleteUser(id).then(() => router.push(localePath('/'))),
+  `${prefix}.deleteUser`,
+)
+const saveChanges = () => withLoading(
+  () => pactaClient.updateUser(id, changes.value)
+    .then(() => router.push(localePath(`/user/${id}`))),
+  `${prefix}.saveChanges`,
+)
+const isMe = computed<boolean>(() => {
+  const mm = maybeMe.value
+  return !!mm && id === mm.id
+})
+if (!isMe.value && !isAdmin.value) {
+  setPermissionDenied(new Error(`permission denied for user ${id}`))
+}
+</script>
+
+<template>
+  <div class="flex flex-column gap-3">
+    <UserEditor
+      v-if="editorValues"
+      v-model:editorValues="editorValues"
+      :editor-fields="editorFields"
+    />
+    <div class="flex gap-3">
+      <PVButton
+        icon="pi pi-trash"
+        class="p-button-danger"
+        label="Delete"
+        @click="deleteUser"
+      />
+      <LinkButton
+        label="Discard Changes"
+        icon="pi pi-arrow-left"
+        class="p-button-secondary p-button-outlined"
+        :to="localePath(`/user/${id}`)"
+      />
+      <div v-tooltip.bottom="saveTooltip">
+        <PVButton
+          :disabled="!canSave"
+          label="Save Changes"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          @click="saveChanges"
+        />
+      </div>
+    </div>
+    <StandardDebug
+      :value="editorFields"
+      label="Editor Fields"
+    />
+    <StandardDebug
+      :value="editorValues"
+      label="Editor Values"
+    />
+    <StandardDebug
+      :value="changes"
+      label="Changes"
+    />
   </div>
 </template>