q-dialog(ref='dialogRef', @hide='onDialogHide')
q-card(style='min-width: 850px;')
q-card-section.card-header
template(v-if='props.hookId')
q-icon(name='img:/_assets/icons/fluent-pencil-drawing.svg', left, size='sm')
span {{t(`admin.webhooks.edit`)}}
template(v-else)
q-icon(name='img:/_assets/icons/fluent-plus-plus.svg', left, size='sm')
span {{t(`admin.webhooks.new`)}}
//- STATE INFO BAR
q-card-section.flex.items-center.bg-indigo.text-white(v-if='props.hookId && state.hook.state === `pending`')
q-spinner-clock.q-mr-sm(
color='white'
size='xs'
)
.text-caption {{t('admin.webhooks.statePendingHint')}}
q-card-section.flex.items-center.bg-positive.text-white(v-if='props.hookId && state.hook.state === `success`')
q-spinner-infinity.q-mr-sm(
color='white'
size='xs'
)
.text-caption {{t('admin.webhooks.stateSuccessHint')}}
q-card-section.bg-negative.text-white(v-if='props.hookId && state.hook.state === `error`')
.flex.items-center
q-icon.q-mr-sm(
color='white'
size='xs'
name='las la-exclamation-triangle'
)
.text-caption {{t('admin.webhooks.stateErrorExplain')}}
.text-caption.q-pl-lg.q-ml-xs.text-red-2 {{state.hook.lastErrorMessage}}
//- FORM
q-form.q-py-sm(ref='editWebhookForm')
q-item
blueprint-icon(icon='info-popup')
q-item-section
q-input(
outlined
v-model='state.hook.name'
dense
:rules='hookNameValidation'
hide-bottom-space
:label='t(`common.field.name`)'
:aria-label='t(`common.field.name`)'
lazy-rules='ondemand'
autofocus
)
q-item
blueprint-icon(icon='lightning-bolt')
q-item-section
q-select(
outlined
:options='events'
v-model='state.hook.events'
multiple
map-options
emit-value
option-value='key'
option-label='name'
options-dense
dense
:rules='hookEventsValidation'
hide-bottom-space
:label='t(`admin.webhooks.events`)'
:aria-label='t(`admin.webhooks.events`)'
lazy-rules='ondemand'
)
template(v-slot:selected)
.text-caption(v-if='state.hook.events.length > 0') {{t(`admin.webhooks.eventsSelected`, state.hook.events.length, { count: state.hook.events.length })}}
span(v-else)
template(v-slot:option='{ itemProps, opt, selected, toggleOption }')
q-item(
v-bind='itemProps'
)
q-item-section(side)
q-checkbox(
:model-value='selected'
@update:model-value='toggleOption(opt)'
size='sm'
)
q-item-section(side)
q-chip.q-mx-none(
size='sm'
color='positive'
text-color='white'
square
) {{opt.type}}
q-item-section
q-item-label {{opt.name}}
q-item
blueprint-icon.self-start(icon='unknown-status')
q-item-section
q-item-label {{t(`admin.webhooks.url`)}}
q-item-label(caption) {{t(`admin.webhooks.urlHint`)}}
q-input.q-mt-sm(
outlined
v-model='state.hook.url'
dense
:rules='hookUrlValidation'
hide-bottom-space
placeholder='https://'
:aria-label='t(`admin.webhooks.url`)'
lazy-rules='ondemand'
)
template(v-slot:prepend)
q-chip.q-mx-none(
color='positive'
text-color='white'
square
size='sm'
) POST
q-item(tag='label', v-ripple)
blueprint-icon(icon='rescan-document')
q-item-section
q-item-label {{t(`admin.webhooks.includeMetadata`)}}
q-item-label(caption) {{t(`admin.webhooks.includeMetadataHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.hook.includeMetadata'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.webhooks.includeMetadata`)'
)
q-item(tag='label', v-ripple)
blueprint-icon(icon='select-all')
q-item-section
q-item-label {{t(`admin.webhooks.includeContent`)}}
q-item-label(caption) {{t(`admin.webhooks.includeContentHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.hook.includeContent'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.webhooks.includeContent`)'
)
q-item(tag='label', v-ripple)
blueprint-icon(icon='security-ssl')
q-item-section
q-item-label {{t(`admin.webhooks.acceptUntrusted`)}}
q-item-label(caption) {{t(`admin.webhooks.acceptUntrustedHint`)}}
q-item-section(avatar)
q-toggle(
v-model='state.hook.acceptUntrusted'
color='primary'
checked-icon='las la-check'
unchecked-icon='las la-times'
:aria-label='t(`admin.webhooks.acceptUntrusted`)'
)
q-item
blueprint-icon.self-start(icon='fingerprint-scan')
q-item-section
q-item-label {{t(`admin.webhooks.authHeader`)}}
q-item-label(caption) {{t(`admin.webhooks.authHeaderHint`)}}
q-input.q-mt-sm(
outlined
v-model='state.hook.authHeader'
dense
:aria-label='t(`admin.webhooks.authHeader`)'
)
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(
v-if='props.hookId'
unelevated
:label='t(`common.actions.save`)'
color='primary'
padding='xs md'
@click='save'
:loading='state.isLoading'
)
q-btn(
v-else
unelevated
:label='t(`common.actions.create`)'
color='primary'
padding='xs md'
@click='create'
:loading='state.isLoading'
)
q-inner-loading(:showing='state.isLoading')
q-spinner(color='accent', size='lg')