frontend: fix admin new and edit comment saving and parent choice, an…

…d fix styling
SafeHavenMaps · Jun 19, 2024 · 9ec2608 · 9ec2608
1 parent 1e1139b
commit 9ec2608
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 24 deletions.
diff --git a/frontend/app.vue b/frontend/app.vue
@@ -3,7 +3,9 @@
   <NuxtLayout>
     <NuxtPage v-if="state.loaded" />
     <NuxtPage v-else>
-      <h1>API is not available</h1>
+      <h1 class="text-xl">
+        API is not available
+      </h1>
       <p>Please try again later</p>
     </NuxtPage>
   </NuxtLayout>

diff --git a/frontend/components/DisplayedTag.vue b/frontend/components/DisplayedTag.vue
@@ -25,6 +25,6 @@ function getTextColor(hexColor: string): string {
   const g = parseInt(hex.substring(2, 4), 16)
   const b = parseInt(hex.substring(4, 6), 16)
   const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255
-  return luminance > 0.5 ? 'black' : 'white'
+  return luminance > 0.6 ? 'black' : 'white'
 }
 </script>
diff --git a/frontend/components/admin/Navbar.vue b/frontend/components/admin/Navbar.vue
@@ -23,17 +23,17 @@
 
         <NuxtLink
           to="/admin"
-          class="ml-3"
+          class="ml-1 "
         >
           <img
-            height="46"
-            width="46"
+            height="40"
+            width="40"
             alt="icon"
             :src="safehaven_logo"
           >
         </NuxtLink>
         <div class="navbar-text pl-4">
-          <div class="my-0 font-extrabold">
+          <div class="my-0 text-lg font-extrabold">
             SafeHaven
           </div>
           <div class="text-xs italic">

diff --git a/frontend/components/viewer/EntityAddForm.vue b/frontend/components/viewer/EntityAddForm.vue
@@ -1,7 +1,7 @@
 <template>
   <Button
     label="Ajouter"
-    severity="success"
+    severity="info"
     @click="formVisible = true"
   >
     <template #icon>

diff --git a/frontend/layouts/admin-ui.vue b/frontend/layouts/admin-ui.vue
@@ -26,7 +26,7 @@
         <Breadcrumb
           :home="{ label: '', url: '' }"
           :model="currentBreadcrumbs"
-          class="breadcrumb !p-2"
+          class="breadcrumb !p-1"
         >
           <template #item="{ item, props }">
             <NuxtLink
@@ -46,21 +46,22 @@
           </template>
         </Breadcrumb>
 
-        <Card class="m-4 ml-0 mt-1 grow w-full scroll-container">
+        <Card class="ml-0 mt-1 grow w-full scroll-container">
           <template #title>
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
               <AppIcon
                 :icon-name="cardIconName"
-                class="mr-2"
+                class=""
               />
               {{ cardTitle }}
               <div
                 v-for="(action, index) in currentActions"
                 :key="index"
+                class="flex items-end"
               >
                 <Button
                   outlined
-                  class="ml-2 py-0 px-1"
+                  class="!py-0 !px-1"
                   :label="action.label"
                   :severity="action.severity"
                   @click="navigateTo(action.url)"

diff --git a/frontend/pages/admin/[familyId]/comments/[id].vue b/frontend/pages/admin/[familyId]/comments/[id].vue
@@ -40,9 +40,9 @@
         }).format(new Date(fetchedComment!.updated_at)) }}
       </span>
       <span>
-        Rattaché à {{ parentEntityToDisplay.display_name }} <CategoryTag
-          v-if="parentEntityToDisplay.category_id"
-          :category="state.categoryRecord[parentEntityToDisplay.category_id]"
+        Rattaché à {{ parentEntityToDisplay?.display_name }} <CategoryTag
+          v-if="parentEntityToDisplay?.category_id"
+          :category="state.categoryRecord[parentEntityToDisplay!.category_id]"
         />
 
       </span>
@@ -60,7 +60,7 @@
         :family-id="familyId"
         :previous-entity-id="editedComment.entity_id"
         @save_entity="entity => {
-          editedComment.entity_id = entity.id
+          editedComment.entity_id = entity.entity_id
           parentEntityToDisplay = entity
         }"
       />
@@ -115,13 +115,23 @@ const urlEntityId = useRoute().query.urlEntityId
 const returnUrl = urlEntityId == null ? `/admin/${familyId}/comments/pending` : `/admin/${familyId}/entities/${urlEntityId}?comments`
 
 const fetchedComment: AdminComment | null = isNew ? null : await state.client.getComment(commentId)
-const parentEntityToDisplay = ref<{ category_id: string, display_name: string }>
-({ category_id: fetchedComment?.category_id ?? '', display_name: fetchedComment?.entity_display_name ?? '' })
+const parentEntityToDisplay = ref<{ category_id: string, display_name: string }>()
+if (fetchedComment) {
+  parentEntityToDisplay.value = { category_id: fetchedComment.category_id, display_name: fetchedComment.entity_display_name }
+}
+else if (urlEntityId) {
+  const fetchedParent = await state.client.getEntity(urlEntityId as string)
+  parentEntityToDisplay.value = { category_id: fetchedParent.category_id, display_name: fetchedParent.display_name }
+}
+else {
+  parentEntityToDisplay.value = { category_id: '', display_name: '' }
+}
+
 const editedComment: Ref<AdminNewOrUpdateComment> = isNew
   ? ref({
     author: '',
     data: {},
-    entity_id: '',
+    entity_id: urlEntityId ?? '',
     moderated: false,
     text: '',
     version: 1,
@@ -137,15 +147,14 @@ const tags = state.tags
 
 const entitySelectVisible = ref(false)
 
-const urlEntityName = fetchedComment?.entity_display_name ?? (await state.client.getEntity(urlEntityId as string)).display_name
 const initAdminLayout = inject<InitAdminLayout>('initAdminLayout')!
 initAdminLayout(
   isNew ? `Nouveau commentaire` : `Édition du commentaire de ${fetchedComment!.author}`,
   'comment',
   [],
   [
     { label: `${family.title}`, url: '/admin/families' },
-    { label: urlEntityId ? `Commentaires de l'entité ${urlEntityName}` : `Commentaires en attente`, url: returnUrl },
+    { label: urlEntityId ? `Commentaires de l'entité ${parentEntityToDisplay.value.display_name}` : `Commentaires en attente`, url: returnUrl },
     isNew
       ? { label: `Nouveau commentaire`, url: `/admin/${familyId}/comments/new` }
       : { label: `Édition d'un commentaire`, url: `/admin/${familyId}/comments/${commentId}` },
@@ -159,7 +168,7 @@ function hasBeenEdited(field: keyof AdminNewOrUpdateComment) {
 async function onSave() {
   processingRequest.value = true
   try {
-    await state.client.updateComment(commentId, editedComment.value)
+    isNew ? await state.client.createComment(editedComment.value) : await state.client.updateComment(commentId, editedComment.value)
     navigateTo(returnUrl)
     toast.add({ severity: 'success', summary: 'Succès', detail: 'Commentaire modifié avec succès', life: 3000 })
   }

diff --git a/frontend/pages/admin/login.vue b/frontend/pages/admin/login.vue
@@ -6,11 +6,11 @@
   >
     <img
       src="assets/logo_secondary.svg"
-      class="w-64 -mt-20 -mb-2"
+      class="w-60 -mt-20 -mb-3"
     >
     <Card>
       <template #title>
-        <span>Espace d'administration</span>
+        Espace d'administration
       </template>
       <template #content>
         <div class="flex flex-col gap-4 max-w-[17rem]">