Merge branch 'feat/bbox-filter-sequence-list' into 'develop'

feat : bbox filter sequence

See merge request geovisio/website!117

src/components/Viewer.vue

@@ -13,7 +13,6 @@ import { createLink, createSequenceLink } from '@/components-viewer/reportLink'
 import { useI18n } from 'vue-i18n'
 import { hasASessionCookieDecoded } from '@/utils/auth'
 import type { ViewerInterface, MapInterface } from '@/views/interfaces/common'
-
 const sequenceStore = useSequenceStore()
 const { t } = useI18n()
 let mapIsLoaded = ref<boolean>(false)

src/locales/en.json

@@ -90,6 +90,7 @@
       "sequence_creation": "Upload",
       "sequence_creation_tooltip": "Filter by uploaded date",
       "sequence_date_tooltip": "Filter by shooting date",
+      "filter_bbox_button": "Search on this area",
       "sequence_status": "Status",
       "sequence_published": "Published",
       "sequence_waiting": "Still processing",

src/locales/fr.json

@@ -90,6 +90,7 @@
       "sequence_creation_tooltip": "Filtre par date de versement",
       "sequence_date_tooltip": "Filtre par date de prise de vue",
       "reset_filter_button": "Réinitialiser tous les filtres",
+      "filter_bbox_button": "Chercher dans cette zone",
       "sequence_status": "Statut",
       "sequence_published": "Publiée",
       "sequence_waiting": "En cours de publication",

src/locales/hu.json

@@ -90,6 +90,7 @@
       "sequence_creation": "Feltöltés ideje",
       "sequence_creation_tooltip": "Szűrés feltöltés dátuma szerint",
       "sequence_date_tooltip": "Szűrés forgatás dátuma szerint",
+      "filter_bbox_button": "Keresés ezen a területen",
       "sequence_status": "Állapot",
       "sequence_published": "Közzétéve",
       "sequence_waiting": "Feldolgozás alatt",

src/views/MySequencesView.vue

@@ -32,6 +32,22 @@
           />
         </div>
       </vue-draggable-resizable>
+      <div class="bbox-filter-button">
+        <Button
+          look="button--white background-white"
+          icon="bi bi-search"
+          :text="$t('pages.sequences.filter_bbox_button')"
+          @trigger="triggerBboxFilter"
+        />
+        <div class="reset-bbox">
+          <Button
+            v-if="filterBbox"
+            look="no-text-blue-dark"
+            icon="bi bi-x-circle-fill"
+            @trigger="triggerResetBbox"
+          />
+        </div>
+      </div>
     </section>
     <section
       :style="{ width: `${listWidth}px` }"
@@ -205,7 +221,7 @@
       <div v-else class="loader">
         <Loader look="sm" :is-loaded="false" />
       </div>
-      <div class="entry-pagination">
+      <div v-if="userSequences.length > 49" class="entry-pagination">
         <Pagination
           v-for="item in paginationLinks"
           :type="item.rel"
@@ -303,6 +319,7 @@ let filterDate = ref<{
   end: null,
   type: ''
 })
+let filterBbox = ref<number[] | null>(null)
 let sortDate = ref<{ sortBy: string | null }>({ sortBy: null })
 let uri = ref<string>('api/users/me/collection?limit=50')
 let modal = ref()
@@ -320,6 +337,25 @@ async function resetAllFilter(): Promise<void> {
   formatUri()
   await updateSequence(uri.value)
 }
+async function triggerResetBbox(): Promise<void> {
+  filterBbox.value = null
+  formatUri()
+  await updateSequence(uri.value)
+}
+function triggerBboxFilter(): void {
+  if (viewerRef.value) {
+    isLoading.value = true
+    const currentBbox = [
+      viewerRef.value.viewer._map.getBounds()._ne.lng,
+      viewerRef.value.viewer._map.getBounds()._ne.lat,
+      viewerRef.value.viewer._map.getBounds()._sw.lng,
+      viewerRef.value.viewer._map.getBounds()._sw.lat
+    ]
+    filterBbox.value = currentBbox
+    formatUri()
+    updateSequence(uri.value)
+  }
+}
 function displayModal(type: string): void {
   calendarType.value = type
   if (modal.value) modal.value.show()
@@ -397,6 +433,7 @@ async function updateSequence(uri: string) {
     userSequences.value = getLinkByRel(data.links, 'child')
     scrollToElement()
     isLoading.value = false
+    if (!userSequences.value.length) noSequencesFound.value = true
   } catch (e) {
     userSequences.value = []
     noSequencesFound.value = true
@@ -501,6 +538,10 @@ onMounted(async () => {
 })
 function formatUri(): void {
   let params: string[] = []
+  if (filterBbox && filterBbox.value) {
+    const bboxFilter = `${filterBbox.value[0]},${filterBbox.value[1]},${filterBbox.value[2]},${filterBbox.value[3]}`
+    params = [...params, `&bbox=${bboxFilter}`]
+  }
   if (filterDate.value.start && filterDate.value.end) {
     const rangeFilter = encodeURIComponent(
       `${filterDate.value.type} BETWEEN '${filterDate.value.start}' AND '${filterDate.value.end}'`
@@ -522,13 +563,8 @@ async function updateFilters(value: {
 }): Promise<void> {
   isLoading.value = true
   noSequencesFound.value = false
-  if (value.start && value.end) {
-    filterDate.value = { start: value.start, end: value.end, type: value.type }
-    formatUri()
-  } else {
-    uri.value = 'api/users/me/collection?limit=50'
-    filterDate.value = { end: null, start: null, type: '' }
-  }
+  filterDate.value = { start: value.start, end: value.end, type: value.type }
+  formatUri()
   await updateSequence(uri.value)
 }
 watchEffect(() => {
@@ -578,6 +614,17 @@ watchEffect(() => {
   height: 100%;
   position: relative;
 }
+.bbox-filter-button {
+  padding: toRem(2);
+  width: fit-content;
+  height: fit-content;
+  position: relative;
+}
+.reset-bbox {
+  position: absolute;
+  right: 0;
+  top: toRem(0.5);
+}
 .no-map {
   display: flex;
   justify-content: center;