Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/AclInput.vue
| <template> | <template> | ||||
| <div class="list-input acl-input" :id="id"> | <div class="list-input acl-input" :id="id"> | ||||
| <div class="input-group"> | <div class="input-group"> | ||||
| <select v-if="!useronly" class="form-select mod mod-user" @change="changeMod" v-model="mod"> | <select v-if="!useronly" class="form-select mod mod-user" @change="changeMod" v-model="mod"> | ||||
| <option value="user">{{ $t('form.user') }}</option> | <option value="user">{{ $t('form.user') }}</option> | ||||
| <option value="anyone">{{ $t('form.anyone') }}</option> | <option value="anyone">{{ $t('form.anyone') }}</option> | ||||
| </select> | </select> | ||||
| <input :id="id + '-input'" type="text" class="form-control main-input" :placeholder="$t('form.email')" @keydown="keyDown"> | <input :id="id + '-input'" type="text" class="form-control main-input" :placeholder="$t('form.email')" @keydown="keyDown"> | ||||
| <select class="form-select acl" v-model="perm"> | <select v-if="types.length > 1" class="form-select acl" v-model="perm"> | ||||
| <option v-for="t in types" :key="t" :value="t">{{ $t('form.acl-' + t) }}</option> | <option v-for="t in types" :key="t" :value="t">{{ $t('form.acl-' + t) }}</option> | ||||
| </select> | </select> | ||||
| <a href="#" class="btn btn-outline-secondary" @click.prevent="addItem"> | <a href="#" class="btn btn-outline-secondary" @click.prevent="addItem"> | ||||
| <svg-icon icon="plus"></svg-icon><span class="visually-hidden">{{ $t('btn.add') }}</span> | <svg-icon icon="plus"></svg-icon><span class="visually-hidden">{{ $t('btn.add') }}</span> | ||||
| </a> | </a> | ||||
| </div> | </div> | ||||
| <div class="input-group" v-for="(item, index) in list" :key="index"> | <div class="input-group" v-for="(item, index) in list" :key="index"> | ||||
| <input type="text" class="form-control" :value="aclIdent(item)" :readonly="aclIdent(item) == 'anyone'" :placeholder="$t('form.email')"> | <input type="text" class="form-control" :value="aclIdent(item)" :readonly="aclIdent(item) == 'anyone'" :placeholder="$t('form.email')"> | ||||
| <select class="form-select acl"> | <select v-if="types.length > 1" class="form-select acl"> | ||||
| <option v-for="t in types" :key="t" :value="t" :selected="aclPerm(item) == t">{{ $t('form.acl-' + t) }}</option> | <option v-for="t in types" :key="t" :value="t" :selected="aclPerm(item) == t">{{ $t('form.acl-' + t) }}</option> | ||||
| </select> | </select> | ||||
| <a href="#" class="btn btn-outline-secondary" @click.prevent="deleteItem(index)"> | <a href="#" class="btn btn-outline-secondary" @click.prevent="deleteItem(index)"> | ||||
| <svg-icon icon="trash-can"></svg-icon><span class="visually-hidden">{{ $t('btn.delete') }}</span> | <svg-icon icon="trash-can"></svg-icon><span class="visually-hidden">{{ $t('btn.delete') }}</span> | ||||
| </a> | </a> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| const DEFAULT_TYPES = [ 'read-only', 'read-write', 'full' ] | |||||
| export default { | export default { | ||||
| props: { | props: { | ||||
| list: { type: Array, default: () => [] }, | list: { type: Array, default: () => [] }, | ||||
| id: { type: String, default: '' }, | id: { type: String, default: '' }, | ||||
| types: { type: Array, default: () => DEFAULT_TYPES }, | |||||
| useronly: { type: Boolean, default: false } | useronly: { type: Boolean, default: false } | ||||
| }, | }, | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| mod: 'user', | mod: 'user', | ||||
| perm: 'read-only', | perm: 'read-only', | ||||
| types: [ 'read-only', 'read-write', 'full' ] | |||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.input = $(this.$el).find('.main-input')[0] | this.input = $(this.$el).find('.main-input')[0] | ||||
| this.select = $(this.$el).find('select')[0] | this.select = $(this.$el).find('select')[0] | ||||
| // On form submit add the text from main input to the list | // On form submit add the text from main input to the list | ||||
| // Users tend to forget about pressing the "plus" button | // Users tend to forget about pressing the "plus" button | ||||
| Show All 15 Lines | export default { | ||||
| addItem(focus) { | addItem(focus) { | ||||
| let value = this.input.value | let value = this.input.value | ||||
| if (value || this.mod == 'anyone') { | if (value || this.mod == 'anyone') { | ||||
| if (this.mod == 'anyone') { | if (this.mod == 'anyone') { | ||||
| value = 'anyone' | value = 'anyone' | ||||
| } | } | ||||
| this.$set(this.list, this.list.length, value + ', ' + this.perm) | const perm = this.types.length > 1 ? this.perm : this.types[0] | ||||
| this.$set(this.list, this.list.length, value + ', ' + perm) | |||||
| this.input.classList.remove('is-invalid') | this.input.classList.remove('is-invalid') | ||||
| this.input.value = '' | this.input.value = '' | ||||
| this.mod = 'user' | this.mod = 'user' | ||||
| this.perm = 'read-only' | this.perm = 'read-only' | ||||
| this.changeMod() | this.changeMod() | ||||
| if (focus !== false) { | if (focus !== false) { | ||||
| Show All 24 Lines | export default { | ||||
| if (e.which == 13 && e.target.value) { | if (e.which == 13 && e.target.value) { | ||||
| this.addItem() | this.addItem() | ||||
| e.preventDefault() | e.preventDefault() | ||||
| } | } | ||||
| }, | }, | ||||
| updateList() { | updateList() { | ||||
| // Update this.list to the current state of the html elements | // Update this.list to the current state of the html elements | ||||
| $(this.$el).children('.input-group:not(:first-child)').each((index, elem) => { | $(this.$el).children('.input-group:not(:first-child)').each((index, elem) => { | ||||
| const perm = $(elem).find('select.acl').val() | const perm = this.types.length > 1 ? $(elem).find('select.acl').val() : this.types[0] | ||||
| const value = $(elem).find('input').val() | const value = $(elem).find('input').val() | ||||
| this.$set(this.list, index, value + ', ' + perm) | this.$set(this.list, index, value + ', ' + perm) | ||||
| }) | }) | ||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||