diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue index 9c19ba1295b96844d299b83222cd316feea89d83..b3f2fb10184ec600a3abf488ab3f950fb7d607b1 100644 --- a/src/components/feature/FeatureListTable.vue +++ b/src/components/feature/FeatureListTable.vue @@ -1,12 +1,12 @@ <template> <div data-tab="list" class="dataTables_wrapper no-footer"> - <table id="table-features" class="ui compact table"> + <table id="table-features" class="ui compact table dataTable"> <thead> <tr> - <th class="center"></th> + <th class="dt-center"></th> - <th class="center"> + <th class="dt-center"> Statut <i :class="{ @@ -17,7 +17,7 @@ @click="changeSort('status')" /> </th> - <th class="center"> + <th class="dt-center"> Type <i :class="{ @@ -28,7 +28,7 @@ @click="changeSort('feature_type')" /> </th> - <th class="center"> + <th class="dt-center"> Nom <i :class="{ @@ -39,7 +39,7 @@ @click="changeSort('title')" /> </th> - <th class="center"> + <th class="dt-center"> Dernière modification <i :class="{ @@ -50,7 +50,7 @@ @click="changeSort('updated_on')" /> </th> - <th class="center" v-if="user"> + <th class="dt-center" v-if="user"> Auteur <i :class="{ @@ -61,7 +61,7 @@ @click="changeSort('display_creator')" /> </th> - <th class="center" v-if="user"> + <th class="dt-center" v-if="user"> Dernier éditeur <i :class="{ @@ -76,27 +76,25 @@ </thead> <tbody> <tr v-for="(feature, index) in paginatedFeatures" :key="index"> - <td class="center"> + <td class="dt-center"> <div - :class="['ui checkbox', {disabled: isEditDisabled(feature)}]" + :class="['ui checkbox', {disabled: !canEditFeature(feature)}]" > - <!-- :class="['ui checkbox', {disabled: canDeleteFeature(feature)}]" --> <input type="checkbox" + v-model="checked" @input="storeClickedFeature(feature)" :id="feature.id" :value="feature.id" - v-model="checked" - :disabled="isEditDisabled(feature)" + :disabled="!canEditFeature(feature)" name="select" /> <label for="select"></label> - <!-- :disabled="canDeleteFeature(feature)" --> </div> {{canDeleteFeature(feature)}} </td> - <td class="center"> + <td class="dt-center"> <div v-if="feature.properties.status.value === 'archived'" data-tooltip="Archivé" @@ -122,7 +120,7 @@ <i class="orange pencil alternate icon"></i> </div> </td> - <td class="center"> + <td class="dt-center"> <router-link :to="{ name: 'details-type-signalement', @@ -134,7 +132,7 @@ {{ feature.properties.feature_type.title }} </router-link> </td> - <td class="center"> + <td class="dt-center"> <router-link :to="{ name: 'details-signalement', @@ -146,13 +144,13 @@ >{{ getFeatureDisplayName(feature) }}</router-link > </td> - <td class="center"> + <td class="dt-center"> {{ feature.properties.updated_on }} </td> - <td class="center" v-if="user"> + <td class="dt-center" v-if="user"> {{ getUserName(feature) }} </td> - <td class="center" v-if="user"> + <td class="dt-center" v-if="user"> {{ feature.properties.display_last_editor }} </td> </tr> @@ -325,7 +323,7 @@ export default { !this.permissions.is_project_administrator }, - isEditDisabled(feature) { + canEditFeature(feature) { const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug]; const access = { "Administrateur projet" : ["draft", "published", "archived"], @@ -334,11 +332,15 @@ export default { "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; + //if (userStatus === "Super Contributeur" || userStatus === "Contributeur") { //? should super contributeur behave the same, I don't think so + if (userStatus === "Contributeur" && feature.properties.creator.username !== this.user.username) { + return false; + } else if (access[userStatus]) { + return access[userStatus].includes(feature.properties.status.value); + } else { + return false } - return !access[userStatus].includes(feature.properties.status.value); + }, getUserName(feature) { @@ -381,6 +383,9 @@ export default { position: relative; clear: both; } +table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty { + text-align: center; +} .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, @@ -533,8 +538,8 @@ and also iPads specifically. content: "Auteur"; } - .center { - text-align: right !important; + table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.dataTables_empty { + text-align: right; } #table-features { diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue index 4f4a7c6d76012b1fce57440994e6900ae9685612..0ecff9bce7a8a860b30c8a75c7ef2940cb21be66 100644 --- a/src/views/feature/Feature_list.vue +++ b/src/views/feature/Feature_list.vue @@ -330,6 +330,7 @@ export default { }, computed: { + ...mapState(["user", "USER_LEVEL_PROJECTS"]), ...mapGetters([ 'project', 'permissions' ]), @@ -355,7 +356,55 @@ export default { }, availableStatus() { //* attente de réponse sur le ticket - return this.statusChoices.filter((status) => status) + //return this.statusChoices.filter((status) => status) + + if (this.project) { + const isModerate = this.project.moderation; + const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug]; + const isOwnFeature = this.feature + ? this.feature.creator === this.user.id //* prevent undefined feature + : false; //* si le contributeur est l'auteur du signalement + if ( + //* si admin, modérateur ou super contributeur, statuts toujours disponible: Brouillon, Publié, Archivé + userStatus === "Administrateur projet" || + (userStatus === "Super Contributeur" && !isModerate) + ) { + return this.statusChoices.filter((el) => el.value !== "pending"); + } else if (userStatus === "Super Contributeur" && isModerate) { + return this.statusChoices.filter( + (el) => el.value === "draft" || el.value === "pending" + ); + } else if (userStatus === "Modérateur") { + return this.statusChoices.filter( + (el) => el.value === "draft" || el.value === "published" + ); + } else if (userStatus === "Contributeur") { + //* cas particuliers du contributeur + if ( + this.currentRouteName === "ajouter-signalement" || + !isOwnFeature + ) { + //* même cas à l'ajout d'une feature ou si feature n'a pas été créé par le contributeur + return isModerate + ? this.statusChoices.filter( + (el) => el.value === "draft" || el.value === "pending" + ) + : this.statusChoices.filter( + (el) => el.value === "draft" || el.value === "published" + ); + } else { + //* à l'édition d'une feature et si le contributeur est l'auteur de la feature + return isModerate + ? this.statusChoices.filter( + (el) => el.value !== "published" //* toutes sauf "Publié" + ) + : this.statusChoices.filter( + (el) => el.value !== "pending" //* toutes sauf "En cours de publication" + ); + } + } + } + return []; }, featureTypeChoices() { @@ -668,10 +717,6 @@ export default { z-index: 1; } -.center { - text-align: center !important; -} - #feature-list-container { justify-content: flex-start; } @@ -703,15 +748,14 @@ export default { width: 75% !important; } } + @media screen and (max-width: 767px) { #feature-list-container > .mobile-fullwidth { width: 100% !important; } - .no-margin-mobile { margin: 0 !important; } - .no-padding-mobile { padding-top: 0 !important; padding-bottom: 0 !important; @@ -719,10 +763,12 @@ export default { .mobile-column { flex-direction: column !important; } + #button-dropdown { + transform: translate(-50px, -60px); + } #form-filters > .field.column { width: 100% !important; } - .map-container { width: 100%; }