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

WIP test filtering elements on household [household editor]

Browse Source
This commit is contained in:
Julien Fastré 2021-10-04 15:02:07 +02:00
parent a4af30e542
commit 61488e9876
1 changed files with 50 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,14 +2,15 @@
<h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2> <h2 class="mt-4">{{ $t('household_members_editor.household_part') }}</h2>
<div v-if="mode == null"> <div>
<div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div> <div class="alert alert-info">{{ $t('household_members_editor.household.no_household_choose_one') }}</div>
<div class="flex-table householdSuggestionList"> <div class="flex-table householdSuggestionList">
<div v-if="isModeNewAllowed" class="item-bloc"> <!-- mode new is allowed and no mode is checked -->
<div v-if="isModeNewAllowed && !isHouseholdNew" class="item-bloc">
<div> <div>
<section> <section :class="{filtered: isHouseholdNewDesactivated}">
<div class="item-row"> <div class="item-row">
<div class="item-col"> <div class="item-col">
<div class="h4"> <div class="h4">
@ -18,7 +19,7 @@
</div> </div>
</div> </div>
</section> </section>
<ul class="record_actions"> <ul :class="{filteredButActive: isHouseholdNewDesactivated}" class="record_actions">
<li> <li>
<button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button> <button @click="setModeNew" class="btn btn-sm btn-create">{{ $t('household_members_editor.household.create_household') }}</button>
</li> </li>
@ -26,10 +27,35 @@
</div> </div>
</div> </div>
<!-- mode new is allowed and checked -->
<div>
<div v-if="isModeNewAllowed && isHouseholdNew" class="item-bloc" >
<div>
<household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
<ul class="record_actions" v-if="isHouseholdNew">
<li>
<add-address
:context="getAddressContext"
:key="addAddress.key"
:options="addAddress.options"
:addressChangedCallback="addressChanged"
></add-address>
</li>
<li v-if="hasHouseholdAddress">
<button class="btn btn-remove"
@click="removeHouseholdAddress">
{{ $t('household_members_editor.household.remove_address') }}
</button>
</li>
</ul>
</div>
</div>
</div>
<!-- if allow leave household --> <!-- if allow leave household -->
<div v-if="isModeLeaveAllowed" class="item-bloc"> <div v-if="isModeLeaveAllowed" class="item-bloc">
<div> <div>
<section> <section :class="{filtered: isHouseholdNewDesactivated}">
<div class="item-row"> <div class="item-row">
<div class="item-col"> <div class="item-col">
<div class="h4"> <div class="h4">
@ -45,7 +71,7 @@
{{ $t('household_members_editor.household.will_leave_any_household_explanation')}} {{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
</div> </div>
</section> </section>
<ul class="record_actions"> <ul class="record_actions" :class="{filteredButActive: isHouseholdNewDesactivated}">
<li> <li>
<button @click="setModeLeave" class="btn btn-sm"> <button @click="setModeLeave" class="btn btn-sm">
<i class="fa fa-sign-out"></i> <i class="fa fa-sign-out"></i>
@ -71,57 +97,6 @@
</div> </div>
</div> </div>
<div v-else>
<div class="flex-table">
<div class="item-bloc">
<template v-if="isModeLeave">
<section>
<div class="item-row">
<div class="item-col">
<div class="h4">
<span class="fa-stack fa-lg">
<i class="fa fa-home fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
{{ $t('household_members_editor.household.leave_without_household') }}
</div>
</div>
</div>
<div class="item-row">
{{ $t('household_members_editor.household.will_leave_any_household_explanation')}}
</div>
</section>
</template>
<template v-else>
<household-render-box :household="household" :isAddressMultiline="true"></household-render-box>
<ul class="record_actions" v-if="isHouseholdNew">
<li>
<add-address
:context="getAddressContext"
:key="addAddress.key"
:options="addAddress.options"
:addressChangedCallback="addressChanged"
></add-address>
</li>
<li v-if="hasHouseholdAddress">
<button class="btn btn-remove"
@click="removeHouseholdAddress">
{{ $t('household_members_editor.household.remove_address') }}
</button>
</li>
</ul>
</template>
</div>
<ul v-if="isModeNewAllowed || isModeLeaveAllowed || getModeSuggestions.length > 0" class="record_actions">
<li>
<button class="btn btn-sm btn-chill-beige" @click="resetMode">
{{ $t('household_members_editor.household.reset_mode') }}
</button>
</li>
</ul>
</div>
</div>
</template> </template>
<script> <script>
@ -190,6 +165,12 @@ export default {
return false; return false;
return this.$store.state.allowHouseholdSearch && !this.$store.getters.hasHousehold; return this.$store.state.allowHouseholdSearch && !this.$store.getters.hasHousehold;
}, },
isHouseholdNewDesactivated() {
return this.$store.state.mode !== null && !this.$store.getters.isHouseholdNew;
},
isHouseholdLeaveDesactivated() {
return this.$store.state.mode !== null && this.$store.state.mode !== "leave";
}
}, },
methods: { methods: {
setModeNew() { setModeNew() {
@ -218,6 +199,18 @@ export default {
<style lang="scss"> <style lang="scss">
.filtered {
filter: grayscale(1) opacity(0.6);
}
.filteredButActive {
filter: grayscale(1) opacity(0.6);
&:hover {
filter: unset;
}
}
div#household_members_editor div, div#household_members_editor div,
div.householdSuggestionList { div.householdSuggestionList {
&.flex-table { &.flex-table {