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

addpersons better ux with reset and selectall features

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-09 00:28:28 +02:00
parent b37a7d2690
commit e521d06702
3 changed files with 88 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,35 +12,48 @@
<h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
</template>
<template v-slot:body-fixed>
<div class="search">
<label style="float: right;">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label>
<template v-slot:body-head>
<div class="modal-body">
<div class="search">
<label style="float: right;">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label>
<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>
<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>
<i class="fa fa-times" v-if="queryLength >= 3" @click="resetSuggestion"></i>
</div>
</div>
<div class="modal-body">
<div class="count">
<span>
<a v-if="suggestedCounter > 2" @click="selectAll">
{{ $t('action.check_all')}}
</a>
<a v-if="selectedCounter > 0" @click="resetSelection">
<i v-if="suggestedCounter > 0"> • </i>
{{ $t('action.reset')}}
</a>
</span>
<span v-if="selectedCounter > 0">
{{ $tc('add_persons.selected_counter', selectedCounter) }}
</span>
</div>
</div>
</template>
<template v-slot:body>
<!--span class="discret">Selection: {{ selected }}</span-->
<div class="results">
<div class="count">
<span>
<a v-if="suggestedCounter > 0" href="#">
{{ $t('action.check_all')}}</a>
<a v-if="selectedCounter > 0" href="#">
{{ $t('action.reset')}}</a>
</span>
<span v-if="selectedCounter > 0">
{{ $tc('add_persons.selected_counter', selectedCounter) }}
</span>
</div>
<person-suggestion
v-for="item in this.selectedAndSuggested.slice().reverse()"
@@ -105,6 +118,9 @@ export default {
return this.search.query;
}
},
queryLength() {
return this.search.query.length;
},
suggested() {
return this.search.suggested;
},
@@ -141,7 +157,7 @@ export default {
})
},
setQuery(query) {
console.log('options 1', this.options);
//console.log('options 1', this.options);
this.search.query = query;
if (query.length >= 3) {
searchPersons({ query, options: this.options })
@@ -160,9 +176,20 @@ export default {
this.search.selected = value;
},
resetSearch() {
this.search.selected = [];
this.resetSelection();
this.resetSuggestion();
},
resetSuggestion() {
this.search.query = "";
this.search.suggested = [];
},
resetSelection() {
this.search.selected = [];
},
selectAll() {
this.search.suggested.forEach(function(item) {
this.search.selected.push(item);
}, this);
}
},
}