forked from verdnatura/salix-front
Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 4074-useAcls
This commit is contained in:
parent
9e9a530803
commit
199ed80212
|
|
@ -1,33 +1,66 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useRouter } from 'vue-router';
|
import { ref, computed } from 'vue';
|
||||||
import { computed, ref } from 'vue';
|
import VnTable from 'components/VnTable/VnTable.vue';
|
||||||
|
|
||||||
import VnPaginate from 'src/components/ui/VnPaginate.vue';
|
|
||||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||||
import VnLv from 'src/components/ui/VnLv.vue';
|
|
||||||
import CardList from 'src/components/ui/CardList.vue';
|
|
||||||
import AccountSummary from './Card/AccountSummary.vue';
|
import AccountSummary from './Card/AccountSummary.vue';
|
||||||
import AccountFilter from './AccountFilter.vue';
|
|
||||||
import AccountCreate from './AccountCreate.vue';
|
|
||||||
|
|
||||||
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
|
||||||
import { useStateStore } from 'stores/useStateStore';
|
|
||||||
import { useAcl } from 'src/composables/useAcl';
|
|
||||||
import { QDialog } from 'quasar';
|
|
||||||
|
|
||||||
const stateStore = useStateStore();
|
|
||||||
const router = useRouter();
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { viewSummary } = useSummaryDialog();
|
const { viewSummary } = useSummaryDialog();
|
||||||
const accountCreateDialogRef = ref(null);
|
const tableRef = ref();
|
||||||
const showNewUserBtn = computed(() => useAcl().hasAny('Account', '*', 'WRITE'));
|
|
||||||
|
|
||||||
const filter = {
|
|
||||||
fields: ['id', 'nickname', 'name', 'role'],
|
|
||||||
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
|
|
||||||
};
|
|
||||||
|
|
||||||
|
const columns = computed(() => [
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'id',
|
||||||
|
label: t('id'),
|
||||||
|
isId: true,
|
||||||
|
field: 'id',
|
||||||
|
cardVisible: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'username',
|
||||||
|
label: t('nickname'),
|
||||||
|
isTitle: true,
|
||||||
|
component: 'input',
|
||||||
|
columnField: {
|
||||||
|
component: null,
|
||||||
|
},
|
||||||
|
columnFilter: {
|
||||||
|
inWhere: true,
|
||||||
|
},
|
||||||
|
cardVisible: true,
|
||||||
|
create: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'left',
|
||||||
|
name: 'name',
|
||||||
|
label: t('name'),
|
||||||
|
component: 'input',
|
||||||
|
columnField: {
|
||||||
|
component: null,
|
||||||
|
},
|
||||||
|
columnFilter: {
|
||||||
|
inWhere: true,
|
||||||
|
},
|
||||||
|
cardVisible: true,
|
||||||
|
create: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
align: 'right',
|
||||||
|
label: '',
|
||||||
|
name: 'tableActions',
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
title: t('View Summary'),
|
||||||
|
icon: 'preview',
|
||||||
|
action: (row) => viewSummary(row.id, AccountSummary),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
const exprBuilder = (param, value) => {
|
const exprBuilder = (param, value) => {
|
||||||
switch (param) {
|
switch (param) {
|
||||||
case 'search':
|
case 'search':
|
||||||
|
|
@ -46,99 +79,25 @@ const exprBuilder = (param, value) => {
|
||||||
return { [param]: value };
|
return { [param]: value };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getApiUrl = () => new URL(window.location).origin;
|
|
||||||
|
|
||||||
const navigate = (event, id) => {
|
|
||||||
if (event.ctrlKey || event.metaKey)
|
|
||||||
return window.open(`${getApiUrl()}/#/account/${id}/summary`);
|
|
||||||
router.push({ path: `/account/${id}` });
|
|
||||||
};
|
|
||||||
|
|
||||||
const openCreateModal = () => accountCreateDialogRef.value.show();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-if="stateStore.isHeaderMounted()">
|
<VnSearchbar
|
||||||
<Teleport to="#searchbar">
|
:label="t('account.search')"
|
||||||
<VnSearchbar
|
data-key="AccountUsers"
|
||||||
data-key="AccountList"
|
:expr-builder="exprBuilder"
|
||||||
url="VnUsers/preview"
|
:info="t('account.searchInfo')"
|
||||||
:expr-builder="exprBuilder"
|
/>
|
||||||
:label="t('account.search')"
|
|
||||||
:info="t('account.searchInfo')"
|
<VnTable
|
||||||
/>
|
ref="tableRef"
|
||||||
</Teleport>
|
data-key="AccountUsers"
|
||||||
<Teleport to="#actions-append">
|
url="VnUsers/preview"
|
||||||
<div class="row q-gutter-x-sm">
|
order="id DESC"
|
||||||
<QBtn
|
:columns="columns"
|
||||||
flat
|
default-mode="table"
|
||||||
@click="stateStore.toggleRightDrawer()"
|
auto-load
|
||||||
round
|
redirect="account"
|
||||||
dense
|
:use-model="true"
|
||||||
icon="menu"
|
/>
|
||||||
>
|
|
||||||
<QTooltip bottom anchor="bottom right">
|
|
||||||
{{ t('globals.collapseMenu') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QBtn>
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
|
||||||
<QScrollArea class="fit text-grey-8">
|
|
||||||
<AccountFilter data-key="AccountList" :expr-builder="exprBuilder" />
|
|
||||||
</QScrollArea>
|
|
||||||
</QDrawer>
|
|
||||||
<QPage class="column items-center q-pa-md">
|
|
||||||
<div class="vn-card-list">
|
|
||||||
<VnPaginate
|
|
||||||
:filter="filter"
|
|
||||||
data-key="AccountList"
|
|
||||||
url="VnUsers/preview"
|
|
||||||
auto-load
|
|
||||||
>
|
|
||||||
<template #body="{ rows }">
|
|
||||||
<CardList
|
|
||||||
v-for="row of rows"
|
|
||||||
:id="row.id"
|
|
||||||
:key="row.id"
|
|
||||||
:title="row.nickname"
|
|
||||||
@click="navigate($event, row.id)"
|
|
||||||
>
|
|
||||||
<template #list-items>
|
|
||||||
<VnLv :label="t('account.card.name')" :value="row.nickname">
|
|
||||||
</VnLv>
|
|
||||||
<VnLv
|
|
||||||
:label="t('account.card.nickname')"
|
|
||||||
:value="row.username"
|
|
||||||
>
|
|
||||||
</VnLv>
|
|
||||||
</template>
|
|
||||||
<template #actions>
|
|
||||||
<QBtn
|
|
||||||
:label="t('components.smartCard.openSummary')"
|
|
||||||
@click.stop="viewSummary(row.id, AccountSummary)"
|
|
||||||
color="primary"
|
|
||||||
style="margin-top: 15px"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</CardList>
|
|
||||||
</template>
|
|
||||||
</VnPaginate>
|
|
||||||
</div>
|
|
||||||
<QDialog
|
|
||||||
ref="accountCreateDialogRef"
|
|
||||||
transition-hide="scale"
|
|
||||||
transition-show="scale"
|
|
||||||
>
|
|
||||||
<AccountCreate />
|
|
||||||
</QDialog>
|
|
||||||
<QPageSticky :offset="[20, 20]" v-if="showNewUserBtn">
|
|
||||||
<QBtn @click="openCreateModal" color="primary" fab icon="add" />
|
|
||||||
<QTooltip class="text-no-wrap">
|
|
||||||
{{ t('account.card.newUser') }}
|
|
||||||
</QTooltip>
|
|
||||||
</QPageSticky>
|
|
||||||
</QPage>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue