src/components/Feature/FeatureEditStatusField.vue

@@ -56,12 +56,19 @@ export default {
       },
     },
 
+    isFeatureCreator() {
+      if (this.currentFeature && this.currentFeature.properties && this.user) {
+        return this.currentFeature.properties.creator === this.user.id ||
+          this.currentFeature.properties.creator.username === this.user.username;
+      }
+      return false;
+    },
+
     allowedStatusChoices() {
       if (this.project && this.currentFeature && this.user) {
         const isModerate = this.project.moderation;
         const userStatus = this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.project.slug];
-        const isOwnFeature = this.currentFeature.creator === this.user.id; //* si le contributeur est l'auteur du signalement
-        return allowedStatus2change(this.user, isModerate, userStatus, isOwnFeature, /* this.currentRouteName */);
+        return allowedStatus2change(this.user, isModerate, userStatus, this.isFeatureCreator);
       }
       return [];
     },

src/components/Feature/FeatureFetchOffsetRoute.vue

+<template>
+  <router-link
+    :is="query && Number.isInteger(query.offset) ? 'router-link' : 'span'"
+    :to="{
+      name: 'details-signalement-filtre',
+      params: { slug },
+      query,
+    }"
+  >
+    {{ properties.title || featureId }}
+  </router-link>
+</template>
+
+<script>
+
+import { mapState } from 'vuex';
+import axios from '@/axios-client.js';
+
+import projectAPI from '@/services/project-api';
+
+export default {
+
+  name: 'FeatureFetchOffsetRoute',
+
+  props: {
+    featureId: {
+      type: String,
+      default: '',
+    },
+    properties: {
+      type: Object,
+      default: () => {},
+    },
+  },
+
+  data() {
+    return {
+      position: null,
+      slug: this.$route.params.slug || this.properties.project_slug,
+      ordering: null,
+      filter: null,
+    };
+  },
+  
+  computed: {
+    ...mapState('projects', [
+      'project'
+    ]),
+    query() {
+      if (this.ordering) {
+        const searchParams = { ordering: this.ordering };
+        if (this.filter === 'feature_type_slug') { // when feature_type is the default filter of the project, 
+          searchParams['feature_type_slug'] = this.properties.feature_type.slug; // get its slug for the current feature
+        }
+        if (Number.isInteger(this.position)) {
+          searchParams['offset'] = this.position; // get its slug for the current feature
+        }
+        return searchParams;
+      }
+      return null;
+    },
+  },
+
+  watch: {
+    featureId() {
+      this.initData();
+    }
+  },
+
+  created() {
+    this.initData();
+  },
+
+  methods: {
+    async initData() {
+      if (this.project) {
+        this.setProjectParams(this.project);
+      } else {
+        await this.getProjectFilterAndSort();
+      }
+      this.getFeaturePosition(this.featureId)
+        .then((position) => {
+          if (Number.isInteger(position)) {
+            this.position = position;
+          }
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+
+    setProjectParams(project) {
+      this.ordering = project.feature_browsing_default_sort;
+      if (project.feature_browsing_default_filter === 'feature_type_slug') { // when feature_type is the default filter of the project, 
+        this.filter = this.properties.feature_type.slug;
+      }
+    },
+
+    async getFeaturePosition(featureId) {
+      const searchParams = new URLSearchParams(this.query);
+      const response = await axios.get(`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.slug}/feature/${featureId}/position-in-list/?${searchParams.toString()}`);
+      if (response && response.status === 200) {
+        return response.data;
+      }
+      return null;
+    },
+
+    async getProjectFilterAndSort() {
+      const project = await projectAPI.getProject(this.$store.state.configuration.VUE_APP_DJANGO_API_BASE, this.slug);
+      if (project) this.setProjectParams(project);
+    }
+  }
+};
+</script>

src/components/Feature/FeatureLinkedForm.vue

@@ -135,9 +135,9 @@ export default {
       this.$store.commit('feature/REMOVE_LINKED_FORM', this.linkedForm.dataKey);
     },
 
-    selectFeatureTo(feature) {
-      if (feature && feature.feature_id) {
-        this.form.feature_to.value = feature.feature_id;
+    selectFeatureTo(featureId) {
+      if (featureId) {
+        this.form.feature_to.value = featureId;
         this.updateStore();
       }
     },

src/components/FeatureType/FeatureTypeLink.vue

@@ -6,6 +6,7 @@
       params: { feature_type_slug: featureType.slug },
     }"
     class="feature-type-title"
+    :title="featureType.title"
   >
     <img
       v-if="featureType.geom_type === 'point'"
@@ -43,7 +44,16 @@
       src="@/assets/img/multipolygon.png"
       alt="Géométrie multipolygone"
     >
-    {{ featureType.title }}
+    <span
+      v-if="featureType.geom_type === 'none'"
+      class="list-image-type"
+      title="Aucune géométrie"
+    >
+      <i class="ui icon large outline file" />
+    </span>
+    <span class="ellipsis">
+      {{ featureType.title }}
+    </span>
   </router-link>
 </template>
 
@@ -65,14 +75,19 @@ export default {
 
 <style scoped>
 .feature-type-title {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
   line-height: 1.5em;
+  width: fit-content;
 }
 .list-image-type {
   margin-right: 5px;
   height: 25px;
-  vertical-align: bottom;
+  display: flex;
+  align-items: center;
+}
+.list-image-type > i {
+  color: #000000;
+  height: 25px;
 }
 </style>