mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
adapt multi components to new store and new api endpoints
* base of i18n (yarn add new deps)
This commit is contained in:
parent
01f9d03b14
commit
4cf77a9b0e
@ -1,10 +1,12 @@
|
||||
<template>
|
||||
<accompanying-course v-bind:accompanying_course="accompanying_course"/>
|
||||
<persons-associated v-bind:persons_associated="accompanying_course.persons"/>
|
||||
<requestor v-bind:accompanying_course="accompanying_course"/>
|
||||
<accompanying-course></accompanying-course>
|
||||
<persons-associated></persons-associated>
|
||||
<requestor></requestor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import AccompanyingCourse from './components/AccompanyingCourse.vue';
|
||||
import PersonsAssociated from './components/PersonsAssociated.vue';
|
||||
import Requestor from './components/Requestor.vue';
|
||||
@ -16,29 +18,9 @@ export default {
|
||||
PersonsAssociated,
|
||||
Requestor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
accompanying_course: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
accompanyingCourseId() {
|
||||
return window.accompanyingCourseId;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getAccompanyingCourse() {
|
||||
let data_;
|
||||
return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
this.$data.accompanying_course = data;
|
||||
});
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.getAccompanyingCourse();
|
||||
}
|
||||
computed: mapState([
|
||||
'accompanying_course'
|
||||
])
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
<template>
|
||||
--: {{ course.id }} :--
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
computed: mapState([
|
||||
'course'
|
||||
])
|
||||
//computed: {
|
||||
// courseId() {
|
||||
// return this.$store.state.course.id;
|
||||
// }
|
||||
//}
|
||||
};
|
||||
</script>
|
||||
@ -7,19 +7,21 @@ const
|
||||
// 1. chill_person_accompanying_course_api_show
|
||||
let getAccompanyingCourse = (accompanying_period_id) => {
|
||||
const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
|
||||
return fetch(url).then(response => response.json());
|
||||
return fetch(url)
|
||||
.then(response => response.json());
|
||||
};
|
||||
|
||||
// 2. chill_person_accompanying_course_api_add_participation (POST)
|
||||
let getParticipations = (accompanying_period_id) => {
|
||||
const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
|
||||
return fetch(url).then(response => response.json());
|
||||
return fetch(url)
|
||||
.then(response => response.json());
|
||||
};
|
||||
|
||||
export { getAccompanyingCourse, getParticipations };
|
||||
|
||||
|
||||
|
||||
///
|
||||
// cfr. promise.all() pour plusieurs promesses
|
||||
// catch throw sur le dernier then pour capturer l'erreur
|
||||
/// TODO
|
||||
// * cfr. promise.all() pour plusieurs promesses
|
||||
// * catch throw sur le dernier then pour capturer l'erreur
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
|
||||
const _participations = []
|
||||
|
||||
export default {
|
||||
}
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h3>Parcours</h3>
|
||||
<h3>{{ $t('title.course') }}</h3>
|
||||
<dl>
|
||||
<dt>id</dt>
|
||||
<dt>{{ $t('course.id') }}</dt>
|
||||
<dd>{{ accompanying_course.id }}</dd>
|
||||
<dt>opening_date</dt>
|
||||
<dd>{{ accompanying_course.opening_date }}</dd>
|
||||
<dt>closing_date</dt>
|
||||
<dd>{{ accompanying_course.closing_date }}</dd>
|
||||
<dt>remark</dt>
|
||||
<dt>{{ $t('course.opening_date') }}</dt>
|
||||
<dd>{{ $d(accompanying_course.openingDate.datetime, 'short') }}</dd>
|
||||
<dt>{{ $t('course.closing_date') }}</dt>
|
||||
<dd>{{ $d(accompanying_course.closingDate.datetime, 'short') }}</dd>
|
||||
<dt>{{ $t('course.remark') }}</dt>
|
||||
<dd>{{ accompanying_course.remark }}</dd>
|
||||
<dt>closing_motive</dt>
|
||||
<dt>{{ $t('course.closing_motive') }}</dt>
|
||||
<dd>{{ accompanying_course.closing_motive }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
@ -19,8 +19,10 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'AccompanyingCourse',
|
||||
props: {
|
||||
accompanying_course: Object
|
||||
computed: {
|
||||
accompanying_course() {
|
||||
return this.$store.state.accompanying_course
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,31 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td>{{ person.firstname }}</td>
|
||||
<td>{{ person.lastname }}</td>
|
||||
<td>{{ person.startdate }}</td>
|
||||
<td>{{ person.enddate }}</td>
|
||||
<td>{{ participation.person.firstName }}</td>
|
||||
<td>{{ participation.person.lastName }}</td>
|
||||
<td><span v-if="participation.startDate">
|
||||
{{ $d(participation.startDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
<td><span v-if="participation.endDate">
|
||||
{{ $d(participation.endDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<ul class="record_actions">
|
||||
<li><button class="sc-button bt-show"></button></li>
|
||||
<li><button class="sc-button bt-update"></button></li>
|
||||
<li><button class="sc-button bt-delete" @click.prevent="$emit('remove', person)"></button></li>
|
||||
<li>
|
||||
<button class="sc-button bt-show"
|
||||
:title="$t('action.show')">
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="sc-button bt-update"
|
||||
:title="$t('action.edit')">
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="sc-button bt-delete"
|
||||
:title="$t('action.remove')"
|
||||
@click.prevent="$emit('remove', participation)">
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
@ -17,9 +34,7 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'PersonItem',
|
||||
props: {
|
||||
person: { type: Object, required: true }
|
||||
},
|
||||
props: ['participation'],
|
||||
emits: ['remove']
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,32 +1,33 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h3>Usagers concernés</h3>
|
||||
|
||||
<label>{{ counter }} usagers</label>
|
||||
|
||||
<h3>{{ $t('title.persons_associated')}}</h3>
|
||||
<label>{{ $tc('persons_associated.counter', counter) }}</label>
|
||||
<table class="rounded">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="chill-orange">firstname</th>
|
||||
<th class="chill-orange">lastname</th>
|
||||
<th class="chill-orange">startdate</th>
|
||||
<th class="chill-orange">enddate</th>
|
||||
<th class="chill-orange">actions</th>
|
||||
<th class="chill-orange">{{ $t('persons_associated.firstname') }}</th>
|
||||
<th class="chill-orange">{{ $t('persons_associated.lastname') }}</th>
|
||||
<th class="chill-orange">{{ $t('persons_associated.startdate') }}</th>
|
||||
<th class="chill-orange">{{ $t('persons_associated.enddate') }}</th>
|
||||
<th class="chill-orange">{{ $t('action.actions') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<person-item
|
||||
v-for="person in persons_associated"
|
||||
v-bind:person="person"
|
||||
v-bind:key="person.id"
|
||||
@remove="removePerson" />
|
||||
v-for="participation in participations"
|
||||
v-bind:participation="participation"
|
||||
v-bind:key="participation.id"
|
||||
@remove="removePerson">
|
||||
</person-item>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li><button class="sc-button bt-create" @click="addPerson">Ajouter un usager</button></li>
|
||||
<li>
|
||||
<button class="sc-button bt-create" @click="addPerson">
|
||||
{{ $t('persons_associated.addPerson') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -38,31 +39,27 @@ export default {
|
||||
components: {
|
||||
PersonItem
|
||||
},
|
||||
props: {
|
||||
persons_associated: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
persons: this.persons_associated
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
async counter() {
|
||||
// Pourquoi je peux pas compter un tableau avec length ???!!!
|
||||
return this.persons_associated.length // <= boum !
|
||||
accompanying_course() {
|
||||
return this.$store.state.accompanying_course
|
||||
},
|
||||
participations() {
|
||||
return this.accompanying_course.participations
|
||||
},
|
||||
counter() {
|
||||
return this.participations.length
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addPerson() {
|
||||
this.persons_associated.push({
|
||||
"firstname": "Lisa",
|
||||
"lastname": "Simpson",
|
||||
"startdate": "1975-09-15",
|
||||
"enddate": "2021-04-20"
|
||||
this.$store.commit('addParticipation', {
|
||||
person: { firstName: "Lisa", lastName: "Simpson", },
|
||||
startDate: "1975-09-15", endDate: "2021-04-20"
|
||||
})
|
||||
return this.accompanying_course
|
||||
},
|
||||
removePerson(item) {
|
||||
this.persons_associated = this.persons_associated.filter(person => person !== item)
|
||||
this.$store.commit('removeParticipation', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h3>Demandeur</h3>
|
||||
<h3>{{ $t('title.requestor') }}</h3>
|
||||
{{ accompanying_course.id }}
|
||||
{{ accompanying_course.remark }}
|
||||
</div>
|
||||
@ -9,8 +9,10 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'Requestor',
|
||||
props: {
|
||||
accompanying_course: Object
|
||||
computed: {
|
||||
accompanying_course() {
|
||||
return this.$store.state.accompanying_course
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,16 +1,27 @@
|
||||
import { createApp } from 'vue';
|
||||
import createStore from './store';
|
||||
import App from './App_test.vue';
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import { datetimeFormats, messages } from '../_components/i18n.js'
|
||||
import createStore from './store'
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
createStore.then(store => {
|
||||
|
||||
//console.log('store in create_store', store);
|
||||
console.log('store course', store.state.course);
|
||||
console.log('store accompanyingCourse', store.state.accompanying_course);
|
||||
|
||||
const i18n = createI18n({
|
||||
datetimeFormats,
|
||||
messages,
|
||||
locale: 'fr',
|
||||
fallbackLocale: 'fr'
|
||||
});
|
||||
|
||||
const app = createApp({
|
||||
template: `<app></app>`,
|
||||
})
|
||||
.use(store)
|
||||
.use(i18n)
|
||||
.component('app', App)
|
||||
.mount('#accompanying-course');
|
||||
});
|
||||
|
||||
@ -7,12 +7,20 @@ const debug = process.env.NODE_ENV !== 'production';
|
||||
let promise = getAccompanyingCourse(window.accompanyingCourseId)
|
||||
.then(accompanying_course => new Promise((resolve, reject) => {
|
||||
let store = createStore({
|
||||
state() {
|
||||
return {
|
||||
course: accompanying_course
|
||||
}
|
||||
strict: debug,
|
||||
state: {
|
||||
accompanying_course: accompanying_course
|
||||
},
|
||||
strict: debug
|
||||
mutations: {
|
||||
removeParticipation(state, item) {
|
||||
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)
|
||||
}
|
||||
}
|
||||
});
|
||||
//console.log('store', store);
|
||||
resolve(store);
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
const datetimeFormats = {
|
||||
fr: {
|
||||
short: {
|
||||
year: "numeric",
|
||||
month: "numeric",
|
||||
day: "numeric"
|
||||
},
|
||||
long: {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
weekday: "short",
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: false
|
||||
}
|
||||
}
|
||||
}
|
||||
const messages = {
|
||||
fr: {
|
||||
title: {
|
||||
course: "Parcours",
|
||||
persons_associated: "Usagers concernés",
|
||||
requestor: "Demandeur",
|
||||
},
|
||||
course: {
|
||||
id: "id",
|
||||
opening_date: "Date d'ouverture",
|
||||
closing_date: "Date de clôture",
|
||||
remark: "Commentaire",
|
||||
closing_motive: "Motif de clôture",
|
||||
},
|
||||
persons_associated: {
|
||||
counter: "Pas d'usager | 1 usager | {count} usagers",
|
||||
firstname: "Prénom",
|
||||
lastname: "Nom",
|
||||
startdate: "Date d'entrée",
|
||||
enddate: "Date de sortie",
|
||||
addPerson: "Ajouter un usager",
|
||||
|
||||
},
|
||||
action: {
|
||||
actions: "Actions",
|
||||
show: "Voir",
|
||||
edit: "Modifier",
|
||||
create: "Créer",
|
||||
remove: "Enlever",
|
||||
delete: "Supprimer",
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
datetimeFormats,
|
||||
messages
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user