Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-07-01 06:26:15 +00:00
Code Issues Actions Projects Releases Wiki Activity

Address selection: add store + addressSuggestion

Browse Source
This commit is contained in:
nobohan 2021-05-10 12:12:04 +02:00
parent b934c2eeaf
commit efb9bc938a
6 changed files with 234 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/api.js Normal file
View File

@ -0,0 +1,14 @@
/*
* Endpoint chill_main_address_reference_api_show
* method GET, get AddressReference Object
* @returns {Promise} a promise containing all AddressReference object
*
*/
export const getReferenceAddress = () => {
const url = `/api/1.0/main/address-reference.json`;
return fetch(url)
.then(response => {
if (response.ok) { return response.json(); }
throw Error('Error with request resource response');
});
};

34
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/index.js
View File

@ -1,32 +1,22 @@
import { createApp } from 'vue'
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
import { appMessages } from './js/i18n'
import { addressMessages } from './js/i18n'
import { getDataPromise } from './store'
import App from './App.vue';
// getDataPromise.then(store => {
getDataPromise.then(store => {
// console.log('store address', store.state.address);
console.log('store address', store.state.referenceAddresses);
// const i18n = _createI18n(appMessages);
// console.log(i18n)
const i18n = _createI18n(addressMessages);
// const app = createApp({
// template: `<app></app>`,
// })
// .use(store)
// .use(i18n)
// .component('app', App)
// .mount('#address');
const app = createApp({
template: `<app></app>`,
})
.use(store)
.use(i18n)
.component('app', App)
.mount('#address');
// });
const i18n = _createI18n(appMessages);
const app = createApp({
template: `<app></app>`,
})
.use(i18n)
.component('app', App)
.mount('#address');
});

8
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/js/i18n.js
View File

@ -1,15 +1,13 @@
// import { mainMessages } from 'ChillMainAssets/vuejs/_js/i18n'
const appMessages = {
const addressMessages = {
fr: {
address: {
id: "id",
},
add_an_address: 'Ajouter une adresse'
}
};
// Object.assign(appMessages.fr, mainMessages.fr);
export {
appMessages
addressMessages
};

115
src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/store/index.js
View File

@ -0,0 +1,115 @@
import 'es6-promise/auto';
import { createStore } from 'vuex';
import { getReferenceAddress } from '../api';
//import { searchPersons } from 'ChillPersonAssets/vuejs/_api/AddPersons'
const debug = process.env.NODE_ENV !== 'production';
// const id = window.accompanyingCourseId; //tmp TODO
const getDataPromise = getReferenceAddress()
.then(referenceAddresses => new Promise((resolve, reject) => {
const store = createStore({
strict: debug,
state: {
referenceAddresses: referenceAddresses.results,
countries: ['france', 'belgium'] //TODO fetch countries from CHILL API
// add_persons: {
// query: "",
// suggested: [],
// selected: []
// },
// errorMsg: []
},
getters: {
getCountries: state => state.countries,
getReferenceAddresses: state => state.referenceAddresses,
// getReferenceAddressesCities: state => {}, //TODO get unique cities from addressReference
},
mutations: {
// removeParticipation(state, item) {
// //console.log('mutation: remove item', item.id);
// state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== item);
// },
// closeParticipation(state, { participation, payload }) {
// console.log('### mutation: close item', { participation, payload });
// // temporaire, le temps que le backend ajoute la enddate
// participation.endDate = { datetime: "2021-05-06T10:49:00+0200" };
// // trouve dans le state le payload et le supprime du state
// state.accompanying_course.participations = state.accompanying_course.participations.filter(participation => participation !== payload);
// // pousse la participation
// state.accompanying_course.participations.push(participation);
// },
// addParticipation(state, { participation, payload }) {
// //console.log('### mutation: add participation', participation);
// state.accompanying_course.participations.push(participation);
// //console.log('count participations from state', state.accompanying_course.participations.length);
// //console.log('avant', state.add_persons.selected);
// state.add_persons.selected = state.add_persons.selected.filter(value => value !== payload);
// //console.log('après', state.add_persons.selected);
// state.add_persons.query = "";
// state.add_persons.suggested = [];
// },
// setQuery(state, query) {
// //console.log('q=', query);
// state.add_persons = Object.assign({}, state.add_persons, query);
// },
// loadSuggestions(state, suggested) {
// state.add_persons.suggested = suggested;
// },
// updateSelected(state, value) {
// state.add_persons.selected = value;
// }
},
actions: {
// removeParticipation({ commit }, payload) {
// commit('removeParticipation', payload);
// },
// closeParticipation({ commit }, payload) {
// console.log('## action: fetch delete participation: payload', payload.person.id);
// postParticipation(id, payload.person.id, 'DELETE')
// .then(participation => new Promise((resolve, reject) => {
// //console.log('payload', payload);
// commit('closeParticipation', { participation, payload });
// resolve();
// }))
// .catch((error) => {
// console.log('error', error);
// state.errorMsg.push(error.message);
// });
// },
// addParticipation({ commit }, payload) {
// console.log('## action: fetch post participation: payload', payload.id);
// postParticipation(id, payload.id, 'POST')
// .then(participation => new Promise((resolve, reject) => {
// commit('addParticipation', { participation, payload });
// resolve();
// }))
// .catch((error) => {
// state.errorMsg.push(error.message);
// });
// },
// setQuery({ commit }, payload) {
// commit('setQuery', payload);
// //console.log('## action: setquery: payload', payload);
// if (payload.query.length >= 3) {
// searchPersons(payload.query)
// .then(suggested => new Promise((resolve, reject) => {
// commit('loadSuggestions', suggested.results);
// resolve();
// }));
// } else {
// commit('loadSuggestions', []);
// }
// },
// updateSelected({ commit }, payload) {
// //console.log('## action: update selected values: payload', payload);
// commit('updateSelected', payload);
// }
}
});
resolve(store);
}));
export { getDataPromise };

65
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddAddress.vue
View File

@ -1,7 +1,6 @@
<template>
<button class="sc-button bt-create centered mt-4" @click="openModal">
<!-- {{ $t('add_addresses.search_add_others_addresses') }} -->
ajoute address
{{ $t('add_an_address') }}
</button>
<teleport to="body">
@ -10,13 +9,28 @@
@close="modal.showModal = false">
<template v-slot:header>
<h3 class="modal-title">mon titre</h3>
<h3 class="modal-title">{{ $t('add_an_address') }}</h3>
</template>
<!-- <template v-slot:body-fixed>
<div class="search">
<label style="float: right;">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label>
<input id="search-persons"
name="query"
v-model="query"
:placeholder="$t('add_persons.search_some_persons')"
ref="search" />
<i class="fa fa-search fa-lg"></i>
</div>
</template> -->
<template v-slot:body>
<!--span class="discret">Selection: {{ selected }}</span-->
<div class="results">
<!-- <div class="count">
<div class="count">
<span>
<a v-if="suggestedCounter > 0" href="#">
{{ $t('action.check_all')}}</a>
@ -28,13 +42,13 @@
</span>
</div>
<person-suggestion
v-for="item in this.selectedAndSuggested.slice().reverse()"
<address-suggestion
v-for="item in this.referenceAddresses.slice().reverse()"
v-bind:item="item"
v-bind:key="item.id">
</person-suggestion>
</address-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">
{{ $t('action.create') }} "{{ query }}"
</button> -->
</div>
@ -53,13 +67,13 @@
<script>
import { mapState } from 'vuex';
import Modal from './Modal';
// import PersonSuggestion from 'ChillPersonAssets/vuejs/_components/PersonSuggestion'; //TODO import AddressSuggestions
import AddressSuggestion from './AddressSuggestion';
export default {
name: 'AddAddresses',
components: {
Modal,
// PersonSuggestion,
AddressSuggestion,
},
data() {
return {
@ -71,6 +85,7 @@ export default {
},
computed: {
...mapState(['add_addresses']),
referenceAddresses() {return this.$store.getters.getReferenceAddresses;}
// query: {
// set(query) {
// this.$store.dispatch('setQuery', { query });
@ -79,21 +94,21 @@ export default {
// return this.add_persons.query;
// }
// },
// suggested() { //TODO
// return this.add_persons.suggested;
// },
// suggestedCounter() {
// return this.add_persons.suggested.length;
// },
// selected() {
// return this.add_persons.selected;
// },
// selectedCounter() {
// return this.add_persons.selected.length;
// },
// selectedAndSuggested() {
// return this.$store.getters.selectedAndSuggested;
// }
// suggested() { //TODO
// return this.add_persons.suggested;
// },
// suggestedCounter() {
// return this.add_persons.suggested.length;
// },
// selected() {
// return this.add_persons.selected;
// },
// selectedCounter() {
// return this.add_persons.selected.length;
// },
// selectedAndSuggested() {
// return this.$store.getters.selectedAndSuggested;
// }
},
methods: {
openModal() {

50
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressSuggestion.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<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.street }}
{{ item.streetNumber }}
</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>
</div> -->
</div>
</template>
<script>
export default {
name: 'AddressSuggestion',
props: ['item'],
data() {
},
computed: {
selected: {
set(value) {
this.$store.dispatch('updateSelected', value);
},
// get() {
// return this.$store.state.add_persons.selected; //TODO
// }
},
//selectedAndSuggested() {
// return this.$store.getters.selectedAndSuggested;
//},
// isChecked() {
// return (this.selected.indexOf(this.item) === -1) ? false : true;
// }
}
};
</script>