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

Merge branch 'dev' into 6654-stickySubToolbar

This commit is contained in:
Javier Segarra 2024-01-30 08:25:24 +00:00
parent 1d7316dd6d fac4e0f9ca
commit 8200b19238
16 changed files with 274 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -58,7 +58,7 @@ module.exports = {
rules: {
'prefer-promise-reject-errors': 'off',
'no-unused-vars': 'warn',
"vue/no-multiple-template-root": "off" ,
// allow debugger during development only
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},

7
src/components/FormModel.vue
View File

@ -177,13 +177,6 @@ watch(formUrl, async () => {
});
</script>
<template>
<QBanner
v-if="$props.observeFormChanges && hasChanges"
class="text-white bg-warning full-width"
>
<QIcon name="warning" size="md" class="q-mr-md" />
<span>{{ t('globals.changesToSave') }}</span>
</QBanner>
<div class="column items-center full-width">
<QForm
v-if="formData"

36
src/components/UserPanel.vue
View File

@ -1,19 +1,19 @@
<script setup>
import { onMounted, computed } from 'vue';
import { Dark, Quasar, useQuasar } from 'quasar';
import { Dark, Quasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
import { localeEquivalence } from "src/i18n/index";
import { localeEquivalence } from 'src/i18n/index';
const state = useState();
const session = useSession();
const router = useRouter();
const { t, locale } = useI18n();
const quasar = useQuasar();
import { useClipboard } from 'src/composables/useClipboard';
const { copyText } = useClipboard();
const userLocale = computed({
get() {
return locale.value;
@ -21,14 +21,14 @@ const userLocale = computed({
set(value) {
locale.value = value;
value = localeEquivalence[value] ?? value
value = localeEquivalence[value] ?? value;
try {
/* @vite-ignore */
import(`../../node_modules/quasar/lang/${value}.mjs`).then((lang) => {
Quasar.lang.set(lang.default);
});
} catch (error) {
} catch (error) {
//
}
},
@ -81,12 +81,8 @@ function logout() {
router.push('/login');
}
function copyUserToken(){
navigator.clipboard.writeText(session.getToken());
quasar.notify({
type: 'positive',
message: t('components.userPanel.copyToken'),
});
function copyUserToken() {
copyText(session.getToken(), { label: 'components.userPanel.copyToken' });
}
</script>
@ -129,8 +125,12 @@ function copyUserToken(){
<div class="text-subtitle1 q-mt-md">
<strong>{{ user.nickname }}</strong>
</div>
<div class="text-subtitle3 text-grey-7 q-mb-xs copyUserToken" @click="copyUserToken()" >@{{ user.name }}
</div>
<div
class="text-subtitle3 text-grey-7 q-mb-xs copyText"
@click="copyUserToken()"
>
@{{ user.name }}
</div>
<QBtn
id="logout"
@ -152,9 +152,9 @@ function copyUserToken(){
width: 150px;
}
.copyUserToken {
&:hover{
cursor: alias;
}
.copyText {
&:hover {
cursor: alias;
}
}
</style>

135
src/components/common/VnLocation.vue Normal file
View File

@ -0,0 +1,135 @@
<script setup>
import { ref, toRefs, computed, watch, onMounted } from 'vue';
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectCreate from 'components/common/VnSelectCreate.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', value);
},
});
onMounted(() => {
locationFilter()
});
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);
});
function showLabel(data) {
return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
}
function locationFilter(search) {
let where = { search };
postcodesRef.value.fetch({filter:{ where}, limit: 30});
}
function handleFetch( data) {
postcodesOptions.value = data;
}
</script>
<template>
<FetchData
ref="postcodesRef"
url="Postcodes/filter"
@on-fetch="(data) =>handleFetch(data)"
/>
<VnSelectCreate
v-if="postcodesRef"
v-model="value"
:options="postcodesOptions"
:label="t('Location')"
:option-label="showLabel"
:placeholder="t('Search by postalCode, town, province or country')"
@input-value="locationFilter"
:default-filter="false"
:input-debounce="300"
:class="{ required: $attrs.required }"
v-bind="$attrs"
emit-value
map-options
use-input
clearable
hide-selected
fill-input
>
<template #form>
<CreateNewPostcode @on-data-saved="locationFilter()" />
</template>
<template #option="{itemProps, opt}">
<QItem v-bind="itemProps">
<QItemSection v-if="opt">
<QItemLabel>{{ opt.code }}</QItemLabel>
<QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</template>
<style lang="scss" scoped>
.add-icon {
cursor: pointer;
background-color: $primary;
border-radius: 50px;
}
</style>
<i18n>
es:
Location: Ubicación
Search by postalcode, town, province or country: Buscar por código postal, ciudad o país
</i18n>

5
src/components/common/VnSelectFilter.vue
View File

@ -12,11 +12,11 @@ const $props = defineProps({
default: () => [],
},
optionLabel: {
type: String,
type: [String],
default: '',
},
filterOptions: {
type: Array,
type: [Array],
default: () => [],
},
isClearable: {
@ -47,6 +47,7 @@ function setOptions(data) {
myOptions.value = JSON.parse(JSON.stringify(data));
myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
}
setOptions(options.value);
const filter = (val, options) => {
const search = val.toString().toLowerCase();

23
src/components/ui/VnLv.vue
View File

@ -2,6 +2,7 @@
import { computed } from 'vue';
import { dashIfEmpty } from 'src/filters';
import { useClipboard } from 'src/composables/useClipboard';
const $props = defineProps({
label: { type: String, default: null },
value: {
@ -10,8 +11,19 @@ const $props = defineProps({
},
info: { type: String, default: null },
dash: { type: Boolean, default: true },
copy: { type: Boolean, default: false },
});
const isBooleanValue = computed(() => typeof $props.value === 'boolean');
const { copyText } = useClipboard();
function copyValueText() {
copyText($props.value, {
component: {
copyValue: $props.value,
},
});
}
</script>
<style scoped>
.label,
@ -48,5 +60,16 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
</QTooltip>
</QIcon>
</div>
<div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
<QIcon name="Content_Copy" color="primary" />
</div>
</div>
</template>
<style lang="scss" scoped>
.copy {
&:hover {
cursor: pointer;
}
}
</style>

17
src/composables/useClipboard.js Normal file
View File

@ -0,0 +1,17 @@
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
export function useClipboard() {
const quasar = useQuasar();
const { t } = useI18n();
/**
*
* @param {String} value Value to send to clipboardAPI
* @param {Object} {label, component} Refer to Quasar notify configuration. Label is the text to translate
*/
function copyText(value, { label = 'components.VnLv.copyText', component = {} }) {
navigator.clipboard.writeText(value);
quasar.notify({ type: 'positive', message: t(label, component) });
}
return { copyText };
}

4
src/i18n/en/index.js
View File

@ -1060,6 +1060,7 @@ export default {
totalEntries: 'Total entries',
},
},
components: {
topbar: {},
userPanel: {
@ -1083,5 +1084,8 @@ export default {
addToPinned: 'Add to pinned',
removeFromPinned: 'Remove from pinned',
},
VnLv: {
copyText: '{copyValue} has been copied to the clipboard',
},
},
};

3
src/i18n/es/index.js
View File

@ -1083,5 +1083,8 @@ export default {
addToPinned: 'Añadir a fijados',
removeFromPinned: 'Eliminar de fijados',
},
VnLv: {
copyText: '{copyValue} se ha copiado al portapepeles',
},
},
};

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

@ -81,7 +81,7 @@ const creditWarning = computed(() => {
<VnLinkPhone :phone-number="entity.mobile" />
</template>
</VnLv>
<VnLv :label="t('customer.summary.email')" :value="entity.email" />
<VnLv :label="t('customer.summary.email')" :value="entity.email" copy />
<VnLv
:label="t('customer.summary.salesPerson')"
:value="entity?.salesPersonUser?.name"

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

@ -2,12 +2,11 @@
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
@ -29,23 +28,18 @@ const newClientForm = reactive({
isEqualizated: false,
});
const postcodeFetchDataRef = ref(null);
const townsFetchDataRef = ref(null);
const workersOptions = ref([]);
const businessTypesOptions = ref([]);
const citiesLocationOptions = ref([]);
const provincesLocationOptions = ref([]);
const countriesOptions = ref([]);
const postcodesOptions = ref([]);
const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formData) => {
await postcodeFetchDataRef.value.fetch();
await townsFetchDataRef.value.fetch();
formData.postcode = code;
formData.provinceFk = provinceFk;
formData.city = citiesLocationOptions.value.find((town) => town.id === townFk).name;
formData.countryFk = countryFk;
};
function handleLocation(data, location ) {
const { town, code, provinceFk, countryFk } = location ?? {}
data.postcode = code;
data.city = town;
data.provinceFk = provinceFk;
data.countryFk = countryFk;
}
</script>
<template>
@ -54,33 +48,11 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
auto-load
url="Workers/search?departmentCodes"
/>
<FetchData
ref="postcodeFetchDataRef"
url="Postcodes/location"
@on-fetch="(data) => (postcodesOptions = data)"
auto-load
/>
<FetchData
@on-fetch="(data) => (businessTypesOptions = data)"
auto-load
url="BusinessTypes"
/>
<FetchData
ref="townsFetchDataRef"
@on-fetch="(data) => (citiesLocationOptions = data)"
auto-load
url="Towns/location"
/>
<FetchData
@on-fetch="(data) => (provincesLocationOptions = data)"
auto-load
url="Provinces/location"
/>
<FetchData
@on-fetch="(data) => (countriesOptions = data)"
auto-load
url="Countries"
/>
<QPage>
<VnSubToolbar />
<FormModel
@ -139,96 +111,19 @@ const onPostcodeCreated = async ({ code, provinceFk, townFk, countryFk }, formDa
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectCreate
v-model="data.postcode"
:label="t('Postcode')"
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
option-label="code"
option-value="code"
hide-selected
v-model="data.location"
@update:model-value="
(location) => handleLocation(data, location)
"
>
<template #form>
<CustomerCreateNewPostcode
@on-data-saved="onPostcodeCreated($event, data)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
<QItemLabel caption
>{{ scope.opt.code }} -
{{ scope.opt.town.name }} ({{
scope.opt.town.province.name
}},
{{
scope.opt.town.province.country.country
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</div>
<div class="col">
<!-- ciudades -->
<VnSelectFilter
:label="t('City')"
:options="citiesLocationOptions"
hide-selected
option-label="name"
option-value="name"
v-model="data.city"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
<QItemLabel caption>
{{
`${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('Province')"
:options="provincesLocationOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.provinceFk"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{
`${scope.opt.name} (${scope.opt.country.country})`
}}</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('Country')"
:options="countriesOptions"
hide-selected
option-label="country"
option-value="id"
v-model="data.countryFk"
/>
</VnLocation>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<QInput v-model="data.userName" :label="t('Web user')" />

6
src/pages/Department/Card/DepartmentDescriptor.vue
View File

@ -90,17 +90,15 @@ const removeDepartment = () => {
</QItem>
</template>
<template #body="{ entity }">
<VnLv :label="t('department.chat')" :value="entity.chatName" dash />
<VnLv :label="t('department.email')" :value="entity.notificationEmail" dash />
<VnLv :label="t('department.chat')" :value="entity.chatName" />
<VnLv :label="t('department.email')" :value="entity.notificationEmail" copy />
<VnLv
:label="t('department.selfConsumptionCustomer')"
:value="entity.client?.name"
dash
/>
<VnLv
:label="t('department.bossDepartment')"
:value="entity.worker?.user?.name"
dash
/>
</template>
<template #actions>

2
src/pages/Worker/Card/WorkerDescriptor.vue
View File

@ -101,7 +101,7 @@ const setData = (entity) => {
</template>
<template #body="{ entity }">
<VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />
<VnLv :label="t('worker.card.email')" :value="entity.user?.email"> </VnLv>
<VnLv :label="t('worker.card.email')" :value="entity.user?.email" copy />
<VnLv
:label="t('worker.list.department')"
:value="entity.department ? entity.department.department.name : null"

2
src/pages/Worker/Card/WorkerSummary.vue
View File

@ -80,7 +80,7 @@ const filter = {
:label="t('worker.list.department')"
:value="worker.department.department.name"
/>
<VnLv :label="t('worker.list.email')" :value="worker.user.email" />
<VnLv :label="t('worker.list.email')" :value="worker.user.email" copy />
<VnLv :label="t('worker.summary.boss')" link>
<template #value>
<VnUserLink

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

@ -9,7 +9,8 @@ import VnInputDate from 'components/common/VnInputDate.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
import CreateBankEntityForm from 'src/components/CreateBankEntityForm.vue';
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
@ -21,14 +22,6 @@ const workerConfigFilter = {
field: ['payMethodFk'],
};
const provincesFilter = {
fields: ['id', 'name', 'countryFk'],
};
const townsFilter = {
fields: ['id', 'name', 'provinceFk'],
};
const newWorkerForm = ref({
companyFk: null,
payMethodFk: null,
@ -49,10 +42,6 @@ const newWorkerForm = ref({
bankEntityFk: null,
});
const postcodeFetchDataRef = ref(null);
const townsFetchDataRef = ref(null);
const provincesOptions = ref([]);
const townsOptions = ref([]);
const companiesOptions = ref([]);
const workersOptions = ref([]);
const payMethodsOptions = ref([]);
@ -67,13 +56,14 @@ const onBankEntityCreated = (data) => {
bankEntitiesOptions.value.push(data);
};
const onPostcodeCreated = async ({ code, provinceFk, townFk }, formData) => {
await postcodeFetchDataRef.value.fetch();
await townsFetchDataRef.value.fetch();
formData.postcode = code;
formData.provinceFk = provinceFk;
formData.city = townsOptions.value.find((town) => town.id === townFk).name;
};
function handleLocation(data, location ) {
const { town, postcode: code, provinceFk, countryFk } = location ?? {}
data.postcode = code;
data.city = town;
data.provinceFk = provinceFk;
data.countryFk = countryFk;
}
onMounted(async () => {
const userInfo = await useUserConfig().fetch();
@ -88,25 +78,7 @@ onMounted(async () => {
:filter="workerConfigFilter"
auto-load
/>
<FetchData
ref="postcodeFetchDataRef"
url="Postcodes/location"
@on-fetch="(data) => (postcodesOptions = data)"
auto-load
/>
<FetchData
url="Provinces/location"
@on-fetch="(data) => (provincesOptions = data)"
:filter="provincesFilter"
auto-load
/>
<FetchData
ref="townsFetchDataRef"
url="Towns/location"
@on-fetch="(data) => (townsOptions = data)"
:filter="townsFilter"
auto-load
/>
<FetchData
url="Companies"
@on-fetch="(data) => (companiesOptions = data)"
@ -184,77 +156,19 @@ onMounted(async () => {
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectCreate
v-model="data.postcode"
:label="t('worker.create.postcode')"
<VnLocation
:rules="validate('Worker.postcode')"
:roles-allowed-to-create="['deliveryAssistant']"
:options="postcodesOptions"
option-label="code"
option-value="code"
hide-selected
>
<template #form>
<CreateNewPostcode
@on-data-saved="onPostcodeCreated($event)"
/>
</template>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection v-if="scope.opt">
<QItemLabel>{{ scope.opt.code }}</QItemLabel>
<QItemLabel caption
>{{ scope.opt.code }} -
{{ scope.opt.town.name }} ({{
scope.opt.town.province.name
}},
{{
scope.opt.town.province.country.country
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectCreate>
</div>
<div class="col">
<VnSelectFilter
:label="t('worker.create.province')"
v-model="data.provinceFk"
:options="provincesOptions"
option-value="id"
option-label="name"
hide-selected
:rules="validate('Worker.provinceFk')"
/>
v-model="data.location"
@update:model-value="
(location) => handleLocation(data, location)
"
>
</VnLocation>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('worker.create.city')"
v-model="data.city"
:options="townsOptions"
option-value="name"
option-label="name"
hide-selected
:rules="validate('Worker.city')"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt.name }}</QItemLabel>
<QItemLabel caption
>{{ scope.opt.name }},
{{ scope.opt.province.name }} ({{
scope.opt.province.country.country
}})</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnInput
:label="t('worker.create.street')"

31
test/cypress/integration/VnLocation.spec.js Normal file
View File

@ -0,0 +1,31 @@
const inputLocation = ':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control';
const locationOptions ='[role="listbox"] > div.q-virtual-scroll__content > .q-item'
describe('VnLocation', () => {
beforeEach(() => {
cy.viewport(1280, 720);
cy.login('developer');
cy.visit('/#/worker/create');
cy.waitForElement('.q-card');
});
it('Show all options', function() {
cy.get(inputLocation).click();
cy.get(locationOptions).should('have.length',5);
});
it('input filter location as "al"', function() {
cy.get(inputLocation).click();
cy.get(inputLocation).clear();
cy.get(inputLocation).type('al');
cy.get(locationOptions).should('have.length',3);
});
it('input filter location as "ecuador"', function() {
cy.get(inputLocation).click();
cy.get(inputLocation).clear();
cy.get(inputLocation).type('ecuador');
cy.get(locationOptions).should('have.length',1);
cy.get(`${locationOptions}:nth-child(1)`).click();
cy.get(':nth-child(3) > :nth-child(1) > .q-field > .q-field__inner > .q-field__control > :nth-child(2) > .q-icon').click();
});
})