no store for AddPersons, move store in data component

note: this allow to use same addPersons component
to add participations, requestor, or interlocutors.
each addPersons component has his own data()
This commit is contained in:
Mathieu Jaumotte 2021-05-08 15:31:13 +02:00
parent ac67f56b09
commit 57c420e9dd
4 changed files with 78 additions and 33 deletions

View File

@ -25,9 +25,10 @@
<add-persons <add-persons
buttonTitle="persons_associated.add_persons" buttonTitle="persons_associated.add_persons"
v-bind:key="addNewPersons.key" v-bind:key="addPersons.key"
v-bind:options="addNewPersons.options" v-bind:options="addPersons.options"
@addNewPersons="addNewPersons"> @addNewPersons="addNewPersons"
ref="addPersons"> <!-- to cast child method -->
</add-persons> </add-persons>
</div> </div>
@ -46,7 +47,7 @@ export default {
}, },
data() { data() {
return { return {
addNewPersons: { addPersons: {
key: 'persons_associated', key: 'persons_associated',
options: { options: {
type: ['person'], type: ['person'],
@ -62,6 +63,7 @@ export default {
}), }),
methods: { methods: {
removeParticipation(item) { removeParticipation(item) {
console.log('@@ CLICK remove participation: item', item);
this.$store.dispatch('removeParticipation', item); this.$store.dispatch('removeParticipation', item);
}, },
closeParticipation(item) { closeParticipation(item) {
@ -71,10 +73,10 @@ export default {
addNewPersons({ selected, modal }) { addNewPersons({ selected, modal }) {
console.log('@@@ CLICK button addNewPersons', selected); console.log('@@@ CLICK button addNewPersons', selected);
selected.forEach(function(item) { selected.forEach(function(item) {
//console.log('# dispatch action for each item', item);
this.$store.dispatch('addParticipation', item); this.$store.dispatch('addParticipation', item);
}, this }, this
); );
this.$refs.addPersons.resetSearch(); // to cast child method
modal.showModal = false; modal.showModal = false;
} }
} }

View File

@ -1,6 +1,6 @@
import 'es6-promise/auto'; import 'es6-promise/auto';
import { createStore } from 'vuex'; import { createStore } from 'vuex';
import addPersons from './modules/addPersons' //import addPersons from './modules/addPersons'
import { getAccompanyingCourse, postParticipation } from '../api'; import { getAccompanyingCourse, postParticipation } from '../api';
const debug = process.env.NODE_ENV !== 'production'; const debug = process.env.NODE_ENV !== 'production';
@ -13,7 +13,7 @@ let initPromise = getAccompanyingCourse(id)
const store = createStore({ const store = createStore({
strict: debug, strict: debug,
modules: { modules: {
addPersons //addPersons
}, },
state: { state: {
accompanyingCourse: accompanying_course, accompanyingCourse: accompanying_course,
@ -53,12 +53,12 @@ let initPromise = getAccompanyingCourse(id)
state.errorMsg.push(error.message); state.errorMsg.push(error.message);
}); });
}, },
addParticipation(addPersons, payload) { addParticipation({ commit }, payload) {
//console.log('## action: fetch post participation: payload', payload.id); //console.log('## action: fetch post participation: payload', payload.id);
postParticipation(id, payload.id, 'POST') postParticipation(id, payload.id, 'POST')
.then(participation => new Promise((resolve, reject) => { .then(participation => new Promise((resolve, reject) => {
addPersons.commit('addParticipation', participation); commit('addParticipation', participation);
addPersons.commit('resetState', payload); //addPersons.commit('resetState', payload);
resolve(); resolve();
})) }))
.catch((error) => { .catch((error) => {

View File

@ -44,8 +44,10 @@
<person-suggestion <person-suggestion
v-for="item in this.selectedAndSuggested.slice().reverse()" v-for="item in this.selectedAndSuggested.slice().reverse()"
v-bind:key="item.id"
v-bind:item="item" v-bind:item="item"
v-bind:key="item.id"> v-bind:search="search"
@updateSelected="updateSelected">
</person-suggestion> </person-suggestion>
<button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson"> <button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
@ -66,51 +68,66 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex';
import Modal from 'ChillMainAssets/vuejs/_components/Modal'; import Modal from 'ChillMainAssets/vuejs/_components/Modal';
import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion'; import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons';
export default { export default {
name: 'AddPersons', name: 'AddPersons',
props: ['buttonTitle', 'options'],
components: { components: {
Modal, Modal,
PersonSuggestion, PersonSuggestion,
}, },
props: [
'buttonTitle',
'options'
],
emits: ['addNewPersons'],
data() { data() {
return { return {
modal: { modal: {
showModal: false, showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl" modalDialogClass: "modal-dialog-scrollable modal-xl"
}, },
search: {
query: "",
suggested: [],
selected: []
}
} }
}, },
computed: { computed: {
...mapState({
addPersons: state => state.addPersons
}),
query: { query: {
set(query, options) { set(query) {
this.$store.dispatch('setQuery', { query, options }); return this.setQuery(query);
}, },
get() { get() {
return this.addPersons.query; return this.search.query;
} }
}, },
suggested() { suggested() {
return this.addPersons.suggested; return this.search.suggested;
}, },
suggestedCounter() { suggestedCounter() {
return this.addPersons.suggested.length; return this.search.suggested.length;
}, },
selected() { selected() {
return this.addPersons.selected; return this.search.selected;
}, },
selectedCounter() { selectedCounter() {
return this.addPersons.selected.length; return this.search.selected.length;
}, },
selectedAndSuggested() { selectedAndSuggested() {
return this.$store.getters.selectedAndSuggested; const uniqBy = (a, key) => [
...new Map(
a.map(x => [key(x), x])
).values()
];
let union = [...new Set([
...this.suggested.slice().reverse(),
...this.selected.slice().reverse(),
])];
return uniqBy(union, k => k.id);
}, },
options() { options() {
return this.options; return this.options;
@ -118,13 +135,35 @@ export default {
}, },
methods: { methods: {
openModal() { openModal() {
console.log('options 1', this.options);
this.modal.showModal = true; this.modal.showModal = true;
this.$nextTick(function() { this.$nextTick(function() {
this.$refs.search.focus(); this.$refs.search.focus();
}) })
},
setQuery(query) {
console.log('options 1', this.options);
this.search.query = query;
if (query.length >= 3) {
searchPersons({ query, options: this.options })
.then(suggested => new Promise((resolve, reject) => {
this.loadSuggestions(suggested.results);
resolve();
}));
} else {
this.loadSuggestions([]);
}
},
loadSuggestions(suggested) {
this.search.suggested = suggested;
},
updateSelected(value) {
this.search.selected = value;
},
resetSearch() {
this.search.selected = [];
this.search.query = "";
this.search.suggested = [];
} }
}, },
emits: ['addNewPersons'],
} }
</script> </script>

View File

@ -5,7 +5,7 @@
<!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a--> <!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
<input class="" <input class=""
type="checkbox" type="checkbox"
v-model="selected" v-model="selected"
:value="item" /> :value="item" />
{{ item.text }} {{ item.text }}
@ -27,27 +27,31 @@ import { mapState } from 'vuex';
export default { export default {
name: 'PersonSuggestion', name: 'PersonSuggestion',
props: ['item'], props: [
'item',
'search'
],
emits: ['updateSelected'],
data() { data() {
return { return {
url: { url: {
show: '/fr/person/' + this.item.id + '/general', show: '/fr/person/' + this.item.id + '/general',
edit: '/fr/person/' + this.item.id + '/general/edit' edit: '/fr/person/' + this.item.id + '/general/edit'
} },
} }
}, },
computed: { computed: {
selected: { selected: {
set(value) { set(value) {
this.$store.dispatch('updateSelected', value); this.$emit('updateSelected', value);
}, },
get() { get() {
return this.$store.state.addPersons.selected; return this.search.selected;
} }
}, },
isChecked() { isChecked() {
return (this.selected.indexOf(this.item) === -1) ? false : true; return (this.search.selected.indexOf(this.item) === -1) ? false : true;
} }
} },
}; };
</script> </script>