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

Merge branch 'dev' into 7717_fixOrderCatalog

This commit is contained in:
Jon Elias 2024-08-02 04:50:39 +00:00
parent b9a0f926ce 545f7c8039
commit 8a4f723732
54 changed files with 660 additions and 815 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/boot/axios.js
View File

@ -43,6 +43,15 @@ const onResponseError = (error) => {
}
switch (response?.status) {
case 422:
if (error.name == 'ValidationError')
message +=
' "' +
responseError.details.context +
'.' +
Object.keys(responseError.details.codes).join(',') +
'"';
break;
case 500:
message = 'errors.statusInternalServerError';
break;

20
src/components/CreateNewCityForm.vue
View File

@ -4,8 +4,8 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectProvince from 'components/VnSelectProvince.vue';
import VnInput from 'components/common/VnInput.vue';
import FormModelPopup from './FormModelPopup.vue';
const emit = defineEmits(['onDataSaved']);
@ -19,8 +19,8 @@ const cityFormData = reactive({
const provincesOptions = ref([]);
const onDataSaved = (dataSaved) => {
emit('onDataSaved', dataSaved);
const onDataSaved = (...args) => {
emit('onDataSaved', ...args);
};
</script>
@ -36,7 +36,7 @@ const onDataSaved = (dataSaved) => {
:form-initial-data="cityFormData"
url-create="towns"
model="city"
@on-data-saved="onDataSaved($event)"
@on-data-saved="onDataSaved"
>
<template #form-inputs="{ data, validate }">
<VnRow>
@ -45,15 +45,7 @@ const onDataSaved = (dataSaved) => {
v-model="data.name"
:rules="validate('city.name')"
/>
<VnSelect
:label="t('Province')"
:options="provincesOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk"
:rules="validate('city.provinceFk')"
/>
<VnSelectProvince v-model="data.provinceFk" />
</VnRow>
</template>
</FormModelPopup>

104
src/components/CreateNewPostcodeForm.vue
View File

@ -5,9 +5,9 @@ import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectProvince from 'src/components/VnSelectProvince.vue';
import VnInput from 'src/components/common/VnInput.vue';
import CreateNewCityForm from './CreateNewCityForm.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FormModelPopup from './FormModelPopup.vue';
@ -22,20 +22,17 @@ const postcodeFormData = reactive({
townFk: null,
});
const townsFetchDataRef = ref(null);
const provincesFetchDataRef = ref(null);
const countriesOptions = ref([]);
const provincesOptions = ref([]);
const townsLocationOptions = ref([]);
const town = ref({});
const onDataSaved = (formData) => {
function onDataSaved(formData) {
const newPostcode = {
...formData,
};
const townObject = townsLocationOptions.value.find(
({ id }) => id === formData.townFk
);
newPostcode.town = townObject?.name;
newPostcode.town = town.value.name;
newPostcode.townFk = town.value.id;
const provinceObject = provincesOptions.value.find(
({ id }) => id === formData.provinceFk
);
@ -43,39 +40,40 @@ const onDataSaved = (formData) => {
const countryObject = countriesOptions.value.find(
({ id }) => id === formData.countryFk
);
newPostcode.country = countryObject?.country;
newPostcode.country = countryObject?.name;
emit('onDataSaved', newPostcode);
};
}
const onCityCreated = async ({ name, provinceFk }, formData) => {
await townsFetchDataRef.value.fetch();
formData.townFk = townsLocationOptions.value.find((town) => town.name === name).id;
formData.provinceFk = provinceFk;
formData.countryFk = provincesOptions.value.find(
(province) => province.id === provinceFk
).countryFk;
};
async function onCityCreated(newTown, formData) {
newTown.province = provincesOptions.value.find(
(province) => province.id === newTown.provinceFk
);
formData.townFk = newTown;
setTown(newTown, formData);
}
const onProvinceCreated = async ({ name }, formData) => {
function setTown(newTown, data) {
if (!newTown) return;
town.value = newTown;
data.provinceFk = newTown.provinceFk;
data.countryFk = newTown.province.countryFk;
}
async function setProvince(id, data) {
await provincesFetchDataRef.value.fetch();
formData.provinceFk = provincesOptions.value.find(
(province) => province.name === name
).id;
};
const newProvince = provincesOptions.value.find((province) => province.id == id);
if (!newProvince) return;
data.countryFk = newProvince.countryFk;
}
</script>
<template>
<FetchData
ref="townsFetchDataRef"
@on-fetch="(data) => (townsLocationOptions = data)"
auto-load
url="Towns/location"
/>
<FetchData
ref="provincesFetchDataRef"
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
url="Provinces/location"
/>
<FetchData
@on-fetch="(data) => (countriesOptions = data)"
@ -88,6 +86,7 @@ const onProvinceCreated = async ({ name }, formData) => {
:title="t('New postcode')"
:subtitle="t('Please, ensure you put the correct data!')"
:form-initial-data="postcodeFormData"
:mapper="(data) => (data.townFk = data.townFk.id) && data"
@on-data-saved="onDataSaved"
>
<template #form-inputs="{ data, validate }">
@ -99,38 +98,43 @@ const onProvinceCreated = async ({ name }, formData) => {
/>
<VnSelectDialog
:label="t('City')"
:options="townsLocationOptions"
url="Towns/location"
@update:model-value="(value) => setTown(value, data)"
v-model="data.townFk"
hide-selected
option-label="name"
option-value="id"
:rules="validate('postcode.city')"
:roles-allowed-to-create="['deliveryAssistant']"
:emit-value="false"
clearable
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.province.name }},
{{ opt.province.country.name }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
<template #form>
<CreateNewCityForm @on-data-saved="onCityCreated($event, data)" />
<CreateNewCityForm
@on-data-saved="
(_, requestResponse) =>
onCityCreated(requestResponse, data)
"
/>
</template>
</VnSelectDialog>
</VnRow>
<VnRow class="row q-gutter-md q-mb-xl">
<VnSelectDialog
:label="t('Province')"
:options="provincesOptions"
hide-selected
option-label="name"
option-value="id"
<VnRow>
<VnSelectProvince
@update:model-value="(value) => setProvince(value, data)"
v-model="data.provinceFk"
:rules="validate('postcode.provinceFk')"
:roles-allowed-to-create="['deliveryAssistant']"
>
<template #form>
<CreateNewProvinceForm
@on-data-saved="onProvinceCreated($event, data)"
/>
</template> </VnSelectDialog
></VnRow>
<VnRow class="row q-gutter-md q-mb-xl"
><VnSelect
<VnSelect
:label="t('Country')"
:options="countriesOptions"
hide-selected

22
src/components/CreateNewProvinceForm.vue
View File

@ -19,8 +19,11 @@ const provinceFormData = reactive({
const autonomiesOptions = ref([]);
const onDataSaved = (dataSaved) => {
emit('onDataSaved', dataSaved);
const onDataSaved = (dataSaved, requestResponse) => {
requestResponse.autonomy = autonomiesOptions.value.find(
(autonomy) => autonomy.id == requestResponse.autonomyFk
);
emit('onDataSaved', dataSaved, requestResponse);
};
</script>
@ -28,7 +31,7 @@ const onDataSaved = (dataSaved) => {
<FetchData
@on-fetch="(data) => (autonomiesOptions = data)"
auto-load
url="Autonomies"
url="Autonomies/location"
/>
<FormModelPopup
:title="t('New province')"
@ -36,7 +39,7 @@ const onDataSaved = (dataSaved) => {
url-create="provinces"
model="province"
:form-initial-data="provinceFormData"
@on-data-saved="onDataSaved($event)"
@on-data-saved="onDataSaved"
>
<template #form-inputs="{ data, validate }">
<VnRow>
@ -53,7 +56,16 @@ const onDataSaved = (dataSaved) => {
option-value="id"
v-model="data.autonomyFk"
:rules="validate('province.autonomyFk')"
/>
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption> {{ opt.country.name }} </QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</VnRow>
</template>
</FormModelPopup>

9
src/components/FormModel.vue
View File

@ -159,8 +159,8 @@ onBeforeRouteLeave((to, from, next) => {
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('Unsaved changes will be lost'),
message: t('Are you sure exit without saving?'),
title: t('globals.unsavedPopup.title'),
message: t('globals.unsavedPopup.subtitle'),
promise: () => next(),
},
});
@ -356,8 +356,3 @@ defineExpose({
padding: 32px;
}
</style>
<i18n>
es:
Unsaved changes will be lost: Los cambios que no haya guardado se perderán
Are you sure exit without saving?: ¿Seguro que quiere salir sin guardar?
</i18n>

59
src/components/VnSelectProvince.vue Normal file
View File

@ -0,0 +1,59 @@
<script setup>
import { ref, watch } from 'vue';
import { useValidator } from 'src/composables/useValidator';
import { useI18n } from 'vue-i18n';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
import CreateNewProvinceForm from './CreateNewProvinceForm.vue';
const emit = defineEmits(['onProvinceCreated']);
const provinceFk = defineModel({ type: Number });
watch(provinceFk, async () => await provincesFetchDataRef.value.fetch());
const { validate } = useValidator();
const { t } = useI18n();
const provincesOptions = ref();
const provincesFetchDataRef = ref();
async function onProvinceCreated(_, data) {
await provincesFetchDataRef.value.fetch();
provinceFk.value = data.id;
emit('onProvinceCreated', data);
}
</script>
<template>
<FetchData
ref="provincesFetchDataRef"
:filter="{ include: { relation: 'country' } }"
@on-fetch="(data) => (provincesOptions = data)"
auto-load
url="Provinces"
/>
<VnSelectDialog
:label="t('Province')"
:options="provincesOptions"
hide-selected
v-model="provinceFk"
:rules="validate && validate('postcode.provinceFk')"
:roles-allowed-to-create="['deliveryAssistant']"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption> {{ opt.country.name }} </QItemLabel>
</QItemSection>
</QItem>
</template>
<template #form>
<CreateNewProvinceForm @on-data-saved="onProvinceCreated" />
</template>
</VnSelectDialog>
</template>
<i18n>
es:
Province: Provincia
</i18n>

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 },
};

106
src/components/common/VnLocation.vue
View File

@ -1,123 +1,33 @@
<script setup>
import { ref, toRefs, computed, watch, onMounted } from 'vue';
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import FetchData from 'components/FetchData.vue';
const emit = defineEmits(['update:modelValue', 'update:options']);
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const postcodesOptions = ref([]);
const postcodesRef = ref(null);
const $props = defineProps({
modelValue: {
type: [String, Number, Object],
default: null,
},
options: {
type: Array,
default: () => [],
},
optionLabel: {
type: String,
default: '',
},
optionValue: {
type: String,
default: '',
},
filterOptions: {
type: Array,
default: () => [],
},
isClearable: {
type: Boolean,
default: true,
},
defaultFilter: {
type: Boolean,
default: true,
},
});
const { options } = toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit(
'update:modelValue',
postcodesOptions.value.find((p) => p.code === value)
);
},
});
onMounted(() => {
locationFilter($props.modelValue);
});
function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
setOptions(options.value);
watch(options, (newValue) => {
setOptions(newValue);
});
const value = defineModel({ type: [String, Number, Object] });
function showLabel(data) {
return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
}
function locationFilter(search = '') {
if (
search &&
(search.includes('undefined') || search.startsWith(`${$props.modelValue} - `))
)
return;
let where = { search };
postcodesRef.value.fetch({ filter: { where }, limit: 30 });
}
function handleFetch(data) {
postcodesOptions.value = data;
}
function onDataSaved(newPostcode) {
postcodesOptions.value.push(newPostcode);
value.value = newPostcode.code;
}
</script>
<template>
<FetchData
ref="postcodesRef"
url="Postcodes/filter"
@on-fetch="(data) => handleFetch(data)"
/>
<VnSelectDialog
v-if="postcodesRef"
:option-label="(opt) => showLabel(opt) ?? 'code'"
:option-value="(opt) => opt.code"
v-model="value"
:options="postcodesOptions"
option-value="code"
option-filter-value="search"
:option-label="(opt) => showLabel(opt)"
url="Postcodes/filter"
:use-like="false"
:label="t('Location')"
:placeholder="t('search_by_postalcode')"
@input-value="locationFilter"
:default-filter="false"
:input-debounce="300"
:class="{ required: $attrs.required }"
v-bind="$attrs"
clearable
:emit-value="false"
>
<template #form>
<CreateNewPostcode
@on-data-saved="onDataSaved"
/>
<CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
</template>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">

33
src/components/common/VnSelect.vue
View File

@ -25,6 +25,10 @@ const $props = defineProps({
type: String,
default: null,
},
optionFilterValue: {
type: String,
default: null,
},
url: {
type: String,
default: null,
@ -70,7 +74,8 @@ const $props = defineProps({
const { t } = useI18n();
const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
const { optionLabel, optionValue, optionFilter, optionFilterValue, options, modelValue } =
toRefs($props);
const myOptions = ref([]);
const myOptionsOriginal = ref([]);
const vnSelectRef = ref();
@ -82,6 +87,7 @@ const value = computed({
return $props.modelValue;
},
set(value) {
setOptions(myOptionsOriginal.value);
emit('update:modelValue', value);
},
});
@ -137,16 +143,19 @@ async function fetchFilter(val) {
if (!$props.url || !dataRef.value) return;
const { fields, sortBy, limit } = $props;
let key = optionFilter.value ?? optionLabel.value;
if (new RegExp(/\d/g).test(val)) key = optionValue.value;
const key =
optionFilterValue.value ??
(new RegExp(/\d/g).test(val)
? optionValue.value
: optionFilter.value ?? optionLabel.value);
const defaultWhere = $props.useLike
? { [key]: { like: `%${val}%` } }
: { [key]: val };
const where = { ...(val ? defaultWhere : {}), ...$props.where };
const fetchOptions = { where, order: sortBy, limit };
const fetchOptions = { where, limit };
if (fields) fetchOptions.fields = fields;
if (sortBy) fetchOptions.order = sortBy;
return dataRef.value.fetch(fetchOptions);
}
@ -177,6 +186,10 @@ async function filterHandler(val, update) {
}
);
}
function nullishToTrue(value) {
return value ?? true;
}
</script>
<template>
@ -195,12 +208,12 @@ async function filterHandler(val, update) {
:option-label="optionLabel"
:option-value="optionValue"
v-bind="$attrs"
emit-value
map-options
use-input
@filter="filterHandler"
:hide-selected="$attrs['hide-selected'] ?? true"
:fill-input="$attrs['fill-input'] ?? true"
:emit-value="nullishToTrue($attrs['emit-value'])"
:map-options="nullishToTrue($attrs['map-options'])"
:use-input="nullishToTrue($attrs['use-input'])"
:hide-selected="nullishToTrue($attrs['hide-selected'])"
:fill-input="nullishToTrue($attrs['fill-input'])"
ref="vnSelectRef"
lazy-rules
:class="{ required: $attrs.required }"

28
src/components/common/VnSelectDialog.vue
View File

@ -1,21 +1,12 @@
<script setup>
import { ref, computed } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import { useRole } from 'src/composables/useRole';
import VnSelect from 'src/components/common/VnSelect.vue';
const emit = defineEmits(['update:modelValue']);
const value = defineModel({ type: [String, Number, Object] });
const $props = defineProps({
modelValue: {
type: [String, Number, Object],
default: null,
},
options: {
type: Array,
default: () => [],
},
rolesAllowedToCreate: {
type: Array,
default: () => ['developer'],
@ -33,15 +24,6 @@ const $props = defineProps({
const role = useRole();
const showForm = ref(false);
const value = computed({
get() {
return $props.modelValue;
},
set(value) {
emit('update:modelValue', value);
},
});
const isAllowedToCreate = computed(() => {
return role.hasAny($props.rolesAllowedToCreate);
});
@ -52,7 +34,11 @@ const toggleForm = () => {
</script>
<template>
<VnSelect v-model="value" :options="options" v-bind="$attrs">
<VnSelect
v-model="value"
v-bind="$attrs"
@update:model-value="(...args) => emit('update:modelValue', ...args)"
>
<template v-if="isAllowedToCreate" #append>
<QIcon
@click.stop.prevent="toggleForm()"

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(
@ -194,6 +196,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>
@ -276,7 +286,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

29
src/components/ui/VnNotes.vue
View File

@ -1,13 +1,18 @@
<script setup>
import VnAvatar from 'src/components/ui/VnAvatar.vue';
import { toDateHourMin } from 'src/filters';
import { ref } from 'vue';
import axios from 'axios';
import { ref } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnPaginate from './VnPaginate.vue';
import VnUserLink from '../ui/VnUserLink.vue';
import { useQuasar } from 'quasar';
import { toDateHourMin } from 'src/filters';
import { useState } from 'src/composables/useState';
import VnPaginate from 'components/ui/VnPaginate.vue';
import VnUserLink from 'components/ui/VnUserLink.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import VnAvatar from 'components/ui/VnAvatar.vue';
const $props = defineProps({
url: { type: String, default: null },
filter: { type: Object, default: () => {} },
@ -17,6 +22,7 @@ const $props = defineProps({
const { t } = useI18n();
const state = useState();
const quasar = useQuasar();
const currentUser = ref(state.getUser());
const newNote = ref('');
const vnPaginateRef = ref();
@ -33,6 +39,19 @@ async function insert() {
await vnPaginateRef.value.fetch();
newNote.value = '';
}
onBeforeRouteLeave((to, from, next) => {
if (newNote.value)
quasar.dialog({
component: VnConfirm,
componentProps: {
title: t('globals.unsavedPopup.title'),
message: t('globals.unsavedPopup.subtitle'),
promise: () => next(),
},
});
else next();
});
</script>
<template>
<QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">

17
src/css/app.scss
View File

@ -194,13 +194,6 @@ select:-webkit-autofill {
justify-content: center;
}
.q-card,
.q-table,
.q-table__bottom,
.q-drawer {
background-color: var(--vn-section-color);
}
input[type='number'] {
-moz-appearance: textfield;
}
@ -254,6 +247,16 @@ input::-webkit-inner-spin-button {
white-space: nowrap;
text-overflow: ellipsis;
}
tr {
th {
font-size: 11pt;
}
td {
font-size: 11pt;
border-top: 1px solid var(--vn-page-color);
border-collapse: collapse;
}
}
.shrink {
max-width: 75px;
}

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/Claim/Card/ClaimAction.vue
View File

@ -31,7 +31,7 @@ const destinationTypes = ref([]);
const totalClaimed = ref(null);
const DEFAULT_MAX_RESPONSABILITY = 5;
const DEFAULT_MIN_RESPONSABILITY = 1;
const arrayData = useArrayData('claimData');
const arrayData = useArrayData('Claim');
const marker_labels = [
{ value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.company') },
{ value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.person') },

4
src/pages/Claim/Card/ClaimNotes.vue
View File

@ -14,7 +14,8 @@ const $props = defineProps({
});
const claimId = computed(() => $props.id || route.params.id);
const claimFilter = {
const claimFilter = computed(() => {
return {
where: { claimFk: claimId.value },
fields: ['id', 'created', 'workerFk', 'text'],
include: {
@ -30,6 +31,7 @@ const claimFilter = {
},
},
};
});
const body = {
claimFk: claimId.value,

12
src/pages/Claim/Card/ClaimPhoto.vue
View File

@ -1,6 +1,6 @@
<script setup>
import axios from 'axios';
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
@ -22,10 +22,8 @@ const claimDms = ref([
},
]);
const client = ref({});
const inputFile = ref();
const files = ref({});
const spinnerRef = ref();
const claimDmsRef = ref();
const dmsType = ref({});
@ -58,6 +56,14 @@ const claimDmsFilter = ref({
const multimediaDialog = ref();
const multimediaSlide = ref();
watch(
() => router.currentRoute.value.params.id,
() => {
claimDmsFilter.value.where.id = router.currentRoute.value.params.id;
claimDmsRef.value.fetch();
}
);
function openDialog(dmsId) {
multimediaSlide.value = dmsId;
multimediaDialog.value = true;

10
src/pages/Claim/Card/ClaimSummary.vue
View File

@ -279,7 +279,7 @@ async function changeState(value) {
<ClaimNotes
:id="entityId"
:add-note="false"
class="max-container-height"
style="max-height: 300px"
order="created ASC"
/>
</QCard>
@ -330,7 +330,7 @@ async function changeState(value) {
<QTable
:columns="detailsColumns"
:rows="salesClaimed"
flat
separator="horizontal"
dense
:rows-per-page-options="[0]"
hide-bottom
@ -344,7 +344,7 @@ async function changeState(value) {
</template>
<template #body="props">
<QTr :props="props">
<QTh v-for="col in props.cols" :key="col.name" :props="props">
<QTd v-for="col in props.cols" :key="col.name" :props="props">
<span v-if="col.name != 'description'">{{
t(col.value)
}}</span>
@ -359,7 +359,7 @@ async function changeState(value) {
:id="props.row.sale.itemFk"
:sale-fk="props.row.saleFk"
></ItemDescriptorProxy>
</QTh>
</QTd>
</QTr>
</template>
</QTable>
@ -384,7 +384,7 @@ async function changeState(value) {
<template #body-cell-worker="props">
<QTd :props="props" class="link">
{{ props.value }}
<WorkerDescriptorProxy :id="props.row.worker.id" />
<WorkerDescriptorProxy :id="props.row.worker?.id" />
</QTd>
</template>
</QTable>

1
src/pages/Claim/ClaimFilter.vue
View File

@ -100,6 +100,7 @@ defineExpose({ states });
url="Items/withName"
option-value="id"
option-label="name"
:use-like="false"
sort-by="id DESC"
outlined
rounded

2
src/pages/Claim/ClaimList.vue
View File

@ -125,7 +125,7 @@ const STATE_COLOR = {
<VnTable
data-key="ClaimList"
url="Claims/filter"
:order="['priority ASC', 'created DESC']"
:order="['priority ASC', 'created ASC']"
:columns="columns"
redirect="claim"
:right-search="false"

2
src/pages/Customer/Card/CustomerFiscalData.vue
View File

@ -15,7 +15,6 @@ const route = useRoute();
const typesTaxes = ref([]);
const typesTransactions = ref([]);
const postcodesOptions = ref([]);
function handleLocation(data, location) {
const { town, code, provinceFk, countryFk } = location ?? {};
@ -95,7 +94,6 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.postcode"
@update:model-value="(location) => handleLocation(data, location)"
/>

2
src/pages/Customer/CustomerCreate.vue
View File

@ -18,7 +18,6 @@ const initialData = reactive({
const workersOptions = ref([]);
const businessTypesOptions = ref([]);
const postcodesOptions = ref([]);
function handleLocation(data, location) {
const { town, code, provinceFk, countryFk } = location ?? {};
@ -88,7 +87,6 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
>

2
src/pages/Customer/CustomerList.vue
View File

@ -15,7 +15,6 @@ import { toDate } from 'src/filters';
const { t } = useI18n();
const router = useRouter();
const postcodesOptions = ref([]);
const tableRef = ref();
const columns = computed(() => [
@ -414,7 +413,6 @@ function handleLocation(data, location) {
<template #more-create-dialog="{ data }">
<VnLocation
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
/>

2
src/pages/Customer/components/CustomerAddressCreate.vue
View File

@ -21,7 +21,6 @@ const formInitialData = reactive({ isDefaultAddress: false });
const urlCreate = ref('');
const postcodesOptions = ref([]);
const agencyModes = ref([]);
const incoterms = ref([]);
const customsAgents = ref([]);
@ -94,7 +93,6 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
/>

2
src/pages/Customer/components/CustomerAddressEdit.vue
View File

@ -18,7 +18,6 @@ const route = useRoute();
const router = useRouter();
const urlUpdate = ref('');
const postcodesOptions = ref([]);
const agencyModes = ref([]);
const incoterms = ref([]);
const customsAgents = ref([]);
@ -178,7 +177,6 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.postalCode"
@update:model-value="(location) => handleLocation(data, location)"
></VnLocation>

2
src/pages/Supplier/Card/SupplierAddressesCreate.vue
View File

@ -11,7 +11,6 @@ const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const postcodesOptions = ref([]);
const viewAction = ref();
const updateAddressId = ref(null);
const newAddressForm = reactive({
@ -85,7 +84,6 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
>

2
src/pages/Supplier/Card/SupplierFiscalData.vue
View File

@ -17,7 +17,6 @@ const sageTaxTypesOptions = ref([]);
const sageWithholdingsOptions = ref([]);
const sageTransactionTypesOptions = ref([]);
const supplierActivitiesOptions = ref([]);
const postcodesOptions = ref([]);
function handleLocation(data, location) {
const { town, code, provinceFk, countryFk } = location ?? {};
@ -131,7 +130,6 @@ function handleLocation(data, location) {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.postCode"
@update:model-value="(location) => handleLocation(data, location)"
>

47
src/pages/Supplier/SupplierList.vue
View File

@ -19,58 +19,62 @@ const columns = computed(() => [
label: t('supplier.list.tableVisibleColumns.name'),
name: 'socialName',
create: true,
columnCreate: {
component: 'input',
},
columnFilter: {
name: 'nickname',
name: 'search',
},
},
{
align: 'left',
label: t('supplier.list.tableVisibleColumns.nif'),
name: 'nif',
columnFilter: {
inWhere: true,
},
},
{
align: 'left',
label: t('supplier.list.tableVisibleColumns.nickname'),
name: 'alias',
columnFilter: {
name: 'nickname',
name: 'search',
},
},
{
align: 'left',
label: t('supplier.list.tableVisibleColumns.account'),
name: 'account',
columnFilter: false,
columnFilter: {
inWhere: true,
},
},
{
align: 'left',
label: t('supplier.list.tableVisibleColumns.payMethod'),
name: 'payMethod',
columnFilter: false,
},
{
align: 'left',
label: t('supplier.list.tableVisibleColumns.payDay'),
name: 'payDay',
columnFilter: false,
},
{
align: 'left',
name: 'countryFk',
label: t('customer.extendedList.tableVisibleColumns.countryFk'),
columnFilter: {
inWhere: true,
name: 'payMethodFk',
component: 'select',
attrs: {
url: 'Countries',
url: 'payMethods',
fields: ['id', 'name'],
find: {
value: 'payMethodFk',
label: 'name',
},
},
},
visible: false,
},
{
align: 'left',
label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
name: 'provinceFk',
component: 'select',
attrs: {
url: 'Provinces',
label: t('supplier.list.tableVisibleColumns.payDay'),
name: 'payDay',
columnFilter: {
inWhere: true,
},
visible: false,
},
@ -99,7 +103,6 @@ const columns = computed(() => [
<i18n>
en:
Search suppliers: Search suppliers
es:
Search suppliers: Buscar proveedores
</i18n>

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();

2
src/pages/Worker/WorkerCreate.vue
View File

@ -21,7 +21,6 @@ const companiesOptions = ref([]);
const workersOptions = ref([]);
const payMethodsOptions = ref([]);
const bankEntitiesOptions = ref([]);
const postcodesOptions = ref([]);
const formData = ref({ isFreelance: false });
const defaultPayMethod = ref(0);
@ -173,7 +172,6 @@ onBeforeMount(async () => {
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
v-model="data.location"
@update:model-value="(location) => handleLocation(data, location)"
:disable="formData.isFreelance"

58
test/cypress/integration/vnComponent/vnLocation.spec.js
View File

@ -1,8 +1,9 @@
const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
describe('VnLocation', () => {
const locationOptions = '[role="listbox"] > div.q-virtual-scroll__content > .q-item';
const dialogInputs = '.q-dialog label input';
describe('Worker Create', () => {
const createLocationButton = '.q-form > .q-card > .vn-row:nth-child(6) .--add-icon';
const inputLocation = '.q-form input[aria-label="Location"]';
describe('Worker Create', () => {
beforeEach(() => {
cy.viewport(1280, 720);
cy.login('developer');
@ -32,25 +33,50 @@ describe('VnLocation', () => {
cy.login('developer');
cy.visit('/#/supplier/567/fiscal-data', { timeout: 7000 });
cy.waitForElement('.q-form');
cy.get(createLocationButton).click();
});
it('Create postCode', function () {
cy.get('.q-form > .q-card > .vn-row:nth-child(6) .--add-icon').click();
it('Create postCode', () => {
const postCode = '1234475';
const province = 'Valencia';
cy.get('.q-card > h1').should('have.text', 'New postcode');
cy.get(dialogInputs).eq(0).clear('12');
cy.get(dialogInputs).eq(0).type('1234453');
cy.get(dialogInputs).eq(0).clear();
cy.get(dialogInputs).eq(0).type(postCode);
cy.selectOption(
'.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control ',
'Valencia'
);
cy.selectOption(
'.q-dialog__inner > .column > #formModel > .q-card > :nth-child(5) > .q-select > .q-field__inner > .q-field__control ',
'Province one'
);
cy.selectOption(
'.q-dialog__inner > .column > #formModel > .q-card > :nth-child(6) > .q-select > .q-field__inner > .q-field__control ',
'España'
province
);
cy.get('.q-mt-lg > .q-btn--standard').click();
});
cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
'not.exist'
);
checkVnLocation(postCode, province);
});
it('Create city', () => {
const postCode = '9011';
const province = 'Saskatchew';
cy.get(dialogInputs).eq(0).type(postCode);
// city create button
cy.get(
'.q-dialog__inner > .column > #formModel > .q-card > :nth-child(4) > .q-select > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon'
).click();
cy.selectOption('#q-portal--dialog--2 .q-select', 'one');
cy.get('#q-portal--dialog--2 .q-input').type(province);
cy.get('#q-portal--dialog--2 .q-btn--standard').click();
cy.get('#q-portal--dialog--1 .q-btn--standard').click();
checkVnLocation(postCode, province);
});
function checkVnLocation(postCode, province) {
cy.get('.q-dialog__inner > .column > #formModel > .q-card').should(
'not.exist'
);
cy.get('.q-form > .q-card > .vn-row:nth-child(6)')
.find('input')
.invoke('val')
.then((text) => {
expect(text).to.contain(postCode);
expect(text).to.contain(province);
});
}
});
});