diff --git a/src/components/feature/FeatureListTable.vue b/src/components/feature/FeatureListTable.vue
index b3f2fb10184ec600a3abf488ab3f950fb7d607b1..5aa26043cf82cb948b39470a50b4cae4fc274e64 100644
--- a/src/components/feature/FeatureListTable.vue
+++ b/src/components/feature/FeatureListTable.vue
@@ -4,9 +4,17 @@
<table id="table-features" class="ui compact table dataTable">
<thead>
<tr>
- <th class="dt-center"></th>
+ <th class="dt-center">
+ <div @click="switchMode" class="switch-buttons pointer" :data-tooltip="`Passer en mode ${mode === 'modify' ? 'suppression':'édition'}`">
+ <div><i :class="['icon pencil', {disabled: mode !== 'modify'}]"></i></div>
+ <span class="grey">| </span>
+ <div><i :class="['icon trash', {disabled: mode !== 'delete'}]"></i></div>
+ </div>
+ </th>
<th class="dt-center">
+ <div class="pointer" @click="changeSort('status')">
+
Statut
<i
:class="{
@@ -14,21 +22,23 @@
up: isSortedDesc('status'),
}"
class="icon sort"
- @click="changeSort('status')"
/>
+ </div>
</th>
<th class="dt-center">
- Type
- <i
- :class="{
- down: isSortedAsc('feature_type'),
- up: isSortedDesc('feature_type'),
- }"
- class="icon sort"
- @click="changeSort('feature_type')"
- />
+ <div class="pointer" @click="changeSort('feature_type')">
+ Type
+ <i
+ :class="{
+ down: isSortedAsc('feature_type'),
+ up: isSortedDesc('feature_type'),
+ }"
+ class="icon sort"
+ />
+ </div>
</th>
<th class="dt-center">
+ <div class="pointer" @click="changeSort('title')">
Nom
<i
:class="{
@@ -36,10 +46,11 @@
up: isSortedDesc('title'),
}"
class="icon sort"
- @click="changeSort('title')"
/>
+ </div>
</th>
<th class="dt-center">
+ <div class="pointer" @click="changeSort('updated_on')">
Dernière modification
<i
:class="{
@@ -47,30 +58,32 @@
up: isSortedDesc('updated_on'),
}"
class="icon sort"
- @click="changeSort('updated_on')"
/>
+ </div>
</th>
<th class="dt-center" v-if="user">
- Auteur
- <i
- :class="{
- down: isSortedAsc('display_creator'),
- up: isSortedDesc('display_creator'),
- }"
- class="icon sort"
- @click="changeSort('display_creator')"
- />
+ <div class="pointer" @click="changeSort('display_creator')">
+ Auteur
+ <i
+ :class="{
+ down: isSortedAsc('display_creator'),
+ up: isSortedDesc('display_creator'),
+ }"
+ class="icon sort"
+ />
+ </div>
</th>
<th class="dt-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')"
- />
+ <div class="pointer" @click="changeSort('display_last_editor')">
+ Dernier éditeur
+ <i
+ :class="{
+ down: isSortedAsc('display_last_editor'),
+ up: isSortedDesc('display_last_editor'),
+ }"
+ class="icon sort"
+ />
+ </div>
</th>
</tr>
</thead>
@@ -78,7 +91,7 @@
<tr v-for="(feature, index) in paginatedFeatures" :key="index">
<td class="dt-center">
<div
- :class="['ui checkbox', {disabled: !canEditFeature(feature)}]"
+ :class="['ui checkbox', {disabled: !checkRights(feature)}]"
>
<input
type="checkbox"
@@ -86,12 +99,13 @@
@input="storeClickedFeature(feature)"
:id="feature.id"
:value="feature.id"
- :disabled="!canEditFeature(feature)"
+ :disabled="!checkRights(feature)"
name="select"
/>
<label for="select"></label>
</div>
- {{canDeleteFeature(feature)}}
+ <!-- {{canDeleteFeature(feature)}}
+ {{canEditFeature(feature)}} -->
</td>
<td class="dt-center">
@@ -257,6 +271,7 @@ export default {
"featuresCount",
"pagination",
"sort",
+ "mode"
],
computed: {
@@ -340,7 +355,21 @@ export default {
} else {
return false
}
+ },
+ checkRights(feature) {
+ switch (this.mode) {
+ case 'modify':
+ return this.canEditFeature(feature)
+ case 'delete':
+ return this.canDeleteFeature(feature)
+ }
+ },
+
+ switchMode() {
+ this.$emit('update:mode', this.mode === 'modify' ? 'delete' : 'modify');
+ this.$emit('update:clickedFeatures', []);
+ this.$store.commit("feature/UPDATE_CHECKED_FEATURES", []);
},
getUserName(feature) {
@@ -374,6 +403,9 @@ export default {
}
},
},
+ destroyed() {
+ this.$store.commit("feature/UPDATE_CHECKED_FEATURES", []);
+ },
};
</script>
@@ -468,7 +500,23 @@ table.dataTable th.dt-center, table.dataTable td.dt-center, table.dataTable td.d
i.icon.sort:not(.down):not(.up) {
color: rgb(220, 220, 220);
}
+.pointer:hover {
+ cursor: pointer;
+}
+.switch-buttons {
+ display: flex;
+ justify-content: center;
+ align-items: baseline;
+}
+
+.grey {
+ color: #bbbbbb;
+}
+
+.ui.dropdown .menu .left.menu, .ui.dropdown > .left.menu .menu {
+ margin-right: 0 !important;
+}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 0ecff9bce7a8a860b30c8a75c7ef2940cb21be66..9f08055a416e30b2b9627ff828d3ee9d23b37f13 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -43,12 +43,12 @@
@click="toggleAddFeature"
class="ui dropdown button compact button-hover-green"
data-tooltip="Ajouter un signalement"
- data-position="bottom left"
+ data-position="bottom right"
>
<i class="plus fitted icon"></i>
<div
v-if="showAddFeature"
- class="menu transition visible"
+ class="menu left transition visible"
style="z-index: 9999"
>
<div class="header">Ajouter un signalement du type</div>
@@ -70,16 +70,16 @@
<div
- v-if="checkedFeatures.length > 0"
+ v-if="checkedFeatures.length > 0 && mode === 'modify'"
@click="toggleModifyStatus"
class="ui dropdown button compact button-hover-green margin-left-25"
data-tooltip="Modifier le statut des Signalements"
- data-position="bottom center"
+ data-position="bottom right"
>
<i class="pencil fitted icon"></i>
<div
v-if="showModifyStatus"
- class="menu transition visible"
+ class="menu left transition visible"
style="z-index: 9999"
>
<div class="header">Modifier le statut des Signalements</div>
@@ -97,7 +97,7 @@
</div>
<div
- v-if="checkedFeatures.length"
+ v-if="checkedFeatures.length > 0 && mode === 'delete'"
@click="modalAllDelete"
class="ui button compact button-hover-red margin-left-25"
data-tooltip="Effacer tous les types de signalements sélectionnés"
@@ -170,8 +170,9 @@
v-on:update:page="handlePageChange"
v-on:update:sort="handleSortChange"
:paginatedFeatures="paginatedFeatures"
- :checkedFeatures.sync="checkedFeatures"
+ :checkedFeatures="checkedFeatures"
:clickedFeatures.sync="clickedFeatures"
+ :mode.sync="mode"
:featuresCount="featuresCount"
:pagination="pagination"
:sort="sort"
@@ -260,6 +261,7 @@ export default {
baseUrl: this.$store.state.configuration.BASE_URL,
clickedFeatures: [],
modalAllDeleteOpen: false,
+ mode: "modify",
map: null,
zoom: null,
lat: null,
@@ -743,6 +745,10 @@ export default {
padding: 0 !important;
}
+.ui.dropdown .menu .left.menu, .ui.dropdown > .left.menu .menu {
+ margin-right: 0 !important;
+}
+
@media screen and (min-width: 767px) {
.twelve-wide {
width: 75% !important;