mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
save checkboxes state in store
This commit is contained in:
parent
a1bb9ea352
commit
d393e74896
@ -96,11 +96,20 @@ div.vue-component {
|
||||
|
||||
//// AddPersons modal
|
||||
div.results {
|
||||
padding: 0 1.3em;
|
||||
div.list-item {
|
||||
line-height: 26pt;
|
||||
padding: 0.3em 0.8em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.checked {
|
||||
background-color: #ececec;
|
||||
border-bottom: 1px dotted #d9d9d9;
|
||||
}
|
||||
div.container {
|
||||
& > input {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
}
|
||||
div.right_actions {
|
||||
margin: 0 0 0 auto;
|
||||
& > * {
|
||||
@ -110,14 +119,12 @@ div.results {
|
||||
border: 1px solid lightgrey;
|
||||
font-size: 70%;
|
||||
padding: 4px;
|
||||
}
|
||||
span {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.discret {
|
||||
.discret {
|
||||
color: grey;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
@ -18,6 +18,14 @@ const datetimeFormats = {
|
||||
}
|
||||
}
|
||||
};
|
||||
//const pluralizationRules = {
|
||||
// 'fr': (choice, choicesLength) => {
|
||||
// if (choice === 0) {
|
||||
// return 0;
|
||||
// }
|
||||
// return (choicesLength < 4) ? 2 : 3;
|
||||
// }
|
||||
//};
|
||||
const messages = {
|
||||
fr: {
|
||||
action: {
|
||||
@ -43,10 +51,11 @@ const messages = {
|
||||
const _createI18n = (appMessages) => {
|
||||
Object.assign(messages.fr, appMessages.fr);
|
||||
return createI18n({
|
||||
locale: 'fr',
|
||||
fallbackLocale: 'fr',
|
||||
datetimeFormats,
|
||||
messages,
|
||||
locale: 'fr',
|
||||
fallbackLocale: 'fr'
|
||||
//pluralizationRules
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
@ -16,7 +16,8 @@ let getDataPromise = getAccompanyingCourse(id)
|
||||
accompanying_course: accompanying_course,
|
||||
add_persons: {
|
||||
query: "",
|
||||
suggested: []
|
||||
suggested: [],
|
||||
selected: []
|
||||
},
|
||||
errorMsg: []
|
||||
},
|
||||
@ -24,21 +25,25 @@ let getDataPromise = getAccompanyingCourse(id)
|
||||
},
|
||||
mutations: {
|
||||
removeParticipation(state, item) {
|
||||
console.log('remove item', item.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');
|
||||
//console.log('add new item');
|
||||
state.accompanying_course.participations.push(item);
|
||||
},
|
||||
setQuery(state, query) {
|
||||
console.log('q=', query);
|
||||
//console.log('q=', query);
|
||||
state.add_persons = Object.assign({}, state.add_persons, query);
|
||||
},
|
||||
loadSuggestions(state, suggestions) {
|
||||
state.add_persons.suggested = suggestions;
|
||||
},
|
||||
updateSelected(state, value) {
|
||||
console.log('update value', value);
|
||||
state.add_persons.selected = value;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -49,8 +54,8 @@ let getDataPromise = getAccompanyingCourse(id)
|
||||
commit('addParticipation', payload);
|
||||
postParticipation(id, payload.id).catch((error) => {
|
||||
commit('removeParticipation', payload);
|
||||
state.errorMsg.push(error.message);
|
||||
}) // result action ??
|
||||
state.errorMsg.push(error.message); // result action ??
|
||||
});
|
||||
},
|
||||
setQuery({ commit }, payload) {
|
||||
commit('setQuery', payload);
|
||||
@ -63,6 +68,9 @@ let getDataPromise = getAccompanyingCourse(id)
|
||||
} else {
|
||||
commit('loadSuggestions', []);
|
||||
}
|
||||
},
|
||||
updateSelected({ commit }, payload) {
|
||||
commit('updateSelected', payload);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -13,15 +13,27 @@
|
||||
</template>
|
||||
<template v-slot:body-fixed>
|
||||
|
||||
<label style="float: right;">{{ $tc('add_persons.counter', counter) }}</label>
|
||||
<input class="my-4" v-model="query" name="query" ref="search"
|
||||
<label style="float: right;">
|
||||
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
|
||||
<span v-if="selectedCounter > 0">
|
||||
{{ $tc('add_persons.selected_counter', selectedCounter) }}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<input class="my-4"
|
||||
name="query"
|
||||
ref="search"
|
||||
v-model="query"
|
||||
:placeholder="$t('add_persons.search_some_persons')" />
|
||||
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
|
||||
<!--span class="discret">Selection: {{ selected }}</span-->
|
||||
|
||||
<div class="results">
|
||||
<person-suggestion v-for="item in suggested.results"
|
||||
<person-suggestion
|
||||
v-for="item in suggested.results"
|
||||
v-bind:item="item"
|
||||
v-bind:key="item.id">
|
||||
</person-suggestion>
|
||||
@ -29,7 +41,7 @@
|
||||
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<button class="sc-button green" @click="AddPersons">
|
||||
<button class="sc-button green" @click="addPersons">
|
||||
<i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}</button>
|
||||
</template>
|
||||
</modal>
|
||||
@ -76,12 +88,21 @@ export default {
|
||||
suggested() {
|
||||
return this.add_persons.suggested;
|
||||
},
|
||||
counter() {
|
||||
suggestedCounter() {
|
||||
if (! this.add_persons.suggested.results) { return 0; }
|
||||
return this.add_persons.suggested.results.length;
|
||||
},
|
||||
selected() {
|
||||
return this.add_persons.selected;
|
||||
},
|
||||
selectedCounter() {
|
||||
if (! this.add_persons.selected) { return 0; }
|
||||
return this.add_persons.selected.length;
|
||||
},
|
||||
AddPersons() {
|
||||
addPersons() {
|
||||
console.log('add persons');
|
||||
// code here
|
||||
this.modal.showModal = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,30 @@
|
||||
<template>
|
||||
<div class="list-item">
|
||||
<div>
|
||||
<a class="discret" target="_blank" :href="url.show">{{ item.id }}</a>
|
||||
<div class="list-item" :class="{ checked: isChecked }">
|
||||
<div class="container">
|
||||
|
||||
<!--a class="discret" target="_blank" :href="url.show">{{ item.id }}</a-->
|
||||
<input class=""
|
||||
type="checkbox"
|
||||
v-model="selected"
|
||||
:value="item" />
|
||||
|
||||
{{ item.text }}
|
||||
|
||||
</div>
|
||||
<div class="right_actions">
|
||||
|
||||
<span class="badge badge-pill badge-secondary" :title="item.id">
|
||||
{{ $t('item.type_person') }}
|
||||
</span>
|
||||
<a class="sc-button bt-show" target="_blank" :title="item.id" :href="url.show"></a>
|
||||
<input class="" type="checkbox" name="" value="" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'PersonSuggestion',
|
||||
props: ['item'],
|
||||
@ -26,5 +36,18 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selected: {
|
||||
set(value) {
|
||||
this.$store.dispatch('updateSelected', value);
|
||||
},
|
||||
get() {
|
||||
return this.$store.state.add_persons.selected;
|
||||
}
|
||||
},
|
||||
isChecked() {
|
||||
return (this.selected.indexOf(this.item) === -1) ? false : true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,7 +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",
|
||||
suggested_counter: "Pas de résultats | 1 résultat | {count} résultats",
|
||||
selected_counter: " / 1 sélectionné | / {count} sélectionnés",
|
||||
search_some_persons: "Rechercher des personnes..",
|
||||
},
|
||||
item: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user