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

modal addPerson design, search field: focus and position fixed

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-05-03 08:48:23 +02:00
parent 3d45b6687f
commit a1bb9ea352
8 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,31 +1,36 @@
<template>
<button class="sc-button bt-create centered mt-4"
@click="modal.showModal = true">
<button class="sc-button bt-create centered mt-4" @click="openModal">
{{ $t('add_persons.search_add_others_persons') }}
</button>
<teleport to="body">
<modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
<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.counter', counter) }}</label>
<input class="my-4" v-model="query" name="query" ref="search"
:placeholder="$t('add_persons.search_some_persons')" />
</template>
<template v-slot:body>
<label style="float: right;">{{ $tc('add_persons.counter', counter) }}</label>
<input class="my-4" v-model="query" name="query"
:placeholder="$t('add_persons.search_some_persons')" />
<ul class="results suggestions">
<div class="results">
<person-suggestion v-for="item in suggested.results"
v-bind:item="item"
v-bind:key="item.id">
</person-suggestion>
</ul>
</div>
</template>
<template v-slot:footer>
<button class="sc-button green" @click="modal.showModal = false">{{ $t('action.save')}}</button>
<button class="sc-button green" @click="AddPersons">
<i class="fa fa-plus fa-fw"></i>{{ $t('action.add')}}</button>
</template>
</modal>
</teleport>
@@ -50,6 +55,14 @@ export default {
}
}
},
methods: {
openModal() {
this.modal.showModal = true;
this.$nextTick(function() {
this.$refs.search.focus();
})
}
},
computed: {
...mapState(['add_persons']),
query: {
@@ -66,6 +79,9 @@ export default {
counter() {
if (! this.add_persons.suggested.results) { return 0; }
return this.add_persons.suggested.results.length;
},
AddPersons() {
console.log('add persons');
}
}
}