-
+
@@ -82,7 +77,7 @@ onMounted(async () => {
-
+
{
collection="catalog"
:id="entityId"
@close-form="toggleEditPictureForm()"
- @on-photo-uploaded="getItemAvatar()"
+ @on-photo-uploaded="handlePhotoUpdated"
/>
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 04748a8c8..97422084b 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -3,14 +3,15 @@ import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import axios from 'axios';
-
-import VnInput from 'components/common/VnInput.vue';
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';
const { t } = useI18n();
+
const route = useRoute();
const props = defineProps({
dataKey: {
@@ -21,32 +22,34 @@ const props = defineProps({
type: Array,
required: true,
},
+ tagValue: {
+ type: Array,
+ required: true,
+ },
});
const categoryList = ref(null);
const selectedCategoryFk = ref(null);
const typeList = ref(null);
const selectedTypeFk = ref(null);
-
+const validationsStore = useValidator();
+const selectedOrder = ref(null);
+const selectedOrderField = ref(null);
+const moreFields = ref([]);
+const moreFieldsOrder = ref([]);
+const createValue = (val, done) => {
+ if (val.length > 2) {
+ if (!tagOptions.value.includes(val)) {
+ done(tagOptions.value, 'add-unique');
+ }
+ tagValues.value.push({ value: val });
+ }
+};
const resetCategory = () => {
selectedCategoryFk.value = null;
typeList.value = null;
};
-const selectedOrder = ref(null);
-const orderList = [
- { way: 'ASC', name: 'Ascendant' },
- { way: 'DESC', name: 'Descendant' },
-];
-
-const selectedOrderField = ref(null);
-const OrderFields = [
- { field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
- { field: 'showOrder, price', name: 'Color and price', priority: 999 },
- { field: 'name', name: 'Name', priority: 999 },
- { field: 'price', name: 'Price', priority: 999 },
-];
-
const clearFilter = (key) => {
if (key === 'categoryFk') {
resetCategory();
@@ -72,21 +75,6 @@ const loadTypes = async (categoryFk) => {
typeList.value = data;
};
-const onFilterInit = async ({ params }) => {
- if (params.typeFk) {
- selectedTypeFk.value = params.typeFk;
- }
- if (params.categoryFk) {
- await loadTypes(params.categoryFk);
- selectedCategoryFk.value = params.categoryFk;
- }
- if (params.orderBy) {
- orderByParam.value = JSON.parse(params.orderBy);
- selectedOrder.value = orderByParam.value?.way;
- selectedOrderField.value = orderByParam.value?.field;
- }
-};
-
const selectedCategory = computed(() =>
(categoryList.value || []).find(
(category) => category?.id === selectedCategoryFk.value
@@ -109,10 +97,7 @@ function exprBuilder(param, value) {
const selectedTag = ref(null);
const tagValues = ref([{}]);
-const tagOptions = ref(null);
-const isButtonDisabled = computed(
- () => !selectedTag.value || tagValues.value.some((item) => !item.value)
-);
+const tagOptions = ref([]);
const applyTagFilter = (params, search) => {
if (!tagValues.value?.length) {
@@ -125,12 +110,12 @@ const applyTagFilter = (params, search) => {
}
params.tagGroups.push(
JSON.stringify({
- values: tagValues.value,
+ values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
tagSelection: {
...selectedTag.value,
- orgShowField: selectedTag.value.name,
+ orgShowField: selectedTag?.value?.name,
},
- tagFk: selectedTag.value.tagFk,
+ tagFk: selectedTag?.value?.tagFk,
})
);
search();
@@ -147,20 +132,52 @@ const removeTagChip = (selection, params, search) => {
search();
};
-const orderByParam = ref(null);
-
-const onOrderFieldChange = (value, params, search) => {
- const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
- params.orderBy = JSON.stringify(orderBy);
- search();
+const onOrderChange = (value, params) => {
+ const tagObj = JSON.parse(params.orderBy);
+ tagObj.way = value.name;
+ params.orderBy = JSON.stringify(tagObj);
};
-const onOrderChange = (value, params, search) => {
- const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
- params.orderBy = JSON.stringify(orderBy);
- search();
+const onOrderFieldChange = (value, params) => {
+ const tagObj = JSON.parse(params.orderBy); // esto donde va
+ const fields = {
+ Relevancy: (value) => value + ' DESC, name',
+ ColorAndPrice: 'showOrder, price',
+ Name: 'name',
+ Price: 'price',
+ };
+ let tagField = fields[value];
+ if (!tagField) return;
+
+ if (typeof tagField === 'function') tagField = tagField(value);
+ tagObj.field = tagField;
+ params.orderBy = JSON.stringify(tagObj);
+ switch (value) {
+ case 'Relevancy':
+ tagObj.field = value + ' DESC, name';
+ params.orderBy = JSON.stringify(tagObj);
+ console.log('params: ', params);
+ break;
+ case 'ColorAndPrice':
+ tagObj.field = 'showOrder, price';
+ params.orderBy = JSON.stringify(tagObj);
+ console.log('params: ', params);
+ break;
+ case 'Name':
+ tagObj.field = 'name';
+ params.orderBy = JSON.stringify(tagObj);
+ console.log('params: ', params);
+ break;
+ case 'Price':
+ tagObj.field = 'price';
+ params.orderBy = JSON.stringify(tagObj);
+ console.log('params: ', params);
+ break;
+ }
};
+const _moreFields = ['ASC', 'DESC'];
+const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
const setCategoryList = (data) => {
categoryList.value = (data || [])
.filter((category) => category.display)
@@ -168,6 +185,8 @@ const setCategoryList = (data) => {
...category,
icon: `vn:${(category.icon || '').split('-')[1]}`,
}));
+ moreFields.value = useLang(_moreFields);
+ moreFieldsOrder.value = useLang(_moreFieldsTypes);
};
const getCategoryClass = (category, params) => {
@@ -175,6 +194,20 @@ const getCategoryClass = (category, params) => {
return 'active';
}
};
+
+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,
+ };
+ });
+};
@@ -182,9 +215,9 @@ const getCategoryClass = (category, params) => {
@@ -274,40 +307,29 @@ const getCategoryClass = (category, params) => {
onOrderChange(value, params, searchFn)
- "
+ @update:model-value="(value) => onOrderChange(value, params)"
/>
onOrderFieldChange(value, params, searchFn)
- "
+ @update:model-value="(value) => onOrderFieldChange(value, params)"
/>
@@ -333,15 +355,30 @@ const getCategoryClass = (category, params) => {
:key="value"
class="q-mt-md filter-value"
>
- (tagOptions = data)"
/>
+ {
rounded
emit-value
use-input
- :disable="!selectedTag"
+ class="filter-input"
+ @new-value="createValue"
+ />
+
-
- (tagOptions = data)"
- />
-
{
rounded
type="button"
unelevated
- :disable="isButtonDisabled"
@click.stop="applyTagFilter(params, searchFn)"
/>
@@ -453,6 +489,12 @@ en:
tag: Tag
value: Value
order: Order
+ ASC: Ascendant
+ DESC: Descendant
+ Relevancy: Relevancy
+ ColorAndPrice: Color and price
+ Name: Name
+ Price: Price
es:
params:
type: Tipo
@@ -460,6 +502,14 @@ es:
tag: Etiqueta
value: Valor
order: Orden
+ ASC: Ascendiente
+ DESC: Descendiente
+ Relevancy: Relevancia
+ ColorAndPrice: Color y precio
+ Name: Nombre
+ Price: Precio
+ Order: Orden
+ Order by: Ordenar por
Plant: Planta
Flower: Flor
Handmade: Confección
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index 0e1005493..34e22915d 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -3,16 +3,14 @@ import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnLv from 'components/ui/VnLv.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-import { useSession } from 'composables/useSession';
import toCurrency from '../../../filters/toCurrency';
const DEFAULT_PRICE_KG = 0;
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
const { t } = useI18n();
defineProps({
@@ -29,14 +27,7 @@ const dialog = ref(null);