frontend: upgrade to primevue v4, various fixes

SafeHavenMaps · Jun 18, 2024 · 99ee720 · 99ee720
1 parent 31e5d93
commit 99ee720
Show file tree

Hide file tree

Showing 61 changed files with 2,370 additions and 1,183 deletions.
diff --git a/frontend/components/CommentsDisplayer.vue b/frontend/components/CommentsDisplayer.vue
@@ -1,11 +1,12 @@
 <template>
-  <Accordion :active-index="0">
-    <AccordionTab
+  <Accordion :value="sortedComments[0].id">
+    <AccordionPanel
       v-for="comment in sortedComments"
       :key="comment.id"
+      :value="comment.id"
     >
-      <template #header>
-        <span class="flex align-items-center gap-2 w-full">
+      <AccordionHeader>
+        <span class="flex items-center gap-2 w-full">
           {{ comment.author }} - {{ new Date(comment.created_at).toLocaleDateString() }}
           <Tag
             v-if="!public && (comment as AdminComment).moderated"
@@ -22,18 +23,21 @@
             @delete="(id, name, onDeleteDone) => emit('delete', id, name, onDeleteDone)"
           />
         </span>
-      </template>
+      </AccordionHeader>
+
       <!-- eslint-disable vue/no-v-html -->
-      <p
-        style="white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;"
-        v-html="purify_strict(comment.text)"
-      />
+      <AccordionContent>
+        <p
+          style="white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;"
+          v-html="purify_strict(comment.text)"
+        />
 
-      <ViewerCommonFormFields
-        :fields="props.commentFormFields"
-        :data="comment.data"
-      />
-    </AccordionTab>
+        <ViewerCommonFormFields
+          :fields="props.commentFormFields"
+          :data="comment.data"
+        />
+      </AccordionContent>
+    </AccordionPanel>
   </Accordion>
 </template>
 

diff --git a/frontend/components/NominatimPicker.vue b/frontend/components/NominatimPicker.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <form @submit.prevent="searchNominatim">
-      <InputGroup class="mb-4 mt-2">
+      <InputGroup class="mb-6 mt-2">
         <InputText
           v-model="locationInput"
           placeholder="Rechercher une adresse"
@@ -25,7 +25,7 @@
     </div>
     <div
       v-else-if="locationSelected && resultsSearched"
-      class="h-20rem"
+      class="h-80"
     >
       <SingleEntityMap
         :coordinates="transformedCoordinates"

diff --git a/frontend/components/StartPopup.vue b/frontend/components/StartPopup.vue
@@ -13,8 +13,8 @@
     <div v-html="popupData.sanitizedContent" />
 
     <div v-if="popupData?.sanitizedCheckbox">
-      <span class="flex align-items-center gap-2">
-        <InputSwitch
+      <span class="flex items-center gap-2">
+        <ToggleSwitch
           v-model="validationCheckbox"
           input-id="validated_popup"
           class="flex-shrink-0"

diff --git a/frontend/components/admin/EditDeleteButtons.vue b/frontend/components/admin/EditDeleteButtons.vue
@@ -36,18 +36,18 @@
     :header="`Suppression ${props.modelName} ${props.name}`"
     :style="{ width: '25rem' }"
   >
-    <span class="p-text-secondary block mb-3 -mt-2">
+    <span class="p-text-secondary block mb-4 -mt-2">
       <p>La suppression {{ props.modelName }} {{ props.name }}
         entraînera <b>la suppression définitive de {{ props.secureDeleteEntityCount }} entités</b>.</p>
       <p>Cette action ne pourra pas être annulée. Pour confirmer, veuillez entrer le nom {{ props.modelName }} ci-dessous :</p>
     </span>
     <InputText
       id="repeatName"
       v-model="repeatName"
-      class="mb-4"
+      class="mb-6"
       autocomplete="off"
     />
-    <div class="flex justify-content-end gap-2">
+    <div class="flex justify-end gap-2">
       <Button
         type="button"
         label="Annuler"

diff --git a/frontend/components/admin/EntityKinshipTable.vue b/frontend/components/admin/EntityKinshipTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-column gap-2">
+  <div class="flex flex-col gap-2">
     <span class="flex gap-2">
       <Button
         v-if="!hasChildren"
@@ -48,7 +48,7 @@
       <Column
         field="display_name"
         header="Nom de l'entité"
-        class="max-w-25rem"
+        class="max-w-[25rem]"
         sortable
       />
 

diff --git a/frontend/components/admin/Navbar.vue b/frontend/components/admin/Navbar.vue
@@ -4,7 +4,7 @@
     class="admin-navbar mb-2 coco-text top-0 left-0 fixed w-full"
   >
     <template #start>
-      <div class="flex align-items-center">
+      <div class="flex items-center">
         <Button
           outlined
           severity="secondary"
@@ -29,11 +29,11 @@
             :src="safehaven_logo"
           >
         </NuxtLink>
-        <div class="pl-3">
+        <div class="pl-4">
           <h3 class="my-0">
             SafeHaven
           </h3>
-          <span class="text-xs font-italic">
+          <span class="text-xs italic">
             {{ state.options.general.title }}
           </span>
         </div>
@@ -77,7 +77,7 @@ import safehaven_logo from '~/assets/logo_square_white.svg'
 
 const emit = defineEmits(['toggleSidebar'])
 
-const accountMenu = ref<Menu | null>(null)
+const accountMenu = ref<typeof Menu | null>(null)
 
 const navbarRef: Ref<HTMLElement | null> = ref(null)
 

diff --git a/frontend/components/admin/Sidebar.vue b/frontend/components/admin/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <PanelMenu
     :model="getMenuItems()"
-    class="navigation-tree mt-4"
+    class="navigation-tree mt-6"
     style="width: 17rem;"
   >
     <template #item="{ item }">
@@ -27,7 +27,7 @@
             severity="danger"
           />
           <span
-            class="flex-grow-1 text-link"
+            class="grow text-link"
           >{{ item.label }}</span>
         </a>
       </NuxtLink>
@@ -49,7 +49,7 @@
           severity="danger"
         />
         <span
-          class="flex-grow-1 text-link"
+          class="grow text-link"
         >
           {{ item.label }}
         </span>
@@ -81,7 +81,7 @@ function getMenuItems() {
 }
 
 function classForLink(active: boolean) {
-  const classes = ['flex', 'align-items-center', 'cursor-pointer', 'text-color', 'px-3', 'py-2', 'gap-2']
+  const classes = ['flex', 'items-center', 'cursor-pointer', 'text-color', 'px-4', 'py-2', 'gap-2']
 
   if (active) {
     classes.push('active-link')