From 8943e963022ffd4a922308953f9d1ccdc7b7aa63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89lys=C3=A6?=
 <101974839+ElysaSrc@users.noreply.github.com>
Date: Wed, 19 Jun 2024 16:45:03 +0200
Subject: [PATCH] frontend: various fixes

---
 frontend/components/viewer/EntityAddForm.vue | 26 +++++-----
 frontend/components/viewer/Navbar.vue        | 51 ++++++++++++++++----
 2 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/frontend/components/viewer/EntityAddForm.vue b/frontend/components/viewer/EntityAddForm.vue
index 0123a28..d166b9d 100644
--- a/frontend/components/viewer/EntityAddForm.vue
+++ b/frontend/components/viewer/EntityAddForm.vue
@@ -1,16 +1,4 @@
 <template>
-  <Button
-    label="Ajouter"
-    severity="info"
-    @click="formVisible = true"
-  >
-    <template #icon>
-      <AppIcon
-        icon-name="addEntity"
-      />
-    </template>
-  </Button>
-
   <Dialog
     v-model:visible="formVisible"
     modal
@@ -131,6 +119,20 @@ import { useToast } from 'primevue/usetoast'
 import type { Category, EntityOrCommentData, Family, FormField, PublicNewComment, PublicNewEntity } from '~/lib'
 import state from '~/lib/viewer-state'
 
+defineExpose({ open, close, toggle })
+
+function open() {
+  formVisible.value = true
+}
+
+function close() {
+  formVisible.value = false
+}
+
+function toggle() {
+  formVisible.value = !formVisible.value
+}
+
 const formVisible = ref(false)
 
 const props = defineProps<{
diff --git a/frontend/components/viewer/Navbar.vue b/frontend/components/viewer/Navbar.vue
index 75f8176..1d322e6 100644
--- a/frontend/components/viewer/Navbar.vue
+++ b/frontend/components/viewer/Navbar.vue
@@ -63,16 +63,23 @@
                 </template>
               </Button>
 
-              <ViewerEntityAddForm
-                :family="state.activeFamily"
-                :categories="state.categories.filter(category => category.family_id == state.activeFamily.id)"
-              />
+              <Button
+                label="Ajouter"
+                severity="info"
+                @click="openAddModal()"
+              >
+                <template #icon>
+                  <AppIcon
+                    icon-name="addEntity"
+                  />
+                </template>
+              </Button>
 
               <Button
                 v-if="props.showCategorySwitcher"
                 label="Filtres"
                 severity="primary"
-                @click="filterPopupVisible = true"
+                @click="openFilterPopup()"
               >
                 <template #icon>
                   <AppIcon
@@ -108,10 +115,17 @@
             </template>
           </Button>
 
-          <ViewerEntityAddForm
-            :family="state.activeFamily"
-            :categories="state.categories.filter(category => category.family_id == state.activeFamily.id)"
-          />
+          <Button
+            label="Ajouter"
+            severity="info"
+            @click="openAddModal()"
+          >
+            <template #icon>
+              <AppIcon
+                icon-name="addEntity"
+              />
+            </template>
+          </Button>
 
           <Button
             v-if="props.showCategorySwitcher"
@@ -280,6 +294,12 @@
   >
     <ViewerInformation />
   </Dialog>
+
+  <ViewerEntityAddForm
+    ref="entityAddForm"
+    :family="state.activeFamily"
+    :categories="state.categories.filter(category => category.family_id == state.activeFamily.id)"
+  />
 </template>
 
 <script setup lang="ts">
@@ -290,6 +310,7 @@ import defaultLogo from '~/assets/logo_square.svg'
 import type { Result as NominatimResult } from '~/lib/nominatim'
 import { freeFormSearch } from '~/lib/nominatim'
 import type { ViewerCachedEntity, ViewerPaginatedCachedEntitiesWithLocation } from '~/lib'
+import type { ViewerEntityAddForm } from '#build/components'
 
 const oneSearchMade = ref(false)
 
@@ -305,6 +326,8 @@ const props = withDefaults(defineProps<Props>(), {
   showFamilySwitcher: true,
 })
 
+const entityAddForm = ref<typeof ViewerEntityAddForm>()
+
 const emit = defineEmits<{
   filtersChanged: []
   locationChosen: [Coordinate]
@@ -349,6 +372,16 @@ async function searchEntity() {
   currentEntitiesResults.value = await state.searchEntitiesWithLocations(entitySearch.value)
 }
 
+function openFilterPopup() {
+  filterPopupVisible.value = true
+  overflowPanel!.value!.hide()
+}
+
+function openAddModal() {
+  entityAddForm.value!.open()
+  overflowPanel.value!.hide()
+}
+
 function locationChosen(result: NominatimResult) {
   const gpsCoordinates: Coordinate = [result.lon, result.lat]
   emit('locationChosen', gpsCoordinates)