Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-21 15:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve addPersons modal ux

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-05 09:29:57 +02:00
parent cc8de353d4
commit ac550e05e8
4 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue
View File

@@ -4,46 +4,54 @@
</button>
<teleport to="body">
<modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass"
<modal v-if="modal.showModal"
:modalDialogClass="modal.modalDialogClass"
@close="modal.showModal = false">
<template v-slot:header>
<h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
</template>
<template v-slot:body-fixed>
<label style="float: right;">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label>
<input class="my-4"
name="query"
ref="search"
v-model="query"
:placeholder="$t('add_persons.search_some_persons')" />
<div class="search">
<label style="float: right;">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label>
<div v-if="selectedCounter > 0">
{{ $tc('add_persons.selected_counter', selectedCounter) }}
<input id="search-persons"
name="query"
v-model="query"
:placeholder="$t('add_persons.search_some_persons')"
ref="search" />
<i class="fa fa-search fa-lg"></i>
</div>
</template>
<template v-slot:body>
<template v-slot:body>
<!--span class="discret">Selection: {{ selected }}</span-->
<div class="results">
<div class="count">
<span v-if="suggestedCounter > 0" style="">
<a href="#">{{ $t('action.check_all')}}</a>
</span>
<span v-if="selectedCounter > 0" style="float:right;">
{{ $tc('add_persons.selected_counter', selectedCounter) }}
</span>
</div>
<person-suggestion
v-for="item in this.selectedAndSuggested"
v-bind:item="item"
v-bind:key="item.id">
</person-suggestion>
</div>
</template>
<template v-slot:footer>
<button class="sc-button green" @click="addPersons">
<i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}</button>
<i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}
</button>
</template>
</modal>
</teleport>
</template>