adding addPersons component with modal, search field and basic suggestions

This commit is contained in:
2021-04-30 17:10:12 +02:00
parent 35e6d36ce0
commit 3d45b6687f
10 changed files with 163 additions and 22 deletions

View File

@@ -1,6 +1,7 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
import { getAccompanyingCourse, postParticipation } from '../api/accompanyingCourse';
import { getAccompanyingCourse, postParticipation } from '../api';
import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons'
const debug = process.env.NODE_ENV !== 'production';
@@ -13,6 +14,10 @@ let getDataPromise = getAccompanyingCourse(id)
strict: debug,
state: {
accompanying_course: accompanying_course,
add_persons: {
query: "",
suggested: []
},
errorMsg: []
},
getters: {
@@ -22,23 +27,39 @@ let getDataPromise = getAccompanyingCourse(id)
console.log('remove item', item.id);
state.accompanying_course.participations = state.accompanying_course.participations.filter(
participation => participation !== item
)
);
},
addParticipation(state, item) {
console.log('add new item');
state.accompanying_course.participations.push(item)
state.accompanying_course.participations.push(item);
},
setQuery(state, query) {
console.log('q=', query);
state.add_persons = Object.assign({}, state.add_persons, query);
},
loadSuggestions(state, suggestions) {
state.add_persons.suggested = suggestions;
}
},
actions: {
addParticipation({ commit }, payload) {
console.log('payload', payload);
commit('addParticipation', payload);
commit('addParticipation', payload);
postParticipation(id, payload.id).catch((error) => {
commit('removeParticipation', payload)
commit('removeParticipation', payload);
state.errorMsg.push(error.message);
})
// result action ??
}) // result action ??
},
setQuery({ commit }, payload) {
commit('setQuery', payload);
if (payload.query.length >= 3) {
searchPersons(payload.query)
.then(suggested => new Promise((resolve, reject) => {
commit('loadSuggestions', suggested);
resolve();
}));
} else {
commit('loadSuggestions', []);
}
}
}
});