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

feat: refs #7346 add seriaType option #626

Merged
jgallego merged 7 commits from 7346-invoiceOutMultilple into dev 2024-08-23 09:08:53 +00:00
Conversation 1 Commits 7 Files Changed 9 +724 -748
33 changed files with 724 additions and 748 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit defb11a6d7 - Show all commits

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

@ -26,7 +26,10 @@ const url = computed(() => {
if (props.baseUrl) return `${props.baseUrl}/${route.params.id}`;
return props.customUrl;
});
const searchRightDataKey = computed(() => {
if (!props.searchDataKey) return route.name;
return props.searchDataKey;
});
const arrayData = useArrayData(props.dataKey, {
url: url.value,
filter: props.filter,
@ -62,10 +65,9 @@ if (props.baseUrl) {
<slot name="searchbar" v-if="props.searchDataKey">
<VnSearchbar :data-key="props.searchDataKey" v-bind="props.searchbarProps" />
</slot>
<slot v-else name="searchbar" />
<RightMenu>
<template #right-panel v-if="props.filterPanel">
<component :is="props.filterPanel" :data-key="props.searchDataKey" />
<component :is="props.filterPanel" :data-key="searchRightDataKey" />
</template>
</RightMenu>
<QPageContainer>

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

@ -111,21 +111,23 @@ watch(
const isLoading = ref(false);
async function search(evt) {
if (evt && $props.disableSubmitEvent) return;
try {
if (evt && $props.disableSubmitEvent) return;
store.filter.where = {};
isLoading.value = true;
const filter = { ...userParams.value, ...$props.modelValue };
store.userParamsChanged = true;
const { params: newParams } = await arrayData.addFilter({
params: filter,
});
userParams.value = newParams;
store.filter.where = {};
isLoading.value = true;
const filter = { ...userParams.value, ...$props.modelValue };
store.userParamsChanged = true;
const { params: newParams } = await arrayData.addFilter({
params: filter,
});
userParams.value = newParams;
if (!$props.showAll && !Object.values(filter).length) store.data = [];
isLoading.value = false;
emit('search');
if (!$props.showAll && !Object.values(filter).length) store.data = [];
emit('search');
} finally {
isLoading.value = false;
}
}
async function reload() {
@ -140,29 +142,31 @@ async function reload() {
}
async function clearFilters() {
isLoading.value = true;
store.userParamsChanged = true;
arrayData.reset(['skip', 'filter.skip', 'page']);
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
$props.unRemovableParams.includes(param)
);
const newParams = {};
// Conservar solo los params que no son removibles
for (const key of removableFilters) {
newParams[key] = userParams.value[key];
}
userParams.value = {};
userParams.value = { ...newParams }; // Actualizar los params con los removibles
await arrayData.applyFilter({ params: userParams.value });
try {
isLoading.value = true;
store.userParamsChanged = true;
arrayData.reset(['skip', 'filter.skip', 'page']);
// Filtrar los params no removibles
const removableFilters = Object.keys(userParams.value).filter((param) =>
$props.unRemovableParams.includes(param)
);
const newParams = {};
// Conservar solo los params que no son removibles
for (const key of removableFilters) {
newParams[key] = userParams.value[key];
}
userParams.value = {};
userParams.value = { ...newParams }; // Actualizar los params con los removibles
await arrayData.applyFilter({ params: userParams.value });
if (!$props.showAll) {
store.data = [];
if (!$props.showAll) {
store.data = [];
}
emit('clear');
emit('update:modelValue', userParams.value);
} finally {
isLoading.value = false;
}
isLoading.value = false;
emit('clear');
emit('update:modelValue', userParams.value);
}
const tagsList = computed(() => {

4
src/components/ui/VnSearchbar.vue
View File

@ -104,9 +104,7 @@ onMounted(() => {
});
async function search() {
const staticParams = Object.entries(store.userParams).filter(
([key, value]) => value && (props.staticParams || []).includes(key)
);
const staticParams = Object.entries(store.userParams);
arrayData.reset(['skip', 'page']);
if (props.makeFetch)

2
src/components/ui/VnSms.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { watch, computed } from 'vue';
import { computed } from 'vue';
import { date } from 'quasar';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnAvatar from '../ui/VnAvatar.vue';

7
src/css/app.scss
View File

@ -264,3 +264,10 @@ input::-webkit-inner-spin-button {
max-width: 400px;
}
}
.edit-photo-btn {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 1;
cursor: pointer;
}

21
src/filters/getParamWhere.js Normal file
View File

@ -0,0 +1,21 @@
// parsing JSON safely
function parseJSON(str, fallback) {
try {
return JSON.parse(str ?? '{}');
} catch (e) {
console.error('Error parsing JSON:', e);
return fallback;
}
}
export default function (route, param) {
// catch route query params
const params = parseJSON(route?.query?.params, {});
// extract and parse filter from params
const { filter: filterStr = '{}' } = params;
const where = parseJSON(filterStr, {})?.where;
if (where && where[param] !== undefined) {
return where[param];
}
return null;
}

2
src/filters/index.js
View File

@ -11,6 +11,7 @@ import dashIfEmpty from './dashIfEmpty';
import dateRange from './dateRange';
import toHour from './toHour';
import dashOrCurrency from './dashOrCurrency';
import getParamWhere from './getParamWhere';
export {
toLowerCase,
@ -26,4 +27,5 @@ export {
toPercentage,
dashIfEmpty,
dateRange,
getParamWhere,
};

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

@ -93,6 +93,7 @@ globals:
since: Since
from: From
to: To
notes: Notes
pageTitles:
logIn: Login
summary: Summary

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

@ -93,6 +93,7 @@ globals:
since: Desde
from: Desde
to: Hasta
notes: Notas
pageTitles:
logIn: Inicio de sesión
summary: Resumen

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

@ -6,7 +6,6 @@ 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';
@ -24,7 +23,6 @@ const stateStore = useStateStore();
const quasar = useQuasar();
const tableRef = ref();
const rolesOptions = ref([]);
const exprBuilder = (param, value) => {
switch (param) {

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

@ -1,15 +1,12 @@
<script setup>
import axios from 'axios';
import { computed, ref, toRefs } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useVnConfirm } from 'composables/useVnConfirm';
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: {
type: Boolean,
@ -35,7 +32,7 @@ async function updateStatusAccount(active) {
account.value.hasAccount = active;
const status = active ? 'enable' : 'disable';
quasar.notify({
notify({
message: t(`account.card.${status}Account.success`),
type: 'positive',
});
@ -44,19 +41,11 @@ async function updateStatusUser(active) {
await axios.patch(`VnUsers/${entityId.value}`, { active });
account.value.active = active;
const status = active ? 'activate' : 'deactivate';
quasar.notify({
notify({
message: t(`account.card.actions.${status}User.success`),
type: 'positive',
});
}
function setPassword() {
quasar.dialog({
component: CustomerChangePassword,
componentProps: {
id: entityId.value,
},
});
}
const showSyncDialog = ref(false);
const syncPassword = ref(null);
const shouldSyncPassword = ref(false);
@ -66,20 +55,11 @@ async function sync() {
await axios.patch(`Accounts/${account.value.name}/sync`, {
params,
});
quasar.notify({
notify({
message: t('account.card.actions.sync.success'),
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
@ -112,24 +92,6 @@ const removeAccount = async () => {
/>
</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
@ -178,10 +140,4 @@ const removeAccount = async () => {
</QItem>
<QSeparator />
<!-- <QItem @click="removeAccount(id)" v-ripple clickable>
<QItemSection avatar>
<QIcon name="delete" />
</QItemSection>
<QItemSection>{{ t('account.card.actions.delete.name') }}</QItemSection>
</QItem> -->
</template>

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

@ -4,11 +4,9 @@ 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 { useStateStore } from 'stores/useStateStore';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RoleSummary from './Card/RoleSummary.vue';
const route = useRoute();
const stateStore = useStateStore();
const { t } = useI18n();
const $props = defineProps({
id: {

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

@ -78,6 +78,9 @@ const columns = computed(() => [
{
align: 'left',
label: t('claim.state'),
format: ({ stateCode }) =>
claimFilterRef.value?.states.find(({code}) => code === stateCode)
?.description,
name: 'stateCode',
chip: {
condition: () => true,

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

@ -1,8 +1,6 @@
<script setup>
import { useI18n } from 'vue-i18n';
import CustomerConsumptionFilter from './CustomerConsumptionFilter.vue';
import { useStateStore } from 'src/stores/useStateStore';
const { t } = useI18n();
</script>
<template>

2
src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue
View File

@ -19,7 +19,7 @@ const props = defineProps({
<VnFilterPanel
:data-key="props.dataKey"
:search-button="true"
:unremovable-params="['from', 'to']"
:un-removable-params="['from', 'to']"
:hidden-tags="['from', 'to']"
>
<template #tags="{ tag, formatFn }">

8
src/pages/Item/Card/ItemDescriptorImage.vue
View File

@ -138,14 +138,6 @@ en:
</i18n>
<style lang="scss" scoped>
.edit-photo-btn {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 1;
cursor: pointer;
}
.separation-borders {
border-left: 1px solid $white;
border-right: 1px solid $white;

57
src/pages/Monitor/SalesTicketsTable.vue
View File

@ -1,8 +1,6 @@
<script setup>
import { ref, computed, onMounted, reactive } from 'vue';
import { ref, computed, reactive } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
@ -11,18 +9,14 @@ import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.v
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
import TicketSummary from 'src/pages/Ticket/Card/TicketSummary.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toDateFormat, toTimeFormat } from 'src/filters/date.js';
import { toCurrency, dateRange } from 'src/filters';
const DEFAULT_AUTO_REFRESH = 1000;
const { t } = useI18n();
const autoRefresh = ref(false);
const router = useRouter();
const paginateRef = ref(null);
const workersActiveOptions = ref([]);
const provincesOptions = ref([]);
@ -57,46 +51,6 @@ function exprBuilder(param, value) {
const filter = { order: ['totalProblems DESC'] };
let params = reactive({});
const applyColumnFilter = async (col) => {
try {
const paramKey = col.columnFilter?.filterParamKey || col.field;
params[paramKey] = col.columnFilter.filterValue;
await paginateRef.value.addFilter(null, params);
} catch (err) {
console.error('Error applying column filter', err);
}
};
const getInputEvents = (col) => {
return col.columnFilter.type === 'select' || col.columnFilter.type === 'date'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
};
const fetchParams = ($params = {}) => {
const excludedParams = ['search', 'clientFk', 'orderFk', 'refFk', 'scopeDays'];
const hasExcludedParams = excludedParams.some((param) => {
return $params && $params[param] != undefined;
});
const hasParams = Object.entries($params).length;
if (!hasParams || !hasExcludedParams) $params.scopeDays = 1;
if (typeof $params.scopeDays === 'number') {
const from = Date.vnNew();
from.setHours(0, 0, 0, 0);
const to = new Date(from.getTime());
to.setDate(to.getDate() + $params.scopeDays);
to.setHours(23, 59, 59, 999);
Object.assign($params, { from, to });
}
return { tableOrder: 'totalProblems DESC', ...$params };
};
const columns = computed(() => [
{
label: t('salesTicketsTable.problems'),
@ -379,13 +333,6 @@ const redirectToSales = (id) => {
const url = `#/ticket/${id}/sale`;
window.open(url, '_blank');
};
// onMounted(async () => {
// const filteredColumns = columns.value.filter((col) => col.name !== 'rowActions');
// allColumnNames.value = filteredColumns.map((col) => col.name);
// params = fetchParams();
// await paginateRef.value.addFilter(null, params);
// });
</script>
<template>

46
src/pages/Order/Card/OrderForm.vue → src/pages/Order/Card/OrderBasicData.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
@ -7,6 +7,7 @@ import { useState } from 'composables/useState';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInput from 'components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
@ -15,7 +16,6 @@ const route = useRoute();
const state = useState();
const ORDER_MODEL = 'order';
const router = useRouter();
const isNew = Boolean(!route.params.id);
const clientList = ref([]);
const agencyList = ref([]);
@ -64,13 +64,6 @@ const fetchOrderDetails = (order) => {
fetchAgencyList(order?.landed, order?.addressFk);
};
const orderMapper = (order) => {
return {
addressId: order.addressFk,
agencyModeId: order.agencyModeFk,
landed: new Date(order.landed).toISOString(),
};
};
const orderFilter = {
include: [
{ relation: 'agencyMode', scope: { fields: ['name'] } },
@ -106,10 +99,6 @@ const onClientChange = async (clientId) => {
console.error('Error al cambiar el cliente:', error);
}
};
async function onDataSaved({ id }) {
await router.push({ path: `/order/${id}/catalog` });
}
</script>
<template>
@ -117,9 +106,8 @@ async function onDataSaved({ id }) {
<div class="q-pa-md">
<FormModel
:url="`Orders/${route.params.id}`"
@on-data-saved="onDataSaved"
:url-update="`Orders/${route.params.id}/updateBasicData`"
:model="ORDER_MODEL"
:mapper="orderMapper"
:filter="orderFilter"
@on-fetch="fetchOrderDetails"
auto-load
@ -180,8 +168,6 @@ async function onDataSaved({ id }) {
() => fetchAgencyList(data.landed, data.addressFk)
"
/>
</VnRow>
<VnRow>
<VnSelect
:label="t('order.form.agencyModeFk')"
v-model="data.agencyModeFk"
@ -189,9 +175,29 @@ async function onDataSaved({ id }) {
option-value="agencyModeFk"
option-label="agencyMode"
hide-selected
:disable="!agencyList?.length"
>
</VnSelect>
:disable="!agencyList?.length && data.isConfirmed === 1"
clearable
emit-value
map-options
:model-value="
!data.isConfirmed &&
agencyList?.length &&
agencyList.some(
(agency) => agency.agencyModeFk === data.agency_id
)
? data.agencyModeFk
: null
"
/>
</VnRow>
<VnRow>
<VnInput
:label="t('globals.notes')"
type="textarea"
v-model="data.note"
fill-input
autogrow
/>
</VnRow>
</template>
</FormModel>

23
src/pages/Order/Card/OrderCard.vue
View File

@ -1,16 +1,35 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import VnCard from 'components/common/VnCard.vue';
import OrderDescriptor from 'pages/Order/Card/OrderDescriptor.vue';
import OrderFilter from './OrderFilter.vue';
import OrderSearchbar from './OrderSearchbar.vue';
import OrderCatalogFilter from './OrderCatalogFilter.vue';
const config = {
OrderCatalog: OrderCatalogFilter,
};
const route = useRoute();
const routeName = computed(() => route.name);
const customRouteRedirectName = computed(() => {
const route = config[routeName.value];
if (route) return null;
return 'OrderList';
});
const customFilterPanel = computed(() => {
const filterPanel = config[routeName.value] ?? OrderFilter;
return filterPanel;
});
</script>
<template>
<VnCard
data-key="Order"
base-url="Orders"
:descriptor="OrderDescriptor"
:filter-panel="OrderFilter"
search-data-key="OrderList"
:filter-panel="customFilterPanel"
:search-data-key="customRouteRedirectName"
>
<template #searchbar>
<OrderSearchbar />

33
src/pages/Order/OrderCatalog.vue → src/pages/Order/Card/OrderCatalog.vue
View File

@ -1,17 +1,24 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { onMounted, onUnmounted, ref } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue';
import CatalogItem from 'components/ui/CatalogItem.vue';
import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
const route = useRoute();
const router = useRouter();
const stateStore = useStateStore();
const { t } = useI18n();
const tags = ref([]);
onMounted(() => (stateStore.rightDrawer = true));
onMounted(() => {
stateStore.rightDrawer = true;
checkOrderConfirmation();
});
onUnmounted(() => (stateStore.rightDrawer = false));
const catalogParams = {
@ -19,7 +26,12 @@ const catalogParams = {
orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
};
const tags = ref([]);
async function checkOrderConfirmation() {
const response = await axios.get(`Orders/${route.params.id}`);
if (response.data.isConfirmed === 1) {
router.push(`/order/${route.params.id}/line`);
}
}
function extractTags(items) {
const resultTags = [];
@ -52,6 +64,15 @@ function extractValueTags(items) {
</script>
<template>
<VnSearchbar
data-key="OrderCatalogList"
:user-params="catalogParams"
:static-params="['orderFk', 'orderBy']"
:redirect="false"
url="Orders/CatalogFilter"
:label="t('Search items')"
:info="t('You can search items by name or id')"
/>
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8">
<OrderCatalogFilter
@ -68,7 +89,6 @@ function extractValueTags(items) {
url="Orders/CatalogFilter"
:limit="50"
:user-params="catalogParams"
auto-load
@on-fetch="extractTags"
:update-router="false"
>
@ -106,3 +126,8 @@ function extractValueTags(items) {
text-align: center;
}
</style>
<i18n>
es:
You can search items by name or id: Puedes buscar items por nombre o id
</i18n>

158
src/pages/Order/Card/OrderCatalogFilter.vue
View File

@ -7,8 +7,8 @@ import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
import { useValidator } from 'src/composables/useValidator';
import VnInput from 'src/components/common/VnInput.vue';
import getParamWhere from 'src/filters/getParamWhere';
const { t } = useI18n();
@ -27,19 +27,26 @@ const props = defineProps({
required: true,
},
});
const categoryList = ref(null);
const selectedCategoryFk = ref(null);
const typeList = ref(null);
const selectedCategoryFk = ref(getParamWhere(route, 'categoryFk'));
const typeList = ref([]);
const selectedTypeFk = ref(null);
const validationsStore = useValidator();
const selectedOrder = ref(null);
const selectedOrderField = ref(null);
const moreFields = ref([]);
const moreFieldsOrder = ref([]);
const selectedTag = ref(null);
const tagValues = ref([{}]);
const tagOptions = ref([]);
const vnFilterPanelRef = ref();
const orderByList = ref([
{ id: 'relevancy DESC, name', name: t('params.relevancy'), priority: 999 },
{ id: 'showOrder, price', name: t('params.colorAndPrice'), priority: 999 },
{ id: 'name', name: t('params.name'), priority: 999 },
{ id: 'price', name: t('params.price'), priority: 999 },
]);
const orderWayList = ref([
{ id: 'ASC', name: t('params.ASC') },
{ id: 'DESC', name: t('params.DESC') },
]);
const orderBySelected = ref('relevancy DESC, name');
const orderWaySelected = ref('ASC');
const createValue = (val, done) => {
if (val.length > 2) {
@ -72,7 +79,7 @@ const selectCategory = (params, category, search) => {
search();
};
const loadTypes = async (categoryFk) => {
const loadTypes = async (categoryFk = selectedCategoryFk.value) => {
const { data } = await axios.get(`Orders/${route.params.id}/getItemTypeAvailable`, {
params: { itemCategoryId: categoryFk },
});
@ -84,7 +91,14 @@ const selectedCategory = computed(() =>
(category) => category?.id === selectedCategoryFk.value
)
);
function filterFn(val, update) {
update(() => {
const needle = val.toLowerCase();
tagOptions.value = props.tagValue.filter(
(v) => v.toLowerCase().indexOf(needle) > -1
);
});
}
const selectedType = computed(() => {
return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
});
@ -95,7 +109,8 @@ function exprBuilder(param, value) {
case 'typeFk':
return { [param]: value };
case 'search':
return { 'i.name': { like: `%${value}%` } };
if (/^\d+$/.test(value)) return { 'i.id': value };
else return { 'i.name': { like: `%${value}%` } };
}
}
@ -132,36 +147,6 @@ const removeTagChip = (selection, params, search) => {
search();
};
const onOrderChange = (value, params) => {
const tagObj = JSON.parse(params.orderBy);
tagObj.way = value.name;
params.orderBy = JSON.stringify(tagObj);
};
const onOrderFieldChange = (value, params) => {
const tagObj = JSON.parse(params.orderBy);
switch (value) {
case 'Relevancy':
tagObj.name = value + ' DESC, name';
params.orderBy = JSON.stringify(tagObj);
break;
case 'ColorAndPrice':
tagObj.name = 'showOrder, price';
params.orderBy = JSON.stringify(tagObj);
break;
case 'Name':
tagObj.name = 'name';
params.orderBy = JSON.stringify(tagObj);
break;
case 'Price':
tagObj.name = 'price';
params.orderBy = JSON.stringify(tagObj);
break;
}
};
const _moreFields = ['ASC', 'DESC'];
const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
const setCategoryList = (data) => {
categoryList.value = (data || [])
.filter((category) => category.display)
@ -169,8 +154,8 @@ const setCategoryList = (data) => {
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
moreFields.value = useLang(_moreFields);
moreFieldsOrder.value = useLang(_moreFieldsTypes);
selectedCategoryFk.value && loadTypes();
};
const getCategoryClass = (category, params) => {
@ -179,27 +164,22 @@ const getCategoryClass = (category, params) => {
}
};
const useLang = (values) => {
const { models } = validationsStore;
const properties = models.Item?.properties || {};
return values.map((name) => {
let prop = properties[name];
const label = t(`params.${name}`);
return {
name,
label,
type: prop ? prop.type : null,
};
});
};
function addOrder(value, field, params) {
let { orderBy } = params;
orderBy = JSON.parse(orderBy);
orderBy[field] = value;
params.orderBy = JSON.stringify(orderBy);
vnFilterPanelRef.value.search();
}
</script>
<template>
<FetchData url="ItemCategories" limit="30" auto-load @on-fetch="setCategoryList" />
<VnFilterPanel
ref="vnFilterPanelRef"
:data-key="props.dataKey"
:hidden-tags="['orderFk', 'orderBy']"
:unremovable-params="['orderFk', 'orderBy']"
:un-removable-params="['orderFk', 'orderBy']"
:expr-builder="exprBuilder"
:custom-tags="['tagGroups']"
@remove="clearFilter"
@ -289,33 +269,29 @@ const useLang = (values) => {
</QItemSection>
</QItem>
<QSeparator />
<QItem class="q-my-md">
<QItemSection>
<VnSelect
:label="t('Order')"
v-model="selectedOrder"
:options="moreFields"
option-label="label"
option-value="way"
dense
outlined
rounded
@update:model-value="(value) => onOrderChange(value, params)"
/>
</QItemSection>
</QItem>
<QItem class="q-mb-md">
<QItemSection>
<VnSelect
:label="t('Order by')"
v-model="selectedOrderField"
:options="moreFieldsOrder"
option-label="label"
option-value="name"
v-model="orderBySelected"
:options="orderByList"
dense
outlined
rounded
@update:model-value="(value) => onOrderFieldChange(value, params)"
@update:model-value="(value) => addOrder(value, 'field', params)"
/>
</QItemSection>
</QItem>
<QItem class="q-my-md">
<QItemSection>
<VnSelect
:label="t('Order')"
v-model="orderWaySelected"
:options="orderWayList"
dense
outlined
rounded
@update:model-value="(value) => addOrder(value, 'way', params)"
/>
</QItemSection>
</QItem>
@ -352,7 +328,7 @@ const useLang = (values) => {
v-if="!selectedTag"
:label="t('params.value')"
v-model="value.value"
:options="tagValue || []"
:options="tagOptions || []"
option-value="value"
option-label="value"
dense
@ -362,6 +338,8 @@ const useLang = (values) => {
use-input
class="filter-input"
@new-value="createValue"
@filter="filterFn"
@update:model-value="applyTagFilter(params, searchFn)"
/>
<VnSelect
v-else-if="selectedTag === 1"
@ -377,6 +355,7 @@ const useLang = (values) => {
use-input
class="filter-input"
@new-value="createValue"
@update:model-value="applyTagFilter(params, searchFn)"
/>
<VnInput
v-else
@ -386,6 +365,7 @@ const useLang = (values) => {
outlined
rounded
class="filter-input"
@keyup.enter="applyTagFilter(params, searchFn)"
/>
<QIcon
name="delete"
@ -400,7 +380,7 @@ const useLang = (values) => {
@click="tagValues.push({})"
/>
</QItem>
<QItem>
<!-- <QItem>
<QItemSection class="q-py-sm">
<QBtn
:label="t('Search')"
@ -414,7 +394,7 @@ const useLang = (values) => {
@click.stop="applyTagFilter(params, searchFn)"
/>
</QItemSection>
</QItem>
</QItem> -->
<QSeparator />
</template>
</VnFilterPanel>
@ -477,10 +457,10 @@ en:
order: Order
ASC: Ascendant
DESC: Descendant
Relevancy: Relevancy
ColorAndPrice: Color and price
Name: Name
Price: Price
relevancy: Relevancy
colorAndPrice: Color and price
name: Name
price: Price
es:
params:
type: Tipo
@ -490,10 +470,10 @@ es:
order: Orden
ASC: Ascendiente
DESC: Descendiente
Relevancy: Relevancia
ColorAndPrice: Color y precio
Name: Nombre
Price: Precio
relevancy: Relevancia
colorAndPrice: Color y precio
name: Nombre
price: Precio
Order: Orden
Order by: Ordenar por
Plant: Planta

23
src/pages/Order/Card/OrderCatalogItemDialog.vue
View File

@ -5,10 +5,12 @@ import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useRoute } from 'vue-router';
import useNotify from 'composables/useNotify';
import { useArrayData } from 'composables/useArrayData';
const { t } = useI18n();
const route = useRoute();
const { notify } = useNotify();
const emit = defineEmits(['added']);
const route = useRoute();
const props = defineProps({
prices: {
type: Array,
@ -16,9 +18,8 @@ const props = defineProps({
},
});
const emit = defineEmits(['added']);
const fields = ref((props.prices || []).map((item) => ({ ...item, quantity: 0 })));
const descriptorData = useArrayData('orderData');
const addToOrder = async () => {
const items = (fields.value || []).filter((item) => Number(item.quantity) > 0);
@ -28,19 +29,20 @@ const addToOrder = async () => {
});
notify(t('globals.dataSaved'), 'positive');
emit('added');
descriptorData.fetch({});
};
</script>
<template>
<div class="container order-catalog-item q-pb-md">
<div class="container order-catalog-item q-pa-md">
<QForm @submit="addToOrder">
<QMarkupTable class="shadow-0">
<tbody>
<tr v-for="item in fields" :key="item.warehouse">
<td class="text-bold q-py-lg">
<td class="text-bold q-pr-md td" style="width: 35%">
{{ item.warehouse }}
</td>
<td class="text-right">
<td class="text-right" style="width: 35%">
<span
class="link"
@click="
@ -75,8 +77,11 @@ const addToOrder = async () => {
</template>
<style lang="scss" scoped>
.container {
max-width: 448px;
width: 100%;
// .container {
// max-width: 768px;
// width: 100%;
// }
.td {
width: 200px;
}
</style>

20
src/pages/Order/Card/OrderDescriptor.vue
View File

@ -4,13 +4,13 @@ import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency, toDate } from 'src/filters';
import { useState } from 'src/composables/useState';
import useCardDescription from 'src/composables/useCardDescription';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
import FetchData from 'components/FetchData.vue';
import OrderDescriptorMenu from 'pages/Order/Card/OrderDescriptorMenu.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
const DEFAULT_ITEMS = 0;
@ -25,6 +25,8 @@ const $props = defineProps({
const route = useRoute();
const state = useState();
const { t } = useI18n();
const data = ref(useCardDescription());
const getTotalRef = ref();
const entityId = computed(() => {
return $props.id || route.params.id;
@ -57,11 +59,11 @@ const filter = {
],
};
const data = ref(useCardDescription());
const setData = (entity) => {
if (!entity) return;
getTotalRef.value && getTotalRef.value.fetch();
data.value = useCardDescription(entity?.client?.name, entity?.id);
state.set('OrderDescriptor', entity);
state.set('orderData', entity);
};
const getConfirmationValue = (isConfirmed) => {
@ -69,13 +71,17 @@ const getConfirmationValue = (isConfirmed) => {
};
const total = ref(null);
function ticketFilter(order) {
return JSON.stringify({ id: order.id });
}
</script>
<template>
<FetchData
ref="getTotalRef"
:url="`Orders/${entityId}/getTotal`"
@on-fetch="(response) => (total = response)"
auto-load
/>
<CardDescriptor
ref="descriptor"
@ -120,7 +126,7 @@ const total = ref(null);
color="primary"
:to="{
name: 'TicketList',
query: { params: JSON.stringify({ orderFk: entity.id }) },
query: { table: ticketFilter(entity) },
}"
>
<QTooltip>{{ t('order.summary.orderTicketList') }}</QTooltip>

232
src/pages/Order/Card/OrderFilter.vue
View File

@ -21,15 +21,13 @@ const salesPersonFilter = {
fields: ['id', 'nickname'],
};
const salesPersonList = ref(null);
const sourceFilter = { fields: ['value'] };
const sourceList = ref(null);
const sourceList = ref([]);
</script>
<template>
<FetchData
url="AgencyModes/isActive"
:filter="agencyFilter"
limit="30"
sort-by="name ASC"
auto-load
@on-fetch="(data) => (agencyList = data)"
@ -37,7 +35,6 @@ const sourceList = ref(null);
<FetchData
url="Workers/search"
:filter="salesPersonFilter"
limit="30"
sort-by="nickname ASC"
@on-fetch="(data) => (salesPersonList = data)"
:params="{ departmentCodes: ['VT'] }"
@ -45,8 +42,7 @@ const sourceList = ref(null);
/>
<FetchData
url="Orders/getSourceValues"
:filter="sourceFilter"
limit="30"
:filter="{ fields: ['value'] }"
sort-by="value ASC"
@on-fetch="(data) => (sourceList = data)"
auto-load
@ -59,148 +55,88 @@ const sourceList = ref(null);
</div>
</template>
<template #body="{ params }">
<QItem>
<QItemSection>
<VnInput
is-outlined
:label="t('customerId')"
v-model="params.clientFk"
lazy-rules
>
<template #prepend>
<QIcon name="badge" size="sm"></QIcon>
</template>
</VnInput>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="agencyList">
<VnSelect
:label="t('agency')"
v-model="params.agencyModeFk"
:options="agencyList"
option-value="id"
option-label="name"
dense
outlined
rounded
emit-value
map-options
use-input
:input-debounce="0"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="salesPersonList">
<VnSelect
:label="t('salesPerson')"
v-model="params.workerFk"
:options="salesPersonList"
option-value="id"
option-label="name"
dense
outlined
rounded
emit-value
map-options
use-input
:input-debounce="0"
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.nickname }},{{ opt.code }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</QItemSection>
<QItemSection v-else>
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.from"
:label="t('fromLanded')"
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInputDate
v-model="params.to"
:label="t('toLanded')"
dense
outlined
rounded
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<VnInput
:label="t('orderId')"
v-model="params.orderFk"
lazy-rules
is-outlined
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection v-if="sourceList">
<VnSelect
:label="t('application')"
v-model="params.sourceApp"
:options="sourceList"
option-label="value"
emit-value
map-options
use-input
dense
outlined
rounded
:input-debounce="0"
/>
</QItemSection>
<QItemSection v-else>
<QSkeleton type="QInput" class="full-width" />
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.myTeam"
:label="t('myTeam')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox
v-model="params.isConfirmed"
:label="t('isConfirmed')"
toggle-indeterminate
/>
</QItemSection>
</QItem>
<QItem>
<QItemSection>
<QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
</QItemSection>
</QItem>
<div class="q-px-md q-gutter-y-sm">
<VnInput
:label="t('customerId')"
v-model="params.clientFk"
lazy-rules
dense
outlined
rounded
/>
<VnSelect
:label="t('agency')"
v-model="params.agencyModeFk"
:options="agencyList"
:input-debounce="0"
dense
outlined
rounded
/>
<VnSelect
:label="t('salesPerson')"
v-model="params.workerFk"
url="Workers/search"
:filter="{ departmentCodes: ['VT'] }"
sort-by="nickname ASC"
option-label="nickname"
dense
outlined
rounded
>
<template #option="{ itemProps, opt }">
<QItem v-bind="itemProps">
<QItemSection>
<QItemLabel>{{ opt.name }}</QItemLabel>
<QItemLabel caption>
{{ opt.nickname }},{{ opt.code }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnInputDate
v-model="params.from"
:label="t('fromLanded')"
dense
outlined
rounded
/>
<VnInputDate
v-model="params.to"
:label="t('toLanded')"
dense
outlined
rounded
/>
<VnInput
:label="t('orderId')"
v-model="params.orderFk"
lazy-rules
is-outlined
/>
<VnSelect
:label="t('application')"
v-model="params.sourceApp"
:options="sourceList"
option-label="value"
dense
outlined
rounded
:input-debounce="0"
/>
<QCheckbox
v-model="params.myTeam"
:label="t('myTeam')"
toggle-indeterminate
/>
<QCheckbox
v-model="params.isConfirmed"
:label="t('isConfirmed')"
toggle-indeterminate
/>
<QCheckbox v-model="params.showEmpty" :label="t('showEmpty')" />
</div>
</template>
</VnFilterPanel>
</template>

147
src/pages/Order/OrderLines.vue → src/pages/Order/Card/OrderLines.vue
View File

@ -1,23 +1,26 @@
<script setup>
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import { useQuasar } from 'quasar';
import axios from 'axios';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import { toCurrency, toDate } from 'src/filters';
import VnConfirm from 'components/ui/VnConfirm.vue';
import { toCurrency, toDate } from 'src/filters';
import axios from 'axios';
import VnTable from 'src/components/VnTable/VnTable.vue';
import FetchData from 'src/components/FetchData.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import FetchedTags from 'src/components/ui/FetchedTags.vue';
import { useStateStore } from 'stores/useStateStore';
const router = useRouter();
const stateStore = useStateStore();
const route = useRoute();
const { t } = useI18n();
const quasar = useQuasar();
const descriptorData = useArrayData('orderData');
const componentKey = ref(0);
const tableLinesRef = ref();
const order = ref();
@ -25,6 +28,8 @@ const orderSummary = ref({
total: null,
vat: null,
});
const getTotalRef = ref();
const getVATRef = ref();
const lineFilter = ref({
include: [
@ -59,6 +64,13 @@ const lineFilter = ref({
fields: ['id', 'name'],
},
},
{
relation: 'order',
scope: {
fields: ['id', 'isConfirmed'],
where: { id: route.params.id },
},
},
],
where: { orderFk: route.params.id },
});
@ -104,6 +116,7 @@ const columns = computed(() => [
component: null,
},
format: (row) => row?.item?.name,
columnClass: 'expand',
},
{
align: 'left',
@ -147,7 +160,6 @@ const columns = computed(() => [
align: 'left',
name: 'amount',
label: t('lines.amount'),
format: (row) => toCurrency(row.amount),
},
{
align: 'right',
@ -155,8 +167,9 @@ const columns = computed(() => [
name: 'tableActions',
actions: [
{
title: t('delete'),
title: t('Delete'),
icon: 'delete',
show: (row) => !row.order.isConfirmed,
action: (row) => confirmRemove(row),
isPrimary: true,
},
@ -185,6 +198,9 @@ async function remove(item) {
type: 'positive',
});
tableLinesRef.value.reload();
descriptorData.fetch({});
getTotalRef.value.fetch();
getVATRef.value.fetch();
}
async function confirmOrder() {
@ -193,7 +209,22 @@ async function confirmOrder() {
message: t('globals.confirm'),
type: 'positive',
});
router.push({
name: 'TicketList',
query: {
table: JSON.stringify({ clientFk: descriptorData.store.data.clientFk }),
},
});
}
watch(
() => router.currentRoute.value.params.id,
() => {
lineFilter.value.where.orderFk = router.currentRoute.value.params.id;
tableLinesRef.value.reload();
}
);
</script>
<template>
@ -204,78 +235,80 @@ async function confirmOrder() {
auto-load
/>
<FetchData
ref="getTotalRef"
:key="componentKey"
:url="`Orders/${route.params.id}/getTotal`"
@on-fetch="(data) => (orderSummary.total = data)"
auto-load
/>
<FetchData
ref="getVATRef"
:key="componentKey"
:url="`Orders/${route.params.id}/getVAT`"
@on-fetch="(data) => (orderSummary.vat = data)"
auto-load
/>
<QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
<QCard class="order-lines-summary q-pa-lg">
<QCard
class="order-lines-summary q-pa-lg"
v-if="orderSummary.vat && orderSummary.total"
>
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv
v-if="orderSummary.vat && orderSummary.total"
:label="t('subtotal') + ': '"
:value="toCurrency(orderSummary.total - orderSummary.vat)"
/>
<VnLv
v-if="orderSummary.vat"
:label="t('VAT') + ': '"
:value="toCurrency(orderSummary?.vat)"
/>
<VnLv
v-if="orderSummary.total"
:label="t('total') + ': '"
:value="toCurrency(orderSummary?.total)"
/>
<VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
<VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
</QCard>
</QDrawer>
<QPage :key="componentKey" class="column items-center">
<div class="order-list full-width">
<div v-if="!orderSummary.total" class="no-result">
{{ t('globals.noResults') }}
</div>
<VnTable
ref="tableLinesRef"
data-key="OrderLines"
url="OrderRows"
:columns="columns"
:right-search="false"
:use-model="true"
auto-load
:user-filter="lineFilter"
>
<template #column-image="{ row }">
<div class="image-wrapper">
<VnImg :id="parseInt(row?.item?.image)" class="rounded" />
</div>
</template>
<template #column-itemFk="{ row }">
<div class="row column full-width justify-between items-start">
{{ row?.item?.name }}
<div v-if="row?.item?.subName" class="subName">
{{ row?.item?.subName.toUpperCase() }}
</div>
</div>
<FetchedTags :item="row?.item" :max-length="6" />
</template>
</VnTable>
</div>
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}
</QTooltip>
</QPageSticky>
</QPage>
<VnTable
ref="tableLinesRef"
data-key="OrderLines"
url="OrderRows"
:columns="columns"
:right-search="false"
:use-model="true"
auto-load
:user-filter="lineFilter"
>
<template #column-image="{ row }">
<div class="image-wrapper">
<VnImg :id="parseInt(row?.item?.image)" class="rounded" />
</div>
</template>
<template #column-itemFk="{ row }">
<div class="row column full-width justify-between items-start">
{{ row?.item?.name }}
<div v-if="row?.item?.subName" class="subName">
{{ row?.item?.subName.toUpperCase() }}
</div>
</div>
<FetchedTags :item="row?.item" :max-length="6" />
</template>
<template #column-amount="{ row }">
{{ toCurrency(row.quantity * row.price) }}
</template>
<template #column-tableActions="{ row }">
<QIcon
v-if="row.order?.isConfirmed === 0"
name="delete"
icon="delete"
@click="confirmRemove(row)"
class="cursor-pointer"
/>
</template>
</VnTable>
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}
</QTooltip>
</QPageSticky>
</template>
<style lang="scss" scoped>

37
src/pages/Order/Card/OrderSummary.vue
View File

@ -180,15 +180,17 @@ const detailsColumns = ref([
<ItemDescriptorProxy :id="props.row.item?.id" />
</span>
</QTd>
<QTd key="description" :props="props" class="description">
<div class="name">
<span>{{ props.row.item.name }}</span>
<span
v-if="props.row.item.subName"
class="subName"
>
{{ props.row.item.subName }}
</span>
<QTd key="description" :props="props">
<div class="description">
<div class="name">
{{ props.row.item.name }}
<span
v-if="props.row.item.subName"
class="subName"
>
{{ props.row.item.subName }}
</span>
</div>
</div>
<FetchedTags :item="props.row.item" :max-length="5" />
</QTd>
@ -228,24 +230,13 @@ const detailsColumns = ref([
}
.description {
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
height: auto;
padding-top: 12px;
padding-bottom: 12px;
padding-top: 15px;
padding-bottom: 15px;
.name {
display: flex;
align-items: center;
padding-bottom: 8px;
& > * {
flex: 1;
}
.subName {
margin-left: 5%;
text-transform: uppercase;
color: var(--vn-label-color);
}

140
src/pages/Order/Card/OrderVolume.vue Normal file
View File

@ -0,0 +1,140 @@
<script setup>
import axios from 'axios';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { dashIfEmpty } from 'src/filters';
import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import ItemDescriptorProxy from 'pages/Item/Card/ItemDescriptorProxy.vue';
import VnLv from 'components/ui/VnLv.vue';
import VnTable from 'components/VnTable/VnTable.vue';
const route = useRoute();
const { t } = useI18n();
const volumeSummary = ref(null);
const volumeRef = ref();
const volumes = ref([]);
const volumeFilter = ref({
include: [
{
relation: 'item',
},
],
where: { orderFk: route.params.id },
});
const columns = [
{
name: 'itemFk',
label: t('item'),
align: 'left',
},
{
name: 'description',
label: t('globals.description'),
align: 'left',
},
{
name: 'quantity',
label: t('quantity'),
align: 'left',
},
{
name: 'volume',
label: t('volume'),
align: 'left',
},
];
const loadVolumes = async (rows) => {
if (!rows) return;
const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
rows.forEach((order) => {
(data.volumes || []).forEach((volume) => {
if (order.itemFk === volume.itemFk) order.volume = volume.volume;
});
});
volumes.value = rows;
};
</script>
<template>
<FetchData
:url="`Orders/${route.params.id}/getTotalVolume`"
@on-fetch="(data) => (volumeSummary = data)"
auto-load
/>
<QCard v-if="volumeSummary" class="order-volume-summary q-pa-lg">
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
<VnLv
:label="t('boxes')"
:value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
/>
</QCard>
<VnTable
ref="volumeRef"
data-key="OrderCatalogVolume"
url="OrderRows"
:columns="columns"
auto-load
:user-filter="volumeFilter"
order="itemFk"
@on-fetch="(data) => loadVolumes(data)"
:right-search="false"
:column-search="false"
>
<template #column-itemFk="{ row }">
<span class="link">
{{ row.itemFk }}
<ItemDescriptorProxy :id="row.itemFk" />
</span>
</template>
<template #column-description="{ row }">
<FetchedTags :item="row.item" :max-length="5" />
</template>
<template #column-volume="{ rowIndex }">
{{ volumes?.[rowIndex]?.volume }}
</template>
</VnTable>
</template>
<style lang="scss">
.order-volume-summary {
.vn-label-value {
display: flex;
justify-content: flex-end;
gap: 2%;
.label {
color: var(--vn-label-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<i18n>
en:
summary: Summary
total: Total
boxes: Boxes
item: Item
quantity: Quantity
volume: m³ per quantity
es:
summary: Resumen
total: Total
boxes: Cajas
item: Artículo
quantity: Cantidad
volume: m³ por cantidad
</i18n>

129
src/pages/Order/OrderList.vue
View File

@ -3,19 +3,21 @@ import axios from 'axios';
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import { dashIfEmpty, toCurrency, toDate } from 'src/filters';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import OrderSummary from 'pages/Order/Card/OrderSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnInputDate from 'src/components/common/VnInputDate.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import OrderSearchbar from './Card/OrderSearchbar.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import OrderFilter from './Card/OrderFilter.vue';
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const tableRef = ref();
const clientList = ref([]);
const agencyList = ref([]);
const selectedAddress = ref();
const addressesList = ref([]);
const clientId = ref();
const columns = computed(() => [
{
@ -29,7 +31,7 @@ const columns = computed(() => [
},
{
align: 'left',
name: 'clientName',
name: 'clientFk',
label: t('module.customer'),
isTitle: true,
cardVisible: true,
@ -41,20 +43,26 @@ const columns = computed(() => [
columnField: {
component: null,
},
format: (row) => row?.clientName,
},
{
align: 'left',
name: 'name',
name: 'salesPersonFk',
label: t('module.salesPerson'),
component: 'select',
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
},
columnField: {
component: null,
columnFilter: {
component: 'select',
inWhere: true,
attrs: {
url: 'Workers/activeWithInheritedRole',
fields: ['id', 'name'],
where: { role: 'salesPerson' },
useLike: false,
optionValue: 'id',
optionLabel: 'name',
optionFilter: 'firstName',
},
},
format: (row) => row?.name,
},
{
align: 'left',
@ -92,17 +100,21 @@ const columns = computed(() => [
},
{
align: 'left',
name: 'agencyName',
name: 'agencyModeFk',
label: t('module.agency'),
component: 'select',
format: (row) => row?.agencyName,
columnFilter: {
component: 'select',
attrs: {
url: 'agencyModes',
fields: ['id', 'name'],
find: {
value: 'agencyModeFk',
label: 'agencyName',
},
},
},
cardVisible: true,
attrs: {
url: 'Agencies',
fields: ['id', 'name'],
},
columnField: {
component: null,
},
},
{
align: 'left',
@ -125,22 +137,36 @@ const columns = computed(() => [
},
]);
async function fetchClientAddress(id, data) {
const clientData = await axios.get(`Clients/${id}`);
selectedAddress.value = clientData.data.defaultAddressFk;
data.addressId = selectedAddress.value;
async function fetchClientAddress(id, formData) {
const { data } = await axios.get(`Clients/${id}`, {
params: { filter: { include: { relation: 'addresses' } } },
});
addressesList.value = data.addresses;
formData.addressId = data.defaultAddressFk;
fetchAgencies(formData);
}
async function fetchAgencies({ landed, addressId }) {
if (!landed || !addressId) return (agencyList.value = []);
const { data } = await axios.get('Agencies/landsThatDay', {
params: { addressFk: addressId, landed },
});
agencyList.value = data;
}
</script>
<template>
<VnSearchbar
data-key="OrderList"
:label="t('Search order')"
:info="t('You can search orders by reference')"
/>
<OrderSearchbar />
<RightMenu>
<template #right-panel>
<OrderFilter data-key="OrderList" />
</template>
</RightMenu>
<VnTable
ref="tableRef"
data-key="OrderList"
url="Orders/filter"
:order="['landed DESC', 'clientFk ASC', 'id DESC']"
:create="{
urlCreate: 'Orders/new',
title: 'Create Order',
@ -152,36 +178,49 @@ async function fetchClientAddress(id, data) {
addressId: null,
},
}"
:user-params="{ showEmpty: false }"
:right-search="false"
:columns="columns"
redirect="order"
auto-load
>
<template #more-create-dialog="{ data }">
<VnSelect
url="Clients"
v-model="data.id"
:include="{ relation: 'addresses' }"
v-model="clientId"
:label="t('module.customer')"
:options="clientList"
option-value="id"
option-label="name"
@update:model-value="(id) => fetchClientAddress(id, data)"
/>
<VnSelect
url="Clients"
v-model="selectedAddress"
v-model="data.addressId"
:options="addressesList"
:label="t('module.address')"
:options="selectedAddress"
option-value="defaultAddressFk"
option-label="street"
option-value="id"
option-label="nickname"
@update:model-value="() => fetchAgencies(data)"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ scope.opt?.nickname }}: {{ scope.opt?.street }},
{{ scope.opt?.city }}</QItemLabel
>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnInputDate
v-model="data.landed"
:label="t('module.landed')"
@update:model-value="() => fetchAgencies(data)"
/>
<VnInputDate v-model="data.landed" :label="t('module.landed')" />
<VnSelect
url="Agencies"
v-model="data.agencyModeId"
:label="t('module.agency')"
:options="agencyList"
option-value="id"
option-label="name"
option-value="agencyModeFk"
option-label="agencyMode"
/>
</template>
</VnTable>

156
src/pages/Order/OrderVolume.vue
View File

@ -1,156 +0,0 @@
<script setup>
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnLv from 'components/ui/VnLv.vue';
import CardList from 'components/ui/CardList.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import { dashIfEmpty } from 'src/filters';
import axios from 'axios';
const route = useRoute();
const { t } = useI18n();
const volumeSummary = ref(null);
const loadVolumes = async (rows) => {
const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
(rows || []).forEach((order) => {
(data.volumes || []).forEach((volume) => {
if (order.itemFk === volume.itemFk) {
order.volume = volume.volume;
}
});
});
};
</script>
<template>
<FetchData
:url="`Orders/${route.params.id}/getTotalVolume`"
@on-fetch="(data) => (volumeSummary = data)"
auto-load
/>
<QPage class="column items-center q-pa-md">
<div class="vn-card-list">
<div
v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
class="no-result"
>
{{ t('globals.noResults') }}
</div>
<QCard v-else class="order-volume-summary q-pa-lg">
<p class="header text-right block">
{{ t('summary') }}
</p>
<VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
<VnLv
:label="t('boxes')"
:value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
/>
</QCard>
<VnPaginate
data-key="OrderCatalogVolume"
url="OrderRows"
:limit="20"
auto-load
:filter="{
include: {
relation: 'item',
},
where: { orderFk: route.params.id },
}"
order="itemFk"
@on-fetch="(data) => loadVolumes(data)"
>
<template #body="{ rows }">
<div class="catalog-list q-mt-xl">
<CardList
v-for="row in rows"
:key="row.id"
:id="row.id"
:title="row?.item?.name"
class="cursor-inherit"
>
<template #list-items>
<div class="q-mb-sm">
<FetchedTags :item="row.item" :max-length="5" />
</div>
<VnLv :label="t('item')" :value="row.item.id" />
<VnLv :label="t('subName')">
<template #value>
<span class="text-uppercase">
{{ row.item.subName }}
</span>
</template>
</VnLv>
<VnLv :label="t('quantity')" :value="row.quantity" />
<VnLv :label="t('volume')" :value="row.volume" />
</template>
</CardList>
</div>
</template>
</VnPaginate>
</div>
</QPage>
</template>
<style lang="scss">
.order-volume-summary {
.vn-label-value {
display: flex;
justify-content: flex-end;
gap: 2%;
.label {
color: var(--vn-label-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>
<style lang="scss" scoped>
.header {
color: $primary;
font-weight: bold;
margin-bottom: 25px;
font-size: 20px;
display: inline-block;
}
.no-result {
font-size: 24px;
font-weight: bold;
color: var(--vn-label-color);
text-align: center;
}
</style>
<i18n>
en:
summary: Summary
total: Total
boxes: Boxes
item: Item
subName: Subname
quantity: Quantity
volume: m³ per quantity
es:
summary: Resumen
total: Total
boxes: Cajas
item: Artículo
subName: Subname
quantity: Cantidad
volume: m³ por cantidad
</i18n>

1
src/pages/Ticket/Card/TicketSale.vue
View File

@ -11,7 +11,6 @@ import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import TicketEditManaProxy from './TicketEditMana.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
import TicketTransfer from './TicketTransfer.vue';

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

@ -10,6 +10,7 @@ import useCardDescription from 'src/composables/useCardDescription';
import { useState } from 'src/composables/useState';
import axios from 'axios';
import VnImg from 'src/components/ui/VnImg.vue';
import EditPictureForm from 'components/EditPictureForm.vue';
const $props = defineProps({
id: {
@ -18,6 +19,7 @@ const $props = defineProps({
default: null,
},
});
const image = ref(null);
const route = useRoute();
const { t } = useI18n();
@ -25,6 +27,10 @@ const state = useState();
const user = state.getUser();
const changePasswordFormDialog = ref(null);
const cardDescriptorRef = ref(null);
const showEditPhotoForm = ref(false);
const toggleEditPictureForm = () => {
showEditPhotoForm.value = !showEditPhotoForm.value;
};
const entityId = computed(() => {
return $props.id || route.params.id;
@ -99,7 +105,9 @@ const handleExcluded = async () => {
workerExcluded.value = !workerExcluded.value;
};
const handlePhotoUpdated = (evt = false) => {
image.value.reload(evt);
};
const refetch = async () => await cardDescriptorRef.value.getData();
</script>
<template>
@ -144,27 +152,49 @@ const refetch = async () => await cardDescriptorRef.value.getData();
</QItem>
</template>
<template #before>
<VnImg
:id="parseInt(entityId)"
collection="user"
resolution="520x520"
class="photo"
>
<template #error>
<div
class="absolute-full picture text-center q-pa-md flex flex-center"
>
<div>
<div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
<QIcon name="vn:claims" />
</div>
<div class="text-grey-5" style="opacity: 0.4">
{{ t('worker.imageNotFound') }}
<div class="relative-position">
<VnImg
ref="image"
:id="parseInt(entityId)"
collection="user"
resolution="520x520"
class="photo"
>
<template #error>
<div
class="absolute-full picture text-center q-pa-md flex flex-center"
>
<div>
<div
class="text-grey-5"
style="opacity: 0.4; font-size: 5vh"
>
<QIcon name="vn:claims" />
</div>
<div class="text-grey-5" style="opacity: 0.4">
{{ t('worker.imageNotFound') }}
</div>
</div>
</div>
</div>
</template>
</VnImg>
</template> </VnImg
><QBtn
color="primary"
size="lg"
round
class="edit-photo-btn"
@click="toggleEditPictureForm()"
>
<QIcon name="edit" size="sm" />
<QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
<EditPictureForm
collection="user"
:id="entityId"
@close-form="toggleEditPictureForm()"
@on-photo-uploaded="handlePhotoUpdated"
/>
</QDialog>
</QBtn>
</div>
</template>
<template #body="{ entity }">
<VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />

5
src/pages/Zone/Card/ZoneCard.vue
View File

@ -10,11 +10,6 @@ const { t } = useI18n();
const route = useRoute();
const routeName = computed(() => route.name);
const customRouteRedirectName = computed(() => {
if (routeName.value === 'ZoneLocations') return null;
return routeName.value;
});
const searchbarMakeFetch = computed(() => routeName.value !== 'ZoneEvents');
const searchBarDataKeys = {
ZoneWarehouses: 'ZoneWarehouses',
ZoneSummary: 'ZoneSummary',

8
src/router/modules/order.js
View File

@ -63,7 +63,7 @@ export default {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Order/Card/OrderForm.vue'),
component: () => import('src/pages/Order/Card/OrderBasicData.vue'),
},
{
name: 'OrderCatalog',
@ -72,7 +72,7 @@ export default {
title: 'catalog',
icon: 'vn:basket',
},
component: () => import('src/pages/Order/OrderCatalog.vue'),
component: () => import('src/pages/Order/Card/OrderCatalog.vue'),
},
{
name: 'OrderVolume',
@ -81,7 +81,7 @@ export default {
title: 'volume',
icon: 'vn:volume',
},
component: () => import('src/pages/Order/OrderVolume.vue'),
component: () => import('src/pages/Order/Card/OrderVolume.vue'),
},
{
name: 'OrderLines',
@ -90,7 +90,7 @@ export default {
title: 'lines',
icon: 'vn:lines',
},
component: () => import('src/pages/Order/OrderLines.vue'),
component: () => import('src/pages/Order/Card/OrderLines.vue'),
},
],
},