diff --git a/src/components/Feature/FeatureListMassToggle.vue b/src/components/Feature/FeatureListMassToggle.vue deleted file mode 100644 index ff4b1da6ff6616933727a93e6595b10238a7bfd8..0000000000000000000000000000000000000000 --- a/src/components/Feature/FeatureListMassToggle.vue +++ /dev/null @@ -1,59 +0,0 @@ -<template> - <div - class="switch-buttons pointer" - :data-tooltip="`Passer en mode ${massMode === 'modify' ? 'suppression':'édition'}`" - @click="switchMode" - > - <div> - <i - :class="['icon pencil', {disabled: massMode !== 'modify'}]" - aria-hidden="true" - /> - </div> - <span class="grey">| </span> - <div> - <i - :class="['icon trash', {disabled: massMode !== 'delete'}]" - aria-hidden="true" - /> - </div> - </div> -</template> - -<script> -import { mapMutations, mapState } from 'vuex'; - -export default { - name: 'FeatureListMassToggle', - - computed: { - ...mapState('feature', ['massMode']) - }, - - methods: { - ...mapMutations('feature', [ - 'TOGGLE_MASS_MODE', - 'UPDATE_CHECKED_FEATURES', - 'UPDATE_CLICKED_FEATURES']), - - switchMode() { - this.TOGGLE_MASS_MODE(this.massMode === 'modify' ? 'delete' : 'modify'); - this.UPDATE_CLICKED_FEATURES([]); - this.UPDATE_CHECKED_FEATURES([]); - } - }, -}; -</script> - -<style scoped> -.switch-buttons { - display: flex; - justify-content: center; - align-items: baseline; -} - -.grey { - color: #bbbbbb; -} - -</style> diff --git a/src/components/Project/FeaturesListAndMap/FeatureListTable.vue b/src/components/Project/FeaturesListAndMap/FeatureListTable.vue index 69cd85d84687014a27a3c979b22cff889214d757..b000cb66c18e19655420f0f6bbcfdce975033a70 100644 --- a/src/components/Project/FeaturesListAndMap/FeatureListTable.vue +++ b/src/components/Project/FeaturesListAndMap/FeatureListTable.vue @@ -1,8 +1,44 @@ <template> <div> - <div class="table-mobile-buttons left-align"> - <FeatureListMassToggle /> + <div class="ui form"> + <div class="inline fields"> + <label>Mode de sélection :</label> + <div class="field"> + <div class="ui radio checkbox"> + <input + v-model="mode" + type="radio" + name="mode" + value="modify-status" + > + <label>Édition de statut</label> + </div> + </div> + <div class="field"> + <div class="ui radio checkbox"> + <input + v-model="mode" + type="radio" + name="mode" + value="modify-attributes" + > + <label>Édition d'attribut</label> + </div> + </div> + <div class="field"> + <div class="ui radio checkbox"> + <input + v-model="mode" + type="radio" + name="mode" + value="delete-features" + > + <label>Suppression de signalement</label> + </div> + </div> + </div> </div> + <div data-tab="list" class="dataTables_wrapper no-footer" @@ -18,7 +54,7 @@ scope="col" class="dt-center" > - <FeatureListMassToggle /> + Sélection </th> <th @@ -337,7 +373,6 @@ <script> import { mapState, mapGetters, mapMutations } from 'vuex'; -import FeatureListMassToggle from '@/components/Feature/FeatureListMassToggle'; import { formatStringDate } from '@/utils'; export default { @@ -349,10 +384,6 @@ export default { }, }, - components: { - FeatureListMassToggle, - }, - props: { paginatedFeatures: { type: Array, @@ -390,6 +421,15 @@ export default { ...mapState('projects', ['project']), ...mapState('feature', ['clickedFeatures', 'massMode']), + mode: { + get() { + return this.massMode; + }, + set(newMode) { + this.TOGGLE_MASS_MODE(newMode); + }, + }, + userStatus() { return this.USER_LEVEL_PROJECTS[this.$route.params.slug]; }, @@ -442,6 +482,7 @@ export default { ...mapMutations('feature', [ 'UPDATE_CLICKED_FEATURES', 'UPDATE_CHECKED_FEATURES', + 'TOGGLE_MASS_MODE', ]), storeClickedFeature(feature) { @@ -480,9 +521,9 @@ export default { checkRights(feature) { switch (this.massMode) { - case 'modify': + case 'modify-status': return this.canEditFeature(feature); - case 'delete': + case 'delete-features': return this.canDeleteFeature(feature); } }, diff --git a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue index a2e8029578b979abb062e153e80da30acace7988..16a760b663bd9f4df64c2cc876c14e5b9df307e7 100644 --- a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue +++ b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue @@ -86,7 +86,7 @@ </div> </div> <div - v-if="checkedFeatures.length > 0 && massMode === 'modify'" + v-if="checkedFeatures.length > 0 && massMode === 'modify-status'" class="ui dropdown button compact button-hover-green tiny-margin-left" data-tooltip="Modifier le statut des Signalements" data-position="bottom right" @@ -117,7 +117,7 @@ </div> </div> <div - v-if="checkedFeatures.length > 0 && massMode === 'delete'" + v-if="checkedFeatures.length > 0 && massMode === 'delete-features'" class="ui button compact button-hover-red tiny-margin-left" data-tooltip="Supprimer tous les signalements sélectionnés" data-position="bottom right" diff --git a/src/store/modules/feature.store.js b/src/store/modules/feature.store.js index 2466c7c6ad6e4b2c81188aadf9fe694b73d96e6f..2ad217f90f3bc8daa704e37b917411501c0f218d 100644 --- a/src/store/modules/feature.store.js +++ b/src/store/modules/feature.store.js @@ -15,7 +15,7 @@ const feature = { form: null, linkedFormset: [], //* used to edit in feature_edit linked_features: [], //* used to display in feature_detail - massMode: 'modify', + massMode: 'modify-status', }, mutations: { SET_FEATURES(state, features) {