Release 2.4.0

Fix/auth sequence list

See merge request geovisio/website!122

CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Before _0.1.0_, website development was on rolling release, meaning there are no version tags.
 
+## [2.4.0] - 2024-01-31
+
+### Added
+
+- Possibility to edit a sequence title in the sequence page
+
+### Changed
+
+- GeoVisio web viewer updated to [2.4.0](https://gitlab.com/geovisio/web-viewer/-/compare/2.3.1...2.4.0) to manage sequence by user
+
+### Fixed
+
+- Fix filter reset button to include bbox filter
+- Fix fullscreen button added by the widget viewer
+- Some UI and UX fixes before user tests
+
 ## [2.3.1] - 2024-01-29
 
 ### Added
@@ -164,7 +180,8 @@ Before _0.1.0_, website development was on rolling release, meaning there are no
 - Header have now a new entry `Mes photos` when the user is logged to access to the sequence list
 - The router guard for logged pages has been changed to not call the api to check the token
 
-[unreleased]: https://gitlab.com/geovisio/website/-/compare/2.3.1...develop
+[unreleased]: https://gitlab.com/geovisio/website/-/compare/2.4.0...develop
+[2.4.0]: https://gitlab.com/geovisio/website/-/compare/2.3.1...2.4.0
 [2.3.1]: https://gitlab.com/geovisio/website/-/compare/2.3.0...2.3.1
 [2.3.0]: https://gitlab.com/geovisio/website/-/compare/2.2.3...2.3.0
 [2.2.3]: https://gitlab.com/geovisio/website/-/compare/2.2.2...2.2.3
@@ -176,4 +193,3 @@ Before _0.1.0_, website development was on rolling release, meaning there are no
 [2.1.1]: https://gitlab.com/geovisio/website/-/compare/2.1.0...2.1.1
 [2.1.0]: https://gitlab.com/geovisio/website/-/compare/0.1.0...2.1.0
 [0.1.0]: https://gitlab.com/geovisio/website/-/commits/0.1.0
-  

package.json

@@ -25,7 +25,7 @@
     "axios": "^1.2.3",
     "bootstrap": "^5.2.3",
     "bootstrap-icons": "^1.10.3",
-    "geovisio": "2.3.1",
+    "geovisio": "2.4.0",
     "moment": "^2.29.4",
     "pako": "^2.1.0",
     "pinia": "^2.1.4",

src/components-viewer/reportLink.ts

@@ -1,8 +1,45 @@
 export function createLink(href: string, text: string): string {
-  return `<a href='mailto:signalement.ign@panoramax.fr${href}' target='_blank' title='${text}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block'><i class="bi bi-exclamation-triangle"></i></a>`
+  return `<a href='mailto:signalement.ign@panoramax.fr${href}' target='_blank' title='${text}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; margin-top: 0.5em;'><i class="bi bi-exclamation-triangle"></i></a>`
 }
 export function createSequenceLink(href: string, title: string): string {
-  return `<a href='${href}' title='${title}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; position: relative'>
+  return `<a href='${href}' title='${title}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; position: relative; margin-top: 0.5em;'>
             <i class="bi bi-images"></i>
           </a>`
 }
+export function createFullScreenButton(): string {
+  return `<button type='button' onClick="
+                                  const header = document.getElementById('navHeader')
+                                  const footer = document.getElementById('navFooter')
+                                  const icon = document.getElementById('iconScreen')
+                                  const home = document.getElementById('homePage')
+                                  if (header) {
+                                    const isHiddenHeader = header.classList.contains('hidden')
+                                    if (isHiddenHeader) header.classList.remove('hidden')
+                                    else header.classList.add('hidden')
+                                  }
+                                  if (footer) {
+                                    const isHiddenHeader = footer.classList.contains('hidden')
+                                    if (isHiddenHeader) footer.classList.remove('hidden')
+                                    else footer.classList.add('hidden')
+                                  }
+                                  if (icon) {
+                                    const isIconNotFull = icon.classList.contains('bi-fullscreen')
+                                    if(isIconNotFull) {
+                                      icon.classList.remove('bi-fullscreen')
+                                      icon.classList.add('bi-fullscreen-exit') 
+                                    } else {
+                                      icon.classList.remove('bi-fullscreen-exit')
+                                      icon.classList.add('bi-fullscreen')
+                                    }
+                                  }
+                                  if (home) {
+                                    const isHomeFull = home.classList.contains('full-viewer')
+                                    if(isHomeFull) home.classList.remove('full-viewer')
+                                    else home.classList.add('full-viewer')
+                                  }
+                                  "
+                                  class='gvs-btn gvs-widget-bg gvs-btn-large'
+          >
+            <i id='iconScreen' class="bi bi-fullscreen"></i>
+          </button>`
+}

src/components/Button.vue

@@ -120,6 +120,7 @@ defineProps({
 }
 .button--white {
   color: var(--blue);
+  background-color: var(--white);
   border: toRem(0.1) solid var(--blue);
   .icon {
     font-size: toRem(1.4);
@@ -143,7 +144,7 @@ defineProps({
 .no-text-blue-dark .icon {
   color: var(--blue-dark);
   margin-right: 0;
-  font-size: toRem(1.6);
+  font-size: toRem(1.4);
 }
 .no-text-green .icon {
   color: var(--blue);
@@ -216,6 +217,7 @@ defineProps({
   visibility: hidden;
   width: toRem(20);
   right: 0;
+  z-index: 9;
   @include text(xss-regular);
 }
 

src/components/EditText.vue

@@ -1,16 +1,28 @@
 <template>
-  <div class="entry-edit">
+  <div :class="['entry-edit', { 'edit-mode': isEditTitle }]">
-    <form
+    <span v-if="isEditTitle && formTitle" class="form-title">{{
-      v-if="isEditTitle && !isDisabled"
+      formTitle
-      @submit.prevent="isEditTitle = false"
+    }}</span>
-      class="edit-form"
+    <div class="entry-form">
-    >
+      <form
-      <div class="wrapper-input">
+        v-if="isEditTitle && !isDisabled"
-        <Input
+        @submit.prevent="isEditTitle = false"
-          id="upload-title"
+        class="edit-form"
-          :text="text || ''"
+      >
-          :placeholder="$t('pages.upload.edit_placeholder_input')"
+        <div class="wrapper-input">
-          @input="changeTextValue"
+          <Input
+            id="upload-title"
+            :text="text || ''"
+            :placeholder="$t('pages.upload.edit_placeholder_input')"
+            @input="changeTextValue"
+          />
+        </div>
+        <Button
+          id="valid-button"
+          :text="$t('pages.upload.ok_button')"
+          type="submit"
+          look="button--white"
+          @trigger="validNewName"
         />
         <div class="close-button">
           <Button
@@ -20,24 +32,17 @@
             @trigger="closeEdition"
           />
         </div>
+      </form>
+      <span v-else class="title">{{ text }}</span>
+      <div v-if="!isEditTitle" class="edit-button">
+        <Button
+          look="no-text-blue-dark"
+          icon="bi bi-pen"
+          :tooltip="$t('pages.upload.edit_title_tooltip')"
+          :disabled="isDisabled"
+          @trigger="goToEditMode"
+        />
       </div>
-      <Button
-        id="valid-button"
-        :text="$t('pages.upload.ok_button')"
-        type="submit"
-        look="button button--blue"
-        @trigger="validNewName"
-      />
-    </form>
-    <span v-else class="title">{{ text }}</span>
-    <div v-if="!isEditTitle" class="edit-button">
-      <Button
-        look="no-text-blue-dark"
-        icon="bi bi-pen"
-        :tooltip="$t('pages.upload.edit_title_tooltip')"
-        :disabled="isDisabled"
-        @trigger="goToEditMode"
-      />
     </div>
   </div>
 </template>
@@ -53,7 +58,8 @@ const emit = defineEmits<{
 const props = defineProps({
   defaultText: { type: String, default: null },
   isLoading: { type: Boolean, default: false },
-  isLoaded: { type: Boolean, default: false }
+  isLoaded: { type: Boolean, default: false },
+  formTitle: { type: String, default: null }
 })
 let titleToEdit = ref<string | null>(null)
 let isEditTitle = ref<boolean>(false)
@@ -86,13 +92,27 @@ const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
 <style scoped lang="scss">
 .title {
   color: var(--blue-dark);
+  text-align: left;
+}
+.form-title {
+  text-align: left;
+  width: 100%;
+  @include text(xs-r-regular);
+  margin-bottom: toRem(0.3);
 }
 .entry-edit {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.entry-form {
   display: flex;
   align-items: center;
-  margin-bottom: toRem(2);
+}
-  width: 100%;
+.edit-mode {
-  height: toRem(4.7);
+  background-color: var(--blue-pale);
+  padding: toRem(1);
+  border-radius: toRem(0.4);
 }
 .wrapper-edit {
   display: flex;
@@ -103,13 +123,14 @@ const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
 .edit-button {
   background-color: var(--grey);
   border-radius: 50%;
-  height: toRem(3.5);
+  height: toRem(2.5);
-  width: toRem(3.5);
+  width: toRem(2.5);
   padding: toRem(1);
   display: flex;
   justify-content: center;
   align-items: center;
   margin-left: toRem(1.5);
+  z-index: 2;
 }
 .wrapper-input {
   position: relative;

src/components/Input.vue

@@ -24,10 +24,11 @@ function emitValue(event: Event): void {
 
 <style scoped lang="scss">
 .input {
-  padding: toRem(1);
+  padding: toRem(0.5) toRem(1);
   border-radius: toRem(0.5);
   border: toRem(0.1) solid var(--blue-dark);
   color: var(--blue-dark);
   width: 100%;
+  @include text(s-r-regular);
 }
 </style>

src/components/Viewer.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="viewer" class="entry-viewer">
+  <div id="viewer" class="entry-viewer"></div>
-    <slot name="fullscreen"></slot>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -11,7 +9,11 @@ import { useSequenceStore } from '@/store/sequence'
 import { Viewer, StandaloneMap } from 'geovisio'
 import { getIgnTiles } from '@/utils/mapAndViewer'
 import { createUrlLink } from '@/utils'
-import { createLink, createSequenceLink } from '@/components-viewer/reportLink'
+import {
+  createLink,
+  createSequenceLink,
+  createFullScreenButton
+} from '@/components-viewer/reportLink'
 import { useI18n } from 'vue-i18n'
 import { hasASessionCookieDecoded } from '@/utils/auth'
 import type { ViewerInterface, MapInterface } from '@/views/interfaces/common'
@@ -49,6 +51,7 @@ async function getSequenceId(imgId: string): Promise<{
   }
 }
 function createViewerButton(link: HTMLDivElement): void {
+  link.innerHTML = `<div>${createFullScreenButton()}</div>`
   viewer.value.addEventListener(
     'picture-loaded',
     async (e: { detail: { picId: string } }): Promise<void> => {
@@ -56,17 +59,26 @@ function createViewerButton(link: HTMLDivElement): void {
       let href: string
       if (isLogged.value && sequenceInformation.username === userName.value) {
         href = `${window.location.origin}/sequence/${sequenceInformation.sequenceId}?currentPic=${e.detail.picId}`
-        link.innerHTML = createSequenceLink(
+        link.innerHTML = `<div>
-          href,
+                           ${createFullScreenButton()}
-          t('pages.home.sequence_title')
+                           ${createSequenceLink(
-        )
+                             href,
+                             t('pages.home.sequence_title')
+                           )}
+                          </div>`
         sequenceStore.addSequence(e.detail.picId)
       } else {
         href = t('pages.home.report_mail', {
           picId: e.detail.picId,
           link: createUrlLink(e.detail.picId)
         })
-        link.innerHTML = createLink(href, t('pages.home.report_button_text'))
+        link.innerHTML = `<div>
+                           ${createFullScreenButton()}
+                           ${createLink(
+                             href,
+                             t('pages.home.report_button_text')
+                           )}
+                          </div>`
       }
     }
   )
@@ -142,8 +154,7 @@ async function setupViewerMap(tiles: string): Promise<void> {
 }
 async function setupMap(tiles: string): Promise<void> {
   let paramsMap: MapInterface
-  paramsMap = { minZoom: 7 }
+  paramsMap = { users: [props.userId], minZoom: 7 }
-  //virer
   if (tiles && tiles.length) {
     const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
     paramsMap = {
@@ -162,7 +173,6 @@ async function setupMap(tiles: string): Promise<void> {
     }
   )
   viewer.value.addEventListener('ready', () => {
-    viewer.value.setFilters({ user: props.userId }, true)
     viewer.value.fitBounds(bbox, {
       padding: { top: 70, bottom: 70, left: 70, right: 70 },
       maxZoom: 14,

src/locales/en.json

@@ -50,6 +50,7 @@
       "sequence_published": "Published",
       "sequence_waiting": "Still processing",
       "sequence_hidden": "Hidden",
+      "sequence_form_title": "Edit the title",
       "hide_sequence_tooltip": "Hide this sequences",
       "back_button": "Back to my sequence list",
       "delete_sequence_tooltip": "Permanently delete this sequence",

src/locales/fr.json

@@ -50,6 +50,7 @@
       "sequence_published": "Publiée",
       "sequence_waiting": "En cours de publication",
       "sequence_hidden": "Masquée",
+      "sequence_form_title": "Modifier le titre",
       "hide_sequence_tooltip": "Masque la séquence sur la carte",
       "back_button": "Retourner à la liste de mes séquences",
       "delete_sequence_tooltip": "Supprime définitivement la séquence",

src/locales/hu.json

@@ -50,6 +50,7 @@
       "sequence_published": "Közzétéve",
       "sequence_waiting": "Feldolgozás alatt",
       "sequence_hidden": "Rejtett",
+      "sequence_form_title": "Szerkessze a címet",
       "hide_sequence_tooltip": "A sorozat elrejtése",
       "back_button": "Vissza a sorozatlistámhoz",
       "delete_sequence_tooltip": "A sorozat végleges törlése",

src/views/HomeView.vue

@@ -1,68 +1,18 @@
 <template>
-  <main :class="['entry-page', { 'full-viewer': isFull }]">
+  <main id="homePage" class="entry-page">
-    <section ref="sectionRef" class="entry-section">
+    <section class="entry-section">
-      <Viewer ref="viewerRef">
+      <Viewer ref="viewerRef"> </Viewer>
-        <template v-slot:fullscreen>
-          <div class="fullscreen-button">
-            <Button
-              class="desktop"
-              :text="buttonText"
-              look="button-border--black"
-              :icon="isFull ? 'bi bi-fullscreen-exit' : 'bi bi-fullscreen'"
-              @trigger="fullBrowser"
-            />
-            <Button
-              class="mobile"
-              look="button--rounded no-text"
-              :icon="isFull ? 'bi bi-fullscreen-exit' : 'bi bi-fullscreen'"
-              @trigger="fullscreen"
-            />
-          </div>
-        </template>
-      </Viewer>
     </section>
   </main>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Viewer from '@/components/Viewer.vue'
-import Button from '@/components/Button.vue'
 import type ViewerType from '@/components/Viewer.vue'
-import type { ExtendedHtmlEl } from '@/views/interfaces/HomeView'
-import { toggleFullscreen } from '@/views/utils/home'
 const { t } = useI18n()
 const viewerRef = ref<InstanceType<typeof ViewerType>>()
-const sectionRef = ref<HTMLDivElement>()
-const isFull = ref<boolean>(false)
-
-const buttonText = computed<string>(() => {
-  if (isFull.value) return t('pages.home.close_fullscreen')
-  return t('pages.home.open_fullscreen')
-})
-function fullscreen() {
-  if (sectionRef.value) {
-    const elem = sectionRef.value as ExtendedHtmlEl
-    toggleFullscreen(elem)
-    isFull.value = !isFull.value
-  }
-}
-function fullBrowser() {
-  const header = document.getElementById('navHeader')
-  const footer = document.getElementById('navFooter')
-  if (header) {
-    const isHiddenHeader = header.classList.contains('hidden')
-    if (isHiddenHeader) header.classList.remove('hidden')
-    else header.classList.add('hidden')
-  }
-  if (footer) {
-    const isHiddenHeader = footer.classList.contains('hidden')
-    if (isHiddenHeader) footer.classList.remove('hidden')
-    else footer.classList.add('hidden')
-  }
-  isFull.value = !isFull.value
-}
 </script>
 <style scoped lang="scss">
 .entry-page {
@@ -75,13 +25,6 @@ function fullBrowser() {
 .mobile {
   display: none;
 }
-.fullscreen-button {
-  position: absolute;
-  bottom: toRem(1);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1;
-}
 .focus-pic,
 .logged .entry-section {
   height: calc(100vh - #{toRem(8)});
@@ -108,12 +51,6 @@ function fullBrowser() {
   }
 }
 @media (max-width: toRem(50)) {
-  .fullscreen-button {
-    left: initial;
-    transform: initial;
-    right: toRem(1.3);
-    top: toRem(16);
-  }
   .mobile {
     display: block;
   }

src/views/MySequenceView.vue

@@ -25,25 +25,27 @@
         </div>
         <div class="menu-top">
           <div class="header-menu">
+            <div class="wrapper-title">
+              <span :class="[sequence.status, 'sequence-status']">{{
+                sequenceStatus
+              }}</span>
+              <div @click.stop class="entry-edit-text">
+                <EditText
+                  :default-text="sequence.title"
+                  :is-loading="isLoadingTitle"
+                  :form-title="$t('pages.sequence.sequence_form_title')"
+                  @triggerNewText="setNewSequenceTitle"
+                />
+              </div>
+            </div>
             <button
               data-bs-target="#collapseTarget"
               data-bs-toggle="collapse"
               class="button-collapse"
               @click="toggleMenu"
             >
-              <div class="wrapper-title">
-                <span :class="[sequence.status, 'sequence-status']">{{
-                  sequenceStatus
-                }}</span>
-                <h1 class="title desktop">
-                  {{ sequence.title }}
-                </h1>
-              </div>
               <i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
             </button>
-            <h1 class="title responsive">
-              {{ sequence.title }}
-            </h1>
           </div>
           <div v-if="isSequenceOwner" class="wrapper-button">
             <Button
@@ -211,6 +213,7 @@ import Pagination from '@/components/Pagination.vue'
 import InputCheckbox from '@/components/InputCheckbox.vue'
 import Loader from '@/components/Loader.vue'
 import ImageItem from '@/components/ImageItem.vue'
+import EditText from '@/components/EditText.vue'
 import Viewer from '@/components/Viewer.vue'
 import type ViewerType from '@/components/Viewer.vue'
 import { durationCalc, formatDate } from '@/utils/dates'
@@ -254,6 +257,7 @@ let headerPanelIsOpen = ref<boolean>(true)
 let isShiftPressed = ref<boolean>(false)
 let itemSelected = ref<string>('')
 let isLoading = ref<boolean>(false)
+let isLoadingTitle = ref<boolean>(false)
 const collapseMenu = ref<HTMLDivElement>()
 const deleteAll = ref<HTMLDivElement>()
 const menuHeight = ref<string>()
@@ -321,7 +325,15 @@ watchEffect(async () => {
     }
   )
 })
-
+async function setNewSequenceTitle(value: string | null): Promise<void> {
+  isLoadingTitle.value = true
+  if (value && value.length > 0) {
+    await patchACollection(route.params.id, { title: value })
+    const fetchCollectionInfo = await fetchCollection(route.params.id)
+    formatSequenceFetched(fetchCollectionInfo.data)
+    isLoadingTitle.value = false
+  }
+}
 function getCurrentPicId(id: string): string {
   const parseParams = new URLSearchParams(window.location.search)
   const pict = parseParams.get('currentPic')
@@ -442,7 +454,7 @@ async function patchCollection(): Promise<void> {
   let visible
   if (sequence.value?.status === 'ready') visible = 'false'
   else visible = 'true'
-  await patchACollection(route.params.id, visible)
+  await patchACollection(route.params.id, { visible: visible })
   const fetchCollectionInfo = await fetchCollection(route.params.id)
   formatSequenceFetched(fetchCollectionInfo.data)
   if (visible === 'false') hiddeAllPictures()
@@ -641,8 +653,7 @@ async function patchOrDeleteCollectionItems(
   align-items: center;
 }
 .wrapper-title {
-  display: flex;
+  min-width: 60%;
-  align-items: center;
 }
 .wrapper-button {
   display: flex;
@@ -682,6 +693,7 @@ async function patchOrDeleteCollectionItems(
 }
 .title {
   @include text(h4);
+  text-align: left;
   color: var(--grey-dark);
   margin-right: toRem(1);
   margin-bottom: 0;
@@ -690,8 +702,9 @@ async function patchOrDeleteCollectionItems(
   display: none;
 }
 .menu-top {
+  position: relative;
   margin: toRem(2) toRem(2) 0;
-  padding: toRem(1) toRem(2);
+  padding: toRem(2.5) toRem(2) toRem(1);
   border: toRem(0.1) solid var(--grey);
   border-radius: toRem(0.5);
   background-color: var(--blue-semi);
@@ -699,12 +712,16 @@ async function patchOrDeleteCollectionItems(
 .header-menu {
   display: flex;
   justify-content: space-between;
+  margin-bottom: toRem(1);
 }
 .sequence-status {
-  @include text(xs-r-regular);
+  position: absolute;
-  border-radius: toRem(1);
+  top: 0;
-  padding: toRem(0.5) toRem(1);
+  left: 0;
-  margin-right: toRem(1);
+  z-index: 1;
+  @include text(xss-regular);
+  border-radius: toRem(0.4);
+  padding: toRem(0.3) toRem(0.8);
   color: var(--white);
   &.ready {
     background-color: var(--green);
@@ -723,11 +740,9 @@ async function patchOrDeleteCollectionItems(
   border: none;
   background-color: transparent;
   padding: 0;
-  display: flex;
+  position: absolute;
-  align-items: center;
+  top: 0;
-  justify-content: space-between;
+  right: toRem(2);
-  width: 100%;
-  margin-bottom: toRem(1);
 }
 .bi-plus,
 .bi-dash {
@@ -795,9 +810,8 @@ async function patchOrDeleteCollectionItems(
   justify-content: center;
 }
 @media (max-width: toRem(102.4)) {
-  .header-menu {
+  .wrapper-title {
-    flex-direction: column;
+    width: 90%;
-    align-items: flex-start;
   }
   .block-collapse {
     flex-direction: column;
@@ -846,9 +860,10 @@ async function patchOrDeleteCollectionItems(
     margin-bottom: toRem(1);
   }
   .button-collapse {
-    width: 100%;
     justify-content: space-between;
     margin-bottom: 0;
+    top: toRem(-1);
+    right: 0;
   }
   .photo-item {
     width: 100%;
@@ -905,6 +920,7 @@ async function patchOrDeleteCollectionItems(
   }
   .menu-top {
     width: 0vw;
+    padding: toRem(2.5) toRem(1);
   }
   .button-close {
     position: absolute;
@@ -920,9 +936,6 @@ async function patchOrDeleteCollectionItems(
     background-color: var(--white);
     border: toRem(0.1) solid var(--black);
   }
-  .menu-top {
-    padding: toRem(1);
-  }
   .menu-is-open {
     .menu-right {
       z-index: 3;

src/views/MySequencesView.vue

@@ -59,7 +59,9 @@
           {{ $t('pages.sequences.title') }}
         </h1>
         <Button
-          v-if="filterDate.start || filterDate.end || sortDate.sortBy"
+          v-if="
+            filterDate.start || filterDate.end || sortDate.sortBy || filterBbox
+          "
           look="button-border--black"
           :text="$t('pages.sequences.reset_filter_button')"
           @trigger="resetAllFilter"
@@ -121,7 +123,7 @@
         <li
           v-if="userSequences.length"
           v-for="item in userSequences"
-          class="sequence-item"
+          :class="['sequence-item', { 'sequence-selected': item.id === seqId }]"
           @mouseover="goToSequence(item)"
         >
           <router-link
@@ -130,7 +132,6 @@
               name: 'sequence',
               params: { id: item.id }
             }"
-            @mouseover.stop
           >
             <div class="wrapper-thumb">
               <img
@@ -334,6 +335,7 @@ const headerLisPos = ref<PositionInterface | null>(null)
 async function resetAllFilter(): Promise<void> {
   filterDate.value = { start: null, end: null, type: '' }
   sortDate.value = { sortBy: null }
+  filterBbox.value = null
   formatUri()
   await updateSequence(uri.value)
 }
@@ -388,7 +390,7 @@ async function patchCollection(sequence: SequenceLinkInterface): Promise<void> {
   let visible
   if (sequence['geovisio:status'] === 'ready') visible = 'false'
   else visible = 'true'
-  await patchACollection(sequence.id, visible)
+  await patchACollection(sequence.id, { visible: visible })
   await fetchAndFormatSequence()
   if (viewerRef.value) viewerRef.value.viewer.reloadVectorTiles()
   isLoading.value = false
@@ -484,8 +486,6 @@ function goToSequence(sequence: SequenceLinkInterface): void {
       sequence.extent.spatial.bbox[0][0],
       sequence.extent.spatial.bbox[0][1]
     ],
-    zoom: 10,
-    //peut être à virer
     duration: 0
   })
 }
@@ -575,7 +575,7 @@ async function updateFilters(value: {
 watchEffect(() => {
   if (viewerRef.value && viewerRef.value.viewer) {
     viewerRef.value.viewer.addEventListener(
-      'hover',
+      'select',
       (e: { detail: { seqId: string } }) => {
         if (seqId.value === e.detail.seqId) return
         seqId.value = e.detail.seqId
@@ -681,9 +681,9 @@ watchEffect(() => {
   &:nth-child(2n) {
     background-color: var(--white);
   }
-  &:hover {
+  &:hover,
+  &.sequence-selected {
     background-color: var(--blue-semi);
-    color: var(--white);
   }
 }
 .wrapper-button {

src/views/UploadPicturesView.vue

@@ -39,12 +39,14 @@
         <p class="import-text">
           {{ $t('pages.upload.description_title_sequence') }}
         </p>
-        <EditText
+        <div class="wrapper-edit-text">
-          :default-text="newSequenceTitle || sequenceTitle"
+          <EditText
-          :is-loading="isLoading"
+            :default-text="newSequenceTitle || sequenceTitle"
-          :is-loaded="isLoaded"
+            :is-loading="isLoading"
-          @triggerNewText="setNewSequenceTitle"
+            :is-loaded="isLoaded"
-        />
+            @triggerNewText="setNewSequenceTitle"
+          />
+        </div>
         <form>
           <div class="wrapper-form">
             <InputUpload
@@ -346,6 +348,9 @@ h3 {
 .import-text {
   @include text(m-r-regular);
 }
+.wrapper-edit-text {
+  margin-bottom: toRem(2);
+}
 .entry-license {
   margin-bottom: toRem(1);
 }

src/views/interfaces/common/index.ts

@@ -1,5 +1,6 @@
 export interface MapInterface {
   startWide?: boolean
+  users?: string[]
   maxZoom?: number
   minZoom?: number
   style?: object | string

src/views/utils/sequence/request.ts

@@ -11,9 +11,9 @@ function deleteACollection(collectionId: string | string[]): Promise<unknown> {
 
 function patchACollection(
   collectionId: string | string[],
-  visible: string
+  fieldObject: object
 ): Promise<unknown> {
-  return axios.patch(`api/collections/${collectionId}`, { visible: visible })
+  return axios.patch(`api/collections/${collectionId}`, fieldObject)
 }
 
 function deleteACollectionItem(