wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Merge pull request 'refs #7355 fix vnTable' (!506) from 7355-accountMigration into dev 

Reviewed-on: verdnatura/salix-front#506
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Carlos Satorres 2024-08-01 08:48:15 +00:00
parent 0b7c8c41d2 8d8bd095f6
commit f618ed1132
27 changed files with 339 additions and 518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/VnTable/VnTable.vue
View File

@ -124,7 +124,7 @@ const tableModes = [
];
onBeforeMount(() => {
setUserParams(route.query[$props.searchUrl]);
hasParams.value = Object.keys(params.value).length !== 0;
hasParams.value = params.value && Object.keys(params.value).length !== 0;
});
onMounted(() => {
@ -158,7 +158,10 @@ function setUserParams(watchedParams) {
if (!watchedParams) return;
if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
const filter = JSON.parse(watchedParams?.filter);
const filter =
typeof watchedParams?.filter == 'string'
? JSON.parse(watchedParams?.filter)
: watchedParams?.filter;
const where = filter?.where;
const order = filter?.order;
@ -281,6 +284,7 @@ defineExpose({
v-model="params"
:search-url="searchUrl"
:redirect="!!redirect"
@set-user-params="setUserParams"
>
<template #body>
<div

6
src/components/common/VnComponent.vue
View File

@ -30,10 +30,10 @@ function mix(toComponent) {
mixed = {
component: customComponent?.component ?? component,
attrs: {
...toValueAttrs(customComponent?.attrs),
...toValueAttrs(customComponent?.forceAttrs),
...toComponent,
...toValueAttrs(attrs),
...toValueAttrs(customComponent?.attrs),
...toComponent,
...toValueAttrs(customComponent?.forceAttrs),
},
event: { ...customComponent?.event, ...event },
};

14
src/components/ui/VnFilterPanel.vue
View File

@ -57,7 +57,7 @@ const $props = defineProps({
},
});
defineExpose({ search });
defineExpose({ search, sanitizer });
const emit = defineEmits([
'update:modelValue',
'refresh',
@ -65,6 +65,7 @@ const emit = defineEmits([
'search',
'init',
'remove',
'setUserParams',
]);
const arrayData = useArrayData($props.dataKey, {
@ -87,6 +88,7 @@ function setUserParams(watchedParams) {
watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
delete watchedParams.filter;
userParams.value = { ...userParams.value, ...watchedParams };
emit('setUserParams', userParams.value);
}
watch(
@ -190,6 +192,14 @@ function formatValue(value) {
return `"${value}"`;
}
function sanitizer(params) {
for (const [key, value] of Object.entries(params)) {
if (typeof value == 'object')
params[key] = Object.values(value)[0].replaceAll('%', '');
}
return params;
}
</script>
<template>
@ -272,7 +282,7 @@ function formatValue(value) {
<QSeparator />
</QList>
<QList dense class="list q-gutter-y-sm q-mt-sm">
<slot name="body" :params="userParams" :search-fn="search"></slot>
<slot name="body" :params="sanitizer(userParams)" :search-fn="search"></slot>
</QList>
</QForm>
<QInnerLoading

2
src/i18n/locale/en.yml
View File

@ -246,6 +246,8 @@ globals:
mailForwarding: Mail forwarding
mailAlias: Mail alias
privileges: Privileges
ldap: LDAP
samba: Samba
created: Created
worker: Worker
now: Now

2
src/i18n/locale/es.yml
View File

@ -248,6 +248,8 @@ globals:
components: Componentes
pictures: Fotos
packages: Bultos
ldap: LDAP
samba: Samba
created: Fecha creación
worker: Trabajador
now: Ahora

2
src/pages/Account/AccountAccounts.vue
View File

@ -1,11 +1,9 @@
<script setup>
import { useI18n } from 'vue-i18n';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInput from 'src/components/common/VnInput.vue';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';

188
src/pages/Account/AccountAcls.vue
View File

@ -1,19 +1,15 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import FetchData from 'components/FetchData.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import AclFilter from './Acls/AclFilter.vue';
import AclFormView from './Acls/AclFormView.vue';
import { useVnConfirm } from 'composables/useVnConfirm';
import { ref, computed } from 'vue';
import { useStateStore } from 'stores/useStateStore';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import { useQuasar } from 'quasar';
import FetchData from 'components/FetchData.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
defineProps({
id: {
@ -25,10 +21,9 @@ defineProps({
const { notify } = useNotify();
const { t } = useI18n();
const stateStore = useStateStore();
const { openConfirmationModal } = useVnConfirm();
const quasar = useQuasar();
const paginateRef = ref();
const formDialog = ref(false);
const tableRef = ref();
const rolesOptions = ref([]);
const exprBuilder = (param, value) => {
@ -40,21 +35,86 @@ const exprBuilder = (param, value) => {
}
};
const deleteAcl = async (id) => {
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('id'),
isId: true,
field: 'id',
cardVisible: true,
},
{
align: 'left',
name: 'model',
label: t('model'),
field: 'model',
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'principalId',
label: t('principalId'),
field: 'principalId',
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'property',
label: t('property'),
field: 'property',
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'accessType',
label: t('accessType'),
field: 'accessType',
cardVisible: true,
create: true,
},
{
align: 'right',
label: '',
name: 'tableActions',
actions: [
{
title: t('Delete'),
icon: 'delete',
action: deleteAcl,
isPrimary: true,
},
],
},
]);
const deleteAcl = async ({ id }) => {
try {
await new Promise((resolve) => {
quasar
.dialog({
component: VnConfirm,
componentProps: {
title: t('Remove ACL'),
message: t('Do you want to remove this ACL?'),
},
})
.onOk(() => {
resolve(true);
})
.onCancel(() => {
resolve(false);
});
});
await axios.delete(`ACLs/${id}`);
paginateRef.value.fetch();
tableRef.value.reload();
notify('ACL removed', 'positive');
} catch (error) {
console.error('Error deleting Acl: ', error);
}
};
function showFormDialog(data) {
formDialog.value = {
show: true,
formInitialData: { ...data },
};
}
</script>
<template>
@ -64,8 +124,7 @@ function showFormDialog(data) {
@on-fetch="(data) => (rolesOptions = data)"
auto-load
/>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="AccountAcls"
url="ACLs"
@ -73,74 +132,27 @@ function showFormDialog(data) {
:label="t('acls.search')"
:info="t('acls.searchInfo')"
/>
</Teleport>
</template>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<AclFilter data-key="AccountAcls" />
</QScrollArea>
</QDrawer>
<QPage class="flex justify-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
ref="paginateRef"
<VnTable
ref="tableRef"
data-key="AccountAcls"
url="ACLs"
:expr-builder="exprBuilder"
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:id="row.id"
:key="row.id"
:title="`${row.model}.${row.property}`"
@click="showFormDialog(row)"
>
<template #list-items>
<VnLv :label="t('acls.role')" :value="row.principalId" />
<VnLv :label="t('acls.accessType')" :value="row.accessType" />
<VnLv
:label="t('acls.permissions')"
:value="row.permission"
:url="`ACLs`"
:create="{
urlCreate: 'ACLs',
title: 'Create ACL',
onDataSaved: () => tableRef.reload(),
formInitialData: {},
}"
order="id DESC"
:columns="columns"
default-mode="table"
auto-load
:right-search="true"
:is-editable="true"
:use-model="true"
/>
</template>
<template #actions>
<QBtn
:label="t('globals.delete')"
@click.stop="
openConfirmationModal(
t('ACL will be removed'),
t('Are you sure you want to continue?'),
() => deleteAcl(row.id)
)
"
color="primary"
style="margin-top: 15px"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QDialog
v-model="formDialog.show"
transition-show="scale"
transition-hide="scale"
>
<AclFormView
:form-initial-data="formDialog.formInitialData"
@on-data-change="paginateRef.fetch()"
:roles-options="rolesOptions"
/>
</QDialog>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn fab icon="add" color="primary" @click="showFormDialog()">
<QTooltip class="text-no-wrap">{{ t('New ACL') }}</QTooltip>
</QBtn>
</QPageSticky>
</QPage>
</template>
<i18n>
es:
@ -148,4 +160,6 @@ es:
ACL removed: ACL eliminado
ACL will be removed: El ACL será eliminado
Are you sure you want to continue?: ¿Seguro que quieres continuar?
Remove ACL: Eliminar Acl
Do you want to remove this ACL?: ¿Quieres eliminar este ACL?
</i18n>

117
src/pages/Account/AccountAliasList.vue
View File

@ -1,30 +1,13 @@
<script setup>
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { ref, computed } from 'vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import AliasSummary from './Alias/Card/AliasSummary.vue';
import AliasCreateForm from './Alias/AliasCreateForm.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useStateStore } from 'stores/useStateStore';
defineProps({
id: {
type: Number,
default: 0,
},
});
const tableRef = ref();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const router = useRouter();
const stateStore = useStateStore();
const aliasCreateDialogRef = ref(null);
const exprBuilder = (param, value) => {
switch (param) {
@ -34,10 +17,32 @@ const exprBuilder = (param, value) => {
: { alias: { like: `%${value}%` } };
}
};
const navigate = (id) => router.push({ name: 'AliasSummary', params: { id } });
const openCreateModal = () => aliasCreateDialogRef.value.show();
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('id'),
isId: true,
field: 'id',
cardVisible: true,
},
{
align: 'left',
name: 'alias',
label: t('alias'),
field: 'alias',
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'description',
label: t('description'),
field: 'description',
cardVisible: true,
create: true,
},
]);
</script>
<template>
@ -52,54 +57,22 @@ const openCreateModal = () => aliasCreateDialogRef.value.show();
/>
</Teleport>
</template>
<QPage class="flex justify-center q-pa-md">
<div class="vn-card-list">
<VnPaginate
ref="paginateRef"
<VnTable
ref="tableRef"
data-key="AccountAliasList"
url="MailAliases"
:expr-builder="exprBuilder"
>
<template #body="{ rows }">
<CardList
v-for="row of rows"
:id="row.id"
:key="row.id"
:title="row.alias"
@click="navigate(row.id)"
>
<template #list-items>
<VnLv :label="t('mailAlias.alias')" :value="row.alias">
</VnLv>
<VnLv
:label="t('mailAlias.description')"
:value="row.description"
>
</VnLv>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, AliasSummary)"
color="primary"
style="margin-top: 15px"
:url="`MailAliases`"
:create="{
urlCreate: 'MailAliases',
title: 'Create MailAlias',
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {},
}"
order="id DESC"
:columns="columns"
default-mode="table"
auto-load
redirect="account/alias"
:is-editable="true"
:use-model="true"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QDialog
ref="aliasCreateDialogRef"
transition-show="scale"
transition-hide="scale"
>
<AliasCreateForm />
</QDialog>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn fab icon="add" color="primary" @click="openCreateModal()">
<QTooltip class="text-no-wrap">{{ t('mailAlias.newAlias') }}</QTooltip>
</QBtn>
</QPageSticky>
</QPage>
</template>

2
src/pages/Account/AccountConnections.vue
View File

@ -2,11 +2,9 @@
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import CardList from 'src/components/ui/CardList.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { toDateTimeFormat } from 'src/filters/date.js';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';

2
src/pages/Account/AccountCreate.vue
View File

@ -2,7 +2,6 @@
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
@ -15,7 +14,6 @@ const newAccountForm = reactive({
active: true,
});
const rolesOptions = ref([]);
const redirectToAccountBasicData = (_, { id }) => {
router.push({ name: 'AccountBasicData', params: { id } });
};

1
src/pages/Account/AccountFilter.vue
View File

@ -1,7 +1,6 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';

9
src/pages/Account/AccountLdap.vue
View File

@ -1,12 +1,10 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useArrayData } from 'src/composables/useArrayData';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
@ -15,7 +13,6 @@ const { t } = useI18n();
const { notify } = useNotify();
const arrayData = useArrayData('AccountLdap');
const URL_UPDATE = `LdapConfigs/${1}`;
const URL_CREATE = `LdapConfigs`;
const DEFAULT_DATA = {
@ -27,11 +24,9 @@ const DEFAULT_DATA = {
server: null,
userDn: null,
};
const initialData = ref({
...DEFAULT_DATA,
});
const hasData = computed({
get: () => initialData.value.hasData,
set: (val) => {
@ -40,12 +35,10 @@ const hasData = computed({
else formCustomFn.value = null;
},
});
const initialDataLoaded = ref(false);
const formUrlCreate = ref(null);
const formUrlUpdate = ref(null);
const formCustomFn = ref(null);
const onTestConection = async () => {
try {
await axios.get(`LdapConfigs/test`);
@ -54,7 +47,6 @@ const onTestConection = async () => {
console.error('Error testing connection', error);
}
};
const getInitialLdapConfig = async () => {
try {
initialDataLoaded.value = false;
@ -79,7 +71,6 @@ const getInitialLdapConfig = async () => {
initialDataLoaded.value = true;
}
};
const deleteMailForward = async () => {
try {
await axios.delete(URL_UPDATE);

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

@ -1,33 +1,66 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { computed, ref } from 'vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { ref, computed } from 'vue';
import VnTable from 'components/VnTable/VnTable.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 AccountFilter from './AccountFilter.vue';
import AccountCreate from './AccountCreate.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useStateStore } from 'stores/useStateStore';
import { useRole } from 'src/composables/useRole';
import { QDialog } from 'quasar';
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const accountCreateDialogRef = ref(null);
const showNewUserBtn = computed(() => useRole().hasAny(['itManagement']));
const filter = {
fields: ['id', 'nickname', 'name', 'role'],
include: { relation: 'role', scope: { fields: ['id', 'name'] } },
};
const tableRef = ref();
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) => {
switch (param) {
case 'search':
@ -46,99 +79,25 @@ const exprBuilder = (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>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="AccountList"
url="VnUsers/preview"
:expr-builder="exprBuilder"
:label="t('account.search')"
data-key="AccountUsers"
:expr-builder="exprBuilder"
:info="t('account.searchInfo')"
/>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
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"
<VnTable
ref="tableRef"
data-key="AccountUsers"
url="VnUsers/preview"
order="id DESC"
:columns="columns"
default-mode="table"
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"
redirect="account"
:use-model="true"
/>
</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>

5
src/pages/Account/AccountSamba.vue
View File

@ -1,23 +1,18 @@
<script setup>
import { ref, onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import { useArrayData } from 'src/composables/useArrayData';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';
const { t } = useI18n();
const { notify } = useNotify();
const arrayData = useArrayData('AccountSamba');
const formModel = ref(null);
const URL_UPDATE = `SambaConfigs/${1}`;
const URL_CREATE = `SambaConfigs`;

1
src/pages/Account/Alias/Card/AliasSummary.vue
View File

@ -28,6 +28,7 @@ const entityId = computed(() => $props.id || route.params.id);
ref="summary"
:url="`MailAliases/${entityId}`"
@on-fetch="(data) => (alias = data)"
data-key="MailAliasesSummary"
>
<template #header> {{ alias.id }} - {{ alias.alias }} </template>
<template #body>

74
src/pages/Account/Card/AccountDescriptorMenu.vue
View File

@ -8,7 +8,7 @@ import { useRoute } from 'vue-router';
import { useArrayData } from 'src/composables/useArrayData';
import CustomerChangePassword from 'src/pages/Customer/components/CustomerChangePassword.vue';
import VnConfirm from 'src/components/ui/VnConfirm.vue';
import useNotify from 'src/composables/useNotify.js';
const quasar = useQuasar();
const $props = defineProps({
hasAccount: {
@ -21,7 +21,7 @@ const { t } = useI18n();
const { hasAccount } = toRefs($props);
const { openConfirmationModal } = useVnConfirm();
const route = useRoute();
const { notify } = useNotify();
const account = computed(() => useArrayData('AccountId').store.data[0]);
account.value.hasAccount = hasAccount.value;
const entityId = computed(() => +route.params.id);
@ -71,55 +71,17 @@ async function sync() {
type: 'positive',
});
}
const removeAccount = async () => {
try {
await axios.delete(`VnUsers/${account.value.id}`);
notify(t('Account removed'), 'positive');
} catch (error) {
console.error('Error deleting user', error);
}
};
</script>
<template>
<VnConfirm
v-model="showSyncDialog"
:message="t('account.card.actions.sync.message')"
:title="t('account.card.actions.sync.title')"
:promise="sync"
>
<template #customHTML>
{{ shouldSyncPassword }}
<QCheckbox
:label="t('account.card.actions.sync.checkbox')"
v-model="shouldSyncPassword"
class="full-width"
clearable
clear-icon="close"
>
<QIcon style="padding-left: 10px" color="primary" name="info" size="sm">
<QTooltip>{{ t('account.card.actions.sync.tooltip') }}</QTooltip>
</QIcon></QCheckbox
>
<QInput
v-if="shouldSyncPassword"
:label="t('login.password')"
v-model="syncPassword"
class="full-width"
clearable
clear-icon="close"
type="password"
/>
</template>
</VnConfirm>
<QItem v-ripple clickable @click="setPassword">
<QItemSection>{{ t('account.card.actions.setPassword') }}</QItemSection>
</QItem>
<QItem
v-if="!account.hasAccount"
v-ripple
clickable
@click="
openConfirmationModal(
t('account.card.actions.enableAccount.title'),
t('account.card.actions.enableAccount.subtitle'),
() => updateStatusAccount(true)
)
"
>
<QItemSection>{{ t('account.card.actions.enableAccount.name') }}</QItemSection>
</QItem>
<QItem
v-if="account.hasAccount"
v-ripple
@ -168,20 +130,10 @@ async function sync() {
</QItem>
<QSeparator />
<QItem
@click="
openConfirmationModal(
t('account.card.actions.delete.title'),
t('account.card.actions.delete.subTitle'),
removeAccount
)
"
v-ripple
clickable
>
<!-- <QItem @click="removeAccount(id)" v-ripple clickable>
<QItemSection avatar>
<QIcon name="delete" />
</QItemSection>
<QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
</QItem>
</QItem> -->
</template>

7
src/pages/Account/InheritedRoles.vue
View File

@ -1,23 +1,17 @@
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { computed, ref, watch } from 'vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import { useArrayData } from 'composables/useArrayData';
const props = defineProps({
dataKey: { type: String, required: true },
});
const route = useRoute();
const router = useRouter();
const paginateRef = ref(null);
const arrayData = useArrayData(props.dataKey);
const store = arrayData.store;
const data = computed(() => {
const dataCopy = store.data;
return dataCopy.sort((a, b) => a.role?.name.localeCompare(b.role?.name));
@ -37,7 +31,6 @@ const filter = computed(() => ({
}));
const urlPath = 'RoleMappings';
const columns = computed(() => [
{
name: 'name',

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

@ -1,26 +1,48 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import CardList from 'src/components/ui/CardList.vue';
import RoleSummary from './Card/RoleSummary.vue';
import RoleForm from './Card/RoleForm.vue';
import { computed, ref } from 'vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { useRoute } from 'vue-router';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import AccountRolesFilter from './AccountRolesFilter.vue';
import { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
const route = useRoute();
const stateStore = useStateStore();
const router = useRouter();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const roleCreateDialogRef = ref(null);
const $props = defineProps({
id: {
type: Number,
default: 0,
},
});
const tableRef = ref();
const entityId = computed(() => $props.id || route.params.id);
const columns = computed(() => [
{
align: 'left',
name: 'id',
label: t('id'),
isId: true,
columnFilter: {
inWhere: true,
},
cardVisible: true,
},
{
align: 'left',
name: 'name',
label: t('name'),
cardVisible: true,
create: true,
},
{
align: 'left',
name: 'description',
label: t('description'),
cardVisible: true,
create: true,
},
]);
const exprBuilder = (param, value) => {
switch (param) {
case 'search':
@ -37,95 +59,36 @@ const exprBuilder = (param, value) => {
return { [param]: { like: `%${value}%` } };
}
};
const openCreateModal = () => roleCreateDialogRef.value.show();
const getApiUrl = () => new URL(window.location).origin;
const navigate = (event, id) => {
if (event.ctrlKey || event.metaKey)
return window.open(`${getApiUrl()}/#/account/role/${id}/summary`);
router.push({ name: 'RoleSummary', params: { id } });
};
</script>
<template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
data-key="RolesList"
url="VnRoles"
data-key="Roles"
:expr-builder="exprBuilder"
:label="t('role.searchRoles')"
:info="t('role.searchInfo')"
/>
</Teleport>
<Teleport to="#actions-append">
<div class="row q-gutter-x-sm">
<QBtn
flat
@click="stateStore.toggleRightDrawer()"
round
dense
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">
<AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
</QScrollArea>
</QDrawer>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<VnPaginate data-key="RolesList" url="VnRoles">
<template #body="{ rows }">
<CardList
:id="row.id"
:key="row.id"
:title="row.name"
@click="navigate($event, row.id)"
v-for="row of rows"
>
<template #list-items>
<div style="flex-direction: column; width: 100%">
<VnLv :label="t('role.card.name')" :value="row.name">
</VnLv>
<VnLv
:label="t('role.card.description')"
:value="row.description"
>
</VnLv>
</div>
</template>
<template #actions>
<QBtn
:label="t('components.smartCard.openSummary')"
@click.stop="viewSummary(row.id, RoleSummary)"
color="primary"
style="margin-top: 15px"
<VnTable
ref="tableRef"
data-key="Roles"
:url="`VnRoles`"
:create="{
urlCreate: 'VnRoles',
title: t('Create rol'),
onDataSaved: ({ id }) => tableRef.redirect(id),
formInitialData: {
editorFk: entityId,
},
}"
order="id ASC"
:columns="columns"
default-mode="table"
auto-load
redirect="account/role"
:is-editable="true"
/>
</template>
</CardList>
</template>
</VnPaginate>
</div>
<QDialog
ref="roleCreateDialogRef"
transition-show="scale"
transition-hide="scale"
>
<RoleForm />
</QDialog>
<QPageSticky :offset="[20, 20]">
<QBtn fab icon="add" color="primary" @click="openCreateModal()" />
<QTooltip>
{{ t('role.newRole') }}
</QTooltip>
</QPageSticky>
</QPage>
</template>

1
src/pages/Account/Role/AccountRolesFilter.vue
View File

@ -1,6 +1,5 @@
<script setup>
import { useI18n } from 'vue-i18n';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnInput from 'src/components/common/VnInput.vue';

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

@ -2,7 +2,6 @@
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnCard from 'components/common/VnCard.vue';
import RoleDescriptor from './RoleDescriptor.vue';

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

@ -1,12 +1,10 @@
<script setup>
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';
import { useQuasar } from 'quasar';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
const $props = defineProps({
@ -23,9 +21,6 @@ const $props = defineProps({
const route = useRoute();
const quasar = useQuasar();
const router = useRouter();
const { notify } = useNotify();
const { t } = useI18n();
const entityId = computed(() => {
@ -36,29 +31,13 @@ const setData = (entity) => (data.value = useCardDescription(entity.name, entity
const filter = {
where: { id: entityId },
};
const removeRole = () => {
quasar
.dialog({
title: 'Are you sure you want to delete it?',
message: 'Delete department',
ok: {
push: true,
color: 'primary',
},
cancel: true,
})
.onOk(async () => {
const removeRole = async () => {
try {
await axios.post(
`/Departments/${entityId.value}/removeChild`,
entityId.value
);
router.push({ name: 'WorkerDepartment' });
notify('department.departmentRemoved', 'positive');
} catch (err) {
console.error('Error removing department');
await axios.delete(`VnRoles/${entityId.value}`);
notify(t('Role removed'), 'positive');
} catch (error) {
console.error('Error deleting role', error);
}
});
};
</script>

1
src/pages/Account/Role/Card/RoleForm.vue
View File

@ -1,7 +1,6 @@
<script setup>
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import FormModelPopup from 'components/FormModelPopup.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';

3
src/pages/Account/Role/Card/SubRoleCreateForm.vue
View File

@ -2,17 +2,14 @@
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormPopup from 'components/FormPopup.vue';
const emit = defineEmits(['onSubmitCreateSubrole']);
const { t } = useI18n();
const route = useRoute();
const subRoleFormData = reactive({
inheritsFrom: null,
role: route.params.id,

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

@ -2,10 +2,8 @@
import { useRoute, useRouter } from 'vue-router';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import SubRoleCreateForm from './SubRoleCreateForm.vue';
import { useVnConfirm } from 'composables/useVnConfirm';
import { useArrayData } from 'composables/useArrayData';
import useNotify from 'src/composables/useNotify.js';
@ -16,10 +14,8 @@ const route = useRoute();
const router = useRouter();
const { openConfirmationModal } = useVnConfirm();
const { notify } = useNotify();
const paginateRef = ref(null);
const createSubRoleDialogRef = ref(null);
const arrayData = useArrayData('SubRoles');
const store = arrayData.store;

2
src/pages/Account/locale/en.yml
View File

@ -68,7 +68,7 @@ account:
delete:
name: Delete
title: The account will be deleted
subtitle: Are you sure you want to continue?
subTitle: Are you sure you want to continue?
success: ''
search: Search user
searchInfo: You can search by id, name or nickname

2
src/pages/Account/locale/es.yml
View File

@ -67,7 +67,7 @@ account:
delete:
name: Eliminar
title: El usuario será eliminado
subtitle: ¿Seguro que quieres continuar?
subTitle: ¿Seguro que quieres continuar?
success: ''
search: Buscar usuario
searchInfo: Puedes buscar por id, nombre o usuario

2
src/pages/Travel/TravelList.vue
View File

@ -9,7 +9,7 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { computed } from 'vue';
import TravelSummary from './Card/TravelSummary.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import { dashIfEmpty, toDate } from 'src/filters';
import { toDate } from 'src/filters';
const { viewSummary } = useSummaryDialog();
const router = useRouter();
const { t } = useI18n();