From 949e93fe4b89ec7c7d22851bbd0c2e5b8d9d04b6 Mon Sep 17 00:00:00 2001 From: lorka1 Date: Tue, 7 Jan 2025 16:24:21 +0100 Subject: [PATCH 1/2] feat(date-range): added preset --- docs/docs/Form fields/date-range.md | 8 +- packages/demo/src/App.svelte | 14 +- .../src/FormFieldDemos/DateRangeDemo.svelte | 6 +- .../lib/src/form-fields/date-range/Day.svelte | 18 +- .../src/form-fields/date-range/Month.svelte | 12 +- .../src/form-fields/date-range/Year.svelte | 10 +- .../form-fields/date-range/date-range.pcss | 56 +- .../date-range/date-range.wc.svelte | 502 ++++++++++++------ 8 files changed, 421 insertions(+), 205 deletions(-) diff --git a/docs/docs/Form fields/date-range.md b/docs/docs/Form fields/date-range.md index 368e1d2e..07ec498b 100644 --- a/docs/docs/Form fields/date-range.md +++ b/docs/docs/Form fields/date-range.md @@ -25,10 +25,10 @@ import '../../static/c/date-range.css'; | displayFormatFunction | if `displayFormat`

is `custom` | `(date:Date) => string` | custom display format function | | minDate | | `string \| Date ` | earliest date that can be selected by the user. | | maxDate | | `string \| Date ` | last date that can be selected by the user. | -| maxSelectibleDays | | `number` | number of days that can be in range | -| minSelectibleDays | | `number` | number of days that must be in range | -| maxDateSelectible | | `Date` | Automatically set based on the value of maxSelectibleDays | -| minDateSelectible | | `Date` | Automatically set based on the value of maxSelectibleDays | +| maxSelectableDays | | `number` | number of days that can be in range | +| minSelectableDays | | `number` | number of days that must be in range | +| maxDateSelectable | | `Date` | Automatically set based on the value of maxSelectableDays | +| minDateSelectable | | `Date` | Automatically set based on the value of maxSelectableDays |

**** diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 7eea0105..160bbb27 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -12,8 +12,8 @@ /*import AutocompleteDemo from './FormFieldDemos/AutocompleteDemo.svelte'; import CheckboxDemo from './FormFieldDemos/CheckboxDemo.svelte'; import ChipsDemo from './FormFieldDemos/ChipsDemo.svelte'; - import CkEditorDemo from './FormFieldDemos/CkEditorDemo.svelte'; - import DateRangeDemo from './FormFieldDemos/DateRangeDemo.svelte'; + import CkEditorDemo from './FormFieldDemos/CkEditorDemo.svelte'; */ + import DateRangeDemo from './FormFieldDemos/DateRangeDemo.svelte'; /* import DatepickerDemo from './FormFieldDemos/DatepickerDemo.svelte'; import FileListDemo from './FormFieldDemos/FileListDemo.svelte'; import FileUploadDemo from './FormFieldDemos/FileUploadDemo.svelte'; @@ -22,9 +22,9 @@ import MultiSelectDemo from './FormFieldDemos/MultiSelectDemo.svelte'; import QuillDemo from './FormFieldDemos/QuillDemo.svelte'; import RadioDemo from './FormFieldDemos/RadioDemo.svelte'; - import RangeDemo from './FormFieldDemos/RangeDemo.svelte'; + import RangeDemo from './FormFieldDemos/RangeDemo.svelte'; import SelectDemo from './FormFieldDemos/SelectDemo.svelte'; - import SliderDemo from './FormFieldDemos/SliderDemo.svelte'; + import SliderDemo from './FormFieldDemos/SliderDemo.svelte'; import TextareaDemo from './FormFieldDemos/TextareaDemo.svelte'; import ToggleDemo from './FormFieldDemos/ToggleDemo.svelte'; //EDITORS @@ -87,17 +87,17 @@ - + - + - + diff --git a/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte b/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte index 2121fb20..b364dad7 100644 --- a/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte +++ b/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte @@ -14,11 +14,11 @@ - - + + - + diff --git a/packages/lib/src/form-fields/date-range/Day.svelte b/packages/lib/src/form-fields/date-range/Day.svelte index 714f6e3e..51b1a0e0 100644 --- a/packages/lib/src/form-fields/date-range/Day.svelte +++ b/packages/lib/src/form-fields/date-range/Day.svelte @@ -12,10 +12,10 @@ export let firstInternalValue = ''; export let secondInternalValue = ''; export let selectingFirst: boolean; - export let maxSelectibleDays: number; - export let minSelectibleDays: number; - export let maxDateSelectible: Date; - export let minDateSelectible: Date; + export let maxSelectableDays: number; + export let minSelectableDays: number; + export let maxDateSelectable: Date; + export let minDateSelectable: Date; let isOutOfBonuds: boolean; const dispatch = createEventDispatcher(); @@ -62,9 +62,9 @@ day: number, selectingFirst: boolean ) { - if (!selectingFirst && maxSelectibleDays) { + if (!selectingFirst && maxSelectableDays) { const potentialDate = new Date(year, month, day); - if (potentialDate > maxDateSelectible || potentialDate < minDateSelectible) { + if (potentialDate > maxDateSelectable || potentialDate < minDateSelectable) { return true; } } @@ -83,7 +83,7 @@ if ( ((potentialDate < minDateAfter && potentialDate > datePicked) || (potentialDate > minDateBefore && potentialDate < datePicked)) && - minSelectibleDays + minSelectableDays ) { return true; } @@ -91,8 +91,8 @@ return false; } - $: minDateBefore = calculateLimits.calculateRequiredBefore(firstInternalValue, minSelectibleDays); - $: minDateAfter = calculateLimits.calculateRequiredAfter(firstInternalValue, minSelectibleDays); + $: minDateBefore = calculateLimits.calculateRequiredBefore(firstInternalValue, minSelectableDays); + $: minDateAfter = calculateLimits.calculateRequiredAfter(firstInternalValue, minSelectableDays); $: isOutOfBonuds = isDateOutOfSelectableBounds(col.year, col.month, col.day, selectingFirst) || diff --git a/packages/lib/src/form-fields/date-range/Month.svelte b/packages/lib/src/form-fields/date-range/Month.svelte index eca1f798..e2ef4d38 100644 --- a/packages/lib/src/form-fields/date-range/Month.svelte +++ b/packages/lib/src/form-fields/date-range/Month.svelte @@ -12,9 +12,9 @@ export let secondMonthSelected: number | string | null; export let firstMonthSelected: number | string | null; export let selectingFirst: boolean; - export let maxSelectibleDays: number; - export let maxDateSelectible: Date; - export let minDateSelectible: Date; + export let maxSelectableDays: number; + export let maxDateSelectable: Date; + export let minDateSelectable: Date; const dispatch = createEventDispatcher(); function handleClick() { @@ -28,10 +28,10 @@ month: number, selectingFirst: boolean ): boolean { - if (!selectingFirst && maxSelectibleDays) { + if (!selectingFirst && maxSelectableDays) { if ( - (year >= maxDateSelectible.getFullYear() && month > maxDateSelectible.getMonth()) || - (month < minDateSelectible.getMonth() && year <= minDateSelectible.getFullYear()) + (year >= maxDateSelectable.getFullYear() && month > maxDateSelectable.getMonth()) || + (month < minDateSelectable.getMonth() && year <= minDateSelectable.getFullYear()) ) { return true; } diff --git a/packages/lib/src/form-fields/date-range/Year.svelte b/packages/lib/src/form-fields/date-range/Year.svelte index 613c5e4b..568df194 100644 --- a/packages/lib/src/form-fields/date-range/Year.svelte +++ b/packages/lib/src/form-fields/date-range/Year.svelte @@ -9,9 +9,9 @@ export let firstYearSelected: number | null; export let secondYearSelected: number | null; export let selectingFirst: boolean; - export let maxSelectibleDays: number; - export let maxDateSelectible: Date; - export let minDateSelectible: Date; + export let maxSelectableDays: number; + export let maxDateSelectable: Date; + export let minDateSelectable: Date; const dispatch = createEventDispatcher(); function handleClick() { @@ -21,8 +21,8 @@ } function isYearOutOfSelectableBounds(year: number, selectingFirst: boolean): boolean { - if (!selectingFirst && maxSelectibleDays) { - if (year > maxDateSelectible.getFullYear() || year < minDateSelectible.getFullYear()) { + if (!selectingFirst && maxSelectableDays) { + if (year > maxDateSelectable.getFullYear() || year < minDateSelectable.getFullYear()) { return true; } } diff --git a/packages/lib/src/form-fields/date-range/date-range.pcss b/packages/lib/src/form-fields/date-range/date-range.pcss index c39a468d..9eb48c81 100644 --- a/packages/lib/src/form-fields/date-range/date-range.pcss +++ b/packages/lib/src/form-fields/date-range/date-range.pcss @@ -93,11 +93,54 @@ left: 0; right: 0; bottom: 0; + + &-content { + position: absolute; + display: flex; + flex-direction: row; + box-shadow: 0 6px 9px rgba(0, 0, 0, 0.16); + background-color: var(--background-primary); + } + } + + &-presets { + z-index: 100; + display: flex; + flex-direction: column; + justify-content: center; + max-width: calc(280px + 2rem); + max-height: 395px; + padding: 1rem; + overflow-y: auto; + border-bottom-right-radius: 0.25rem; + background-color: var(--background-primary); + box-sizing: border-box; + + > button { + display: flex; + justify-content: space-between; + align-items: center; + border: none; + gap: 0.75rem; + padding: 0.75rem; + text-align: left; + outline: none; + background-color: var(--background-primary); + border-radius: 0.25rem; + + &:hover { + background-color: var(--background-secondary); + } + + &:focus{ + background-color: var(--primary-color); + color: var(--text-on-primary); + } + } } &-menu { z-index: 100; - position: absolute; display: flex; flex-direction: column; max-width: calc(280px + 2rem); @@ -105,8 +148,6 @@ padding: 1rem; overflow-y: auto; border-bottom-left-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - box-shadow: 0 6px 9px rgba(0, 0, 0, 0.16); background-color: var(--background-primary); box-sizing: border-box; @@ -181,19 +222,20 @@ &-cell { & button { flex: 1 1 0; - padding: 0.25rem 1rem; + padding: 0.5rem 1rem; width: 100%; border: 0; - border-radius: 50%; + border-radius: 999px; + background-color: transparent; &:not(:disabled):hover { background-color: var(--primary-color); color: var(--text-on-primary); } } - + &-active { - background-color: var(--primary-color); + background-color: var(--primary-color) !important; color: var(--text-on-primary); } diff --git a/packages/lib/src/form-fields/date-range/date-range.wc.svelte b/packages/lib/src/form-fields/date-range/date-range.wc.svelte index 071ba951..7ea93cc3 100644 --- a/packages/lib/src/form-fields/date-range/date-range.wc.svelte +++ b/packages/lib/src/form-fields/date-range/date-range.wc.svelte @@ -52,10 +52,11 @@ export let minDate: string | Date; export let maxDate: string | Date; export let selectingFirst = true; - export let maxSelectibleDays: number; - export let minSelectibleDays: number; - export let maxDateSelectible: Date; - export let minDateSelectible: Date; + export let maxSelectableDays: number; + export let minSelectableDays: number; + export let maxDateSelectable: Date; + export let minDateSelectable: Date; + export let enablePreset: boolean = true; let firstSelectedDateObject = new Date(); let secondSelectedDateObject = new Date(); let displayedDateString = ''; @@ -91,6 +92,158 @@ 'Dec' ]; let yearPickerIndex = 0; + let presetLabels = [ + 'Today', + 'Yesterday', + 'Last 7 days', + 'Last 30 days', + 'Last 90 days', + 'Last 12 months', + 'Last year', + 'This year' + ]; + + + function handlePresets(label: string) { + const date = new Date(); + const internalMinDate = minDate ? (minDate instanceof Date ? minDate : new Date(minDate)) : null; + const internalMaxDate = maxDate ? (maxDate instanceof Date ? maxDate : new Date(maxDate)) : null; + + if (label == 'Today') { + const isDateInBounds = (internalMinDate && date.getTime() < internalMinDate.getTime()) || (internalMaxDate && date.getTime() > internalMaxDate.getTime()); + if ((!isDateInBounds || !internalMaxDate && !internalMinDate)) { + firstDateSelected = date.getDate(); + firstMonthSelected = date.getMonth(); + firstYearSelected = date.getFullYear(); + secondDateSelected = date.getDate(); + secondMonthSelected = date.getMonth(); + secondYearSelected = date.getFullYear(); + + pickerMonth = date.getMonth(); + pickerYear = date.getFullYear(); + } + } + if (label == 'Yesterday') { + const yesterday = new Date(date); + yesterday.setDate(date.getDate() - 1); + const isDateInBounds = (internalMinDate && yesterday.getTime() < internalMinDate.getTime()) || (internalMaxDate && yesterday.getTime() > internalMaxDate.getTime()); + if ((!isDateInBounds || !internalMaxDate && !internalMinDate)) { + firstDateSelected = yesterday.getDate(); + firstMonthSelected = yesterday.getMonth(); + firstYearSelected = yesterday.getFullYear(); + secondDateSelected = yesterday.getDate(); + secondMonthSelected = yesterday.getMonth(); + secondYearSelected = yesterday.getFullYear(); + + pickerMonth = yesterday.getMonth(); + pickerYear = yesterday.getFullYear(); + } + } + if (label == 'Last 7 days') { + const sevenDaysAgo = new Date(date); + sevenDaysAgo.setDate(date.getDate() - 7); + if (isOutOfMaxBounds(sevenDaysAgo, sevenDaysAgo.getFullYear(), sevenDaysAgo.getMonth(), sevenDaysAgo.getDate())) { + console.log('blob'); + if (isOutOfMinBounds(sevenDaysAgo, sevenDaysAgo.getFullYear(), sevenDaysAgo.getMonth(), sevenDaysAgo.getDate())) { + firstDateSelected = sevenDaysAgo.getDate(); + firstMonthSelected = sevenDaysAgo.getMonth(); + firstYearSelected = sevenDaysAgo.getFullYear(); + secondDateSelected = date.getDate(); + secondMonthSelected = date.getMonth(); + secondYearSelected = date.getFullYear(); + + pickerMonth = sevenDaysAgo.getMonth(); + pickerYear = sevenDaysAgo.getFullYear(); + } else { + //neki dani su ne selectani ali neki jesu pa trebamo nac maxdate i sam selectat do tog + console.log('njama'); + firstDateSelected = sevenDaysAgo.getDate(); + firstMonthSelected = sevenDaysAgo.getMonth(); + firstYearSelected = sevenDaysAgo.getFullYear(); + secondDateSelected = internalMaxDate.getDate(); + secondMonthSelected = internalMaxDate.getMonth(); + secondYearSelected = internalMaxDate.getFullYear(); + + pickerMonth = sevenDaysAgo.getMonth(); + pickerYear = sevenDaysAgo.getFullYear(); + } + } + } + if (label == 'Last 30 days') { + const thirtyDaysAgo = new Date(date); + thirtyDaysAgo.setDate(date.getDate() - 30); + + firstDateSelected = thirtyDaysAgo.getDate(); + firstMonthSelected = thirtyDaysAgo.getMonth(); + firstYearSelected = thirtyDaysAgo.getFullYear(); + secondDateSelected = date.getDate(); + secondMonthSelected = date.getMonth(); + secondYearSelected = date.getFullYear(); + + pickerMonth = thirtyDaysAgo.getMonth(); + pickerYear = thirtyDaysAgo.getFullYear(); + } + if (label == 'Last 90 days') { + const nintyDaysAgo = new Date(date); + nintyDaysAgo.setDate(date.getDate() - 90); + + firstDateSelected = nintyDaysAgo.getDate(); + firstMonthSelected = nintyDaysAgo.getMonth(); + firstYearSelected = nintyDaysAgo.getFullYear(); + secondDateSelected = date.getDate(); + secondMonthSelected = date.getMonth(); + secondYearSelected = date.getFullYear(); + + pickerMonth = nintyDaysAgo.getMonth(); + pickerYear = nintyDaysAgo.getFullYear(); + } + if (label == 'Last 12 months') { + const twelveMonthsAgo = new Date(date.getFullYear(), date.getMonth(), date.getDate()); + twelveMonthsAgo.setMonth(date.getMonth() - 12); + + firstDateSelected = twelveMonthsAgo.getDate(); + firstMonthSelected = twelveMonthsAgo.getMonth(); + firstYearSelected = twelveMonthsAgo.getFullYear(); + secondDateSelected = date.getDate(); + secondMonthSelected = date.getMonth(); + secondYearSelected = date.getFullYear(); + + pickerMonth = twelveMonthsAgo.getMonth(); + pickerYear = twelveMonthsAgo.getFullYear(); + } + if (label == 'Last year') { + const firstDayOfLastYear = new Date(date.getFullYear() - 1, 0, 1); + + const lastDayOfLastYear = new Date( + firstDayOfLastYear.getFullYear(), + firstDayOfLastYear.getMonth() + 12, + 0 + ); + + firstDateSelected = firstDayOfLastYear.getDate(); + firstMonthSelected = firstDayOfLastYear.getMonth(); + firstYearSelected = firstDayOfLastYear.getFullYear(); + secondDateSelected = lastDayOfLastYear.getDate(); + secondMonthSelected = lastDayOfLastYear.getMonth(); + secondYearSelected = lastDayOfLastYear.getFullYear(); + + pickerMonth = firstDayOfLastYear.getMonth(); + pickerYear = firstDayOfLastYear.getFullYear(); + } + if (label == 'This year') { + const firstDayOfThisYear = new Date(date.getFullYear(), 0, 1); + + firstDateSelected = firstDayOfThisYear.getDate(); + firstMonthSelected = firstDayOfThisYear.getMonth(); + firstYearSelected = firstDayOfThisYear.getFullYear(); + secondDateSelected = date.getDate(); + secondMonthSelected = date.getMonth(); + secondYearSelected = date.getFullYear(); + + pickerMonth = firstDayOfThisYear.getMonth(); + pickerYear = firstDayOfThisYear.getFullYear(); + } + } function handleYearSelected(event: { detail: { year: any } }) { const { year } = event.detail; @@ -215,7 +368,7 @@ ) { return ( isOutOfMinBounds(internalMinDate, year, month, day) || - (minDateAllowed > new Date(year, month, day) && !selectingFirst && maxSelectibleDays) + (minDateAllowed > new Date(year, month, day) && !selectingFirst && maxSelectableDays) ); } @@ -229,7 +382,7 @@ ) { return ( isOutOfMaxBounds(internalMaxDate, year, month, day) || - (maxDateAllowed < new Date(year, month, day) && !selectingFirst && maxSelectibleDays) + (maxDateAllowed < new Date(year, month, day) && !selectingFirst && maxSelectableDays) ); } @@ -259,8 +412,8 @@ openPicker = !openPicker; } - $: maxDateSelectible = calculateMaxDate(firstInternalValue, maxSelectibleDays); - $: minDateSelectible = calculateMinDate(firstInternalValue, maxSelectibleDays); + $: maxDateSelectable = calculateMaxDate(firstInternalValue, maxSelectableDays); + $: minDateSelectable = calculateMinDate(firstInternalValue, maxSelectableDays); $: internalMinDate = minDate ? (minDate instanceof Date ? minDate : new Date(minDate)) : null; $: internalMaxDate = maxDate ? (maxDate instanceof Date ? maxDate : new Date(maxDate)) : null; @@ -270,7 +423,7 @@ pickerYear, pickerMonth, 1, - minDateSelectible, + minDateSelectable, selectingFirst ); $: internalMaxMonthCheck = checkMaxBounds( @@ -278,7 +431,7 @@ pickerYear, pickerMonth, 31, - maxDateSelectible, + maxDateSelectable, selectingFirst ); @@ -287,7 +440,7 @@ pickerYear, 0, 1, - minDateSelectible, + minDateSelectable, selectingFirst ); $: internalMaxYearCheck = checkMaxBounds( @@ -295,7 +448,7 @@ pickerYear, 11, 31, - maxDateSelectible, + maxDateSelectable, selectingFirst ); @@ -304,7 +457,7 @@ 2024 + yearPickerIndex * 4 * 6, 0, 1, - minDateSelectible, + minDateSelectable, selectingFirst ); $: internalMaxYearPageCheck = checkMaxBounds( @@ -312,7 +465,7 @@ 2024 + yearPickerIndex * 4 * 6, 11, 31, - maxDateSelectible, + maxDateSelectable, selectingFirst ); @@ -459,195 +612,216 @@ {#if openPicker}