src/assets/styles/openlayers-custom.css

+/* OPENLAYERS */
+.ol-zoom{
+  right: 5px !important;
+  left:unset !important;
+}
+ 
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  padding: 15px 5px 15px 15px;
+  border-radius: 10px;
+  bottom: 12px;
+  left: -120px;
+  width: 240px;
+  line-height: 1.4;
+  -webkit-box-shadow: 0 3px 14px rgba(0,0,0,.4);
+  box-shadow: 0 3px 14px rgba(0,0,0,.4);
+}
+
+.ol-popup #popup-content {
+  line-height: 1.3;
+  font-size: .95em;
+}
+.ol-popup #popup-content h4 {
+  margin-right: 15px;
+  margin-bottom: .5em;
+  color: #cacaca;
+}
+.ol-popup #popup-content h4,
+.ol-popup #popup-content div {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ol-popup #popup-content div {
+  color: #434343;
+}
+.ol-popup #popup-content .fields {
+  max-height: 200px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 10px;
+  display: block; /* overide .ui.form.fields rule conflict in featureEdit page */
+  margin: 0; /* overide .ui.form.fields rule conflict in featureEdit page */
+}
+.ol-popup #popup-content .divider {
+  margin-bottom: 0;
+}
+.ol-popup #popup-content #customFields h5 {
+  max-height: 20;
+  margin: .5em 0;
+}
+
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 50%;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 50%;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  font: 18px/24px Tahoma,Verdana,sans-serif;
+  color: #757575;
+}
+.ol-popup-closer:after {
+  content: "×";
+}
+.ol-scale-line {
+  left: 2em;
+  background: hsla(0,0%,100%,.5);
+  padding: 0;
+}
+.ol-scale-line-inner {
+  color: #333;
+  font-size: 0.9em;
+  text-align: left;
+  padding-left: 0.5em;
+  border: 2px solid #777;
+  border-top: none;
+}
+
+.ol-control {
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+}
+
+.ol-control button {
+  background-color: #fff;
+  color: #000;
+  height: 30px;
+  width: 30px;
+  font: 700 18px Lucida Console,Monaco,monospace;
+  margin: 0;
+}
+.ol-control button:hover {
+  cursor: pointer;
+  background-color: #ebebeb;
+}
+.ol-control button:focus {
+  background-color: #ebebeb;
+}
+
+/* hide the popup before the map get loaded */
+.map-container > #popup.ol-popup {
+  display: none;
+}
+
+.ol-full-screen {
+  top: calc(1em + 60px);
+  right: 5px !important;
+}
+
+/* Geolocation button */
+div.geolocation-container {
+  position: absolute;
+  right: 6px;
+  z-index: 9;
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+  border-radius: 4px;
+}
+button.button-geolocation {
+  border: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
+  background-color: #fff;
+  color: rgb(39, 39, 39);
+  width: 30px;
+  height: 30px;
+  font: 700 18px Lucida Console,Monaco,monospace;
+  border-radius: 2px;
+  line-height: 1.15;
+  cursor: pointer;
+}
+button.button-geolocation:hover {
+    background-color: #ebebeb;
+  }
+button.button-geolocation.tracking {
+  background-color: rgba(255, 145, 0, 0.904);
+  color: #fff;
+}
+button.button-geolocation i {
+  margin: 0;
+  vertical-align: top; /* strangely top is the only value that center at middle */
+  background-image: url(../img/geolocation-icon.png);
+  background-size: cover;
+  width: 25px;
+  height: 25px;
+}
\ No newline at end of file

src/assets/styles/sidebar-layers.css

@@ -13,8 +13,7 @@
   border: 1px solid grey;
   top: 0;
   position: absolute;
-  /* Under this value, the map hide the sidebar */
-  z-index: 400;
+  z-index: 9;
 }
 
 .sidebar-layers {
@@ -62,7 +61,7 @@
 
 .sidebar-container.expanded .layers-icon svg path,
 .sidebar-container.closing .layers-icon svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 @keyframes open-sidebar {
@@ -132,7 +131,7 @@
 }
 
 .layers-icon:hover svg path {
-  fill: #00b5ad;
+  fill: var(--primary-color, #00b5ad);
 }
 
 .basemaps-title {
@@ -144,7 +143,6 @@
 }
 
 /* Layer item */
-
 .layer-item {
   padding-bottom: 0.5rem;
 }
@@ -164,6 +162,7 @@
 
 .range-container {
   display: flex;
+  min-width: 15em; /* give space for the bubble since adding a min-width to keep its shape */
 }
 
 .range-output-bubble {
@@ -172,6 +171,8 @@
   padding: 4px 7px;
   border-radius: 40px;
   background-color: #2c3e50;
+  min-width: 2em;
+  text-align: center;
 }
 
 /* Overrides default padding of semantic-ui accordion */

src/axios-client.js

+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
+
+// Add a request interceptor
+axios.interceptors.request.use(function (config) {
+
+  config.headers['X-CSRFToken'] = (name => {
+    const re = new RegExp(name + '=([^;]+)');
+    const value = re.exec(document.cookie);
+    return (value != null) ? unescape(value[1]) : null;
+  })('csrftoken');
+
+  return config;
+
+}, function (error) {
+  return Promise.reject(error);
+});
+
+// Add a response interceptor
+axios.interceptors.response.use(function (response) {
+
+  response.headers['X-CSRFToken'] = (name => {
+    const re = new RegExp(name + '=([^;]+)');
+    const value = re.exec(document.cookie);
+    return (value != null) ? unescape(value[1]) : null;
+  })('csrftoken');
+
+  return response;
+
+}, function (error) {
+  return Promise.reject(error);
+});
+
+export default axios;

src/components/Account/UserActivity.vue

+<template>
+  <div
+    id="user-activity"
+    class="ui stackable cards"
+  >
+    <!-- EVENTS -->
+    <div class="red card">
+      <div class="content">
+        <div class="center aligned header">
+          Mes dernières notifications reçues
+        </div>
+        <div class="center aligned description">
+          <div class="ui relaxed list">
+            <div
+              v-for="item in events"
+              :key="item.id"
+              class="item"
+            >
+              <div :class="['content', { 'ellipsis nowrap': item.related_feature.title }]">
+                {{ getNotificationName(item.event_type, item.object_type) }}
+
+                <div 
+                  v-if="item.object_type === 'project'"
+                >
+                  <router-link
+                    v-if="item.project_title"
+                    :to="{
+                      name: 'project_detail',
+                      params: { slug: item.project_slug },
+                    }"
+                  >
+                    {{ item.project_title }}
+                  </router-link>
+                  <span
+                    v-else
+                    class="meta"
+                  ><del>{{ item.project_slug }}</del>&nbsp;(supprimé)</span>
+                </div>
+
+                <div v-else>
+                  <FeatureFetchOffsetRoute
+                    v-if="item.related_feature.deletion_on === 'None'"
+                    :feature-id="item.feature_id"
+                    :properties="{
+                      feature_type: {
+                        slug: item.feature_type_slug
+                      },
+                      title: item.related_feature.title,
+                      ...item
+                    }"
+                  />
+                  <span
+                    v-else
+                    class="meta"
+                  ><del>{{ item.data.feature_title || item.feature_id }}</del>&nbsp;(supprimé)</span>
+                </div>
+
+                <div class="description">
+                  <em>[ {{ item.created_on }}
+                    <span v-if="user">
+                      , par {{ item.display_user }}
+                    </span>
+                    ]</em>
+                </div>
+              </div>
+            </div>
+
+            <em
+              v-if="!events || events.length === 0"
+            >Aucune notification pour le moment.</em>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FEATURES -->
+    <div class="orange card">
+      <div class="content">
+        <div class="center aligned header">
+          Mes derniers signalements
+        </div>
+        <div class="center aligned description">
+          <div class="ui relaxed list">
+            <div
+              v-for="item in features"
+              :key="item.id"
+              class="item"
+            >
+              <div class="content">
+                <div>
+                  <FeatureFetchOffsetRoute
+                    v-if="item.related_feature.deletion_on === 'None'"
+                    :feature-id="item.feature_id"
+                    :properties="{
+                      feature_type: {
+                        slug: item.feature_type_slug
+                      },
+                      title: item.related_feature.title,
+                      ...item
+                    }"
+                  />
+                  <span
+                    v-else
+                    class="meta"
+                  >
+                    <del>{{ item.data.feature_title || item.feature_id }}</del>&nbsp;(supprimé)
+                  </span>
+                </div>
+
+                <div class="description">
+                  <em>[ {{ item.created_on }}
+                    <span v-if="user">
+                      , par {{ item.display_user }}
+                    </span>
+                    ]</em>
+                </div>
+              </div>
+            </div>
+            <em
+              v-if="!features || features.length === 0"
+            >Aucun signalement pour le moment.</em>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- COMMENTS -->
+    <div class="yellow card">
+      <div class="content">
+        <div class="center aligned header">
+          Mes derniers commentaires
+        </div>
+        <div class="center aligned description">
+          <div class="ui relaxed list">
+            <div
+              v-for="item in comments"
+              :key="item.id"
+              class="item"
+            >
+              <div class="content">
+                <div>
+                  <FeatureFetchOffsetRoute
+                    v-if="item.related_feature.deletion_on === 'None'"
+                    :feature-id="item.feature_id"
+                    :properties="{
+                      feature_type: {
+                        slug: item.feature_type_slug
+                      },
+                      title: quoteComment(item.data.comment),
+                      ...item
+                    }"
+                  />
+                  <span
+                    v-else
+                    class="meta"
+                  >
+                    <del>{{ item.data.comment }}</del>&nbsp;(supprimé)
+                  </span>
+                </div>
+
+                <div class="description">
+                  <em>[ {{ item.created_on }}
+                    <span v-if="user">
+                      , par {{ item.display_user }}
+                    </span>
+                    ]</em>
+                </div>
+              </div>
+            </div>
+
+            <em
+              v-if="!comments || comments.length === 0"
+            >Aucun commentaire pour le moment.</em>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+import miscAPI from '@/services/misc-api';
+import FeatureFetchOffsetRoute from '@/components/Feature/FeatureFetchOffsetRoute';
+
+export default {
+  name: 'UserActivity',
+
+  components: {
+    FeatureFetchOffsetRoute,
+  },
+
+  data() {
+    return {
+      events: [],
+      features: [],
+      comments: [],
+    };
+  },
+
+  computed: {
+    ...mapState([
+      'user',
+    ]),
+
+    isSharedProject() {
+      return this.$route.path.includes('projet-partage');
+    },
+  },
+
+  created(){
+    this.getEvents();
+    // unset project to avoid interfering with generating query in feature links 
+    this.$store.commit('projects/SET_PROJECT', null);
+  },
+
+  methods: {
+    getEvents(){
+      miscAPI.getUserEvents(this.$route.params.slug)
+        .then((data)=>{
+          this.events = data.events;
+          this.features = data.features;
+          this.comments = data.comments;
+        });
+    },
+
+    getNotificationName(eventType, objectType) {
+      if (eventType === 'create') {
+        if (objectType === 'feature') {
+          return 'Signalement créé';
+        } else if (objectType === 'comment') {
+          return 'Commentaire créé';
+        } else if (objectType === 'attachment') {
+          return 'Pièce jointe ajoutée';
+        } else if (objectType === 'project') {
+          return 'Projet créé';
+        }
+      } else if (eventType === 'update') {
+        if (objectType === 'feature') {
+          return 'Signalement mis à jour';
+        } else if (objectType === 'project') {
+          return 'Projet mis à jour';
+        }
+      } else if (eventType === 'delete') {
+        if (objectType === 'feature') {
+          return 'Signalement supprimé';
+        } else if (objectType === 'project') {
+          return 'Projet mis à jour';
+        } else {
+          return 'Événement inconnu';
+        }
+      }
+    },
+
+    quoteComment(comment) {
+      return `"${comment}"`;
+    },
+  }
+
+};
+</script>
+
+<style scoped lang="less">
+
+#user-activity {
+  flex-flow: column;
+  margin: 1em 0;
+
+  .card {
+    margin: .875em 0;
+  }
+}
+
+</style>

src/components/Account/UserProfile.vue

+<template>
+  <div>
+    <h4 class="ui horizontal divider header">
+      PROFIL
+    </h4>
+
+    <div class="ui divided list">
+      <div class="item">
+        <div class="right floated content">
+          <div class="description">
+            <span v-if="user.username">{{ user.username }} </span>
+          </div>
+        </div>
+        <div class="content">
+          Nom d'utilisateur
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="right floated content">
+          <div class="description">
+            {{ userFullname }}
+          </div>
+        </div>
+        <div class="content">
+          Nom complet
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="right floated content">
+          <div class="description">
+            {{ user.email }}
+          </div>
+        </div>
+        <div class="content">
+          Adresse e-mail
+        </div>
+      </div>
+
+      <div class="item">
+        <div class="right floated content">
+          <div class="description">
+            {{ user.is_superuser ? "Oui" : "Non" }}
+          </div>
+        </div>
+        <div class="content">
+          Administrateur
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="qrcode"
+      class="qrcode"
+    >
+      <img
+        :src="qrcode"
+        alt="qrcode"
+      >
+      <p>
+        Ce QR code vous permet de vous connecter à l'application mobile GéoContrib (bientôt disponible)
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+import QRCode from 'qrcode';
+
+export default {
+
+  name: 'UserProfile',
+
+  data() {
+    return {
+      qrcode: null
+    };
+  },
+
+  computed: {
+    ...mapState([
+      'configuration',
+      'user',
+      'userToken'
+    ]),
+
+    userFullname() {
+      if (this.user.first_name || this.user.last_name) {
+        return `${this.user.first_name} ${this.user.last_name}`;
+      }
+      return null;
+    },
+  },
+
+  created() {
+    this.GET_USER_TOKEN()
+      .then(async () => {
+        try {
+          const qrcodeData = {
+            url: `${this.configuration.VUE_APP_DJANGO_BASE}/geocontrib/`,
+            token: this.userToken
+          };
+          this.qrcode = await QRCode.toDataURL(JSON.stringify(qrcodeData));
+        } catch (err) {
+          console.error(err);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  },
+
+  methods: {
+    ...mapActions([
+      'GET_USER_TOKEN'
+    ])
+  }
+
+};
+</script>
+
+<style scoped lang="less">
+.qrcode {
+  img {
+    display: block;
+    margin: auto;
+    width: 12rem;
+  }
+  p {
+    font-size: 0.8rem;
+    font-style: italic;
+    text-align: center;
+  }
+}
+</style>

src/components/Account/UserProjectsList.vue

+<template>
+  <div>
+    <h4 class="ui horizontal divider header">
+      MES PROJETS
+    </h4>
+
+    <div class="ui divided items">
+      <div
+        :class="['ui inverted dimmer', { active: projectsLoading }]"
+      >
+        <div class="ui text loader">
+          Récupération des projets en cours...
+        </div>
+      </div>
+      <div
+        v-for="project in projectsArray"
+        :key="project.slug"
+        class="item"
+      >
+        <div
+          v-if="user_permissions[project.slug].can_view_project"
+          class="item-content-wrapper"
+        >
+          <div class="ui tiny image">
+            <img
+              v-if="project.thumbnail"
+              class="ui small image"
+              alt="Thumbnail projet"
+              :src="
+                project.thumbnail.includes('default')
+                  ? require('@/assets/img/default.png')
+                  : DJANGO_BASE_URL + project.thumbnail + refreshId()
+              "
+              height="200"
+            >
+          </div>
+          <div class="middle aligned content">
+            <router-link
+              :to="{
+                name: 'project_detail',
+                params: { slug: project.slug },
+              }"
+              class="header"
+            >
+              {{ project.title }}
+            </router-link>
+            <div class="description">
+              <p>{{ project.description }}</p>
+            </div>
+            <div class="meta top">
+              <span
+                class="right floated"
+              >
+                <strong>Projet {{ project.moderation ? "" : "non" }} modéré</strong>
+              </span>
+              <span>
+                Niveau d'autorisation requis : {{ project.access_level_pub_feature }}
+              </span><br>
+              <span>
+                Mon niveau d'autorisation :
+                <span v-if="USER_LEVEL_PROJECTS && project">
+                  {{ USER_LEVEL_PROJECTS[project.slug] }}
+                </span>
+                <span v-if="user && user.is_administrator">
+                  {{ "+ Gestionnaire métier" }}
+                </span>
+              </span>
+            </div>
+            <div class="meta">
+              <span
+                class="right floated"
+                :data-tooltip="`Projet créé le ${project.created_on}`"
+              >
+                <i
+                  class="calendar icon"
+                  aria-hidden="true"
+                />
+                &nbsp;{{ project.created_on }}
+              </span>
+              <span data-tooltip="Membres">
+                {{ project.nb_contributors }}&nbsp;
+                <i
+                  class="user icon"
+                  aria-hidden="true"
+                />
+              </span>
+              <span data-tooltip="Signalements publiés">
+                {{ project.nb_published_features }}&nbsp;
+                <i
+                  class="map marker icon"
+                  aria-hidden="true"
+                />
+              </span>
+              <span data-tooltip="Commentaires">
+                {{ project.nb_published_features_comments }}&nbsp;
+                <i
+                  class="comment icon"
+                  aria-hidden="true"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- PAGINATION -->
+      <Pagination
+        v-if="count"
+        :nb-pages="Math.ceil(count/10)"
+        @page-update="changePage"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapMutations, mapActions } from 'vuex';
+
+import Pagination from '@/components/Pagination.vue';
+
+export default {
+
+  name: 'UserProjectList',
+
+  components: {
+    Pagination,
+  },
+
+  data() {
+    return {
+      projectsLoading: true,
+    };
+  },
+
+  computed: {
+    ...mapState([
+      'user',
+      'USER_LEVEL_PROJECTS',
+      'user_permissions',
+    ]),
+    // todo : filter projects to user
+    ...mapState('projects', [
+      'projects',
+      'count',
+    ]),
+
+    DJANGO_BASE_URL() {
+      return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
+    },
+
+    isSharedProject() {
+      return this.$route.path.includes('projet-partage');
+    },
+
+    availableProjects() {
+      if (this.isSharedProject) {
+        return this.projects.filter((el) => el.slug === this.$route.params.slug);
+      }
+      return this.projects;
+    },
+
+    projectsArray() { //* if only one project, only project object is returned
+      return Array.isArray(this.projects) ? this.projects : [this.projects];
+    }
+  },
+
+  created(){
+    this.SET_PROJECTS([]); //* empty previous project to avoid undefined user_permissions[project.slug]
+    this.getData();
+  },
+
+
+  methods: {
+    ...mapMutations('projects', [
+      'SET_CURRENT_PAGE',
+      'SET_PROJECTS',
+    ]),
+
+    ...mapActions('projects', [
+      'GET_PROJECTS',
+    ]),
+
+    refreshId() {
+      const crypto = window.crypto || window.msCrypto;
+      var array = new Uint32Array(1);
+      return '?ver=' + crypto.getRandomValues(array); // Compliant for security-sensitive use cases
+    },
+
+    getData(page) {
+      this.loading = true;
+      this.GET_PROJECTS({ ismyaccount: true, projectSlug: this.$route.params.slug, page })
+        .then(() => this.projectsLoading = false)
+        .catch(() => this.projectsLoading = false);
+    },
+
+    changePage(e) {
+      this.getData(e);
+    },
+
+  }
+
+};
+</script>
+
+<style lang="less" scoped>
+
+.ui.divided.items {
+  .item {
+    .item-content-wrapper {
+      width: 100%;
+      margin: 0;
+      padding: 1em 0;
+      display: flex;
+
+      .middle.aligned.content {
+        .header {
+          font-size: 1.28571429em;
+          font-weight: 600;
+          color: rgb(31, 31, 31)
+        }
+      }
+    }
+  }
+  > .item:nth-child(2) {
+    border: none !important;
+  }
+}
+
+.description {
+  p {
+    text-align: justify;
+  }
+}
+
+@media only screen and (min-width: 767px) {
+  .item-content-wrapper {
+    align-items: flex-start;
+
+    .middle.aligned.content {
+      width: 100%;
+      padding: 0 0 0 1.5em;
+
+      .meta.top {
+        span {
+          line-height: 1.2em;
+        }
+      }
+    }
+  }
+}
+@media only screen and (max-width: 767px) {
+  .item-content-wrapper {
+    flex-direction: column;
+    align-items: center;
+
+    .middle.aligned.content {
+      width: 80%;
+      padding: 1.5em 0 0;
+
+      .meta.top {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+
+        .right.floated {
+          float: none !important;
+          margin-left: 0 !important;
+          margin-bottom: 0.5em;
+        }
+
+        span {
+          margin: 0.15em 0;
+        }
+      }
+    }
+  }
+}
+
+</style>

src/components/AppFooter.vue

+<template>
+  <div id="app-footer">
+    <div class="ui compact text menu">
+      <router-link
+        :to="{name: 'mentions'}"
+        class="item"
+      >
+        Mentions légales
+      </router-link>
+      <router-link
+        :to="{name: 'aide'}"
+        class="item"
+      >
+        Aide
+      </router-link>
+      <p class="item">
+        Version {{ PACKAGE_VERSION }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+  name: 'AppFooter',
+
+  computed: {
+    PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || '0',
+  }
+
+};
+</script>

src/components/AppHeader.vue

+<template>
+  <div
+    id="app-header"
+    :class="$route.name"
+  >
+    <div class="menu container">
+      <div class="ui inverted icon menu">
+        <router-link
+          :is="isSharedProject ? 'span' : 'router-link'"
+          :to="isSharedProject ? '' : '/'"
+          :class="['header item', {disable: isSharedProject}]"
+        >
+          <img
+            class="ui right spaced image"
+            alt="Logo de l'application"
+            :src="logo"
+          >
+          <span class="desktop">
+            {{ APPLICATION_NAME }}
+          </span>
+        </router-link>
+        <div
+          v-if="width <= 560 || (width > 560 && project)"
+          id="menu-dropdown"
+          :class="['ui dropdown item', { 'active visible': menuIsOpen }]"
+          @click="menuIsOpen = !menuIsOpen"
+        >
+          <div
+            v-if="!isOnline"
+            class="crossed-out mobile"
+          >
+            <i
+              class="wifi icon"
+              aria-hidden="true"
+            />
+          </div>
+          <span class="expand-center">
+            <span v-if="project"> Projet : {{ project.title }} </span>
+          </span>
+          <i
+            class="dropdown icon"
+            aria-hidden="true"
+          />
+          <div
+            :class="[
+              'menu dropdown-list transition',
+              { 'visible': menuIsOpen },
+            ]"
+            style="z-index: 401"
+          >
+            <router-link
+              v-if="project"
+              :to="{
+                name: 'project_detail',
+                params: { slug: project.slug },
+              }"
+              class="item"
+            >
+              <i
+                class="home icon"
+                aria-hidden="true"
+              />Accueil
+            </router-link>
+            <router-link
+              v-if="project"
+              :to="{
+                name: 'liste-signalements',
+                params: { slug: project.slug },
+              }"
+              class="item"
+            >
+              <i
+                class="list icon"
+                aria-hidden="true"
+              />Liste & Carte
+            </router-link>
+            <router-link
+              v-if="
+                project && isOnline && hasAdminRights"
+              :to="{
+                name: 'project_mapping',
+                params: { slug: project.slug },
+              }"
+              class="item"
+            >
+              <i
+                class="map icon"
+                aria-hidden="true"
+              />Fonds cartographiques
+            </router-link>
+            <router-link
+              v-if="
+                project && isOnline && hasAdminRights"
+              :to="{
+                name: 'project_members',
+                params: { slug: project.slug },
+              }"
+              class="item"
+            >
+              <i
+                class="users icon"
+                aria-hidden="true"
+              />Membres
+            </router-link>
+            <div class="mobile">
+              <router-link
+                :is="isOnline ? 'router-link' : 'span'"
+                v-if="user"
+                :to="{
+                  name: 'my_account',
+                  params: { slug: isSharedProject && $route.params.slug ? $route.params.slug : null }
+                }"
+                class="item"
+              >
+                {{ userFullname || user.username || "Utilisateur inconnu" }}
+              </router-link>
+              <div
+                v-if="USER_LEVEL_PROJECTS && project"
+                class="item ui label vertical no-hover"
+              >
+                <!-- super user rights are higher than others -->
+                {{ user && user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
+                <br>
+              </div>
+              <div
+                v-if="user && user.is_administrator"
+                class="item ui label vertical no-hover"
+              >
+                Gestionnaire métier
+              </div>
+              <div
+                v-if="!DISABLE_LOGIN_BUTTON"
+              >
+                <a
+                  v-if="user"
+                  class="item"
+                  @click="logout"
+                ><i
+                  class="ui logout icon"
+                  aria-hidden="true"
+                />
+                </a>
+                <router-link
+                  v-else-if="!user && !SSO_LOGIN_URL"
+                  :to="{ name : 'login' }"
+                  class="item"
+                >
+                  Se connecter
+                </router-link>
+                <a
+                  v-else
+                  class="item"
+                  :href="SSO_LOGIN_URL"
+                  target="_self"
+                >Se connecter</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="desktop flex push-right-desktop item title abstract">
+          <span>
+            {{ APPLICATION_ABSTRACT }}
+          </span>
+        </div>
+        <div class="desktop flex push-right-desktop">
+          <div
+            v-if="!isOnline"
+            class="item network-icon"
+          >
+            <span
+              data-tooltip="Vous êtes hors-ligne,
+                vos changements pourront être envoyés au serveur au retour de la connexion"
+              data-position="bottom right"
+            >
+              <div class="crossed-out">
+                <i
+                  class="wifi icon"
+                  aria-hidden="true"
+                />
+              </div>
+            </span>
+          </div>
+          <router-link
+            :is="isOnline ? 'router-link' : 'span'"
+            v-if="user"
+            :to="{
+              name: 'my_account',
+              params: { slug: isSharedProject && $route.params.slug ? $route.params.slug : null }
+            }"
+            class="item"
+          >
+            {{ userFullname || user.username || "Utilisateur inconnu" }}
+          </router-link>
+          <div
+            v-if="USER_LEVEL_PROJECTS && project"
+            class="item ui label vertical no-hover"
+          >
+            <!-- super user rights are higher than others -->
+            {{ user && user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
+            <br>
+          </div>
+          <div
+            v-if="user && user.is_administrator"
+            class="item ui label vertical no-hover"
+          >
+            Gestionnaire métier
+          </div>
+          <div
+            v-if="!DISABLE_LOGIN_BUTTON"
+          >
+            <a
+              v-if="user"
+              class="item log-item"
+              @click="logout"
+            ><i
+              class="ui logout icon"
+              aria-hidden="true"
+            />
+            </a>
+            <router-link
+              v-else-if="!user && !SSO_LOGIN_URL"
+              :to="{ name : 'login' }"
+              class="item log-item"
+            >
+              Se Connecter
+            </router-link>
+            <a
+              v-else
+              class="item log-item"
+              :href="SSO_LOGIN_URL"
+              target="_self"
+            >Se connecter</a>
+          </div>
+        </div>
+      </div>
+      <MessageInfoList />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import MessageInfoList from '@/components/MessageInfoList';
+
+export default {
+
+  name: 'AppHeader',
+
+  components: {
+    MessageInfoList
+  },
+
+  data() {
+    return {
+      menuIsOpen: false,
+      width: window.innerWidth > 0 ? window.innerWidth : screen.width,
+    };
+  },
+
+  computed: {
+    ...mapState([
+      'user',
+      'USER_LEVEL_PROJECTS',
+      'configuration',
+      'loader',
+      'isOnline'
+    ]),
+    ...mapState('projects', [
+      'projects',
+      'project',
+    ]),
+
+    APPLICATION_NAME() {
+      return this.configuration.VUE_APP_APPLICATION_NAME;
+    },
+    APPLICATION_ABSTRACT() {
+      return this.configuration.VUE_APP_APPLICATION_ABSTRACT;
+    },
+    DISABLE_LOGIN_BUTTON() {
+      return this.configuration.VUE_APP_DISABLE_LOGIN_BUTTON;
+    },
+    SSO_LOGIN_URL() {
+      if (this.configuration.VUE_APP_LOGIN_URL) { 
+        // add a next parameter with the pathname as expected by OGS to redirect after login 
+        return `${this.configuration.VUE_APP_LOGIN_URL}/?next=${encodeURIComponent(window.location.pathname)}`;
+      }
+      return null;
+    },
+
+    logo() {
+      return this.configuration.VUE_APP_LOGO_PATH;
+    },
+    userFullname() {
+      if (this.user.first_name || this.user.last_name) {
+        return `${this.user.first_name} ${this.user.last_name}`;
+      }
+      return null;
+    },
+    isAdmin() {
+      return this.USER_LEVEL_PROJECTS &&
+        this.USER_LEVEL_PROJECTS[this.project.slug] === 'Administrateur projet'
+        ? true
+        : false;
+    },
+    hasAdminRights() {
+      return this.user && (this.user.is_administrator || this.user.is_superuser) || this.isAdmin;
+    },
+    isSharedProject() {
+      return this.$route.path.includes('projet-partage');
+    }
+  },
+
+  created() {
+    window.addEventListener('mousedown', this.clickOutsideMenu);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('mousedown', this.clickOutsideMenu);
+  },
+
+  methods: {
+    logout() {
+      this.$store.dispatch('LOGOUT');
+    },
+
+    clickOutsideMenu(e) {
+      if (e.target.closest && !e.target.closest('#menu-dropdown')) {
+        this.menuIsOpen = false;
+      }
+    },
+  }
+
+};
+</script>
+
+<style lang="less" scoped>
+.menu.container .header {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+  &> img {
+    max-height: 30px;
+  }
+}
+
+.vertical {
+  flex-direction: column;
+  justify-content: center;
+}
+
+.flex {
+  display: flex;
+}
+
+/* keep above loader */
+#menu-dropdown {
+  z-index: 1001;
+}
+
+.expand-center {
+  width: 100%;
+  text-align: center;
+}
+
+.network-icon {
+  padding: .5rem !important;
+}
+
+.crossed-out {
+  position: relative;
+  padding: .2em;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 45%;
+    left: -8%;
+    width: 100%;
+    border-top: 2px solid #ee2e24;
+    transform: rotate(45deg);
+    box-shadow: 0px 0px 0px 1px #373636;
+    border-radius: 3px;
+  }
+}
+
+@media screen and (max-width: 1110px) {
+  .abstract{
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 726px) {
+  .mobile {
+    display: none !important;
+  }
+  #app-header {
+    min-width: 560px;
+  }
+  .menu.container {
+    width: auto !important;
+  }
+  .push-right-desktop {
+    margin-left: auto;
+  }
+}
+
+@media screen and (max-width: 725px) {
+  .desktop {
+    display: none !important;
+  }
+  div.dropdown-list {
+    width: 100vw;
+  }
+  .menu.container .header {
+    //width: 70px;
+    width: 100%;
+  }
+  #app-header:not(.index) {
+    /*  make the logo disappear on scroll */
+    position: sticky;
+    top: -90px;
+    height: 80px;
+    .menu.container {
+      /*  make the logo disappear on scroll */
+      height: 30px;
+      position: sticky;
+      top: 0;
+    }
+  }
+  .menu.container .header > img {
+    margin: 0;
+    margin: auto;
+    max-width: 100%;
+  }
+  #menu-dropdown {
+    width: 100%;
+  }
+  #menu-dropdown > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.menu.container {
+  position: relative;
+}
+
+.disable:hover {
+  cursor: default !important;
+  background-color: #373636 !important;
+}
+
+/* keep above map controls or buttons */
+#app-header {
+  z-index: 9999;
+  .menu.container .ui.inverted.icon.menu { /* avoid adding space when messages are displayed */
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+.ui.menu .ui.dropdown .menu {
+  .item.no-hover:hover {
+    cursor: auto !important;
+    background: white !important;
+  }
+
+}
+
+/* copy style to apply inside nested div */
+.ui.menu .ui.dropdown .menu .item {
+  margin: 0;
+  text-align: left;
+  font-size: 1em !important;
+  padding: 0.78571429em 1.14285714em !important;
+  background: 0 0 !important;
+  color: #252525 !important;
+  text-transform: none !important;
+  font-weight: 400 !important;
+  box-shadow: none !important;
+  transition: none !important;
+}
+
+.item.title::before {
+  background: none !important;
+}
+
+.log-item {
+  height: 100% !important;
+}
+
+</style>
\ No newline at end of file

src/components/Dropdown.vue

+<template>
+  <div
+    :id="`custom-dropdown${identifier}`"
+    :class="[
+      'ui search selection dropdown',
+      { 'active visible': isOpen },
+      { disabled },
+    ]"
+    @click="toggleDropdown"
+  >
+    <input
+      v-if="search"
+      ref="input"
+      v-model="input"
+      class="search"
+      autocomplete="off"
+      tabindex="0"
+      :placeholder="placehold"
+      @input="isOpen = true"
+      @keyup.enter="select(0)"
+      @keyup.esc="toggleDropdown(false)"
+    >
+    <div
+      v-if="!input"
+      class="default text"
+    >
+      <div v-if="Array.isArray(selected)">
+        <span v-if="selected[0]"> {{ selected[0] }} - </span>
+        <span class="italic">{{ selected[1] }}</span>
+      </div>
+      <div v-else>
+        {{ selectedDisplay }}
+      </div>
+    </div>
+    <i
+      :class="['dropdown icon', { clear: clearable && selected }]"
+      aria-hidden="true"
+      @click="clear"
+    />
+    <div :class="['menu', { 'visible transition': isOpen }]">
+      <div
+        v-for="(option, index) in filteredOptions || ['No results found.']"
+        :id="option.name && Array.isArray(option.name) ? option.name[0] : option.name || option"
+        :key="option + index"
+        :class="[
+          filteredOptions ? 'item' : 'message',
+          { 'active selected': option.name === selected || option.id === selected },
+        ]"
+        @click="select(index)"
+      >
+        <div v-if="option.name && Array.isArray(option.name)">
+          <span v-if="option.name[0]"> {{ option.name[0] }} - </span>
+          <span class="italic">{{ option.name[1] }}</span>
+        </div>
+        <span v-else-if="option.name">
+          {{ option.name }}
+        </span>
+        <span v-else>
+          {{ option }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dropdown',
+
+  props: {
+    clearable: {
+      type: Boolean,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
+    options: {
+      type: Array,
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: null,
+    },
+    selected: {
+      type: [String, Array],
+      default: null,
+    },
+    search: {
+      type: Boolean,
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      isOpen: false,
+      input: '',
+      identifier: 0,
+    };
+  },
+
+  computed: {
+    filteredOptions: function () {
+      let options = this.options;
+      if (this.search && this.input !== '') {
+        options = this.options.filter(this.matchInput);
+      }
+      return options.length > 0 ? options : null;
+    },
+
+    placehold() {
+      return this.input ? '' : this.placeholder;
+    },
+
+    selectedDisplay() { // for project attributes, option are object and selected is an id
+      if (this.options[0] && this.options[0].name) {
+        const option = this.options.find(opt => opt.id === this.selected);
+        if (option) return option.name;
+      }
+      return this.selected;
+    }
+  },
+
+  created() {
+    const crypto = window.crypto || window.msCrypto;
+    const array = new Uint32Array(1);
+    this.identifier = Math.floor(crypto.getRandomValues(array) * 10000);
+    window.addEventListener('mousedown', this.clickOutsideDropdown);
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('mousedown', this.clickOutsideDropdown);
+  },
+
+  methods: {
+    toggleDropdown(val) {
+      if (this.isOpen) { //* if dropdown is open :
+        this.input = ''; // * -> clear input field when closing dropdown
+      } else if (this.search) { //* if dropdown is closed is a search dropdown:
+        this.$refs.input.focus({ //*  -> focus on input field
+          preventScroll: true,
+        });
+      } else if (this.clearable && val.target && this.selected) {
+        this.clear(); //* clear selected and input
+      }
+      this.isOpen = typeof val === 'boolean' ? val : !this.isOpen;
+    },
+
+    select(index) {
+      // * toggle dropdown is called several time, timeout delay this function to be the last
+      setTimeout(() => {
+        this.isOpen = false;
+      }, 0);
+      if (this.filteredOptions) {
+        this.$emit('update:selection', this.filteredOptions[index]);
+      }
+      this.input = '';
+    },
+
+    matchInput(el) {
+      let match;
+      if (el.name && Array.isArray(el.name)) {
+        match =
+          el.name[0].toLowerCase().includes(this.input.toLowerCase()) ||
+          el.name[1].toLowerCase().includes(this.input.toLowerCase());
+      } else {
+        match = el.name
+          ? el.name.toLowerCase().includes(this.input.toLowerCase())
+          : el.toLowerCase().includes(this.input.toLowerCase());
+      }
+      return match;
+    },
+
+    clear() {
+      if (this.clearable && this.selected) {
+        this.input = '';
+        this.$emit('update:selection', '');
+        if (this.isOpen) {
+          this.toggleDropdown(false);
+        }
+      }
+    },
+
+    clickOutsideDropdown(e) {
+      if (!e.target.closest(`#custom-dropdown${this.identifier}`) && this.isOpen) {
+        this.toggleDropdown(false);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ui.selection.dropdown .menu > .item {
+  white-space: nowrap;
+}
+.italic {
+  font-style: italic;
+}
+</style>

src/components/Feature/Detail/FeatureAttachements.vue

+<template>
+  <div>
+    <h2 class="ui header">
+      Pièces jointes
+    </h2>
+    <div
+      v-for="pj in attachments"
+      :key="pj.id"
+      class="ui divided items"
+    >
+      <div class="item">
+        <a
+          class="ui tiny image"
+          target="_blank"
+          :href="pj.attachment_file"
+        >
+          <img
+            :src="
+              pj.extension === '.pdf'
+                ? require('@/assets/img/pdf.png')
+                : pj.attachment_file
+            "
+            alt="Pièce jointe au signalement"
+          >
+        </a>
+        <div class="middle aligned content">
+          <a
+            class="header"
+            target="_blank"
+            :href="pj.attachment_file"
+          >{{
+            pj.title
+          }}</a>
+          <div class="description">
+            {{ pj.info }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <em v-if="attachments.length === 0">
+      Aucune pièce jointe associée au signalement.
+    </em>
+  </div>
+</template>
+
+<script>
+export default {
+
+  name: 'FeatureAttachements',
+
+  props: {
+    attachments: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  }
+
+};
+</script>

src/components/Feature/Detail/FeatureTable.vue

+<template>
+  <div>
+    <table
+      class="ui very basic table"
+      aria-describedby="Table des données du signalement"
+    >
+      <tbody>
+        <tr v-if="featureType">
+          <td>
+            <strong> Type de signalement </strong>
+          </td>
+          <td>
+            <FeatureTypeLink :feature-type="featureType" />
+          </td>
+        </tr>
+        <tr
+          v-for="field in featureFields"
+          :key="field.name"
+        >
+          <template v-if="!field.isDeactivated">
+            <td>
+              <strong :class="{ required: field.is_mandatory }">
+                {{ field.label }}
+              </strong>
+            </td>
+            <td>
+              <strong class="ui form">
+                <span
+                  v-if="fastEditionMode && canEditFeature && extra_forms.length > 0"
+                  :id="field.label"
+                >
+                  <ExtraForm
+                    ref="extraForm"
+                    :field="field"
+                  />
+                </span>
+                <i
+                  v-else-if="field.field_type === 'boolean'"
+                  :class="[
+                    'icon',
+                    field.value ? 'olive check' : 'grey times',
+                  ]"
+                  aria-hidden="true"
+                />
+                <span v-else-if="field.value && field.field_type === 'multi_choices_list'">
+                  {{ field.value.join(', ') }}
+                </span>
+                <span v-else-if="field.value && field.field_type === 'notif_group'">
+                  {{ usersGroupLabel(field) }}
+                </span>
+                <span v-else>
+                  {{ field.value && field.value.label ? field.value.label : field.value }}
+                </span>
+              </strong>
+            </td>
+          </template>
+        </tr>
+        <tr>
+          <td>
+            Auteur
+          </td>
+          <td v-if="currentFeature.properties">
+            {{ currentFeature.properties.display_creator }}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Statut
+          </td>
+          <td>
+            <i
+              v-if="currentFeature.properties && currentFeature.properties.status"
+              :class="['icon', statusIcon]"
+              aria-hidden="true"
+            />
+            <FeatureEditStatusField
+              v-if="fastEditionMode && canEditFeature && form"
+              :status="form.status.value.value || form.status.value"
+              class="inline"
+            />
+            <span v-else>
+              {{ statusLabel }}
+            </span>
+          </td>
+        </tr>
+        <tr v-if="project && project.feature_assignement">
+          <td>
+            Membre assigné
+          </td>
+          <td>
+            <ProjectMemberSelect
+              :selected-user-id="assignedMemberId"
+              :disabled="!fastEditionMode || !canEditFeature"
+              class="inline"
+              @update:user="$store.commit('feature/UPDATE_FORM_FIELD', { name: 'assigned_member', value: $event })"
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Date de création
+          </td>
+          <td v-if="currentFeature.properties && currentFeature.properties.created_on">
+            {{ currentFeature.properties.created_on | formatDate }}
+          </td>
+        </tr>
+        <tr>
+          <td>
+            Date de dernière modification
+          </td>
+          <td v-if="currentFeature.properties && currentFeature.properties.updated_on">
+            {{ currentFeature.properties.updated_on | formatDate }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3>Liaison entre signalements</h3>
+    <table
+      class="ui very basic table"
+      aria-describedby="Table des signalements lié à ce signalement"
+    >
+      <tbody>
+        <tr
+          v-for="(link, index) in linked_features"
+          :key="link.feature_to.title + index"
+        >
+          <th
+            v-if="link.feature_to.feature_type_slug"
+            scope="row"
+          >
+            {{ link.relation_type_display }}
+          </th>
+          <td
+            v-if="link.feature_to.feature_type_slug"
+          >
+            <FeatureFetchOffsetRoute
+              :feature-id="link.feature_to.feature_id"
+              :properties="{
+                title: link.feature_to.title,
+                feature_type: { slug: link.feature_to.feature_type_slug }
+              }"
+            />
+            ({{ link.feature_to.display_creator }} -
+            {{ link.feature_to.created_on }})
+          </td>
+        </tr>
+        <tr v-if="linked_features.length === 0">
+          <td>
+            <em>
+              Aucune liaison associée au signalement.
+            </em>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+
+import { mapState, mapGetters } from 'vuex';
+import FeatureTypeLink from '@/components/FeatureType/FeatureTypeLink';
+import FeatureEditStatusField from '@/components/Feature/FeatureEditStatusField';
+import ExtraForm from '@/components/ExtraForm';
+import FeatureFetchOffsetRoute from '@/components/Feature/FeatureFetchOffsetRoute';
+import ProjectMemberSelect from '@/components/ProjectMemberSelect';
+
+import { statusChoices, formatStringDate, checkDeactivatedValues } from '@/utils';
+
+export default {
+
+  name: 'FeatureTable',
+  
+  filters: {
+    formatDate(value) {
+      return formatStringDate(value);
+    },
+  },
+
+  components: {
+    FeatureTypeLink,
+    FeatureEditStatusField,
+    ExtraForm,
+    FeatureFetchOffsetRoute,
+    ProjectMemberSelect,
+  },
+
+  props: {
+    featureType: {
+      type: Object,
+      default: () => {},
+    },
+    fastEditionMode: {
+      type: Boolean,
+      default: false,
+    },
+    canEditFeature: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    ...mapState('projects', [
+      'project'
+    ]),
+    ...mapState('feature', [
+      'currentFeature',
+      'linked_features',
+      'form',
+      'extra_forms',
+    ]),
+    ...mapGetters(['usersGroupsFeatureOptions']),
+
+    statusIcon() {
+      switch (this.currentFeature.properties.status.value || this.currentFeature.properties.status) {
+      case 'archived':
+        return 'grey archive';
+      case 'pending':
+        return 'teal hourglass outline';
+      case 'published':
+        return 'olive check';
+      case 'draft':
+        return 'orange pencil alternate';
+      default:
+        return '';
+      }
+    },
+
+    statusLabel() {
+      if (this.currentFeature.properties) {
+        if (this.currentFeature.properties && this.currentFeature.properties.status.label) {
+          return this.currentFeature.properties.status.label;
+        }
+        const status = statusChoices.find(
+          (el) => el.value === this.currentFeature.properties.status
+        );
+        return status ? status.name : '';
+      }
+      return '';
+    },
+
+    featureData() {
+      if (this.currentFeature.properties && this.featureType) {
+        // retrieve value for each feature type custom field within feature data
+        const extraFieldsWithValue = this.featureType.customfield_set.map((xtraField) => {
+          return {
+            ...xtraField,
+            value: this.currentFeature.properties[xtraField.name]
+          };
+        });
+        // filter out fields not meeting condition to be activated
+        return checkDeactivatedValues(extraFieldsWithValue);
+      }
+      return [];
+    },
+
+    featureFields() {
+      return this.fastEditionMode ? this.extra_forms : this.featureData;
+    },
+
+    assignedMemberId() {
+      if (this.form && this.form.assigned_member) {
+        return this.form.assigned_member.value;
+      }
+      return this.currentFeature.properties.assigned_member;
+    },
+  },
+
+  methods: {
+    usersGroupLabel(field) {
+      const usersGroup = this.usersGroupsFeatureOptions.find((group) => group.value === field.value);
+      return usersGroup ? usersGroup.name : field.value;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+
+td {
+  strong.required:after {
+    margin: -0.2em 0em 0em 0.2em;
+    content: '*';
+    color: #ee2e24;
+  }
+}
+
+</style>