FeatureListTable.vue

<template>
  <div data-tab="list" class="dataTables_wrapper no-footer">
    <table id="table-features" class="ui compact table">
      <thead>
        <tr>
          <th class="center"></th>

          <th class="center">
            Statut
            <i
              :class="{
                down: isSortedAsc('status'),
                up: isSortedDesc('status'),
              }"
              class="icon sort"
              @click="changeSort('status')"
            />
          </th>
          <th class="center">
            Type
            <i
              :class="{
                down: isSortedAsc('feature_type'),
                up: isSortedDesc('feature_type'),
              }"
              class="icon sort"
              @click="changeSort('feature_type')"
            />
          </th>
          <th class="center">
            Nom
            <i
              :class="{
                down: isSortedAsc('title'),
                up: isSortedDesc('title'),
              }"
              class="icon sort"
              @click="changeSort('title')"
            />
          </th>
          <th class="center">
            Dernière modification
            <i
              :class="{
                down: isSortedAsc('updated_on'),
                up: isSortedDesc('updated_on'),
              }"
              class="icon sort"
              @click="changeSort('updated_on')"
            />
          </th>
          <th class="center" v-if="user">
            Auteur
            <i
              :class="{
                down: isSortedAsc('display_creator'),
                up: isSortedDesc('display_creator'),
              }"
              class="icon sort"
              @click="changeSort('display_creator')"
            />
          </th>
          <th class="center" v-if="user">
            Dernier éditeur
            <i
              :class="{
                down: isSortedAsc('display_last_editor'),
                up: isSortedDesc('display_last_editor'),
              }"
              class="icon sort"
              @click="changeSort('display_last_editor')"
            />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(feature, index) in paginatedFeatures" :key="index">
          <td class="center">
            <div
              :class="['ui checkbox', {disabled: isEditDisabled(feature)}]"
            >
              <!-- :class="['ui checkbox', {disabled: canDeleteFeature(feature)}]" -->
              <input
                type="checkbox"
                @input="storeClickedFeature(feature)"
                :id="feature.id"
                :value="feature.id"
                v-model="checked"
                :disabled="isEditDisabled(feature)"
                name="select"
              />
              <label for="select"></label>
                <!-- :disabled="canDeleteFeature(feature)" -->
            </div>
            {{canDeleteFeature(feature)}}
          </td>

          <td class="center">
            <div
              v-if="feature.properties.status.value === 'archived'"
              data-tooltip="Archivé"
            >
              <i class="grey archive icon"></i>
            </div>
            <div
              v-else-if="feature.properties.status.value === 'pending'"
              data-tooltip="En attente de publication"
            >
              <i class="teal hourglass outline icon"></i>
            </div>
            <div
              v-else-if="feature.properties.status.value === 'published'"
              data-tooltip="Publié"
            >
              <i class="olive check icon"></i>
            </div>
            <div
              v-else-if="feature.properties.status.value === 'draft'"
              data-tooltip="Brouillon"
            >
              <i class="orange pencil alternate icon"></i>
            </div>
          </td>
          <td class="center">
            <router-link
              :to="{
                name: 'details-type-signalement',
                params: {
                  feature_type_slug: feature.properties.feature_type.slug,
                },
              }"
            >
              {{ feature.properties.feature_type.title }}
            </router-link>
          </td>
          <td class="center">
            <router-link
              :to="{
                name: 'details-signalement',
                params: {
                  slug_type_signal: feature.properties.feature_type.slug,
                  slug_signal: feature.properties.slug || feature.id,
                },
              }"
              >{{ getFeatureDisplayName(feature) }}</router-link
            >
          </td>
          <td class="center">
            {{ feature.properties.updated_on }}
          </td>
          <td class="center" v-if="user">
            {{ getUserName(feature) }}
          </td>
          <td class="center" v-if="user">
            {{ feature.properties.display_last_editor }}
          </td>
        </tr>
        <tr v-if="featuresCount === 0" class="odd">
          <td colspan="5" class="dataTables_empty" valign="top">
            Aucune donnée disponible
          </td>
        </tr>
      </tbody>
    </table>
    <div
      v-if="pageNumbers.length > 1"
      id="table-features_info"
      class="dataTables_info"
      role="status"
      aria-live="polite"
    >
      Affichage de l'élément {{ pagination.start + 1 }} à
      {{ displayedPageEnd }}
      sur {{ featuresCount }} éléments
    </div>
    <div
      v-if="pageNumbers.length > 1"
      id="table-features_paginate"
      class="dataTables_paginate paging_simple_numbers"
    >
      <a
        @click="$emit('update:page', 'previous')"
        id="table-features_previous"
        :class="[
          'paginate_button previous',
          { disabled: pagination.currentPage === 1 },
        ]"
        aria-controls="table-features"
        data-dt-idx="0"
        tabindex="0"
        >Précédent</a
      >
      <span>
        <span v-if="pagination.currentPage >= 5">
          <a
            key="page1"
            @click="$emit('update:page', 1)"
            class="paginate_button"
            aria-controls="table-features"
            data-dt-idx="1"
            tabindex="0"
            >{{ 1 }}</a
          >
          <span class="ellipsis">…</span>
        </span>
        <a
          v-for="pageNumber in displayedPageNumbers"
          :key="'page' + pageNumber"
          @click="$emit('update:page', pageNumber)"
          :class="[
            'paginate_button',
            { current: pageNumber === pagination.currentPage },
          ]"
          aria-controls="table-features"
          data-dt-idx="1"
          tabindex="0"
          >{{ pageNumber }}</a
        >
        <span v-if="(lastPageNumber - pagination.currentPage) >= 4">
          <span class="ellipsis">…</span>
          <a
            :key="'page' + lastPageNumber"
            @click="$emit('update:page', lastPageNumber)"
            class="paginate_button"
            aria-controls="table-features"
            data-dt-idx="1"
            tabindex="0"
            >{{ lastPageNumber }}</a
          >
        </span>
      </span>
      <a
        id="table-features_next"
        :class="[
          'paginate_button next',
          { disabled: pagination.currentPage === pageNumbers.length },
        ]"
        aria-controls="table-features"
        data-dt-idx="7"
        tabindex="0"
        @click="$emit('update:page', 'next')"
        >Suivant</a
      >
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "FeatureListTable",

  props: [
    "paginatedFeatures",
    "checkedFeatures",
    "clickedFeatures",
    "featuresCount",
    "pagination",
    "sort",
  ],

  computed: {
    ...mapState(["user"]),
    ...mapGetters(["project", "permissions"]),
    ...mapState(["user", "USER_LEVEL_PROJECTS"]),

    checked: {
      get() {
        return this.checkedFeatures;
      },
      set(newChecked) {
        this.$store.commit("feature/UPDATE_CHECKED_FEATURES", newChecked);
      },
    },

    displayedPageEnd() {
      return this.featuresCount <= this.pagination.end
        ? this.featuresCount
        : this.pagination.end;
    },

    pageNumbers() {
      const totalPages = Math.ceil(
        this.featuresCount / this.pagination.pagesize
      );
      return [...Array(totalPages).keys()].map((pageNumb) => {
        ++pageNumb;
        return pageNumb;
      });
    },

    lastPageNumber() {
      return this.pageNumbers.slice(-1)[0];
    },

    displayedPageNumbers() {
      //* s'il y a moins de 5 pages, renvoyer toutes les pages
      if (this.lastPageNumber < 5) return this.pageNumbers
      //* si la page courante est inférieur à 5, la liste commence à l'index 0 et on retourne 5 pages
      let firstPageInList = 0;
      let pagesQuantity = 5;
      //* à partir de la 5ième page et jusqu'à la 4ième page avant la fin : n'afficher que 3 page entre les ellipses et la page courante doit être au milieu
      if (this.pagination.currentPage >= 5 && !((this.lastPageNumber - this.pagination.currentPage) < 4)) {
        firstPageInList = this.pagination.currentPage - 2;
        pagesQuantity = 3
      }
      //* à partir de 4 résultat avant la fin afficher seulement les 5 derniers résultats
      if ((this.lastPageNumber - this.pagination.currentPage) < 4) {
        firstPageInList = this.lastPageNumber - 5;
      }
      return this.pageNumbers.slice(firstPageInList, firstPageInList + pagesQuantity);
    },
  },

  methods: {
    storeClickedFeature(feature) {
      this.clickedFeatures.push({feature_id: feature.id, feature_type: feature.properties.feature_type.slug})
    },

    canDeleteFeature(feature) {
      return feature.properties.creator.username !== this.user.username &&
                  !this.user.is_superuser &&
                  !this.permissions.is_project_administrator
    },

    isEditDisabled(feature) {
      const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
      const access = {
        "Administrateur projet" : ["draft", "published", "archived"],
        "Modérateur" : ["pending"],
        "Super Contributeur" : ["draft", this.project.moderation ? "pending" : "published"],
        "Contributeur" : ["draft", this.project.moderation ? "pending" : "published"],
      };

      if (userStatus === "Contributeur") {
      //if (userStatus === "Super Contributeur" || userStatus === "Contributeur") {
        if (feature.properties.creator.username !== this.user.username) return true;
      }
      return !access[userStatus].includes(feature.properties.status.value);
    },
    
    getUserName(feature) {
      if (!feature.properties.creator) {
        return " ---- ";
      }
      return feature.properties.creator.username || " ---- ";
    },
    getFeatureDisplayName(feature) {
      return feature.properties.title || feature.id;
    },

    isSortedAsc(column) {
      return this.sort.column === column && this.sort.ascending;
    },
    isSortedDesc(column) {
      return this.sort.column === column && !this.sort.ascending;
    },

    changeSort(column) {
      if (this.sort.column === column) {
        //changer order
        this.$emit("update:sort", {
          column: this.sort.column,
          ascending: !this.sort.ascending,
        });
      } else {
        this.sort.column = column;
        this.sort.ascending = true;
        this.$emit("update:sort", { column, ascending: true });
      }
    },
  },
};
</script>

<style scoped>
/* datatables */
.dataTables_wrapper {
  position: relative;
  clear: both;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: #333;
}
.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding-top: 0.755em;
}
.dataTables_wrapper .dataTables_paginate {
  float: right;
  text-align: right;
  padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: #333 !important;
  border: 1px solid #979797;
  background-color: white;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #fff),
    color-stop(100%, #dcdcdc)
  );
  background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
  background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  color: #333 !important;
  border: 1px solid transparent;
  border-radius: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: white !important;
  border: 1px solid #111;
  background-color: #585858;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #585858),
    color-stop(100%, #111)
  );
  background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
  background: -moz-linear-gradient(top, #585858 0%, #111 100%);
  background: -ms-linear-gradient(top, #585858 0%, #111 100%);
  background: -o-linear-gradient(top, #585858 0%, #111 100%);
  background: linear-gradient(to bottom, #585858 0%, #111 100%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: #666 !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
  padding: 0 1em;
}

i.icon.sort:not(.down):not(.up) {
  color: rgb(220, 220, 220);
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    /* top: 6px; */
    left: 6px;
    /* width: 45%; */
    padding-right: 10px;
    white-space: nowrap;
  }

  /*
	Label the data
	*/
  td:nth-of-type(1):before {
    content: "";
  }
  td:nth-of-type(2):before {
    content: "Statut";
  }
  td:nth-of-type(3):before {
    content: "Type";
  }
  td:nth-of-type(4):before {
    content: "Nom";
  }
  td:nth-of-type(5):before {
    content: "Dernière modification";
  }
  td:nth-of-type(6):before {
    content: "Auteur";
  }

  .center {
    text-align: right !important;
  }

  #table-features {
    margin-left: 1em;
    width: calc(100% - 1em);
  }

  .ui.checkbox {
    position: absolute;
    left: -1.75em;
    top: 5em;
  }
}
</style>