mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
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:
parent
ac67f56b09
commit
57c420e9dd
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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) => {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user