remove unneccessary padding close #32

This commit is contained in:
Adrian Zürcher
2025-11-18 10:03:25 +01:00
parent afff7c123a
commit 26300e27c3
2 changed files with 140 additions and 144 deletions

View File

@@ -1,32 +1,30 @@
<template> <template>
<SiteTitle :title="$t('userSettings')" /> <SiteTitle :title="$t('userSettings')" />
<div class="q-pa-md"> <div class="q-gutter-y-md">
<div class="q-gutter-y-md"> <q-card>
<q-card> <q-tabs
<q-tabs v-model="tab"
v-model="tab" dense
dense class="taxt-grey"
class="taxt-grey" active-color="primary"
active-color="primary" indicator-color="primary"
indicator-color="primary" align="justify"
align="justify" narrow-indicator
narrow-indicator >
> <q-tab name="users" no-caps :label="$t('users')" />
<q-tab name="users" no-caps :label="$t('users')" /> <q-tab name="roles" no-caps :label="$t('roles')" />
<q-tab name="roles" no-caps :label="$t('roles')" /> </q-tabs>
</q-tabs> <q-separator />
<q-separator />
<q-tab-panels v-model="tab" animated> <q-tab-panels v-model="tab" animated>
<q-tab-panel name="users"> <q-tab-panel name="users" style="padding: 0px">
<UserTable /> <UserTable />
</q-tab-panel> </q-tab-panel>
<q-tab-panel name="roles"> <q-tab-panel name="roles" style="padding: 0px">
<RoleTable /> <RoleTable />
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
</q-card> </q-card>
</div>
</div> </div>
</template> </template>

View File

@@ -1,128 +1,126 @@
<template> <template>
<div class="q-pa-md"> <q-table
<q-table flat
flat bordered
bordered ref="tableRef"
ref="tableRef" title="Roles"
title="Roles" title-class="text-bold text-blue-9"
title-class="text-bold text-blue-9" :no-data-label="$t('noDataAvailable')"
:no-data-label="$t('noDataAvailable')" :loading-label="$t('loading')"
:loading-label="$t('loading')" :rows-per-page-label="$t('recordsPerPage')"
:rows-per-page-label="$t('recordsPerPage')" :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
:selected-rows-label="(val) => val + ' ' + $t('recordSelected')" :rows="roles"
:rows="roles" :columns="columns"
:columns="columns" row-key="id"
row-key="id" v-model:pagination="pagination"
v-model:pagination="pagination" :loading="loading"
:loading="loading" :filter="filter"
:filter="filter" :selection="selectOption ? 'multiple' : 'none'"
:selection="selectOption ? 'multiple' : 'none'" v-model:selected="selected"
v-model:selected="selected" binary-state-sort
binary-state-sort dense
dense class="bigger-table-text"
class="bigger-table-text" >
> <template v-slot:top-left>
<template v-slot:top-left> <q-btn-group push flat style="color: grey">
<q-btn-group push flat style="color: grey"> <q-btn
<q-btn v-if="user.isPermittedTo('userSettings', 'write')"
v-if="user.isPermittedTo('userSettings', 'write')" dense
dense flat
flat icon="add"
icon="add" @click="openAllValueDialog(null)"
@click="openAllValueDialog(null)" >
<q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
</q-btn>
<q-btn
v-if="user.isPermittedTo('userSettings', 'write')"
dense
flat
style="color: grey"
:icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
@click="selectOption = !selectOption"
>
<q-tooltip>{{ $t('selectRoleOptions') }}</q-tooltip>
</q-btn>
</q-btn-group>
<div v-if="selectOption && selected.length > 0">
<q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
<q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
<q-item
clickable
v-close-popup
@click="openRemoveDialog(...selected)"
class="text-negative"
>{{ $t('delete') }}</q-item
> >
<q-tooltip>{{ $t('addNewRole') }}</q-tooltip> </q-menu>
</q-btn> </div>
<q-btn <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
v-if="user.isPermittedTo('userSettings', 'write')" {{ $t('selected') }}: {{ selected.length }}
dense </div>
flat </template>
style="color: grey" <template v-slot:top-right>
:icon="selectOption ? 'check_box' : 'check_box_outline_blank'" <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
@click="selectOption = !selectOption" <template v-slot:append>
> <q-icon name="search" />
<q-tooltip>{{ $t('selectRoleOptions') }}</q-tooltip> </template>
</q-btn> </q-input>
</q-btn-group> </template>
<div v-if="selectOption && selected.length > 0"> <template v-slot:body-cell="props">
<q-btn flat dense icon="more_vert" @click="openSubmenu = true" /> <q-td
<q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle"> :props="props"
<q-item :disable="!autorized(props.row)"
clickable :style="
v-close-popup autorized(props.row) && user.isPermittedTo('userSettings', 'write')
@click="openRemoveDialog(...selected)" ? 'cursor: pointer'
class="text-negative" : ''
>{{ $t('delete') }}</q-item "
> @click="
</q-menu> autorized(props.row) && user.isPermittedTo('userSettings', 'write')
</div> ? openSingleValueDialog(props.col.label, props.col.name, props.row)
<div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold"> : ''
{{ $t('selected') }}: {{ selected.length }} "
</div> >
</template> {{ props.value }}
<template v-slot:top-right> </q-td>
<q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')"> </template>
<template v-slot:append> <template v-slot:body-cell-permissions="props">
<q-icon name="search" /> <q-td :props="props">
</template> <q-btn
</q-input> :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
</template> flat
<template v-slot:body-cell="props"> dense
<q-td icon="rule"
:props="props" :color="
:disable="!autorized(props.row)"
:style="
autorized(props.row) && user.isPermittedTo('userSettings', 'write') autorized(props.row) && user.isPermittedTo('userSettings', 'write')
? 'cursor: pointer' ? 'secondary'
: '' : 'grey'
" "
@click=" @click="
autorized(props.row) && user.isPermittedTo('userSettings', 'write') user.isPermittedTo('userSettings', 'write') &&
? openSingleValueDialog(props.col.label, props.col.name, props.row) openAllValueDialog(props.row, 'permissions')
: ''
" "
> >
{{ props.value }} <q-tooltip> {{ $t('permissions') }} </q-tooltip>
</q-td> </q-btn>
</template> </q-td>
<template v-slot:body-cell-permissions="props"> </template>
<q-td :props="props"> <template v-slot:body-cell-option="props">
<q-btn <q-td :props="props">
:disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')" <q-btn
flat v-if="user.isPermittedTo('userSettings', 'delete')"
dense :disable="!autorized(props.row)"
icon="rule" flat
:color=" dense
autorized(props.row) && user.isPermittedTo('userSettings', 'write') icon="delete"
? 'secondary' color="negative"
: 'grey' @click="openRemoveDialog(props.row)"
" >
@click=" <q-tooltip> {{ $t('delete') }} </q-tooltip>
user.isPermittedTo('userSettings', 'write') && </q-btn>
openAllValueDialog(props.row, 'permissions') </q-td>
" </template>
> </q-table>
<q-tooltip> {{ $t('permissions') }} </q-tooltip>
</q-btn>
</q-td>
</template>
<template v-slot:body-cell-option="props">
<q-td :props="props">
<q-btn
v-if="user.isPermittedTo('userSettings', 'delete')"
:disable="!autorized(props.row)"
flat
dense
icon="delete"
color="negative"
@click="openRemoveDialog(props.row)"
>
<q-tooltip> {{ $t('delete') }} </q-tooltip>
</q-btn>
</q-td>
</template>
</q-table>
</div>
<EditOneDialog <EditOneDialog
ref="editOneDialog" ref="editOneDialog"
endpoint="roles/update" endpoint="roles/update"