Release 2.4.0

Merge branch 'fix/auth-sequence-list' into 'develop'
Fix/auth sequence list See merge request geovisio/website!122
2024-01-31 15:24:10 +01:00 · 2024-01-31 13:39:11 +00:00 · 2024-01-31 13:39:11 +00:00 · 2024-01-31 09:00:25 +00:00 · 2024-01-31 09:00:25 +00:00
17 changed files with 577 additions and 542 deletions
--- a/CHANGELOG.md
+++ b/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
-  
--- a/package.json
+++ b/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",
--- a/src/components-viewer/reportLink.ts
+++ b/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>`
+}
--- a/src/components/Button.vue
+++ b/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);
 }

--- a/src/components/EditText.vue
+++ b/src/components/EditText.vue
@@ -1,16 +1,28 @@
 <template>
-  <div class="entry-edit">
-    <form
-      v-if="isEditTitle && !isDisabled"
-      @submit.prevent="isEditTitle = false"
-      class="edit-form"
-    >
-      <div class="wrapper-input">
-        <Input
-          id="upload-title"
-          :text="text || ''"
-          :placeholder="$t('pages.upload.edit_placeholder_input')"
-          @input="changeTextValue"
+  <div :class="['entry-edit', { 'edit-mode': isEditTitle }]">
+    <span v-if="isEditTitle && formTitle" class="form-title">{{
+      formTitle
+    }}</span>
+    <div class="entry-form">
+      <form
+        v-if="isEditTitle && !isDisabled"
+        @submit.prevent="isEditTitle = false"
+        class="edit-form"
+      >
+        <div class="wrapper-input">
+          <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%;
-  height: toRem(4.7);
+}
+.edit-mode {
+  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);
-  width: toRem(3.5);
+  height: toRem(2.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;
--- a/src/components/Input.vue
+++ b/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>
--- a/src/components/Viewer.vue
+++ b/src/components/Viewer.vue
@@ -1,7 +1,5 @@
 <template>
-  <div id="viewer" class="entry-viewer">
-    <slot name="fullscreen"></slot>
-  </div>
+  <div id="viewer" class="entry-viewer"></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(
-          href,
-          t('pages.home.sequence_title')
-        )
+        link.innerHTML = `<div>
+                           ${createFullScreenButton()}
+                           ${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 }
-  //virer
+  paramsMap = { users: [props.userId], minZoom: 7 }
  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,
--- a/src/locales/en.json
+++ b/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",
--- a/src/locales/fr.json
+++ b/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",
--- a/src/locales/hu.json
+++ b/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",
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,68 +1,18 @@
 <template>
-  <main :class="['entry-page', { 'full-viewer': isFull }]">
-    <section ref="sectionRef" class="entry-section">
-      <Viewer ref="viewerRef">
-        <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>
+  <main id="homePage" class="entry-page">
+    <section class="entry-section">
+      <Viewer ref="viewerRef"> </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;
  }
--- a/src/views/MySequenceView.vue
+++ b/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;
-  align-items: center;
+  min-width: 60%;
 }
 .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);
-  border-radius: toRem(1);
-  padding: toRem(0.5) toRem(1);
-  margin-right: toRem(1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  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;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: toRem(1);
+  position: absolute;
+  top: 0;
+  right: toRem(2);
 }
 .bi-plus,
 .bi-dash {
@@ -795,9 +810,8 @@ async function patchOrDeleteCollectionItems(
  justify-content: center;
 }
@media (max-width: toRem(102.4)) {
-  .header-menu {
-    flex-direction: column;
-    align-items: flex-start;
+  .wrapper-title {
+    width: 90%;
  }
  .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;
--- a/src/views/MySequencesView.vue
+++ b/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 {
--- a/src/views/UploadPicturesView.vue
+++ b/src/views/UploadPicturesView.vue
@@ -39,12 +39,14 @@
        <p class="import-text">
          {{ $t('pages.upload.description_title_sequence') }}
        </p>
-        <EditText
-          :default-text="newSequenceTitle || sequenceTitle"
-          :is-loading="isLoading"
-          :is-loaded="isLoaded"
-          @triggerNewText="setNewSequenceTitle"
-        />
+        <div class="wrapper-edit-text">
+          <EditText
+            :default-text="newSequenceTitle || sequenceTitle"
+            :is-loading="isLoading"
+            :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);
 }
--- a/src/views/interfaces/common/index.ts
+++ b/src/views/interfaces/common/index.ts
@@ -1,5 +1,6 @@
 export interface MapInterface {
  startWide?: boolean
+  users?: string[]
  maxZoom?: number
  minZoom?: number
  style?: object | string
--- a/src/views/utils/sequence/request.ts
+++ b/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(
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Andreani Jean	589f7c64c0	Release 2.4.0	2024-01-31 15:24:10 +01:00
Jean Andreani	459efcfd57	Merge branch 'fix/auth-sequence-list' into 'develop' Fix/auth sequence list See merge request geovisio/website!122	2024-01-31 13:39:11 +00:00
Jean Andreani	966be42f19	Fix/auth sequence list	2024-01-31 13:39:11 +00:00
Jean Andreani	c4066930ba	Merge branch 'fix/auth-sequence-list' into 'develop' Fix/auth sequence list See merge request geovisio/website!121	2024-01-31 09:00:25 +00:00
Jean Andreani	6322a75f42	Fix/auth sequence list	2024-01-31 09:00:25 +00:00