mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 15:13:50 +00:00
renaming vuejs root dir
This commit is contained in:
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<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';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
AccompanyingCourse,
|
||||
PersonsAssociated,
|
||||
Requestor
|
||||
},
|
||||
computed: mapState([
|
||||
'accompanying_course'
|
||||
])
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,27 @@
|
||||
const
|
||||
locale = 'fr',
|
||||
format = 'json',
|
||||
accompanying_period_id = () => window.accompanyingCourseId
|
||||
;
|
||||
|
||||
// 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());
|
||||
};
|
||||
|
||||
// 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());
|
||||
};
|
||||
|
||||
export { getAccompanyingCourse, getParticipations };
|
||||
|
||||
|
||||
|
||||
/// TODO
|
||||
// * cfr. promise.all() pour plusieurs promesses
|
||||
// * catch throw sur le dernier then pour capturer l'erreur
|
||||
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h3>{{ $t('title.course') }}</h3>
|
||||
<dl>
|
||||
<dt>{{ $t('course.id') }}</dt>
|
||||
<dd>{{ accompanying_course.id }}</dd>
|
||||
<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>{{ $t('course.closing_motive') }}</dt>
|
||||
<dd>{{ accompanying_course.closing_motive }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AccompanyingCourse',
|
||||
computed: {
|
||||
accompanying_course() {
|
||||
return this.$store.state.accompanying_course
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<tr>
|
||||
<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"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PersonItem',
|
||||
props: ['participation'],
|
||||
emits: ['remove']
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h3>{{ $t('title.persons_associated')}}</h3>
|
||||
<label>{{ $tc('persons_associated.counter', counter) }}</label>
|
||||
<table class="rounded">
|
||||
<thead>
|
||||
<tr>
|
||||
<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="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">
|
||||
{{ $t('persons_associated.addPerson') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import PersonItem from "./PersonItem.vue"
|
||||
|
||||
let SimpsonId = 10000
|
||||
|
||||
export default {
|
||||
name: 'PersonsAssociated',
|
||||
components: {
|
||||
PersonItem,
|
||||
},
|
||||
computed: mapState({
|
||||
participations: state => state.accompanying_course.participations,
|
||||
counter: state => state.accompanying_course.participations.length
|
||||
}),
|
||||
methods: {
|
||||
addPerson() {
|
||||
this.$store.commit('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.commit('removeParticipation', item)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="vue-component">
|
||||
<h3>{{ $t('title.requestor') }}</h3>
|
||||
{{ accompanying_course.id }}
|
||||
{{ accompanying_course.remark }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Requestor',
|
||||
computed: {
|
||||
accompanying_course() {
|
||||
return this.$store.state.accompanying_course
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,27 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import { datetimeFormats, messages } from './js/i18n'
|
||||
import createStore from './store'
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
createStore.then(store => {
|
||||
|
||||
//console.log('store in create_store', store);
|
||||
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');
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
import { datetimeFormats } from 'ChillPersonAssets/vuejs/_js/i18n'
|
||||
|
||||
// TODO howto merge message object from import ??
|
||||
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
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
import 'es6-promise/auto';
|
||||
import { createStore } from 'vuex';
|
||||
import { getAccompanyingCourse, getParticipations } from '../api/accompanyingCourse';
|
||||
|
||||
const debug = process.env.NODE_ENV !== 'production';
|
||||
|
||||
let promise = getAccompanyingCourse(window.accompanyingCourseId)
|
||||
.then(accompanying_course => new Promise((resolve, reject) => {
|
||||
let store = createStore({
|
||||
strict: debug,
|
||||
state: {
|
||||
accompanying_course: accompanying_course
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
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)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
}
|
||||
});
|
||||
//console.log('store', store);
|
||||
resolve(store);
|
||||
}));
|
||||
|
||||
export default promise;
|
||||
@@ -0,0 +1,24 @@
|
||||
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 = {} ...
|
||||
|
||||
export {
|
||||
datetimeFormats,
|
||||
// messages
|
||||
};
|
||||
Reference in New Issue
Block a user