From f01e6ae0832b6dbef2efe20871e95d8d171724c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e?= <tpoussard@neogeo.fr>
Date: Tue, 12 Jul 2022 14:34:01 +0200
Subject: [PATCH] add component to fast edit status in feature detail
---
src/assets/styles/base.css | 3 +
.../Feature/Detail/FeatureTable.vue | 12 ++-
.../Feature/FeatureEditStatusField.vue | 77 +++++++++++++++++++
src/store/modules/feature.store.js | 28 ++++---
src/views/Feature/FeatureDetail.vue | 5 +-
5 files changed, 114 insertions(+), 11 deletions(-)
create mode 100644 src/components/Feature/FeatureEditStatusField.vue
diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css
index 13b03980..7aa4d2c9 100644
--- a/src/assets/styles/base.css
+++ b/src/assets/styles/base.css
@@ -77,6 +77,9 @@ body {
/* ---------------------------------- */
/* UTILS */
/* ---------------------------------- */
+.inline {
+ display: inline;
+}
.no-margin {
margin: 0 !important;
}
diff --git a/src/components/Feature/Detail/FeatureTable.vue b/src/components/Feature/Detail/FeatureTable.vue
index d5ba2065..3949387e 100644
--- a/src/components/Feature/Detail/FeatureTable.vue
+++ b/src/components/Feature/Detail/FeatureTable.vue
@@ -56,7 +56,14 @@
:class="['icon', statusIcon]"
aria-hidden="true"
/>
- {{ statusLabel }}
+ <FeatureEditStatusField
+ v-if="fastEditionMode && form"
+ :status="form.status.value"
+ class="inline"
+ />
+ <span v-else>
+ {{ statusLabel }}
+ </span>
</td>
</tr>
<tr>
@@ -114,6 +121,7 @@
import { mapState } from 'vuex';
import FeatureTypeLink from '@/components/FeatureType/FeatureTypeLink';
+import FeatureEditStatusField from '@/components/Feature/FeatureEditStatusField';
import FeatureExtraForm from '@/components/Feature/Edit/FeatureExtraForm';
import { statusChoices } from '@/utils';
@@ -123,6 +131,7 @@ export default {
components: {
FeatureTypeLink,
+ FeatureEditStatusField,
FeatureExtraForm,
},
@@ -149,6 +158,7 @@ export default {
...mapState('feature', [
'currentFeature',
'linked_features',
+ 'form',
'extra_forms',
]),
diff --git a/src/components/Feature/FeatureEditStatusField.vue b/src/components/Feature/FeatureEditStatusField.vue
new file mode 100644
index 00000000..27b4f30c
--- /dev/null
+++ b/src/components/Feature/FeatureEditStatusField.vue
@@ -0,0 +1,77 @@
+<template>
+ <div class="field">
+ <Dropdown
+ v-if="selectedStatus"
+ :options="allowedStatusChoices"
+ :selected="selectedStatus.name"
+ :selection.sync="selectedStatus"
+ />
+ </div>
+</template>
+
+<script>
+import Dropdown from '@/components/Dropdown.vue';
+import { statusChoices, allowedStatus2change } from '@/utils';
+import { mapState } from 'vuex';
+
+
+export default {
+ name: 'FeatureEditStatusField',
+
+ components: {
+ Dropdown,
+ },
+
+ props: {
+ status: {
+ type: String,
+ default: '',
+ },
+ },
+
+ computed: {
+ ...mapState([
+ 'user',
+ 'USER_LEVEL_PROJECTS',
+ ]),
+ ...mapState('projects', [
+ 'project'
+ ]),
+ ...mapState('feature', [
+ 'currentFeature'
+ ]),
+ statusObject() {
+ return statusChoices.find((key) => key.value === this.status);
+ },
+
+ selectedStatus: {
+ get() {
+ return this.statusObject;
+
+ },
+ set(newValue) {
+ this.$store.commit('feature/UPDATE_FORM_FIELD', { name: 'status', value: newValue.value });
+ },
+ },
+
+ allowedStatusChoices() {
+ if (this.project && this.currentFeature && this.user) {
+ const isModerate = this.project.moderation;
+ const userStatus = this.USER_LEVEL_PROJECTS[this.project.slug];
+ const isOwnFeature = this.currentFeature.creator === this.user.id; //* si le contributeur est l'auteur du signalement
+ return allowedStatus2change(this.user, isModerate, userStatus, isOwnFeature, /* this.currentRouteName */);
+ }
+ return [];
+ },
+ },
+
+ mounted() {
+ console.log('selectedStatus', this.selectedStatus);
+
+ },
+
+ methods: {
+ }
+
+};
+</script>
\ No newline at end of file
diff --git a/src/store/modules/feature.store.js b/src/store/modules/feature.store.js
index 450290f9..ef76b951 100644
--- a/src/store/modules/feature.store.js
+++ b/src/store/modules/feature.store.js
@@ -32,6 +32,16 @@ const feature = {
UPDATE_FORM(state, payload) {
state.form = payload;
},
+ INIT_FORM(state) {
+ state.form = {
+ title: state.currentFeature.title,
+ description: { value: state.currentFeature.description },
+ status: { value: state.currentFeature.status },
+ };
+ },
+ UPDATE_FORM_FIELD(state, field) {
+ state.form[field.name].value = field.value;
+ },
UPDATE_EXTRA_FORM(state, extra_form) {
const index = state.extra_forms.findIndex(el => el.label === extra_form.label);
if (index !== -1) {
@@ -188,15 +198,14 @@ const feature = {
},
{ root: true },
);
- if (routeName.includes('details-signalement')) return;
dispatch(
'GET_PROJECT_FEATURE',
{
project_slug: rootState.projects.project.slug,
feature_id: featureId
- }
- )
+ })
.then(() => {
+ if (routeName.includes('details-signalement')) return;
router.push({
name: 'details-signalement',
params: {
@@ -219,15 +228,16 @@ const feature = {
for (const field of state.extra_forms) {
extraFormObject[field.name] = field.value;
}
- const feature = state.form || state.currentFeature;
+ //const feature = state.form || state.currentFeature;
return {
- id: feature.feature_id,
+ id: state.form.feature_id || state.currentFeature.feature_id,
type: 'Feature',
- geometry: feature.geometry || feature.geom,
+ geometry: state.form.geometry || state.form.geom ||
+ state.currentFeature.geometry || state.currentFeature.geom,
properties: {
- title: feature.title,
- description: feature.description.value,
- status: feature.status.value,
+ title: state.form.title,
+ description: state.form.description.value,
+ status: state.form.status.value,
project: rootState.projects.project.slug,
feature_type: rootState['feature-type'].current_feature_type_slug,
...extraFormObject
diff --git a/src/views/Feature/FeatureDetail.vue b/src/views/Feature/FeatureDetail.vue
index 1b88ecf9..3ede1cb7 100644
--- a/src/views/Feature/FeatureDetail.vue
+++ b/src/views/Feature/FeatureDetail.vue
@@ -259,7 +259,10 @@ export default {
this.getFeatureAttachments();
this.getLinkedFeatures();
this.DISCARD_LOADER();
- if (this.project.fast_edition_mode) this.$store.dispatch('feature/INIT_EXTRA_FORMS');
+ if (this.project.fast_edition_mode) {
+ this.$store.commit('feature/INIT_FORM');
+ this.$store.dispatch('feature/INIT_EXTRA_FORMS');
+ }
},
confirmLeave() {
--
GitLab