From ff728e9dae3722a1118cd2f17c46e8e2820ef6c5 Mon Sep 17 00:00:00 2001 From: Maciej Kaczorowski Date: Wed, 29 Jul 2020 09:18:30 +0200 Subject: [PATCH] feature(core): clean code (#70) --- .../Content/GridAdvancedFilterDateContent.vue | 30 ++--------- .../Type/GridDateTypeAdvancedFilter.vue | 54 +++++++++++++++---- .../DatePicker/DateRangePickerContent.vue | 6 +-- 3 files changed, 51 insertions(+), 39 deletions(-) diff --git a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue index 9e5f25d78..b271c7eb2 100644 --- a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue +++ b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue @@ -23,7 +23,6 @@ import { DEFAULT_FORMAT, } from '@Core/models/calendar/calendar'; import { - format as formatDate, parse as parseDate, } from 'date-fns'; @@ -54,35 +53,14 @@ export default { const valueTo = this.value[FILTER_OPERATOR.SMALLER_OR_EQUAL]; return { - from: valueFrom - ? parseDate(valueFrom, this.dateFormat, new Date()) - : null, - to: valueTo - ? parseDate(valueTo, this.dateFormat, new Date()) - : null, + from: valueFrom, + to: valueTo, }; }, }, methods: { - onValueChange({ - from, to, - }) { - const dateFrom = from ? formatDate(from, this.dateFormat) : null; - const dateTo = to ? formatDate(to, this.dateFormat) : null; - - if (this.value[FILTER_OPERATOR.GREATER_OR_EQUAL] !== dateFrom - && dateFrom) { - this.$emit('input', { - key: FILTER_OPERATOR.GREATER_OR_EQUAL, - value: dateFrom, - }); - } else if (this.value[FILTER_OPERATOR.SMALLER_OR_EQUAL] !== dateTo - && dateTo) { - this.$emit('input', { - key: FILTER_OPERATOR.SMALLER_OR_EQUAL, - value: dateTo, - }); - } + onValueChange(payload) { + this.$emit('input', payload); }, onEmptyRecordChange(value) { this.$emit('input', { diff --git a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue index 993ff1f9d..e8c961573 100644 --- a/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue +++ b/modules/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue @@ -8,7 +8,6 @@ :value="filterValue" :hint="hint" :title="title" - :parameters="parameters" :filter-id="filter.id" @remove="onRemove" @swap="onSwap" @@ -34,9 +33,15 @@ import SelectDropdownApplyFooter from '@Core/components/Inputs/Select/DropDown/F import { FILTER_OPERATOR, } from '@Core/defaults/operators'; +import { + DEFAULT_FORMAT, +} from '@Core/models/calendar/calendar'; import { getParsedFilter, } from '@Core/models/mappers/gridDataMapper'; +import { + format as formatDate, +} from 'date-fns'; export default { name: 'GridDateTypeAdvancedFilter', @@ -59,8 +64,8 @@ export default { return { value: { isEmptyRecord: false, - [FILTER_OPERATOR.GREATER_OR_EQUAL]: '', - [FILTER_OPERATOR.SMALLER_OR_EQUAL]: '', + [FILTER_OPERATOR.GREATER_OR_EQUAL]: null, + [FILTER_OPERATOR.SMALLER_OR_EQUAL]: null, }, }; }, @@ -91,15 +96,32 @@ export default { return [ this.value[FILTER_OPERATOR.GREATER_OR_EQUAL], this.value[FILTER_OPERATOR.SMALLER_OR_EQUAL], - ].filter(value => value !== '') + ].filter(value => value) + .map(value => formatDate(value, this.parameters)) .join(' - '); }, }, methods: { onValueChange({ - key, value, + from, to, }) { - this.value[key] = value; + const value = { + [FILTER_OPERATOR.GREATER_OR_EQUAL]: null, + [FILTER_OPERATOR.SMALLER_OR_EQUAL]: null, + }; + + if (from) { + value[FILTER_OPERATOR.GREATER_OR_EQUAL] = from; + } + + if (to) { + value[FILTER_OPERATOR.SMALLER_OR_EQUAL] = to; + } + + this.value = { + ...this.value, + ...value, + }; }, onRemove(index) { this.$emit('remove', index); @@ -110,16 +132,30 @@ export default { onClear() { this.value = { isEmptyRecord: false, - [FILTER_OPERATOR.GREATER_OR_EQUAL]: '', - [FILTER_OPERATOR.SMALLER_OR_EQUAL]: '', + [FILTER_OPERATOR.GREATER_OR_EQUAL]: null, + [FILTER_OPERATOR.SMALLER_OR_EQUAL]: null, }; }, onApplyValue() { + const filterValue = { + ...this.value, + }; + + if (filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL]) { + const fromValue = formatDate(filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL], DEFAULT_FORMAT); + filterValue[FILTER_OPERATOR.GREATER_OR_EQUAL] = fromValue; + } + + if (filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL]) { + const toValue = formatDate(filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL], DEFAULT_FORMAT); + filterValue[FILTER_OPERATOR.SMALLER_OR_EQUAL] = toValue; + } + this.$emit('apply', { key: this.filter.id, value: getParsedFilter({ id: this.filter.id, - filter: this.value, + filter: filterValue, }), }); }, diff --git a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue index ec2bfd46e..e86060640 100644 --- a/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue +++ b/modules/@ergonode/core/src/components/Inputs/DatePicker/DateRangePickerContent.vue @@ -40,11 +40,8 @@ import { import { THEME, } from '@Core/defaults/theme'; -import calendar, { - CALENDAR_MONTHS, +import { DEFAULT_FORMAT, - getNextMonth, - getPreviousMonth, WEEK_DAYS, } from '@Core/models/calendar/calendar'; import { @@ -106,6 +103,7 @@ export default { return Object.values(WEEK_DAYS); }, fromHeader() { + console.log(this.value.from); if (this.value.from) { return `From ${formatDate(this.value.from, this.format)}`; }