mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
adding addPersons component with modal, search field and basic suggestions
This commit is contained in:
parent
35e6d36ce0
commit
3d45b6687f
@ -41,7 +41,7 @@
|
||||
// @import "bootstrap/scss/popover";
|
||||
// @import "bootstrap/scss/carousel";
|
||||
// @import "bootstrap/scss/spinners";
|
||||
// @import "bootstrap/scss/utilities";
|
||||
@import "bootstrap/scss/utilities";
|
||||
// @import "bootstrap/scss/print";
|
||||
|
||||
@import "custom";
|
||||
|
||||
@ -93,3 +93,14 @@ div.vue-component {
|
||||
-webkit-transform: scale(1.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
//// AddPersons modal
|
||||
ul.results {
|
||||
list-style-type: none;
|
||||
padding-left: 1em;
|
||||
&.suggestions {
|
||||
li {
|
||||
line-height: 26pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,11 +21,12 @@
|
||||
</person-item>
|
||||
</tbody>
|
||||
</table>
|
||||
<add-persons></add-persons>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="sc-button bt-create" @click="addPerson">
|
||||
<!--button class="sc-button bt-create" @click="addPerson">
|
||||
{{ $t('persons_associated.addPerson') }}
|
||||
</button>
|
||||
</button-->
|
||||
</li>
|
||||
<li>
|
||||
<button class="sc-button orange" @click="savePersons">
|
||||
@ -39,28 +40,30 @@
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import PersonItem from "./PersonItem.vue"
|
||||
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
|
||||
|
||||
let SimpsonId = 10000
|
||||
//let SimpsonId = 10000
|
||||
|
||||
export default {
|
||||
name: 'PersonsAssociated',
|
||||
components: {
|
||||
PersonItem,
|
||||
AddPersons
|
||||
},
|
||||
computed: mapState({
|
||||
participations: state => state.accompanying_course.participations,
|
||||
counter: state => state.accompanying_course.participations.length
|
||||
}),
|
||||
methods: {
|
||||
addPerson() {
|
||||
console.log('[wip] opening add persons modal');
|
||||
this.$store.dispatch('addParticipation', {
|
||||
id: SimpsonId++,
|
||||
person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
|
||||
startDate: { datetime: "1975-09-15T00:00:00+0100" },
|
||||
endDate: { datetime: "1975-09-28T00:00:00+0100" },
|
||||
})
|
||||
},
|
||||
//addPerson() {
|
||||
// console.log('[wip] opening add persons modal');
|
||||
// this.$store.dispatch('addParticipation', {
|
||||
// id: SimpsonId++,
|
||||
// person: { firstName: "Lisa", lastName: "Simpson", id: SimpsonId },
|
||||
// startDate: { datetime: "1975-09-15T00:00:00+0100" },
|
||||
// endDate: { datetime: "1975-09-28T00:00:00+0100" },
|
||||
// })
|
||||
//},
|
||||
removePerson(item) {
|
||||
this.$store.dispatch('removeParticipation', item)
|
||||
},
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal1.showModal" :modalDialogClass="modal1.modalDialogClass" @close="modal1.showModal = false">
|
||||
<template v-slot:header>
|
||||
<h3 class="modal-title">Le titre de ma modale</h3>
|
||||
@ -35,7 +36,9 @@
|
||||
{{ $t('action.next')}}</button>
|
||||
</template>
|
||||
</modal>
|
||||
</teleport>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal2.showModal" :modalDialogClass="modal2.modalDialogClass" @close="modal2.showModal = false">
|
||||
<template v-slot:header>
|
||||
<h3 class="modal-title">Une autre modale</h3>
|
||||
@ -48,6 +51,7 @@
|
||||
{{ $t('action.save')}}</button>
|
||||
</template>
|
||||
</modal>
|
||||
</teleport>
|
||||
<!-- END TESTS -->
|
||||
|
||||
</div>
|
||||
|
||||
@ -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', []);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
const
|
||||
locale = 'fr',
|
||||
format = 'json'
|
||||
;
|
||||
|
||||
let searchPersons = (query) => {
|
||||
let url = `/${locale}/search.${format}?name=person_regular&q=${query}`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
export { searchPersons };
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<button class="sc-button bt-create centered mt-4"
|
||||
@click="modal.showModal = true">
|
||||
{{ $t('add_persons.search_add_others_persons') }}
|
||||
</button>
|
||||
|
||||
<teleport to="body">
|
||||
<modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
|
||||
<template v-slot:header>
|
||||
<h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
|
||||
<label style="float: right;">{{ $tc('add_persons.counter', counter) }}</label>
|
||||
|
||||
<input class="my-4" v-model="query" name="query"
|
||||
:placeholder="$t('add_persons.search_some_persons')" />
|
||||
|
||||
<ul class="results suggestions">
|
||||
<person-suggestion v-for="item in suggested.results"
|
||||
v-bind:item="item"
|
||||
v-bind:key="item.id">
|
||||
</person-suggestion>
|
||||
</ul>
|
||||
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<button class="sc-button green" @click="modal.showModal = false">{{ $t('action.save')}}</button>
|
||||
</template>
|
||||
</modal>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import Modal from 'ChillPersonAssets/vuejs/_components/Modal';
|
||||
import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion';
|
||||
|
||||
export default {
|
||||
name: 'AddPersons',
|
||||
components: {
|
||||
Modal,
|
||||
PersonSuggestion,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modal: {
|
||||
showModal: false,
|
||||
modalDialogClass: "modal-dialog-scrollable modal-xl"
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['add_persons']),
|
||||
query: {
|
||||
set(query) {
|
||||
this.$store.dispatch('setQuery', { query });
|
||||
},
|
||||
get() {
|
||||
return this.add_persons.query;
|
||||
}
|
||||
},
|
||||
suggested() {
|
||||
return this.add_persons.suggested;
|
||||
},
|
||||
counter() {
|
||||
if (! this.add_persons.suggested.results) { return 0; }
|
||||
return this.add_persons.suggested.results.length;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<li>
|
||||
{{ item.text }}
|
||||
{{ item.id }}
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PersonSuggestion',
|
||||
props: ['item'],
|
||||
}
|
||||
</script>
|
||||
@ -3,6 +3,8 @@ const personMessages = {
|
||||
add_persons: {
|
||||
search_add_others_persons: "Rechercher et ajouter d'autres usagers",
|
||||
title: "Ajouter des usagers",
|
||||
counter: "Pas de résultats | 1 résultat | {count} résultats",
|
||||
search_some_persons: "Rechercher des personnes..",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user