q-dialog(ref='dialogRef', @hide='onDialogHide')
q-card(style='min-width: 650px;')
q-card-section.card-header
q-icon(name='img:/_assets/icons/fluent-plus-plus.svg', left, size='sm')
span {{t(`admin.api.newKeyTitle`)}}
q-form.q-py-sm(ref='createKeyForm', @submit='create')
q-item
blueprint-icon.self-start(icon='grand-master-key')
q-item-section
q-input(
outlined
v-model='state.keyName'
dense
:rules='keyNameValidation'
hide-bottom-space
:label='t(`admin.api.newKeyName`)'
:aria-label='t(`admin.api.newKeyName`)'
:hint='t(`admin.api.newKeyNameHint`)'
lazy-rules='ondemand'
autofocus
ref='iptName'
)
q-item
blueprint-icon.self-start(icon='schedule')
q-item-section
q-select(
outlined
:options='expirations'
v-model='state.keyExpiration'
multiple
map-options
option-value='value'
option-label='text'
emit-value
options-dense
dense
hide-bottom-space
:label='t(`admin.api.newKeyExpiration`)'
:aria-label='t(`admin.api.newKeyExpiration`)'
:hint='t(`admin.api.newKeyExpirationHint`)'
)
q-item
blueprint-icon.self-start(icon='access')
q-item-section
q-select(
outlined
:options='state.groups'
v-model='state.keyGroups'
multiple
map-options
emit-value
option-value='id'
option-label='name'
options-dense
dense
:rules='keyGroupsValidation'
hide-bottom-space
:label='t(`admin.api.permissionGroups`)'
:aria-label='t(`admin.api.permissionGroups`)'
:hint='t(`admin.api.newKeyGroupHint`)'
lazy-rules='ondemand'
:loading='state.loadingGroups'
)
template(v-slot:selected)
.text-caption(v-if='state.keyGroups.length > 1')
i18n-t(keypath='admin.api.groupsSelected')
template(#count)
strong {{ state.keyGroups.length }}
.text-caption(v-else-if='state.keyGroups.length === 1')
i18n-t(keypath='admin.api.groupSelected')
template(#group)
strong {{ selectedGroupName }}
span(v-else)
template(v-slot:option='{ itemProps, opt, selected, toggleOption }')
q-item(
v-bind='itemProps'
)
q-item-section(side)
q-checkbox(
size='sm'
:model-value='selected'
@update:model-value='toggleOption(opt)'
)
q-item-section
q-item-label {{opt.name}}
q-card-actions.card-actions
q-space
q-btn.acrylic-btn(
flat
:label='t(`common.actions.cancel`)'
color='grey'
padding='xs md'
@click='onDialogCancel'
)
q-btn(
unelevated
:label='t(`common.actions.create`)'
color='primary'
padding='xs md'
@click='create'
:loading='state.loading > 0'
)