q-page.admin-groups
.row.q-pa-md.items-center
.col-auto
img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-people.svg')
.col.q-pl-md
.text-h5.text-primary.animated.fadeInLeft {{ t('admin.groups.title') }}
.text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.groups.subtitle') }}
.col-auto.flex.items-center
q-input.denser.q-mr-sm(
outlined
v-model='state.search'
dense
:class='$q.dark.isActive ? `bg-dark` : `bg-white`'
)
template(#prepend)
q-icon(name='las la-search')
q-btn.acrylic-btn.q-mr-sm(
icon='las la-question-circle'
flat
color='grey'
type='a'
:href='siteStore.docsBase + `/admin/groups`'
target='_blank'
)
q-btn.q-mr-sm.acrylic-btn(
icon='las la-redo-alt'
flat
color='secondary'
@click='load'
:loading='state.loading > 0'
)
q-btn(
unelevated
icon='las la-plus'
:label='t(`admin.groups.create`)'
color='primary'
@click='createGroup'
)
q-separator(inset)
.row.q-pa-md.q-col-gutter-md
.col-12
q-card
q-table(
:rows='state.groups'
:columns='headers'
row-key='id'
flat
hide-header
hide-bottom
:rows-per-page-options='[0]'
:loading='state.loading > 0'
:filter='state.search'
)
template(v-slot:body-cell-id='props')
q-td(:props='props')
q-icon(name='las la-users', color='primary', size='sm')
template(v-slot:body-cell-name='props')
q-td(:props='props')
.flex.items-center
strong {{props.value}}
q-icon.q-ml-sm(
v-if='props.row.isSystem'
name='las la-lock'
color='pink'
)
template(v-slot:body-cell-usercount='props')
q-td(:props='props')
q-chip.text-caption(
square
:color='$q.dark.isActive ? `dark-6` : `grey-2`'
:text-color='$q.dark.isActive ? `white` : `grey-8`'
dense
) {{t('admin.groups.usersCount', { count: props.value })}}
template(v-slot:body-cell-edit='props')
q-td(:props='props')
q-btn.acrylic-btn.q-mr-sm(
flat
:to='`/_admin/groups/` + props.row.id'
icon='las la-pen'
color='indigo'
:label='t(`common.actions.edit`)'
no-caps
)
q-btn.acrylic-btn(
flat
icon='las la-trash'
:color='props.row.isSystem ? `grey` : `negative`'
:disabled='props.row.isSystem'
@click='deleteGroup(props.row)'
)