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> |