From 0a8d0eb02795cd0a12022d071da9cc4c962216a2 Mon Sep 17 00:00:00 2001 From: RTnhN <43109787+RTnhN@users.noreply.github.com> Date: Sat, 1 Mar 2025 13:36:50 -0600 Subject: [PATCH 1/4] feat: add quick date shift buttons The buttons allow the user to shift the date by a day or a week. It also adds a today button to quickly go to today. --- src/components/InputTimeInterval.vue | 50 ++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue index 3ae61cf9..097749cd 100644 --- a/src/components/InputTimeInterval.vue +++ b/src/components/InputTimeInterval.vue @@ -37,6 +37,37 @@ div @click="applyRange" ) Apply + tr + td.pr-2 + label.col-form-label.col-form-label-sm Shift date + td + .btn-group.show-day-group(role="group") + input.btn.btn-light.btn-sm( + type="button", + value="-1w", + @click="shiftDay(-7); $event.target.blur()" + ) + input.btn.btn-light.btn-sm( + type="button", + value="-1d", + @click="shiftDay(-1); $event.target.blur()" + ) + input.btn.btn-light.btn-sm( + type="button", + value="Today", + @click="setToday(); $event.target.blur()" + ) + input.btn.btn-light.btn-sm( + type="button", + value="+1d", + @click="shiftDay(1); $event.target.blur()" + ) + input.btn.btn-light.btn-sm( + type="button", + value="+1w", + @click="shiftDay(7); $event.target.blur()" + ) + div.text-muted.d-none.d-md-block(style="text-align:right" v-if="showUpdate") b-button.mt-2.px-2(@click="refresh()", variant="outline-dark", size="sm", style="opacity: 0.7") icon(name="sync") @@ -154,6 +185,25 @@ export default { this.mode = 'last_duration'; this.valueChanged(); }, + setToday() { + const today = moment().format('YYYY-MM-DD'); + this.start = today; + this.end = today; + this.mode = 'range'; + this.duration = 0; + this.valueChanged(); + }, + shiftDay(days:number) { + let currentStart = this.start ? moment(this.start, 'YYYY-MM-DD') : moment(); + let currentEnd = this.end ? moment(this.end, 'YYYY-MM-DD') : moment(); + const newStart = currentStart.add(days, 'days').format('YYYY-MM-DD'); + const newEnd = currentEnd.add(days, 'days').format('YYYY-MM-DD'); + this.start = newStart; + this.end = newEnd; + this.mode = 'range'; + this.duration = 0; + this.valueChanged(); + }, }, }; From a6d6bb94a89273ef1b61522dbb104c8fc94ba6e8 Mon Sep 17 00:00:00 2001 From: RTnhN <43109787+RTnhN@users.noreply.github.com> Date: Sat, 1 Mar 2025 13:52:49 -0600 Subject: [PATCH 2/4] feat: autofill end date from start if blank --- src/components/InputTimeInterval.vue | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue index 097749cd..f0361116 100644 --- a/src/components/InputTimeInterval.vue +++ b/src/components/InputTimeInterval.vue @@ -27,9 +27,17 @@ div td.pr-2 label.col-form-label.col-form-label-sm Show from td - input.form-control.form-control-sm.d-inline-block.p-1(type="date", v-model="start", style="height: auto; width: auto;") + input.form-control.form-control-sm.d-inline-block.p-1( + type="date", + v-model="start", + style="height: auto; width: auto;" + ) label.col-form-label.col-form-label-sm.px-2 to - input.form-control.form-control-sm.d-inline.p-1(type="date", v-model="end", style="height: auto; width: auto") + input.form-control.form-control-sm.d-inline.p-1( + type="date", + v-model="end", + style="height: auto; width: auto" + ) td.text-right button.ml-2.btn.btn-outline-dark.btn-sm( type="button", @@ -145,6 +153,13 @@ export default { return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end)); }, }, + watch: { + start(newStart) { + if (!this.end) { + this.end = newStart; + } + }, + }, mounted() { this.duration = this.defaultDuration; this.valueChanged(); From bbc84f86528f9f5b247a2b5dd377bef7d8fbc924 Mon Sep 17 00:00:00 2001 From: RTnhN <43109787+RTnhN@users.noreply.github.com> Date: Sat, 1 Mar 2025 15:21:17 -0600 Subject: [PATCH 3/4] fix: fix linter warnings --- src/components/InputTimeInterval.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue index f0361116..4851f31a 100644 --- a/src/components/InputTimeInterval.vue +++ b/src/components/InputTimeInterval.vue @@ -208,9 +208,9 @@ export default { this.duration = 0; this.valueChanged(); }, - shiftDay(days:number) { - let currentStart = this.start ? moment(this.start, 'YYYY-MM-DD') : moment(); - let currentEnd = this.end ? moment(this.end, 'YYYY-MM-DD') : moment(); + shiftDay(days: number) { + const currentStart = this.start ? moment(this.start, 'YYYY-MM-DD') : moment(); + const currentEnd = this.end ? moment(this.end, 'YYYY-MM-DD') : moment(); const newStart = currentStart.add(days, 'days').format('YYYY-MM-DD'); const newEnd = currentEnd.add(days, 'days').format('YYYY-MM-DD'); this.start = newStart; From 00399bcd0901d3ba4f1cbc4f1416c0ca1dec8470 Mon Sep 17 00:00:00 2001 From: RTnhN <43109787+RTnhN@users.noreply.github.com> Date: Sat, 19 Apr 2025 12:23:57 -0500 Subject: [PATCH 4/4] Revert "feat: autofill end date from start if blank" This reverts commit a6d6bb94a89273ef1b61522dbb104c8fc94ba6e8. Due to the date picker for chrome, the filling in of the dates is really clunky and not user friendly. --- src/components/InputTimeInterval.vue | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue index 4851f31a..b98cfdb8 100644 --- a/src/components/InputTimeInterval.vue +++ b/src/components/InputTimeInterval.vue @@ -27,17 +27,9 @@ div td.pr-2 label.col-form-label.col-form-label-sm Show from td - input.form-control.form-control-sm.d-inline-block.p-1( - type="date", - v-model="start", - style="height: auto; width: auto;" - ) + input.form-control.form-control-sm.d-inline-block.p-1(type="date", v-model="start", style="height: auto; width: auto;") label.col-form-label.col-form-label-sm.px-2 to - input.form-control.form-control-sm.d-inline.p-1( - type="date", - v-model="end", - style="height: auto; width: auto" - ) + input.form-control.form-control-sm.d-inline.p-1(type="date", v-model="end", style="height: auto; width: auto") td.text-right button.ml-2.btn.btn-outline-dark.btn-sm( type="button", @@ -153,13 +145,6 @@ export default { return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end)); }, }, - watch: { - start(newStart) { - if (!this.end) { - this.end = newStart; - } - }, - }, mounted() { this.duration = this.defaultDuration; this.valueChanged();