core/client/components/form/KRoleField.vue

Summary

Maintainability
Test Coverage
<template>
<div v-if="readOnly" :id="properties.name + '-field'">
<q-chip dense />
</div>
<q-field v-else
:for="properties.name + '-field'"
:id="properties.name + '-field'"
:model-value="model"
:label="label"
borderless
:error-message="errorLabel"
:error="hasError"
:disable="disabled"
bottom-slots
@update:model-value="onChanged"
>
<!-- Content -->
<template v-slot:control>
<q-option-group
:id="properties.name + '-field'"
v-model="model"
:options="roles()"
inline
/>
</template>
<!-- Helper -->
<template v-if="hasHelper" v-slot:append>
<k-action
:id="properties.name + '-helper'"
:label="helperLabel"
:icon="helperIcon"
:tooltip="helperTooltip"
:url="helperUrl"
:dialog="helperDialog"
:context="helperContext"
@dialog-confirmed="onHelperDialogConfirmed"
color="primary"
/>
</template>
</q-field>
</template>
 
<script>
import _ from 'lodash'
import { baseField } from '../../mixins'
import { RoleNames } from '../../../common/permissions'
import { QOptionGroup } from 'quasar'
 
export default {
components: {
QOptionGroup
},
mixins: [baseField],
methods: {
roles () {
return this.roleNames ? _.map(this.roleNames, role => { return { label: this.$t(_.upperCase(role)), value: role } }) : []
},
emptyModel () {
return this.roleNames ? this.roleNames[0] : ''
},
isEmpty () {
// Can't actually be
return false
}
},
created () {
this.roleNames = _.get(this.properties, 'field.roles', RoleNames)
}
}
</script>