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

8197-VnCardMain #1044

Merged
alexm merged 31 commits from 8197-VnCardMain into beta 2024-12-24 10:29:04 +00:00
Conversation 2 Commits 31 Files Changed 58 +266 -287
17 changed files with 266 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 907bf3cf3b - Show all commits

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>
alexm marked this conversation as resolved Outdated
jorgep commented 2024-12-17 13:26:51 +00:00
Outdated
Review
Copy Link

Para que quieres una variable que solo se usa en 1 sitio?

Para que quieres una variable que solo se usa en 1 sitio?
alexm commented 2024-12-17 13:51:44 +00:00
Outdated
Review
Copy Link

Antes de poner lo del ref la usaba 2 veces, lo quito

Antes de poner lo del ref la usaba 2 veces, lo quito
<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'] } },
};
alexm marked this conversation as resolved Outdated
jorgep commented 2024-12-18 14:57:16 +00:00
Outdated
Review
Copy Link

quitar, solo se usa 1 vez.

quitar, solo se usa 1 vez.
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">
alexm marked this conversation as resolved Outdated
jorgep commented 2024-12-17 14:30:42 +00:00
Outdated
Review
Copy Link

Lo mismo que AccountAcls

Lo mismo que AccountAcls
<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';
alexm marked this conversation as resolved
jorgep commented 2024-12-18 14:57:26 +00:00
Review
Copy Link

quitar, solo se usa 1 vez.

quitar, solo se usa 1 vez.
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>
alexm marked this conversation as resolved
jorgep commented 2024-12-17 14:35:03 +00:00
Review
Copy Link

Lo mismo que AccountAcls

Lo mismo que AccountAcls
<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"
alexm marked this conversation as resolved
jorgep commented 2024-12-17 14:35:46 +00:00
Review
Copy Link

RoleId

RoleId
alexm commented 2024-12-18 11:17:18 +00:00
Review
Copy Link

No hace falta poner roleId, dado que el dataKey del list es AccountRoleList
Siendo Role ya va guay

No hace falta poner roleId, dado que el dataKey del list es AccountRoleList Siendo Role ya va guay
: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"
alexm marked this conversation as resolved
jorgep commented 2024-12-17 14:36:03 +00:00
Review
Copy Link

RoleId

RoleId
>
<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';
alexm marked this conversation as resolved
jorgep commented 2024-12-17 14:39:21 +00:00
Review
Copy Link

Consultaría a Juan si le parece bien separarlo en varios ficheros. Por mí bien

Consultaría a Juan si le parece bien separarlo en varios ficheros. Por mí bien
alexm commented 2024-12-18 11:17:55 +00:00
Review
Copy Link

Entiendo que lo verán guay sino se hace un monstruo de archivo y de todas maneras como estaba ya estaba separado

Entiendo que lo verán guay sino se hace un monstruo de archivo y de todas maneras como estaba ya estaba separado
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;
};