Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
View File

@ -104,30 +104,45 @@ div.vue-component {
} }
//// AddPersons modal //// AddPersons modal
div.modal-body.up { div.body-head {
margin: auto 4em; overflow-y: unset;
div.search { div.modal-body:first-child {
position: relative; margin: auto 4em;
input { div.search {
padding: 1.2em 1.5em 1.2em 2.5em; position: relative;
margin: 1em 0; input {
padding: 1.2em 1.5em 1.2em 2.5em;
margin: 1em 0;
}
i {
position: absolute;
opacity: 0.5;
padding: 0.65em 0;
top: 50%;
}
i.fa-search {
left: 0.5em;
}
i.fa-times {
right: 1em;
padding: 0.75em 0;
cursor: pointer;
}
} }
i { }
position: absolute; div.modal-body:last-child {
top: 50%; padding-bottom: 0;
left: 0.5em; }
padding: 0.65em 0; }
opacity: 0.5; div.count {
} margin: -0.5em 0 0.7em;
display: flex;
justify-content: space-between;
a {
cursor: pointer;
} }
} }
div.results { div.results {
div.count {
margin: -0.5em 0 0.7em;
display: flex;
justify-content: space-between;
}
div.list-item { div.list-item {
line-height: 26pt; line-height: 26pt;
padding: 0.3em 0.8em; padding: 0.3em 0.8em;

4
src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Modal.vue
View File

@ -9,8 +9,8 @@
<button class="close sc-button grey" @click="$emit('close')"> <button class="close sc-button grey" @click="$emit('close')">
<i class="fa fa-times" aria-hidden="true"></i></button> <i class="fa fa-times" aria-hidden="true"></i></button>
</div> </div>
<div class="modal-body up" style="overflow-y: unset;"> <div class="body-head">
<slot name="body-fixed"></slot> <slot name="body-head"></slot>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<slot name="body"></slot> <slot name="body"></slot>

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> <h3 class="modal-title">{{ $t('add_persons.title') }}</h3>
</template> </template>
<template v-slot:body-fixed> <template v-slot:body-head>
<div class="search"> <div class="modal-body">
<label style="float: right;"> <div class="search">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label> <label style="float: right;">
{{ $tc('add_persons.suggested_counter', suggestedCounter) }}
</label>
<input id="search-persons" <input id="search-persons"
name="query" name="query"
v-model="query" v-model="query"
:placeholder="$t('add_persons.search_some_persons')" :placeholder="$t('add_persons.search_some_persons')"
ref="search" /> ref="search" />
<i class="fa fa-search fa-lg"></i> <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> </div>
</template> </template>
<template v-slot:body> <template v-slot:body>
<!--span class="discret">Selection: {{ selected }}</span--> <!--span class="discret">Selection: {{ selected }}</span-->
<div class="results"> <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 <person-suggestion
v-for="item in this.selectedAndSuggested.slice().reverse()" v-for="item in this.selectedAndSuggested.slice().reverse()"
@ -105,6 +118,9 @@ export default {
return this.search.query; return this.search.query;
} }
}, },
queryLength() {
return this.search.query.length;
},
suggested() { suggested() {
return this.search.suggested; return this.search.suggested;
}, },
@ -141,7 +157,7 @@ export default {
}) })
}, },
setQuery(query) { setQuery(query) {
console.log('options 1', this.options); //console.log('options 1', this.options);
this.search.query = query; this.search.query = query;
if (query.length >= 3) { if (query.length >= 3) {
searchPersons({ query, options: this.options }) searchPersons({ query, options: this.options })
@ -160,9 +176,20 @@ export default {
this.search.selected = value; this.search.selected = value;
}, },
resetSearch() { resetSearch() {
this.search.selected = []; this.resetSelection();
this.resetSuggestion();
},
resetSuggestion() {
this.search.query = ""; this.search.query = "";
this.search.suggested = []; this.search.suggested = [];
},
resetSelection() {
this.search.selected = [];
},
selectAll() {
this.search.suggested.forEach(function(item) {
this.search.selected.push(item);
}, this);
} }
}, },
} }