mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-08-21 15:13:50 +00:00
Merge branch 'master' into features/sql-vue-from-household-address-to-person
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<a @click="toggleIntensity" class="flag-toggle">
|
||||
{{ $t('course.occasional') }}
|
||||
<span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
|
||||
<i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
|
||||
{{ $t('course.regular') }}
|
||||
<span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -76,6 +76,9 @@ export default {
|
||||
i {
|
||||
margin: auto 0.4em;
|
||||
}
|
||||
span.on {
|
||||
font-weight: bolder;
|
||||
}
|
||||
}
|
||||
button.badge {
|
||||
margin-left: 0.8em;
|
||||
|
||||
@@ -9,8 +9,7 @@
|
||||
<table class="rounded" v-if="participations.length > 0">
|
||||
<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.name') }}</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>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td>{{ participation.person.firstName }}</td>
|
||||
<td>{{ participation.person.lastName }}</td>
|
||||
<td>
|
||||
{{ participation.person.firstName }}
|
||||
{{ participation.person.lastName }}
|
||||
</td>
|
||||
<td><span v-if="participation.startDate">
|
||||
{{ $d(participation.startDate.datetime, 'short') }}</span>
|
||||
</td>
|
||||
@@ -11,16 +13,18 @@
|
||||
<td>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="sc-button bt-show" target="_blank"
|
||||
:href="url.show"
|
||||
:title="$t('action.show')">
|
||||
</a>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sc-button bt-update" target="_blank"
|
||||
:href="url.edit"
|
||||
:title="$t('action.edit')">
|
||||
</a>
|
||||
<on-the-fly
|
||||
v-bind:type="participation.person.type"
|
||||
v-bind:id="participation.person.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<!--li>
|
||||
<button class="sc-button bt-delete"
|
||||
@@ -31,7 +35,7 @@
|
||||
<li>
|
||||
<button v-if="!participation.endDate"
|
||||
class="sc-button bt-remove"
|
||||
:title="$t('action.remove')"
|
||||
v-bind:title="$t('action.remove')"
|
||||
@click.prevent="$emit('close', participation)">
|
||||
</button>
|
||||
<button v-else class="sc-button bt-remove disabled"></button>
|
||||
@@ -42,17 +46,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
|
||||
export default {
|
||||
name: 'PersonItem',
|
||||
props: ['participation'],
|
||||
data() {
|
||||
return {
|
||||
url: {
|
||||
show: '/fr/person/' + this.participation.person.id + '/general',
|
||||
edit: '/fr/person/' + this.participation.person.id + '/general/edit'
|
||||
}
|
||||
}
|
||||
components: {
|
||||
OnTheFly
|
||||
},
|
||||
emits: ['remove', 'close']
|
||||
props: ['participation'],
|
||||
emits: ['remove', 'close'],
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -41,11 +41,21 @@
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="sc-button bt-show" :title="$t('action.show')" target="_blank" :href="url.show"></a>
|
||||
<on-the-fly
|
||||
v-bind:type="accompanyingCourse.requestor.type"
|
||||
v-bind:id="accompanyingCourse.requestor.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<on-the-fly
|
||||
v-bind:type="accompanyingCourse.requestor.type"
|
||||
v-bind:id="accompanyingCourse.requestor.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="sc-button bt-remove"
|
||||
@@ -55,7 +65,6 @@
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div v-else>
|
||||
<label>{{ $t('requestor.counter') }}</label>
|
||||
@@ -76,12 +85,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
|
||||
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
|
||||
export default {
|
||||
name: 'Requestor',
|
||||
components: {
|
||||
AddPersons,
|
||||
OnTheFly
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -107,13 +118,6 @@ export default {
|
||||
get() {
|
||||
return this.$store.state.accompanyingCourse.requestorAnonymous;
|
||||
}
|
||||
},
|
||||
url() {
|
||||
return (this.accompanyingCourse.requestor.type === 'person') ? {
|
||||
show: `/fr/person/${this.accompanyingCourse.requestor.id}/general`,
|
||||
} : {
|
||||
show: `/fr/thirdparty/thirdparty/${this.accompanyingCourse.requestor.id}/show`,
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -141,7 +145,6 @@ div.flex-table {
|
||||
}
|
||||
div.item-bloc {
|
||||
background-color: white !important;
|
||||
border: 1px solid #000;
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
.content-bloc {
|
||||
|
||||
@@ -21,24 +21,25 @@
|
||||
<td>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<a class="sc-button bt-show" target="_blank"
|
||||
:href="url.show"
|
||||
:title="$t('action.show')">
|
||||
</a>
|
||||
<on-the-fly
|
||||
v-bind:type="resource.resource.type"
|
||||
v-bind:id="resource.resource.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<a class="sc-button bt-update" target="_blank"
|
||||
:href="url.edit"
|
||||
:title="$t('action.edit')">
|
||||
</a>
|
||||
<on-the-fly
|
||||
v-bind:type="resource.resource.type"
|
||||
v-bind:id="resource.resource.id"
|
||||
action="edit">
|
||||
</on-the-fly>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
class="sc-button bt-remove"
|
||||
:title="$t('action.remove')"
|
||||
v-bind:title="$t('action.remove')"
|
||||
@click.prevent="$emit('remove', resource)">
|
||||
</button>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
@@ -46,23 +47,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
|
||||
export default {
|
||||
name: 'ResourceItem',
|
||||
components: {
|
||||
OnTheFly
|
||||
},
|
||||
props: ['resource'],
|
||||
emits: ['remove'],
|
||||
computed: {
|
||||
type() {
|
||||
return this.resource.resource.type;
|
||||
},
|
||||
url() {
|
||||
return (this.type === 'person') ? {
|
||||
show: `/fr/person/${this.resource.resource.id}/general`,
|
||||
edit: `/fr/person/${this.resource.resource.id}/general/edit`
|
||||
} : {
|
||||
show: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/show`,
|
||||
edit: `/fr/thirdparty/thirdparty/${this.resource.resource.id}/update`
|
||||
}
|
||||
}
|
||||
}
|
||||
emits: ['remove']
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
track-by="id"
|
||||
label="text"
|
||||
:multiple="true"
|
||||
:searchable="false"
|
||||
:searchable="true"
|
||||
:placeholder="$t('social_issue.label')"
|
||||
@update:model-value="updateSocialIssues"
|
||||
:model-value="value"
|
||||
@@ -75,6 +75,6 @@ export default {
|
||||
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|
||||
<style lang="scss">
|
||||
span.multiselect__tag {
|
||||
background: #e2793d;
|
||||
background: var(--chill-orange);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -31,6 +31,7 @@ const appMessages = {
|
||||
counter: "Il n'y a pas encore d'usager | 1 usager | {count} usagers",
|
||||
firstname: "Prénom",
|
||||
lastname: "Nom",
|
||||
name: "Nom",
|
||||
startdate: "Date d'entrée",
|
||||
enddate: "Date de sortie",
|
||||
add_persons: "Ajouter des usagers",
|
||||
@@ -73,7 +74,7 @@ const appMessages = {
|
||||
comment: {
|
||||
title: "Observations",
|
||||
label: "Ajout d'une note",
|
||||
content: "Rédigez une première note...",
|
||||
content: "Rédigez une première note…",
|
||||
created_by: "créé par {0}, le {1}"
|
||||
},
|
||||
confirm: {
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<household></household>
|
||||
<concerned></concerned>
|
||||
<dates></dates>
|
||||
<confirmation></confirmation>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapState } from 'vuex';
|
||||
import Concerned from './components/Concerned.vue';
|
||||
import Household from './components/Household.vue';
|
||||
import Dates from './components/Dates.vue';
|
||||
import Confirmation from './components/Confirmation.vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Concerned,
|
||||
Household,
|
||||
Dates,
|
||||
Confirmation,
|
||||
},
|
||||
computed: {
|
||||
// for debugging purpose
|
||||
// (not working)
|
||||
//...mapState({
|
||||
// 'concerned', 'household', 'positions'
|
||||
// })
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
*/
|
||||
const householdMove = (payload) => {
|
||||
const url = `/api/1.0/person/household/members/move.json`;
|
||||
console.log(payload);
|
||||
console.log(JSON.stringify(payload));
|
||||
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
throw Error('Error with testing move');
|
||||
});
|
||||
};
|
||||
|
||||
const householdMoveTest = (payload) => {
|
||||
const url = `/api/1.0/person/household/members/move/test.json`;
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
.then(response => {
|
||||
if (response.status === 422) {
|
||||
return response.json();
|
||||
}
|
||||
if (response.ok) {
|
||||
// return an empty array if ok
|
||||
return new Promise((resolve, reject) => resolve({ violations: [] }) );
|
||||
}
|
||||
throw Error('Error with testing move');
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
householdMove,
|
||||
householdMoveTest
|
||||
};
|
||||
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<h2>{{ $t('household_members_editor.concerned.title') }}</h2>
|
||||
|
||||
<h3 v-if="needsPositionning">
|
||||
{{ $t('household_members_editor.concerned.persons_to_positionnate') }}
|
||||
</h3>
|
||||
<h3 v-else>
|
||||
{{ $t('household_members_editor.concerned.persons_leaving') }}
|
||||
</h3>
|
||||
|
||||
<div v-if="noPerson">
|
||||
<div class="alert alert-info">
|
||||
{{ $t('household_members_editor.add_at_least_onePerson') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="allPersonsPositionnated">
|
||||
<span class="chill-no-data-statement">{{ $t('household_members_editor.all_positionnated') }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex-table list-household-members">
|
||||
<div v-for="conc in concUnpositionned"
|
||||
class="item-bloc"
|
||||
v-bind:key="conc.person.id"
|
||||
draggable="true"
|
||||
@dragstart="onStartDragConcern($event, conc.person.id)"
|
||||
>
|
||||
<div class="item-row person">
|
||||
<div class="item-col box-person">
|
||||
<div>
|
||||
<img src="~ChillMainAssets/img/draggable.svg" class="drag-icon" />
|
||||
<person :person="conc.person"></person>
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('person.born', {'gender': conc.person.gender} ) }}
|
||||
{{ $d(conc.person.birthdate.datetime, 'short') }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item-col box-where">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<span class="chill-no-data-statement">Sans adresse</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="needsPositionning" class="item-row move_to">
|
||||
<div class="item-col">
|
||||
|
||||
<p class="move_hint">{{ $t('household_members_editor.concerned.move_to') }}:</p>
|
||||
|
||||
<template
|
||||
v-for="position in positions"
|
||||
>
|
||||
|
||||
<button
|
||||
class="btn btn-outline-primary"
|
||||
@click="moveToPosition(conc.person.id, position.id)"
|
||||
>
|
||||
{{ position.label.fr }}
|
||||
</button>
|
||||
|
||||
</template>
|
||||
|
||||
<button v-if="conc.allowRemove" @click="removeConcerned(conc)" class="btn bt-primary">
|
||||
{{ $t('household_members_editor.remove_concerned') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<add-persons
|
||||
buttonTitle="household_members_editor.concerned.add_persons"
|
||||
modalTitle="household_members_editor.concerned.search"
|
||||
v-bind:key="addPersons.key"
|
||||
v-bind:options="addPersons.options"
|
||||
@addNewPersons="addNewPersons"
|
||||
ref="addPersons"> <!-- to cast child method -->
|
||||
</add-persons>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="needsPositionning" class="positions">
|
||||
<div
|
||||
v-for="position in positions"
|
||||
>
|
||||
<h3>{{ position.label.fr }}</h3>
|
||||
<div class="flex-table list-household-members">
|
||||
<member-details
|
||||
v-for="conc in concByPosition(position.id)"
|
||||
v-bind:key="conc.person.id"
|
||||
v-bind:conc="conc"
|
||||
>
|
||||
</member-details>
|
||||
<div
|
||||
class="droppable_zone"
|
||||
@drop="onDropConcern($event, position.id)"
|
||||
@dragover.prevent
|
||||
@dragenter.prevent
|
||||
>
|
||||
{{ $t('household_members_editor.drop_persons_here', {'position': position.label.fr }) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
div.person {
|
||||
cursor: move;
|
||||
|
||||
* {
|
||||
cursor: move
|
||||
}
|
||||
}
|
||||
|
||||
.drag-icon {
|
||||
height: 1.1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.droppable_zone {
|
||||
background-color: var(--chill-llight-gray);
|
||||
color: white;
|
||||
font-size: large;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 1em;
|
||||
background: linear-gradient(to top, var(--chill-light-gray), 30%, var(--chill-llight-gray));
|
||||
}
|
||||
|
||||
.move_to {
|
||||
.move_hint {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 0.400rem 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
|
||||
import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
|
||||
import MemberDetails from './MemberDetails.vue';
|
||||
import { ISOToDatetime } from 'ChillMainAssets/js/date.js';
|
||||
|
||||
export default {
|
||||
name: 'Concerned',
|
||||
components: {
|
||||
AddPersons,
|
||||
MemberDetails,
|
||||
Person,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'concUnpositionned',
|
||||
'positions',
|
||||
'concByPosition',
|
||||
'needsPositionning'
|
||||
]),
|
||||
noPerson () {
|
||||
return this.$store.getters.persons.length === 0;
|
||||
},
|
||||
allPersonsPositionnated () {
|
||||
return this.$store.getters.persons.length > 0
|
||||
&& this.$store.getters.concUnpositionned.length === 0;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addPersons: {
|
||||
key: 'household_members_editor_concerned',
|
||||
options: {
|
||||
type: ['person'],
|
||||
priority: null,
|
||||
uniq: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addNewPersons({ selected, modal }) {
|
||||
selected.forEach(function(item) {
|
||||
this.$store.dispatch('addConcerned', item.result);
|
||||
}, this);
|
||||
this.$refs.addPersons.resetSearch(); // to cast child method
|
||||
modal.showModal = false;
|
||||
},
|
||||
onStartDragConcern(evt, person_id) {
|
||||
evt.dataTransfer.dropEffect = 'move'
|
||||
evt.dataTransfer.effectAllowed = 'move'
|
||||
evt.dataTransfer.setData('application/x.person', person_id)
|
||||
},
|
||||
onDropConcern(evt, position_id) {
|
||||
const person_id = Number(evt.dataTransfer.getData('application/x.person'));
|
||||
this.moveToPosition(person_id, position_id);
|
||||
},
|
||||
moveToPosition(person_id, position_id) {
|
||||
this.$store.dispatch('markPosition', { person_id, position_id });
|
||||
|
||||
},
|
||||
removeConcerned(conc) {
|
||||
this.$store.dispatch('removeConcerned', conc);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
|
||||
<div v-if="hasWarnings" class="alert alert-warning">
|
||||
{{ $t('household_members_editor.confirmation.there_are_warnings') }}
|
||||
</div>
|
||||
|
||||
<p v-if="hasWarnings">
|
||||
{{ $t('household_members_editor.confirmation.check_those_items') }}
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li v-for="(msg, index) in warnings">
|
||||
{{ $t(msg.m, msg.a) }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="record_actions sticky-form-buttons">
|
||||
<li>
|
||||
<button class="sc-button bt-save" :disabled="hasWarnings" @click="confirm">
|
||||
{{ $t('household_members_editor.confirmation.save') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'Confirmation',
|
||||
computed: {
|
||||
...mapState({
|
||||
warnings: (state) => state.warnings,
|
||||
hasNoWarnings: (state) => state.warnings.length === 0,
|
||||
hasWarnings: (state) => state.warnings.length > 0,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
confirm() {
|
||||
this.$store.dispatch('confirm');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<h2>{{ $t('household_members_editor.dates_title') }}</h2>
|
||||
|
||||
<p>
|
||||
<label for="start_date">
|
||||
{{ $t('household_members_editor.dates.start_date') }}
|
||||
</label>
|
||||
<input type="date" v-model="startDate" />
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Dates',
|
||||
computed: {
|
||||
startDate: {
|
||||
get() {
|
||||
return [
|
||||
this.$store.state.startDate.getFullYear(),
|
||||
(this.$store.state.startDate.getMonth() + 1).toString().padStart(2, '0'),
|
||||
this.$store.state.startDate.getDate().toString().padStart(2, '0')
|
||||
].join('-');
|
||||
},
|
||||
set(value) {
|
||||
let
|
||||
[year, month, day] = value.split('-'),
|
||||
dValue = new Date(year, month-1, day);
|
||||
|
||||
this.$store.dispatch('setStartDate', dValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<h2>{{ $t('household_members_editor.household_part') }}</h2>
|
||||
|
||||
<div v-if="hasHousehold">
|
||||
<span v-if="isHouseholdNew">
|
||||
{{ $t('household_members_editor.household.new_household') }}
|
||||
</span>
|
||||
<div v-else>
|
||||
Ménage existant
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="isForceLeaveWithoutHousehold">
|
||||
{{ $t('household_members_editor.household.will_leave_any_household') }}
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
|
||||
</div>
|
||||
|
||||
<ul v-if="allowChangeHousehold" class="record_actions">
|
||||
<li v-if="allowHouseholdCreate">
|
||||
<button class="sc-button bt-create" @click="createHousehold">
|
||||
{{ $t('household_members_editor.household.create_household') }}
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="allowHouseholdSearch">
|
||||
<button class="sc-button">
|
||||
<i class="fa fa-search"></i>{{ $t('household_members_editor.household.search_household') }}
|
||||
</button>
|
||||
</li>
|
||||
<li v-if="allowLeaveWithoutHousehold" >
|
||||
<button @click="forceLeaveWithoutHousehold" class="sc-button bt-orange">
|
||||
<i class="fa fa-sign-out"></i>{{ $t('household_members_editor.household.leave_without_household') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'Household',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'hasHousehold',
|
||||
'isHouseholdNew',
|
||||
]),
|
||||
household() {
|
||||
return this.$store.household;
|
||||
},
|
||||
allowHouseholdCreate() {
|
||||
return this.$store.state.allowHouseholdCreate;
|
||||
},
|
||||
allowHouseholdSearch() {
|
||||
return this.$store.state.allowHouseholdSearch;
|
||||
},
|
||||
allowLeaveWithoutHousehold() {
|
||||
return this.$store.state.allowLeaveWithoutHousehold;
|
||||
},
|
||||
allowChangeHousehold() {
|
||||
return this.allowHouseholdCreate || this.allowHouseholdSearch ||
|
||||
this.allowLeaveWithoutHousehold;
|
||||
},
|
||||
isForceLeaveWithoutHousehold() {
|
||||
return this.$store.state.forceLeaveWithoutHousehold;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createHousehold() {
|
||||
this.$store.dispatch('createHousehold');
|
||||
},
|
||||
forceLeaveWithoutHousehold() {
|
||||
this.$store.dispatch('forceLeaveWithoutHousehold');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="item-bloc">
|
||||
<div class="item-row person">
|
||||
<div class="item-col box-person">
|
||||
<div>
|
||||
<person :person="conc.person"></person>
|
||||
<span v-if="isHolder" class="badge badge-primary holder">
|
||||
{{ $t('household_members_editor.holder') }}
|
||||
</span>
|
||||
</div>
|
||||
<div>{{ $t('person.born', {'gender': conc.person.gender} ) }}</div>
|
||||
</div>
|
||||
<div class="item-col box-where">
|
||||
<ul class="list-content fa-ul">
|
||||
<li>
|
||||
<i class="fa fa-li fa-map-marker"></i>
|
||||
<span class="chill-no-data-statement">Sans adresse</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-row comment">
|
||||
<ckeditor :editor="editor" v-model="comment" tag-name="textarea"></ckeditor>
|
||||
</div>
|
||||
|
||||
<div class="item-row participation-details">
|
||||
<div v-if="conc.position.allowHolder" class="action">
|
||||
<button class="btn" :class="{ 'btn-primary': isHolder, 'btn-secondary': !isHolder}" @click="toggleHolder">
|
||||
{{ $t(isHolder ? 'household_members_editor.is_holder' : 'household_members_editor.is_not_holder') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button @click="removePosition" class="btn btn-outline-primary">
|
||||
{{ $t('household_members_editor.remove_position', {position: conc.position.label.fr}) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button v-if="conc.allowRemove" @click="removeConcerned" class="btn btn-primary">
|
||||
{{ $t('household_members_editor.remove_concerned') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.drag-icon {
|
||||
height: 1.1em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
div.participation-details {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: flex-end;
|
||||
|
||||
.action {
|
||||
align-self: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.holder {
|
||||
display: inline;
|
||||
vertical-align: super;
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
|
||||
import CKEditor from '@ckeditor/ckeditor5-vue';
|
||||
import ClassicEditor from 'ChillMainAssets/modules/ckeditor5/index.js';
|
||||
|
||||
export default {
|
||||
name: 'MemberDetails',
|
||||
components: {
|
||||
Person,
|
||||
ckeditor: CKEditor.component,
|
||||
},
|
||||
props: [
|
||||
'conc'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
editor: ClassicEditor,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters( [
|
||||
'concByPersonId'
|
||||
]),
|
||||
isHolder() {
|
||||
return this.conc.holder;
|
||||
},
|
||||
comment: {
|
||||
get() {
|
||||
return this.conc.comment;
|
||||
},
|
||||
set(text) {
|
||||
console.log('set comment');
|
||||
console.log('comment', text);
|
||||
|
||||
this.$store.dispatch('setComment', { conc: this.conc, comment: text });
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleHolder() {
|
||||
this.$store.dispatch('toggleHolder', this.conc);
|
||||
},
|
||||
removePosition() {
|
||||
this.$store.dispatch('removePosition', this.conc);
|
||||
},
|
||||
removeConcerned() {
|
||||
this.$store.dispatch('removeConcerned', this.conc);
|
||||
},
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
import { createApp } from 'vue';
|
||||
import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n';
|
||||
import { appMessages } from './js/i18n';
|
||||
import { store } from './store';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
const i18n = _createI18n(appMessages);
|
||||
|
||||
const app = createApp({
|
||||
template: `<app></app>`,
|
||||
})
|
||||
.use(store)
|
||||
.use(i18n)
|
||||
.component('app', App)
|
||||
.mount('#household_members_editor');
|
||||
@@ -0,0 +1,52 @@
|
||||
|
||||
import { personMessages } from 'ChillPersonAssets/vuejs/_js/i18n'
|
||||
|
||||
const appMessages = {
|
||||
fr: {
|
||||
household_members_editor: {
|
||||
household: {
|
||||
no_household_choose_one: "Aucun ménage de destination. Choisissez un ménage.",
|
||||
new_household: "Nouveau ménage",
|
||||
create_household: "Créer un ménage",
|
||||
search_household: "Chercher un ménage",
|
||||
will_leave_any_household: "Ne rejoignent pas de ménage",
|
||||
leave_without_household: "Sans nouveau ménage"
|
||||
},
|
||||
concerned: {
|
||||
title: "Usagers concernés",
|
||||
add_persons: "Ajouter d'autres usagers",
|
||||
search: "Rechercher des usagers",
|
||||
move_to: "Déplacer vers",
|
||||
persons_to_positionnate: 'Usagers à positionner',
|
||||
persons_leaving: "Usagers quittant leurs ménages",
|
||||
},
|
||||
drop_persons_here: "Glissez-déposez ici les usagers pour la position \"{position}\"",
|
||||
all_positionnated: "Tous les usagers sont positionnés",
|
||||
holder: "Titulaire",
|
||||
is_holder: "Sera titulaire",
|
||||
is_not_holder: "Ne sera pas titulaire",
|
||||
remove_position: "Retirer des {position}",
|
||||
remove_concerned: "Ne plus transférer",
|
||||
household_part: "Ménage de destination",
|
||||
dates_title: "Période de validité",
|
||||
dates: {
|
||||
start_date: "Début de validité",
|
||||
end_date: "Fin de validité",
|
||||
},
|
||||
confirmation: {
|
||||
save: "Enregistrer",
|
||||
there_are_warnings: "Impossible de valider actuellement",
|
||||
check_those_items: "Veuillez corriger les éléments suivants",
|
||||
},
|
||||
give_a_position_to_every_person: "Indiquez une position pour chaque usager concerné",
|
||||
add_destination: "Indiquez un ménage de destination",
|
||||
add_at_least_onePerson: "Indiquez au moins un usager à transférer",
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Object.assign(appMessages.fr, personMessages.fr);
|
||||
|
||||
export {
|
||||
appMessages
|
||||
};
|
||||
@@ -0,0 +1,239 @@
|
||||
import { createStore } from 'vuex';
|
||||
import { householdMove, householdMoveTest } from './../api.js';
|
||||
import { datetimeToISO } from 'ChillMainAssets/js/date.js';
|
||||
|
||||
const debug = process.env.NODE_ENV !== 'production';
|
||||
|
||||
const concerned = window.household_members_editor_data.persons.map(p => {
|
||||
return {
|
||||
person: p,
|
||||
position: null,
|
||||
allowRemove: false,
|
||||
holder: false,
|
||||
comment: "",
|
||||
};
|
||||
});
|
||||
|
||||
const store = createStore({
|
||||
strict: debug,
|
||||
state: {
|
||||
concerned,
|
||||
household: window.household_members_editor_data.household,
|
||||
positions: window.household_members_editor_data.positions,
|
||||
startDate: new Date(),
|
||||
allowHouseholdCreate: window.household_members_editor_data.allowHouseholdCreate,
|
||||
allowHouseholdSearch: window.household_members_editor_data.allowHouseholdSearch,
|
||||
allowLeaveWithoutHousehold: window.household_members_editor_data.allowLeaveWithoutHousehold,
|
||||
forceLeaveWithoutHousehold: false,
|
||||
warnings: [],
|
||||
},
|
||||
getters: {
|
||||
isHouseholdNew(state) {
|
||||
return !Number.isInteger(state.household.id);
|
||||
},
|
||||
hasHousehold(state) {
|
||||
return state.household !== null;
|
||||
},
|
||||
persons(state) {
|
||||
return state.concerned.map(conc => conc.person);
|
||||
},
|
||||
concUnpositionned(state) {
|
||||
return state.concerned
|
||||
.filter(conc => conc.position === null)
|
||||
;
|
||||
},
|
||||
positions(state) {
|
||||
return state.positions;
|
||||
},
|
||||
personByPosition: (state) => (position_id) => {
|
||||
return state.concerned
|
||||
.filter(conc =>
|
||||
conc.position !== null ? conc.position.id === position_id : false
|
||||
)
|
||||
.map(conc => conc.person)
|
||||
;
|
||||
},
|
||||
concByPosition: (state) => (position_id) => {
|
||||
return state.concerned
|
||||
.filter(conc =>
|
||||
conc.position !== null ? conc.position.id === position_id : false
|
||||
)
|
||||
;
|
||||
},
|
||||
concByPersonId: (state) => (person_id) => {
|
||||
return state.concerned
|
||||
.find(conc => conc.person.id === person_id)
|
||||
;
|
||||
},
|
||||
needsPositionning(state) {
|
||||
return state.forceLeaveWithoutHousehold === false;
|
||||
},
|
||||
buildPayload: (state) => {
|
||||
let
|
||||
conc,
|
||||
payload_conc,
|
||||
payload = {
|
||||
concerned: [],
|
||||
destination: null
|
||||
}
|
||||
;
|
||||
|
||||
if (state.forceLeaveWithoutHousehold === false) {
|
||||
payload.destination = {
|
||||
id: state.household.id,
|
||||
type: state.household.type
|
||||
};
|
||||
}
|
||||
|
||||
for (let i in state.concerned) {
|
||||
conc = state.concerned[i];
|
||||
payload_conc = {
|
||||
person: {
|
||||
id: conc.person.id,
|
||||
type: conc.person.type
|
||||
},
|
||||
start_date: {
|
||||
datetime: datetimeToISO(state.startDate)
|
||||
}
|
||||
};
|
||||
|
||||
if (state.forceLeaveWithoutHousehold === false) {
|
||||
payload_conc.position = {
|
||||
id: conc.position.id,
|
||||
type: conc.position.type
|
||||
};
|
||||
payload_conc.holder = conc.holder;
|
||||
payload_conc.comment = conc.comment;
|
||||
}
|
||||
|
||||
payload.concerned.push(payload_conc);
|
||||
}
|
||||
|
||||
return payload;
|
||||
},
|
||||
},
|
||||
mutations: {
|
||||
addConcerned(state, person) {
|
||||
let persons = state.concerned.map(conc => conc.person.id);
|
||||
if (!persons.includes(person.id)) {
|
||||
state.concerned.push({
|
||||
person,
|
||||
position: null,
|
||||
allowRemove: true,
|
||||
holder: false,
|
||||
comment: "",
|
||||
});
|
||||
} else {
|
||||
console.err("person already included");
|
||||
}
|
||||
},
|
||||
markPosition(state, { person_id, position_id}) {
|
||||
let
|
||||
position = state.positions.find(pos => pos.id === position_id),
|
||||
conc = state.concerned.find(c => c.person.id === person_id);
|
||||
conc.position = position;
|
||||
},
|
||||
setComment(state, {conc, comment}) {
|
||||
conc.comment = comment;
|
||||
},
|
||||
toggleHolder(state, conc) {
|
||||
conc.holder = !conc.holder;
|
||||
},
|
||||
removePosition(state, conc) {
|
||||
conc.holder = false;
|
||||
conc.position = null;
|
||||
},
|
||||
removeConcerned(state, conc) {
|
||||
state.concerned = state.concerned.filter(c =>
|
||||
c.person.id !== conc.person.id
|
||||
)
|
||||
},
|
||||
createHousehold(state) {
|
||||
state.household = { type: 'household', members: [], address: null }
|
||||
state.forceLeaveWithoutHousehold = false;
|
||||
},
|
||||
forceLeaveWithoutHousehold(state) {
|
||||
state.household = null;
|
||||
state.forceLeaveWithoutHousehold = true;
|
||||
},
|
||||
setStartDate(state, dateI) {
|
||||
state.startDate = dateI;
|
||||
},
|
||||
setWarnings(state, warnings) {
|
||||
state.warnings = warnings;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
addConcerned({ commit, dispatch }, person) {
|
||||
commit('addConcerned', person);
|
||||
dispatch('computeWarnings');
|
||||
},
|
||||
markPosition({ commit, state, dispatch }, { person_id, position_id }) {
|
||||
commit('markPosition', { person_id, position_id });
|
||||
dispatch('computeWarnings');
|
||||
},
|
||||
toggleHolder({ commit }, conc) {
|
||||
commit('toggleHolder', conc);
|
||||
},
|
||||
removePosition({ commit, dispatch }, conc) {
|
||||
commit('removePosition', conc);
|
||||
dispatch('computeWarnings');
|
||||
},
|
||||
removeConcerned({ commit, dispatch }, conc) {
|
||||
commit('removeConcerned', conc);
|
||||
dispatch('computeWarnings');
|
||||
},
|
||||
createHousehold({ commit, dispatch }) {
|
||||
commit('createHousehold');
|
||||
dispatch('computeWarnings');
|
||||
},
|
||||
forceLeaveWithoutHousehold({ commit, dispatch }) {
|
||||
commit('forceLeaveWithoutHousehold');
|
||||
dispatch('computeWarnings');
|
||||
},
|
||||
setStartDate({ commit }, date) {
|
||||
commit('setStartDate', date);
|
||||
},
|
||||
setComment({ commit }, payload) {
|
||||
commit('setComment', payload);
|
||||
},
|
||||
computeWarnings({ commit, state, getters }) {
|
||||
let warnings = [],
|
||||
payload;
|
||||
|
||||
if (!getters.hasHousehold && !state.forceLeaveWithoutHousehold) {
|
||||
warnings.push({ m: 'household_members_editor.add_destination', a: {} });
|
||||
}
|
||||
|
||||
if (state.concerned.length === 0) {
|
||||
warnings.push({ m: 'household_members_editor.add_at_least_onePerson', a: {} });
|
||||
}
|
||||
|
||||
if (getters.concUnpositionned.length > 0
|
||||
&& !state.forceLeaveWithoutHousehold) {
|
||||
warnings.push({ m: 'household_members_editor.give_a_position_to_every_person', a: {} })
|
||||
}
|
||||
|
||||
commit('setWarnings', warnings);
|
||||
},
|
||||
confirm({ getters, state }) {
|
||||
let payload = getters.buildPayload,
|
||||
person_id,
|
||||
household_id;
|
||||
householdMove(payload).then(household => {
|
||||
if (household === null) {
|
||||
person_id = getters.persons[0].id;
|
||||
window.location.replace(`/fr/person/${person_id}/general`);
|
||||
} else {
|
||||
household_id = household.id;
|
||||
// nothing to do anymore here, bye-bye !
|
||||
window.location.replace(`/fr/person/household/${household_id}/members`);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
store.dispatch('computeWarnings');
|
||||
|
||||
export { store };
|
||||
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
* GET a person by id
|
||||
*/
|
||||
const getPerson = (id) => {
|
||||
const url = `/api/1.0/person/person/${id}.json`;
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* POST a new person
|
||||
*/
|
||||
const postPerson = (body) => {
|
||||
const url = `/api/1.0/person/person.json`;
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
.then(response => {
|
||||
if (response.ok) { return response.json(); }
|
||||
throw Error('Error with request resource response');
|
||||
});
|
||||
};
|
||||
|
||||
export {
|
||||
getPerson,
|
||||
postPerson
|
||||
};
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<ul class="record_actions">
|
||||
<li>
|
||||
<button class="sc-button bt-create" @click="openModal">
|
||||
<li class="add-persons">
|
||||
<a class="sc-button bt-create" @click="openModal">
|
||||
{{ $t(buttonTitle) }}
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -65,9 +65,14 @@
|
||||
@updateSelected="updateSelected">
|
||||
</person-suggestion>
|
||||
|
||||
<button v-if="query.length >= 3" class="sc-button bt-create ml-5 mt-2" name="createPerson">
|
||||
{{ $t('action.create') }} "{{ query }}"
|
||||
</button>
|
||||
<div class="create-button">
|
||||
<on-the-fly
|
||||
v-if="query.length >= 3"
|
||||
v-bind:buttonText="$t('onthefly.create.button', {q: query})"
|
||||
action="create"><!-- TODO first close this modal -->
|
||||
</on-the-fly>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -84,6 +89,7 @@
|
||||
|
||||
<script>
|
||||
import Modal from 'ChillMainAssets/vuejs/_components/Modal';
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
import PersonSuggestion from './AddPersons/PersonSuggestion';
|
||||
import { searchPersons, searchPersons_2 } from 'ChillPersonAssets/vuejs/_api/AddPersons';
|
||||
|
||||
@@ -92,6 +98,7 @@ export default {
|
||||
components: {
|
||||
Modal,
|
||||
PersonSuggestion,
|
||||
OnTheFly
|
||||
},
|
||||
props: [
|
||||
'buttonTitle',
|
||||
@@ -170,7 +177,7 @@ export default {
|
||||
if (query.length >= 3) {
|
||||
searchPersons_2({ query, options: this.options })
|
||||
.then(suggested => new Promise((resolve, reject) => {
|
||||
console.log('suggested', suggested);
|
||||
//console.log('suggested', suggested);
|
||||
this.loadSuggestions(suggested.results);
|
||||
resolve();
|
||||
}));
|
||||
@@ -179,14 +186,14 @@ export default {
|
||||
}
|
||||
},
|
||||
loadSuggestions(suggested) {
|
||||
console.log('suggested', suggested);
|
||||
//console.log('suggested', suggested);
|
||||
this.search.suggested = suggested;
|
||||
this.search.suggested.forEach(function(item) {
|
||||
item.key = this.itemKey(item);
|
||||
}, this);
|
||||
},
|
||||
updateSelected(value) {
|
||||
console.log('value', value);
|
||||
//console.log('value', value);
|
||||
this.search.selected = value;
|
||||
},
|
||||
resetSearch() {
|
||||
@@ -213,6 +220,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
li.add-persons {
|
||||
a {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
div.body-head {
|
||||
overflow-y: unset;
|
||||
div.modal-body:first-child {
|
||||
@@ -251,4 +263,8 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.create-button > a {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 2.6em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,7 +42,7 @@ export default {
|
||||
computed: {
|
||||
selected: {
|
||||
set(value) {
|
||||
console.log('value', value);
|
||||
//console.log('value', value);
|
||||
this.$emit('updateSelected', value);
|
||||
},
|
||||
get() {
|
||||
|
||||
@@ -14,22 +14,23 @@
|
||||
<span class="badge badge-pill badge-secondary" :title="item.key">
|
||||
{{ $t('item.type_person') }}
|
||||
</span>
|
||||
<a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
|
||||
<on-the-fly
|
||||
type="person"
|
||||
v-bind:id="item.result.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
|
||||
export default {
|
||||
name: 'SuggestionPerson',
|
||||
props: ['item'],
|
||||
data() {
|
||||
return {
|
||||
url: {
|
||||
show: '/fr/person/' + this.item.result.person_id + '/general',
|
||||
edit: '/fr/person/' + this.item.result.person_id + '/general/edit'
|
||||
},
|
||||
}
|
||||
components: {
|
||||
OnTheFly
|
||||
},
|
||||
props: ['item']
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -15,22 +15,23 @@
|
||||
<span class="badge badge-pill badge-secondary" :title="item.key">
|
||||
{{ $t('item.type_thirdparty') }}
|
||||
</span>
|
||||
<a class="sc-button bt-show" target="_blank" :title="item.key" :href="url.show"></a>
|
||||
<on-the-fly
|
||||
type="thirdparty"
|
||||
v-bind:id="item.result.id"
|
||||
action="show">
|
||||
</on-the-fly>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OnTheFly from 'ChillMainAssets/vuejs/_components/OnTheFly.vue';
|
||||
|
||||
export default {
|
||||
name: 'SuggestionThirdParty',
|
||||
props: ['item'],
|
||||
data() {
|
||||
return {
|
||||
url: {
|
||||
show: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/show',
|
||||
edit: '/fr/thirdparty/thirdparty/' + this.item.result.thirdparty_id + '/edit'
|
||||
},
|
||||
}
|
||||
components: {
|
||||
OnTheFly
|
||||
},
|
||||
props: ['item']
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div v-if="action === 'show'">
|
||||
|
||||
<div class="flex-table">
|
||||
<div class="item-bloc">
|
||||
<div class="item-row">
|
||||
<div class="item-col">
|
||||
<h3 :title="person.id">{{ person.text }}</h3>
|
||||
<p>
|
||||
<i class="fa fa-fw"
|
||||
:class="genderClass">
|
||||
<!--
|
||||
:title="$t(genderTranslation)"
|
||||
-->
|
||||
</i>
|
||||
<span v-if="person.birthdate">
|
||||
{{ $t('person.born', { e: feminized }) }}
|
||||
{{ $d(person.birthdate.datetime, 'short') }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
<dl class="list-content">
|
||||
<dt>{{ $t('person.firstname') }}</dt>
|
||||
<dd>{{ person.firstName }}</dd>
|
||||
|
||||
<dt>{{ $t('person.lastname') }}</dt>
|
||||
<dd>{{ person.lastName }}</dd>
|
||||
|
||||
<dt>{{ $t('person.altnames') }}</dt>
|
||||
<dd>{{ person.altNames }}</dd>
|
||||
|
||||
<span v-if="person.center">
|
||||
<dt>{{ $t('person.center_name') }}</dt>
|
||||
<dd :title="person.center.id">{{ person.center.name }}</dd>
|
||||
</span>
|
||||
|
||||
<dt>{{ $t('person.phonenumber') }}</dt>
|
||||
<dd>{{ person.phonenumber }}</dd>
|
||||
|
||||
<dt>{{ $t('person.mobilenumber') }}</dt>
|
||||
<dd>{{ person.mobilenumber }}</dd>
|
||||
|
||||
<dt>{{ $t('person.gender.title') }}</dt>
|
||||
<!--
|
||||
<dd>{{ $t(genderTranslation) }}</dd>
|
||||
-->
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="action === 'edit' || action === 'create'">
|
||||
|
||||
<input v-model="firstName" :placeholder="$t('person.firstname')" />
|
||||
<input v-model="lastName" :placeholder="$t('person.lastname')" />
|
||||
|
||||
<!-- TODO fix placeholder if undefined
|
||||
TODO dynamically get gender options
|
||||
-->
|
||||
<select v-model="gender">
|
||||
<option disabled value="">{{ $t('person.gender.placeholder') }}</option>
|
||||
<option value="woman">{{ $t('person.gender.woman') }}</option>
|
||||
<option value="man">{{ $t('person.gender.man') }}</option>
|
||||
<option value="neuter">{{ $t('person.gender.neuter') }}</option>
|
||||
</select>
|
||||
|
||||
<i class="fa fa-birthday-cake"></i>
|
||||
<input type="date"
|
||||
id="chill_personbundle_person_birthdate"
|
||||
name="chill_personbundle_person[birthdate]"
|
||||
v-model="birthDate"
|
||||
/>
|
||||
|
||||
<i class="fa fa-phone">
|
||||
</i><input v-model="phonenumber" :placeholder="$t('person.phonenumber')" />
|
||||
<i class="fa fa-mobile">
|
||||
</i><input v-model="mobilenumber" :placeholder="$t('person.mobilenumber')" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPerson, postPerson } from '../../_api/OnTheFly';
|
||||
|
||||
export default {
|
||||
name: "OnTheFlyPerson",
|
||||
props: ['id', 'type', 'action'],
|
||||
data() {
|
||||
return {
|
||||
person: {
|
||||
type: 'person'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
firstName: {
|
||||
set(value) { this.person.firstName = value; },
|
||||
get() { return this.person.firstName; }
|
||||
},
|
||||
lastName: {
|
||||
set(value) { this.person.lastName = value; },
|
||||
get() { return this.person.lastName; }
|
||||
},
|
||||
gender: {
|
||||
set(value) { this.person.gender = value; },
|
||||
get() { return this.person.gender; }
|
||||
},
|
||||
birthDate: {
|
||||
set(value) {
|
||||
if (this.person.birthdate) {
|
||||
this.person.birthdate.datetime = value + "T00:00:00+0100";
|
||||
} else {
|
||||
this.person.birthdate = { datetime: value + "T00:00:00+0100"};
|
||||
}
|
||||
},
|
||||
get() {
|
||||
return (this.person.birthdate) ? this.person.birthdate.datetime.split('T')[0] : '';
|
||||
}
|
||||
},
|
||||
phonenumber: {
|
||||
set(value) { this.person.phonenumber = value; },
|
||||
get() { return this.person.phonenumber; }
|
||||
},
|
||||
mobilenumber: {
|
||||
set(value) { this.person.mobilenumber = value; },
|
||||
get() { return this.person.mobilenumber; }
|
||||
},
|
||||
genderClass() {
|
||||
switch (this.person.gender) {
|
||||
case 'woman':
|
||||
return 'fa-venus';
|
||||
case 'man':
|
||||
return 'fa-mars';
|
||||
case 'neuter':
|
||||
return 'fa-neuter';
|
||||
}
|
||||
},
|
||||
genderTranslation() {
|
||||
switch (this.person.gender) {
|
||||
case 'woman':
|
||||
return 'person.gender.woman';
|
||||
case 'man':
|
||||
return 'person.gender.man';
|
||||
case 'neuter':
|
||||
return 'person.gender.neuter';
|
||||
}
|
||||
},
|
||||
feminized() {
|
||||
return (this.person.gender === 'woman')? 'e' : '';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.action !== 'create') {
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadData() {
|
||||
getPerson(this.id)
|
||||
.then(person => new Promise((resolve, reject) => {
|
||||
this.person = person;
|
||||
console.log('get person', this.person);
|
||||
resolve();
|
||||
}));
|
||||
},
|
||||
postData() {
|
||||
postPerson(this.person)
|
||||
.then(person => new Promise((resolve, reject) => {
|
||||
this.person = person;
|
||||
console.log('post person', person);
|
||||
resolve();
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
li::marker {
|
||||
}
|
||||
}
|
||||
div.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
div.item-col:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
dl {
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<span class="chill-entity chill-entity__person">
|
||||
<span class="chill-entity__person__text">
|
||||
{{ person.text }}
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'Person',
|
||||
props: ['person']
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -15,7 +15,29 @@ const personMessages = {
|
||||
person: {
|
||||
firstname: "Prénom",
|
||||
lastname: "Nom",
|
||||
born: "né le ",
|
||||
born: (ctx) => {
|
||||
if (ctx.gender === 'man') {
|
||||
return 'Né le';
|
||||
} else if (ctx.gender === 'woman') {
|
||||
return 'Née le';
|
||||
} else {
|
||||
return 'Né·e le';
|
||||
}
|
||||
},
|
||||
center_id: "Identifiant du centre",
|
||||
center_type: "Type de centre",
|
||||
center_name: "Territoire", // vendée
|
||||
phonenumber: "Téléphone",
|
||||
mobilenumber: "Mobile",
|
||||
altnames: "Autres noms",
|
||||
gender: {
|
||||
title: "Genre",
|
||||
placeholder: "Choisissez le genre de l'usager",
|
||||
woman: "Femme",
|
||||
man: "Homme",
|
||||
neuter: "Neutre",
|
||||
}
|
||||
|
||||
},
|
||||
error_only_one_person: "Une seule personne peut être sélectionnée !"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user