Skip to content
This repository has been archived by the owner on Feb 13, 2023. It is now read-only.

Commit

Permalink
Merge pull request #472 from derpdead/range-picker-improve
Browse files Browse the repository at this point in the history 
Range picker improve
  • Loading branch information
@derpdead
derpdead authored Jul 29, 2020
2 parents a7ef6c2 + 9dd1ff7 commit 6607b8d
Show file tree
Hide file tree
Showing 14 changed files with 506 additions and 465 deletions.
33 changes: 4 additions & 29 deletions ...gonode/core/src/components/Grid/AdvancedFilters/Content/GridAdvancedFilterDateContent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@ import {
import {
DEFAULT_FORMAT,
} from '@Core/models/calendar/calendar';
import {
format as formatDate,
parse as parseDate,
} from 'date-fns';
export default {
name: 'GridAdvancedFilterDateContent',
Expand Down Expand Up @@ -54,35 +50,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', {
Expand Down
62 changes: 53 additions & 9 deletions ...es/@ergonode/core/src/components/Grid/AdvancedFilters/Type/GridDateTypeAdvancedFilter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
:value="filterValue"
:hint="hint"
:title="title"
:parameters="parameters"
:filter-id="filter.id"
@remove="onRemove"
@swap="onSwap"
Expand All @@ -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',
Expand All @@ -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,
},
};
},
Expand Down Expand Up @@ -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);
Expand All @@ -110,16 +132,38 @@ 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,
}),
});
},
Expand Down
148 changes: 51 additions & 97 deletions modules/@ergonode/core/src/components/Inputs/DatePicker/Calendar/DatePickerCalendar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,20 @@
* See LICENSE for license details.
*/
<template>
<div>
<template v-if="isCalendarDayType">
<DatePickerContentHeader :headers="weekDays" />
<DatePickerDays
:dates="calendarDates"
:selected-dates="parsedDate"
@select="onDaySelect" />
</template>
<template v-if="isCalendarMonthType">
<DatePickerContentHeader :headers="['Months']" />
<DatePickerMonths
:months="months"
:selected-month="parsedSelectedMonth"
:current-month="parsedCurrentMonth"
@select="onMonthSelect" />
</template>
<template v-if="isCalendarYearType">
<DatePickerContentHeader :headers="['Years']" />
<DatePickerYears
:years="years"
:selected-year="parsedSelectedYear"
:current-year="currentYear"
@select="onYearSelect" />
</template>
</div>
<Component
:is="nodesComponent.component"
v-bind="nodesComponent.props"
v-on="nodesComponent.listeners" />
</template>

<script>
import DatePickerContentHeader from '@Core/components/Inputs/DatePicker/DatePickerContentHeader';
import DatePickerDays from '@Core/components/Inputs/DatePicker/DatePickerDays';
import DatePickerMonth from '@Core/components/Inputs/DatePicker/DatePickerMonth';
import DatePickerMonths from '@Core/components/Inputs/DatePicker/DatePickerMonths';
import DatePickerYears from '@Core/components/Inputs/DatePicker/DatePickerYears';
import calendar, {
CALENDAR_MONTHS,
import {
getHeaderForCalendarDaysType,
getMonthIndex,
WEEK_DAYS,
} from '@Core/models/calendar/calendar';
import {
CALENDAR_TYPE,
Expand All @@ -48,13 +25,17 @@ import {
export default {
name: 'DatePickerCalendar',
components: {
DatePickerDays,
DatePickerMonth,
DatePickerContentHeader,
DatePickerMonths,
DatePickerYears,
},
props: {
date: {
value: {
type: Date,
default: null,
},
rangeValue: {
type: Date,
default: null,
},
Expand All @@ -66,83 +47,56 @@ export default {
type: Array,
required: true,
},
currentYear: {
type: Number,
required: true,
},
month: {
type: Number,
required: true,
},
currentMonth: {
type: Number,
required: true,
},
calendarType: {
type: String,
required: true,
},
},
data() {
return {
months: Object.values(CALENDAR_MONTHS),
};
},
computed: {
parsedDate() {
if (this.date) {
return [
new Date(this.date),
];
}
return [];
},
parsedCurrentMonth() {
if (this.year === this.currentYear) {
return Object.values(CALENDAR_MONTHS)[this.currentMonth];
nodesComponent() {
switch (this.calendarType) {
case CALENDAR_TYPE.DAY:
return {
component: DatePickerMonth,
props: {
value: this.value,
rangeValue: this.rangeValue,
month: this.month,
year: this.year,
},
listeners: {
select: this.onDaySelect,
},
};
case CALENDAR_TYPE.MONTH:
return {
component: DatePickerMonths,
props: {
value: this.value,
rangeValue: this.rangeValue,
year: this.year,
},
listeners: {
select: this.onMonthSelect,
},
};
default: return {
component: DatePickerYears,
props: {
value: this.value,
rangeValue: this.rangeValue,
nodes: this.years,
year: this.year,
},
listeners: {
select: this.onYearSelect,
},
};
}
return '';
},
parsedSelectedMonth() {
if (this.parsedDate.length) {
const [
date,
] = this.parsedDate;
if (date.getFullYear() === this.year) {
return this.months[date.getMonth()];
}
}
return '';
},
parsedSelectedYear() {
if (this.parsedDate.length) {
const [
date,
] = this.parsedDate;
return date.getFullYear();
}
return null;
},
weekDays() {
return Object.values(WEEK_DAYS);
},
calendarDates() {
return calendar(this.month, this.year);
},
isCalendarDayType() {
return this.calendarType === CALENDAR_TYPE.DAY;
},
isCalendarMonthType() {
return this.calendarType === CALENDAR_TYPE.MONTH;
},
isCalendarYearType() {
return this.calendarType === CALENDAR_TYPE.YEAR;
},
},
methods: {
Expand Down
Loading

0 comments on commit 6607b8d

Please sign in to comment.