Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

hop

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-08-27 11:17:30 +02:00
parent c258179017
commit d4430246f7
2 changed files with 108 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdMembersEditor/components/Household.vue
View File

@ -96,11 +96,10 @@
<div class="householdSuggestions">
<div v-if="showHouseholdSuggestion && hasHouseholdSuggestion">
<p>{{ $t('household_members_editor.household_for_participants_accompanying_period') }}:</p>
<div class="householdSuggestionList">
<div
v-for="h in filterHouseholdSuggestionByAccompanyingPeriod"
class="item"
>
<div class="flex-table householdSuggestionList">
<div v-for="h in filterHouseholdSuggestionByAccompanyingPeriod"
class="item-bloc">
<household-render-box :household="h"></household-render-box>
<ul class="record_actions">
@ -117,43 +116,7 @@
</template>
<style lang="scss">
div.householdAddressSuggestionList {
/*
display: flex;
list-style-type: none;
padding: 0;
*/
& > li {
}
}
.householdSuggestionList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
& > .item {
margin-bottom: 0.8rem;
width: calc(50% - 1rem);
border: 1px solid var(--chill-light-gray);
padding: 0.5rem 0.5rem 0 0.5rem;
ul.record_actions {
margin-bottom: 0;
}
}
}
</style>
<script>
import { mapGetters, mapState } from 'vuex';
import HouseholdRenderBox from 'ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
@ -272,3 +235,29 @@ export default {
};
</script>
<style lang="scss">
/*
div.householdAddressSuggestionList {
display: flex;
list-style-type: none;
padding: 0;
& > li {}
}
.householdSuggestionList {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
& > .item {
margin-bottom: 0.8rem;
width: calc(50% - 1rem);
border: 1px solid var(--chill-light-gray);
padding: 0.5rem 0.5rem 0 0.5rem;
ul.record_actions {
margin-bottom: 0;
}
}
}
*/
</style>

144
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/HouseholdRenderBox.vue
View File

@ -1,71 +1,56 @@
<template>A
<section class="chill-entity entity-household">
<!-- identifier -->
<div v-if="isHouseholdNew()" class="identifier">
<i class="fa fa-home"></i>
{{ $t('new_household') }}
</div>
<div v-else class="identifier">
<i class="fa fa-home"></i>
{{ $t('household_number', { number: household.id } ) }}
</div>
<template>
<section class="chill-entity entity-household">
<div class="item-row">
<div class="item-col">
<!-- member part -->
<div v-if="hasCurrentMembers" class="members">
<span class="current-members">{{ $t('current_members') }}: </span>
<template v-for="(m, index) in currentMembers()" :key="m.id">
<person :person="m.person"></person>
<span v-if="m.holder">
&nbsp;<span class="badge bg-primary">{{ $t('holder') }}</span>
</span>
<span v-if="index != (currentMembersLength() - 1)">, </span>
</template>
</div>
<div v-else class="members">
<p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
</div>
<!-- identifier -->
<div v-if="isHouseholdNew()" class="identifier">
<i class="fa fa-home"></i>
{{ $t('new_household') }}
</div>
<div v-else class="identifier">
<i class="fa fa-home"></i>
{{ $t('household_number', { number: household.id } ) }}
</div>
<!-- address part -->
<div v-if="hasAddress()" class="where">
<i class="fa fa-where"></i>
<show-address :address="household.current_address"></show-address>
</div>
<div v-else class="where">
<i class="fa fa-where"></i>
<p class="chill-no-data-statement">{{ $t('no_current_address') }}</p>
</div>
</section>B
</div>
<div class="item-col">
<ul class="list-content fa-ul">
<!-- member part -->
<li v-if="hasCurrentMembers" class="members">
<i class="fa fa-li fa-user" :title="$t('current_members')"></i>
<template v-for="(m, index) in currentMembers()" :key="m.id">
<person :person="m.person"></person>
<span v-if="m.holder">
&nbsp;<span class="badge bg-primary">{{ $t('holder') }}</span>
</span>
<span v-if="index != (currentMembersLength() - 1)">, </span>
</template>
</li>
<li v-else class="members">
<i class="fa fa-li fa-user" :title="$t('current_members')"></i>
<p class="chill-no-data-statement">{{ $t('no_members_yet') }}</p>
</li>
<!-- address part -->
<li v-if="hasAddress()" class="where">
<i class="fa fa-li fa-map-marker"></i>
<show-address :address="household.current_address"></show-address>
</li>
<li v-else class="where">
<i class="fa fa-li fa-map-marker"></i>
<p class="chill-no-data-statement">{{ $t('no_current_address') }}</p>
</li>
</ul>
</div>
</div>
</section>
</template>
<style lang="scss">
section.chill-entity {
&.entity-household {
display: grid;
grid-template-columns: auto auto 30%;
grid-template-areas:
"iden iden where"
"who who where";
.identifier {
grid-area: iden;
font-size: 1.3em;
font-weight: 700;
color: var(--chill-blue);
}
.members {
grid-area: who;
.current-members {
font-weight: 700;
}
}
.where {
grid-area: where
}
}
}
</style>
<script>
import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
@ -82,8 +67,7 @@ const i18n = {
"holder": "titulaire",
}
}
}
;
};
export default {
name: 'Household',
@ -126,5 +110,33 @@ export default {
}
}
};
</script>
<style lang="scss">
section.chill-entity {
&.entity-household {
.identifier {
//grid-area: iden;
font-size: 1.3em;
font-weight: 700;
color: var(--chill-blue);
}
/*
display: grid;
grid-template-columns: auto auto 30%;
grid-template-areas:
"iden iden where"
"who who where";
.members {
//grid-area: who;
.current-members {
font-weight: 700;
}
}
.where {
//grid-area: where
}
*/
}
}
</style>