verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 87 Releases Wiki Activity

feat(Account & AccountRole): refs #8197 add VnCardMain

This commit is contained in:
Alex Moreno 2024-12-02 11:39:01 +01:00
parent 658551e085
commit 907bf3cf3b
17 changed files with 266 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/common/VnCard.vue
View File

@ -59,32 +59,16 @@ if (props.baseUrl) {
}
</script>
<template>
<QDrawer
v-model="stateStore.leftDrawer"
show-if-above
:width="256"
v-if="stateStore.isHeaderMounted()"
>
<QScrollArea class="fit">
<component :is="descriptor" />
<QSeparator />
<LeftMenu source="card" />
</QScrollArea>
</QDrawer>
<slot name="searchbar" v-if="props.searchDataKey">
<VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" />
</slot>
<RightMenu>
<template #right-panel v-if="props.filterPanel">
<component :is="props.filterPanel" :data-key="searchRightDataKey" />
</template>
</RightMenu>
<QPageContainer>
<QPage>
<VnSubToolbar />
<div :class="[useCardSize(), $attrs.class]">
<RouterView :key="route.path" />
</div>
</QPage>
</QPageContainer>
<Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">
<component :is="descriptor" />
<QSeparator />
<LeftMenu source="card" />
</Teleport>
<VnSubToolbar />
<div :class="[useCardSize(), $attrs.class]">
<RouterView :key="route.path" />
</div>
</template>

20
src/components/common/VnCardMain.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import LeftMenu from '../LeftMenu.vue';
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
defineProps({
section: {
type: String,
required: true,
},
});
</script>
<template>
<slot name="searchbar" />
<Teleport to="#left-panel" v-if="stateStore.isHeaderMounted()">
<LeftMenu v-if="section == $route.name" />
</Teleport>
<slot name="body" v-if="section == $route.name" />
<RouterView v-else />
</template>

3
src/components/common/VnSectionMain.vue
View File

@ -1,6 +1,5 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import LeftMenu from 'components/LeftMenu.vue';
import { onMounted } from 'vue';
import { useQuasar } from 'quasar';
@ -19,7 +18,7 @@ onMounted(
<template>
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
<QScrollArea class="fit text-grey-8">
<LeftMenu />
<div id="left-panel"></div>
</QScrollArea>
</QDrawer>
<QPageContainer>

9
src/composables/useArrayData.js
View File

@ -75,18 +75,13 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
limit: store.limit,
};
let userParams = { ...store.userParams };
Object.assign(filter, store.userFilter);
let where;
if (filter?.where || store.filter?.where)
where = Object.assign(filter?.where ?? {}, store.filter?.where ?? {});
delete store.filter.where;
Object.assign(filter, store.filter);
filter.where = where;
const params = { filter };
Object.assign(params, userParams);
Object.assign(params, store.userParams);
if (params.filter) params.filter.skip = store.skip;
if (store?.order && typeof store?.order == 'string') store.order = [store.order];
if (store.order?.length) params.filter.order = [...store.order];

56
src/pages/Account/AccountList.vue
View File

@ -5,14 +5,15 @@ import VnTable from 'components/VnTable/VnTable.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import AccountSummary from './Card/AccountSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import AccountFilter from './AccountFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnCardMain from 'src/components/common/VnCardMain.vue';
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const filter = {
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
};
const dataKey = 'AccountList';
const url = 'VnUsers/preview';
const columns = computed(() => [
{
align: 'left',
@ -103,31 +104,34 @@ const exprBuilder = (param, value) => {
</script>
<template>
<VnSearchbar
data-key="AccountList"
:expr-builder="exprBuilder"
:label="t('account.search')"
:info="t('account.searchInfo')"
:filter="filter"
/>
<RightMenu>
<template #right-panel>
<AccountFilter data-key="AccountList" />
<VnCardMain :section="dataKey">
<template #searchbar>
<VnSearchbar
:data-key="dataKey"
:expr-builder="exprBuilder"
:label="t('account.search')"
:info="t('account.searchInfo')"
:filter="filter"
:url="url"
/>
</template>
</RightMenu>
<VnTable
ref="tableRef"
data-key="AccountList"
url="VnUsers/preview"
:filter="filter"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="account"
:use-model="true"
:right-search="false"
auto-load
/>
<template #body>
<VnTable
:style="{ display: !!$route.name.endsWith('List') ? '' : 'none' }"
ref="tableRef"
:data-key="dataKey"
:url="url"
:filter="filter"
order="id DESC"
:columns="columns"
default-mode="table"
redirect="account"
:use-model="true"
:right-search="true"
:expr-builder="exprBuilder"
/>
</template>
</VnCardMain>
</template>
<i18n>

14
src/pages/Account/Card/AccountCard.vue
View File

@ -1,20 +1,8 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnCard from 'components/common/VnCard.vue';
import AccountDescriptor from './AccountDescriptor.vue';
const { t } = useI18n();
</script>
<template>
<VnCard
data-key="Account"
:descriptor="AccountDescriptor"
search-data-key="AccountList"
:searchbar-props="{
url: 'VnUsers/preview',
label: t('account.search'),
info: t('account.searchInfo'),
}"
/>
<VnCard data-key="Account" :descriptor="AccountDescriptor" />
</template>

63
src/pages/Account/Role/AccountRoles.vue
View File

@ -6,8 +6,11 @@ import { useRoute } from 'vue-router';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RoleSummary from './Card/RoleSummary.vue';
import VnCardMain from 'src/components/common/VnCardMain.vue';
const route = useRoute();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const $props = defineProps({
id: {
type: Number,
@ -15,8 +18,10 @@ const $props = defineProps({
},
});
const tableRef = ref();
const url = 'VnRoles';
const dataKey = 'AccountRoleList';
const entityId = computed(() => $props.id || route.params.id);
const { viewSummary } = useSummaryDialog();
const columns = computed(() => [
{
align: 'left',
@ -63,6 +68,7 @@ const columns = computed(() => [
},
]);
const exprBuilder = (param, value) => {
console.log('param: ', param);
switch (param) {
case 'search':
return /^\d+$/.test(value)
@ -81,30 +87,37 @@ const exprBuilder = (param, value) => {
</script>
<template>
<VnSearchbar
data-key="AccountRolesList"
:expr-builder="exprBuilder"
:label="t('role.searchRoles')"
:info="t('role.searchInfo')"
/>
<VnTable
ref="tableRef"
data-key="AccountRolesList"
:url="`VnRoles`"
:create="{
urlCreate: 'VnRoles',
title: t('Create rol'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {
editorFk: entityId,
},
}"
order="id ASC"
:disable-option="{ card: true }"
:columns="columns"
default-mode="table"
redirect="account/role"
/>
<VnCardMain :section="dataKey">
<template #searchbar>
<VnSearchbar
:url="url"
:data-key="dataKey"
:expr-builder="exprBuilder"
:label="t('role.searchRoles')"
:info="t('role.searchInfo')"
/>
</template>
<template #body>
<VnTable
ref="tableRef"
:data-key="dataKey"
:url="url"
:create="{
urlCreate: 'VnRoles',
title: t('Create rol'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {
editorFk: entityId,
},
}"
order="id ASC"
:disable-option="{ card: true }"
:columns="columns"
default-mode="table"
redirect="account/role"
/>
</template>
</VnCardMain>
</template>
<i18n>

15
src/pages/Account/Role/Card/RoleCard.vue
View File

@ -1,20 +1,7 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnCard from 'components/common/VnCard.vue';
import RoleDescriptor from './RoleDescriptor.vue';
const { t } = useI18n();
</script>
<template>
<VnCard
data-key="Role"
:descriptor="RoleDescriptor"
search-data-key="AccountRolesList"
:searchbar-props="{
url: 'VnRoles',
label: t('role.searchRoles'),
info: t('role.searchInfo'),
searchUrl: 'table',
}"
/>
<VnCard data-key="Role" :descriptor="RoleDescriptor" />
</template>

2
src/pages/Account/Role/Card/RoleDescriptor.vue
View File

@ -43,7 +43,7 @@ const removeRole = async () => {
:filter="filter"
module="Role"
@on-fetch="setData"
data-key="accountData"
data-key="Role"
:title="data.title"
:subtitle="data.subtitle"
:summary="$props.summary"

4
src/pages/Account/Role/Card/RoleSummary.vue
View File

@ -27,10 +27,10 @@ const filter = {
<template>
<CardSummary
ref="summary"
:url="`VnRoles`"
:url="`VnRoles/${entityId}`"
:filter="filter"
@on-fetch="(data) => (role = data)"
data-key="RoleSummary"
data-key="Role"
>
<template #header> {{ role.id }} - {{ role.name }} </template>
<template #body>

120
src/router/modules/account.js
View File

@ -1,4 +1,7 @@
import { RouterView } from 'vue-router';
import accountCard from './account/accountCard';
import roleCard from './account/roleCard';
import getSections from 'src/utils/getSections';
export default {
path: '/account',
@ -22,39 +25,48 @@ export default {
'AccountAcls',
'AccountConnections',
],
card: [
'AccountBasicData',
'AccountInheritedRoles',
'AccountMailForwarding',
'AccountMailAlias',
'AccountPrivileges',
'AccountLog',
],
card: getSections(accountCard.children),
},
children: [
{
path: '',
name: 'AccountMain',
component: () => import('src/components/common/VnSectionMain.vue'),
redirect: { name: 'AccountList' },
redirect: { name: 'AccountIndexMain' },
children: [
{
path: 'list',
name: 'AccountList',
meta: {
title: 'list',
icon: 'view_list',
},
path: '',
name: 'AccountIndexMain',
redirect: { name: 'AccountList' },
component: () => import('src/pages/Account/AccountList.vue'),
children: [
{
name: 'AccountList',
path: 'list',
meta: {
title: 'list',
icon: 'view_list',
},
},
accountCard,
],
},
{
path: 'role-list',
path: 'role',
name: 'AccountRoles',
redirect: { name: 'AccountRoleList' },
meta: {
title: 'roles',
icon: 'group',
},
component: () => import('src/pages/Account/Role/AccountRoles.vue'),
children: [
{
name: 'AccountRoleList',
path: 'list',
},
roleCard,
],
},
{
path: 'alias-list',
@ -120,81 +132,5 @@ export default {
},
],
},
{
name: 'AccountCard',
path: ':id',
component: () => import('src/pages/Account/Card/AccountCard.vue'),
redirect: { name: 'AccountSummary' },
children: [
{
name: 'AccountSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Account/Card/AccountSummary.vue'),
},
{
name: 'AccountBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Account/Card/AccountBasicData.vue'),
},
{
name: 'AccountInheritedRoles',
path: 'inherited-roles',
meta: {
title: 'inheritedRoles',
icon: 'group',
},
component: () =>
import('src/pages/Account/Card/AccountInheritedRoles.vue'),
},
{
name: 'AccountMailForwarding',
path: 'mail-forwarding',
meta: {
title: 'mailForwarding',
icon: 'forward',
},
component: () =>
import('src/pages/Account/Card/AccountMailForwarding.vue'),
},
{
name: 'AccountMailAlias',
path: 'mail-alias',
meta: {
title: 'mailAlias',
icon: 'email',
},
component: () =>
import('src/pages/Account/Card/AccountMailAlias.vue'),
},
{
name: 'AccountPrivileges',
path: 'privileges',
meta: {
title: 'privileges',
icon: 'badge',
},
component: () =>
import('src/pages/Account/Card/AccountPrivileges.vue'),
},
{
name: 'AccountLog',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Account/Card/AccountLog.vue'),
},
],
},
],
};

71
src/router/modules/account/accountCard.js Normal file
View File

@ -0,0 +1,71 @@
export default {
name: 'AccountCard',
path: ':id',
redirect: { name: 'AccountSummary' },
component: () => import('src/pages/Account/Card/AccountCard.vue'),
children: [
{
name: 'AccountSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Account/Card/AccountSummary.vue'),
},
{
name: 'AccountBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Account/Card/AccountBasicData.vue'),
},
{
name: 'AccountInheritedRoles',
path: 'inherited-roles',
meta: {
title: 'inheritedRoles',
icon: 'group',
},
component: () => import('src/pages/Account/Card/AccountInheritedRoles.vue'),
},
{
name: 'AccountMailForwarding',
path: 'mail-forwarding',
meta: {
title: 'mailForwarding',
icon: 'forward',
},
component: () => import('src/pages/Account/Card/AccountMailForwarding.vue'),
},
{
name: 'AccountMailAlias',
path: 'mail-alias',
meta: {
title: 'mailAlias',
icon: 'email',
},
component: () => import('src/pages/Account/Card/AccountMailAlias.vue'),
},
{
name: 'AccountPrivileges',
path: 'privileges',
meta: {
title: 'privileges',
icon: 'badge',
},
component: () => import('src/pages/Account/Card/AccountPrivileges.vue'),
},
{
name: 'AccountLog',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Account/Card/AccountLog.vue'),
},
],
};

54
src/router/modules/account/roleCard.js Normal file
View File

@ -0,0 +1,54 @@
export default {
name: 'RoleCard',
path: ':id',
component: () => import('src/pages/Account/Role/Card/RoleCard.vue'),
redirect: { name: 'RoleSummary' },
children: [
{
name: 'RoleSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Account/Role/Card/RoleSummary.vue'),
},
{
name: 'RoleBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Account/Role/Card/RoleBasicData.vue'),
},
{
name: 'SubRoles',
path: 'sub-roles',
meta: {
title: 'subRoles',
icon: 'group',
},
component: () => import('src/pages/Account/Role/Card/SubRoles.vue'),
},
{
name: 'InheritedRoles',
path: 'inherited-roles',
meta: {
title: 'inheritedRoles',
icon: 'account_tree',
},
component: () => import('src/pages/Account/Role/Card/InheritedRoles.vue'),
},
{
name: 'RoleLog',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Account/Role/Card/RoleLog.vue'),
},
],
};

2
src/router/modules/index.js
View File

@ -21,7 +21,6 @@ import Zone from './zone';
import Account from './account';
import Monitor from './monitor';
import MailAlias from './mailAlias';
import Role from './role';
export default [
Item,
@ -47,5 +46,4 @@ export default [
Account,
MailAlias,
Monitor,
Role,
];

76
src/router/modules/role.js
View File

@ -1,76 +0,0 @@
import { RouterView } from 'vue-router';
export default {
path: 'account/role',
name: 'Role',
meta: {
title: 'role',
icon: 'vn:greuge',
moduleName: 'Role',
},
component: RouterView,
redirect: { name: 'AccountRoles' },
menus: {
main: [],
card: ['RoleBasicData', 'SubRoles', 'InheritedRoles', 'RoleLog'],
},
children: [
{
name: 'RoleCard',
path: ':id',
component: () => import('src/pages/Account/Role/Card/RoleCard.vue'),
redirect: { name: 'RoleSummary' },
children: [
{
name: 'RoleSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () =>
import('src/pages/Account/Role/Card/RoleSummary.vue'),
},
{
name: 'RoleBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () =>
import('src/pages/Account/Role/Card/RoleBasicData.vue'),
},
{
name: 'SubRoles',
path: 'sub-roles',
meta: {
title: 'subRoles',
icon: 'group',
},
component: () => import('src/pages/Account/Role/Card/SubRoles.vue'),
},
{
name: 'InheritedRoles',
path: 'inherited-roles',
meta: {
title: 'inheritedRoles',
icon: 'account_tree',
},
component: () =>
import('src/pages/Account/Role/Card/InheritedRoles.vue'),
},
{
name: 'RoleLog',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Account/Role/Card/RoleLog.vue'),
},
],
},
],
};

2
src/router/routes.js
View File

@ -10,7 +10,6 @@ import wagon from './modules/wagon';
import supplier from './modules/Supplier';
import travel from './modules/travel';
import department from './modules/department';
import role from './modules/role';
import ItemType from './modules/itemType';
import shelving from 'src/router/modules/shelving';
import order from 'src/router/modules/order';
@ -95,7 +94,6 @@ const routes = [
ItemType,
zone,
account,
role,
mailAlias,
{
path: '/:catchAll(.*)*',

8
src/utils/getSections.js Normal file
View File

@ -0,0 +1,8 @@
export default (sections) => {
const names = [];
for (const section of sections) {
if (section.path == 'summary') continue;
names.push(section.name);
}
return names;
};