implementation of person-text

This commit is contained in:
Julie Lenaerts 2022-01-27 16:19:19 +01:00
parent 44d1535bfb
commit 8720cc730e
7 changed files with 166 additions and 143 deletions

View File

@ -1,45 +1,47 @@
<template> <template>
<teleport to="#add-persons" v-if="isComponentVisible"> <teleport to="#add-persons" v-if="isComponentVisible">
<div class="flex-bloc concerned-groups" :class="getContext"> <div class="flex-bloc concerned-groups" :class="getContext">
<persons-bloc <persons-bloc
v-for="bloc in contextPersonsBlocs" v-for="bloc in contextPersonsBlocs"
v-bind:key="bloc.key" v-bind:key="bloc.key"
v-bind:bloc="bloc" v-bind:bloc="bloc"
v-bind:blocWidth="getBlocWidth" v-bind:blocWidth="getBlocWidth"
v-bind:setPersonsInBloc="setPersonsInBloc"> v-bind:setPersonsInBloc="setPersonsInBloc">
</persons-bloc> </persons-bloc>
</div> </div>
<div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0"> <div v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0">
<ul class="list-suggest add-items inline"> <ul class="list-suggest add-items inline">
<li v-for="(p, i) in suggestedEntities" @click="addSuggestedEntity(p)" :key="`suggestedEntities-${i}`"> <li v-for="(p, i) in suggestedEntities" @click="addSuggestedEntity(p)" :key="`suggestedEntities-${i}`">
<span>{{ p.text }}</span> <person-text :person="p"></person-text>
</li> </li>
</ul> </ul>
</div> </div>
<add-persons <add-persons
buttonTitle="activity.add_persons" buttonTitle="activity.add_persons"
modalTitle="activity.add_persons" modalTitle="activity.add_persons"
v-bind:key="addPersons.key" v-bind:key="addPersons.key"
v-bind:options="addPersonsOptions" v-bind:options="addPersonsOptions"
@addNewPersons="addNewPersons" @addNewPersons="addNewPersons"
ref="addPersons"> ref="addPersons">
</add-persons> </add-persons>
</teleport> </teleport>
</template> </template>
<script> <script>
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'; import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import PersonsBloc from './ConcernedGroups/PersonsBloc.vue'; import PersonsBloc from './ConcernedGroups/PersonsBloc.vue';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
export default { export default {
name: "ConcernedGroups", name: "ConcernedGroups",
components: { components: {
AddPersons, AddPersons,
PersonsBloc PersonsBloc,
PersonText
}, },
data() { data() {
return { return {

View File

@ -1,21 +1,29 @@
<template> <template>
<li> <li>
<span :title="person.text"> <span :title="person.text">
<span class="chill_denomination" @click.prevent="$emit('remove', person)">{{ textCutted }}</span> <span class="chill_denomination" @click.prevent="$emit('remove', person)">
<person-text :person="person" :isCut="true"></person-text>
</span>
</span> </span>
</li> </li>
</template> </template>
<script> <script>
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
export default { export default {
name: "PersonBadge", name: "PersonBadge",
props: ['person'], props: ['person'],
computed: { components: {
textCutted() { PersonText
let more = (this.person.text.length > 15) ?'…' : '';
return this.person.text.slice(0,15) + more;
}
}, },
// computed: {
// textCutted() {
// let more = (this.person.text.length > 15) ?'' : '';
// return this.person.text.slice(0,15) + more;
// }
// },
emits: ['remove'], emits: ['remove'],
} }
</script> </script>

View File

@ -27,7 +27,7 @@
:value="p.person.id" :value="p.person.id"
/> />
<label class="form-check-label"> <label class="form-check-label">
{{ p.person.text }} <person-text :person="p.person"></person-text>
</label> </label>
</div> </div>
<input type="hidden" name="expand_suggestions" value="true"> <input type="hidden" name="expand_suggestions" value="true">
@ -50,9 +50,9 @@
<div v-if="suggestedPersons.length > 0"> <div v-if="suggestedPersons.length > 0">
<ul class="list-suggest add-items inline"> <ul class="list-suggest add-items inline">
<li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)"> <li v-for="p in suggestedPersons" :key="p.id" @click="addSuggestedPerson(p)">
<span>{{ p.text }}</span> <person-text :person="p"></person-text>
</li> </li>
</ul> </ul>
</div> </div>
<div> <div>
@ -76,12 +76,14 @@
import {mapGetters, mapState} from 'vuex'; import {mapGetters, mapState} from 'vuex';
import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue"; import ParticipationItem from "./PersonsAssociated/ParticipationItem.vue";
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'; import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
export default { export default {
name: 'PersonsAssociated', name: 'PersonsAssociated',
components: { components: {
ParticipationItem, ParticipationItem,
AddPersons AddPersons,
PersonText
}, },
data() { data() {
return { return {
@ -110,15 +112,15 @@ export default {
) )
// filter persons appearing twice in requestor and resources // filter persons appearing twice in requestor and resources
.filter( .filter(
(e, index, suggested) => { (e, index, suggested) => {
for (let i = 0; i < suggested.length; i = i+1) { for (let i = 0; i < suggested.length; i = i+1) {
if (i < index && e.id === suggested[i].id) { if (i < index && e.id === suggested[i].id) {
return false return false
} }
} }
return true; return true;
} }
) )
}), }),
...mapGetters([ ...mapGetters([

View File

@ -136,9 +136,9 @@
<div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0"> <div v-if="accompanyingCourse.requestor === null && suggestedEntities.length > 0">
<ul class="list-suggest add-items inline"> <ul class="list-suggest add-items inline">
<li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)"> <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
<span>{{ p.text }}</span> <person-text :person="p"></person-text>
</li> </li>
</ul> </ul>
</div> </div>
<div> <div>
@ -162,6 +162,8 @@ import PersonRenderBox from '../../_components/Entity/PersonRenderBox.vue';
import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue'; import ThirdPartyRenderBox from 'ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyRenderBox.vue';
import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue'; import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
export default { export default {
name: 'Requestor', name: 'Requestor',
@ -170,7 +172,8 @@ export default {
OnTheFly, OnTheFly,
PersonRenderBox, PersonRenderBox,
ThirdPartyRenderBox, ThirdPartyRenderBox,
Confidential Confidential,
PersonText
}, },
props: ['isAnonymous'], props: ['isAnonymous'],
data() { data() {

View File

@ -22,7 +22,7 @@
<div v-if="suggestedEntities.length > 0"> <div v-if="suggestedEntities.length > 0">
<ul class="list-suggest add-items inline"> <ul class="list-suggest add-items inline">
<li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)"> <li v-for="p in suggestedEntities" :key="uniqueId(p)" @click="addSuggestedEntity(p)">
<span>{{ p.text }}</span> <person-text :person="p"></person-text>
</li> </li>
</ul> </ul>
</div> </div>
@ -45,12 +45,15 @@
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'; import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
import ResourceItem from './Resources/ResourceItem.vue'; import ResourceItem from './Resources/ResourceItem.vue';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
export default { export default {
name: 'Resources', name: 'Resources',
components: { components: {
AddPersons, AddPersons,
ResourceItem ResourceItem,
PersonText
}, },
data() { data() {
return { return {

View File

@ -6,12 +6,13 @@
<div class="list-household-members flex-table"> <div class="list-household-members flex-table">
<div <div
v-for="conc in concerned" v-for="conc in concerned"
class="item-bloc" class="item-bloc"
v-bind:key="conc.person.id" v-bind:key="conc.person.id"
> >
<div class="pick-position item-row"> <div class="pick-position item-row">
<div class="person"> <div class="person">
<h3>{{ conc.person.text }}</h3> <!-- <h3>{{ conc.person.text }}</h3> -->
<h3><person-text :person="conc.person"></person-text></h3>
</div> </div>
<div class="holder"> <div class="holder">
<button <button
@ -53,6 +54,7 @@ import {mapGetters, mapState} from "vuex";
import CurrentHousehold from "./CurrentHousehold"; import CurrentHousehold from "./CurrentHousehold";
import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue'; import PersonRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue';
import PersonComment from './PersonComment'; import PersonComment from './PersonComment';
import PersonText from '../../_components/Entity/PersonText.vue';
export default { export default {
name: "Positioning", name: "Positioning",
@ -60,6 +62,7 @@ export default {
CurrentHousehold, CurrentHousehold,
PersonRenderBox, PersonRenderBox,
PersonComment, PersonComment,
PersonText
}, },
computed: { computed: {
...mapState([ ...mapState([

View File

@ -1,14 +1,14 @@
<template> <template>
<div v-if="render === 'bloc'" class="item-bloc"> <div v-if="render === 'bloc'" class="item-bloc">
<section class="chill-entity entity-person"> <section class="chill-entity entity-person">
<div class="item-row entity-bloc"> <div class="item-row entity-bloc">
<div class="item-col"> <div class="item-col">
<div class="entity-label"> <div class="entity-label">
<div :class="'denomination h' + options.hLevel"> <div :class="'denomination h' + options.hLevel">
<a v-if="options.addLink === true" :href="getUrl"> <a v-if="options.addLink === true" :href="getUrl">
<span class="firstname">{{ person.firstName }}</span> <span class="firstname">{{ person.firstName }}</span>
<span class="lastname">{{ person.lastName }}</span> <span class="lastname">{{ person.lastName }}</span>
<span v-if="person.altNames && options.addAltNames == true" class="altnames"> <span v-if="person.altNames && options.addAltNames == true" class="altnames">
@ -16,19 +16,19 @@
</span> </span>
</a> </a>
<span class="firstname">{{ person.firstName }}</span> <span class="firstname">{{ person.firstName }}</span>
<span class="lastname">{{ person.lastName }}</span> <span class="lastname">{{ person.lastName }}</span>
<span v-if="person.deathdate" class="deathdate"> ()</span> <span v-if="person.deathdate" class="deathdate"> ()</span>
<span v-if="person.altNames && options.addAltNames == true" class="altnames"> <span v-if="person.altNames && options.addAltNames == true" class="altnames">
<span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span> <span :class="'altname altname-' + altNameKey">{{ altNameLabel }}</span>
</span> </span>
<span v-if="options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span> <span v-if="options.addId == true" class="id-number" :title="'n° ' + person.id">{{ person.id }}</span>
<badge-entity v-if="options.addEntity === true" <badge-entity v-if="options.addEntity === true"
:entity="person" :entity="person"
:options="{ displayLong: options.entityDisplayLong }"> :options="{ displayLong: options.entityDisplayLong }">
</badge-entity> </badge-entity>
</div> </div>
@ -53,92 +53,92 @@
</div> </div>
<div class="item-col"> <div class="item-col">
<div class="float-button bottom"> <div class="float-button bottom">
<div class="box"> <div class="box">
<div class="action"> <div class="action">
<slot name="record-actions"></slot> <slot name="record-actions"></slot>
</div> </div>
<ul class="list-content fa-ul"> <ul class="list-content fa-ul">
<li v-if="person.current_household_id">
<i class="fa fa-li fa-map-marker"></i>
<address-render-box v-if="person.current_household_address"
:address="person.current_household_address"
:isMultiline="isMultiline">
</address-render-box>
<p v-else class="chill-no-data-statement">
{{ $t('renderbox.household_without_address') }}
</p>
<a v-if="options.addHouseholdLink === true"
:href="getCurrentHouseholdUrl"
:title="$t('persons_associated.show_household_number', {id: person.current_household_id})">
<span class="badge rounded-pill bg-chill-beige">
<i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}-->
</span>
</a>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-map-marker"></i>
<p class="chill-no-data-statement">
{{ $t('renderbox.no_data') }}
</p>
</li>
<li v-if="person.current_household_id"> <li v-if="person.mobilenumber">
<i class="fa fa-li fa-map-marker"></i> <i class="fa fa-li fa-mobile"></i>
<address-render-box v-if="person.current_household_address" <a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a>
:address="person.current_household_address" </li>
:isMultiline="isMultiline"> <li v-else-if="options.addNoData">
</address-render-box> <i class="fa fa-li fa-mobile"></i>
<p v-else class="chill-no-data-statement"> <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
{{ $t('renderbox.household_without_address') }} </li>
</p> <li v-if="person.phonenumber">
<a v-if="options.addHouseholdLink === true" <i class="fa fa-li fa-phone"></i>
:href="getCurrentHouseholdUrl" <a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
:title="$t('persons_associated.show_household_number', {id: person.current_household_id})"> </li>
<span class="badge rounded-pill bg-chill-beige"> <li v-else-if="options.addNoData">
<i class="fa fa-fw fa-home"></i><!--{{ $t('persons_associated.show_household') }}--> <i class="fa fa-li fa-phone"></i>
</span> <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</a> </li>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-map-marker"></i>
<p class="chill-no-data-statement">
{{ $t('renderbox.no_data') }}
</p>
</li>
<li v-if="person.mobilenumber"> <li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter">
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-long-arrow-right"></i>
<a :href="'tel: ' + person.mobilenumber">{{ person.mobilenumber }}</a> <template v-for="c in person.centers">{{ c.name }}</template>
</li> </li>
<li v-else-if="options.addNoData"> <li v-else-if="options.addNoData">
<i class="fa fa-li fa-mobile"></i> <i class="fa fa-li fa-long-arrow-right"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p> <p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li> </li>
<li v-if="person.phonenumber"> <slot name="custom-zone"></slot>
<i class="fa fa-li fa-phone"></i>
<a :href="'tel: ' + person.phonenumber">{{ person.phonenumber }}</a>
</li>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-phone"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<li v-if="person.centers !== undefined && person.centers.length > 0 && options.addCenter"> </ul>
<i class="fa fa-li fa-long-arrow-right"></i> </div>
<template v-for="c in person.centers">{{ c.name }}</template> </div>
</li> </div>
<li v-else-if="options.addNoData">
<i class="fa fa-li fa-long-arrow-right"></i>
<p class="chill-no-data-statement">{{ $t('renderbox.no_data') }}</p>
</li>
<slot name="custom-zone"></slot>
</ul>
</div>
</div>
</div> </div>
</div>
</section> </section>
</div> </div>
<span v-if="render === 'badge'" class="chill-entity entity-person badge-person"> <span v-if="render === 'badge'" class="chill-entity entity-person badge-person">
<a v-if="options.addLink === true" :href="getUrl"> <a v-if="options.addLink === true" :href="getUrl">
<span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')"> <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
<i class="fa fa-circle fa-stack-1x text-success"></i> <i class="fa fa-circle fa-stack-1x text-success"></i>
<i class="fa fa-stack-1x">T</i> <i class="fa fa-stack-1x">T</i>
</span> </span>
{{ person.text }}
<span v-if="person.deathdate" class="deathdate"> ()</span> <person-text :person="person"></person-text>
<span v-if="person.deathdate" class="deathdate"> ()</span>
</a> </a>
<span v-else> <span v-else>
<span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')"> <span v-if="options.isHolder" class="fa-stack fa-holder" :title="$t('renderbox.holder')">
<i class="fa fa-circle fa-stack-1x text-success"></i> <i class="fa fa-circle fa-stack-1x text-success"></i>
<i class="fa fa-stack-1x">T</i> <i class="fa fa-stack-1x">T</i>
</span> </span>
{{ person.text }} <person-text :person="person"></person-text>
<span v-if="person.deathdate" class="deathdate"> ()</span> <span v-if="person.deathdate" class="deathdate"> ()</span>
</span> </span>
<slot name="post-badge"></slot> <slot name="post-badge"></slot>
</span> </span>
</template> </template>
@ -147,13 +147,15 @@ import {dateToISO} from 'ChillMainAssets/chill/js/date.js';
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue'; import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue'; import Confidential from 'ChillMainAssets/vuejs/_components/Confidential.vue';
import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue'; import BadgeEntity from 'ChillMainAssets/vuejs/_components/BadgeEntity.vue';
import PersonText from 'ChillPersonAssets/vuejs/_components/Entity/PersonText.vue';
export default { export default {
name: "PersonRenderBox", name: "PersonRenderBox",
components: { components: {
AddressRenderBox, AddressRenderBox,
Confidential, Confidential,
BadgeEntity BadgeEntity,
PersonText
}, },
props: ['person', 'options', 'render', 'returnPath'], props: ['person', 'options', 'render', 'returnPath'],
computed: { computed: {
@ -168,7 +170,7 @@ export default {
return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless'; return this.person.gender === 'woman' ? 'fa-venus' : this.person.gender === 'man' ? 'fa-mars' : this.person.gender === 'neuter' ? 'fa-neuter' : 'fa-genderless';
}, },
getGenderTranslation: function() { getGenderTranslation: function() {
return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man'; return this.person.gender === 'woman' ? 'renderbox.birthday.woman' : 'renderbox.birthday.man';
}, },
getGender() { getGender() {
return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined'; return this.person.gender === 'woman' ? 'person.gender.woman' : this.person.gender === 'man' ? 'person.gender.man' : this.person.gender === 'neuter' ? 'person.gender.neuter' : 'person.gender.undefined';