From 83fe8f897be38cb91b60f4c7f29b687eead37054 Mon Sep 17 00:00:00 2001 From: Denis Bykhov Date: Thu, 4 May 2023 08:41:05 +0600 Subject: [PATCH] TSK-1415 unify date selector (#3129) Signed-off-by: Denis Bykhov --- .../src/components/calendar/DatePicker.svelte | 3 +- .../calendar/DatePickerPopup.svelte | 144 ------------------ .../src/components/calendar/DatePopup.svelte | 32 +++- .../components/calendar/DatePresenter.svelte | 5 +- .../calendar/DateRangePicker.svelte | 11 +- .../components/calendar/DateRangePopup.svelte | 104 ++----------- .../calendar/DateRangePresenter.svelte | 117 ++++++-------- .../calendar/DateTimeRangePresenter.svelte | 3 +- .../ui/src/components/calendar/Shifts.svelte | 115 ++++++++++++++ packages/ui/src/index.ts | 1 - packages/ui/src/popups.ts | 62 +------- .../src/components/Workbench.svelte | 2 - 12 files changed, 205 insertions(+), 394 deletions(-) delete mode 100644 packages/ui/src/components/calendar/DatePickerPopup.svelte create mode 100644 packages/ui/src/components/calendar/Shifts.svelte diff --git a/packages/ui/src/components/calendar/DatePicker.svelte b/packages/ui/src/components/calendar/DatePicker.svelte index 090351ce79..5eb6074ee3 100644 --- a/packages/ui/src/components/calendar/DatePicker.svelte +++ b/packages/ui/src/components/calendar/DatePicker.svelte @@ -24,7 +24,6 @@ export let value: number | null | undefined = null export let withTime: boolean = false export let icon: 'normal' | 'warning' | 'overdue' = 'normal' - export let labelOver: IntlString | undefined = undefined export let labelNull: IntlString = ui.string.NoDate const dispatch = createEventDispatcher() @@ -42,6 +41,6 @@
- +
diff --git a/packages/ui/src/components/calendar/DatePickerPopup.svelte b/packages/ui/src/components/calendar/DatePickerPopup.svelte deleted file mode 100644 index 820b5d33d3..0000000000 --- a/packages/ui/src/components/calendar/DatePickerPopup.svelte +++ /dev/null @@ -1,144 +0,0 @@ - - - - -
unfocus(ev)} -> - {#if component} - _update(ev.detail)} - on:change={(ev) => _change(ev.detail)} - on:close={(ev) => _close(ev.detail)} - /> - {/if} -
- - diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte index 522fb323db..8eb3e877c8 100644 --- a/packages/ui/src/components/calendar/DatePopup.svelte +++ b/packages/ui/src/components/calendar/DatePopup.svelte @@ -23,12 +23,15 @@ import IconClose from '../icons/Close.svelte' import MonthSquare from './MonthSquare.svelte' import { daysInMonth } from './internal/DateUtils' + import Shifts from './Shifts.svelte' + import { DateRangeMode } from '@hcengineering/core' export let currentDate: Date | null export let withTime: boolean = false export let mondayStart: boolean = true export let label = currentDate != null ? ui.string.EditDueDate : ui.string.AddDueDate export let detail: IntlString | undefined = undefined + export let noShift: boolean = false const dispatch = createEventDispatcher() @@ -125,18 +128,20 @@ return result } - const saveDate = (): void => { + const saveDate = (withTime: boolean = false): void => { if (currentDate) { - currentDate.setHours(edits[3].value > 0 ? edits[3].value : 0) - currentDate.setMinutes(edits[4].value > 0 ? edits[4].value : 0) + if (!withTime) { + currentDate.setHours(edits[3].value > 0 ? edits[3].value : 0) + currentDate.setMinutes(edits[4].value > 0 ? edits[4].value : 0) + } currentDate.setSeconds(0, 0) viewDate = currentDate = currentDate dateToEdits() dispatch('update', currentDate) } } - const closeDP = (): void => { - if (!isNull()) saveDate() + const closeDP = (withTime: boolean = false): void => { + if (!isNull()) saveDate(withTime) else { currentDate = null dispatch('update', null) @@ -355,9 +360,24 @@
-
+ { + currentDate = evt.detail + closeDP(withTime) + }} + shift={!noShift} + mode={withTime ? DateRangeMode.DATETIME : DateRangeMode.DATE} +/> diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte index 97c89c13cb..0a9637bcb0 100644 --- a/packages/ui/src/components/calendar/DateRangePresenter.svelte +++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte @@ -13,23 +13,22 @@ // limitations under the License. --> - + diff --git a/packages/ui/src/components/calendar/Shifts.svelte b/packages/ui/src/components/calendar/Shifts.svelte new file mode 100644 index 0000000000..99832a4c41 --- /dev/null +++ b/packages/ui/src/components/calendar/Shifts.svelte @@ -0,0 +1,115 @@ + + + +{#if shift && currentDate} +
+ + {#each shiftValues as value} + {#if typeof value === 'number'} + {@const numValue = value} + +
{ + const curr = new Date().setSeconds(0, 0) + const shiftedDate = new Date(curr + numValue * base) + dispatch('change', shiftedDate) + }} + > + +
+ {:else if value === 'divider'} +
+ {/if} + {/each} + +
+{/if} + + diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index cdbba5e231..0fffdbcc6b 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -63,7 +63,6 @@ export { default as ColorPopup } from './components/ColorPopup.svelte' export { default as TextArea } from './components/TextArea.svelte' export { default as TextAreaEditor } from './components/TextAreaEditor.svelte' export { default as Section } from './components/Section.svelte' -export { default as DatePickerPopup } from './components/calendar/DatePickerPopup.svelte' export { default as DatePicker } from './components/calendar/DatePicker.svelte' export { default as DateRangePicker } from './components/calendar/DateRangePicker.svelte' export { default as DatePopup } from './components/calendar/DatePopup.svelte' diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts index 2e3f282404..50a7424e23 100644 --- a/packages/ui/src/popups.ts +++ b/packages/ui/src/popups.ts @@ -1,5 +1,5 @@ -import { DateRangeMode } from '@hcengineering/core' import { getResource } from '@hcengineering/platform' +import { ComponentType } from 'svelte' import { writable } from 'svelte/store' import type { AnyComponent, @@ -10,7 +10,6 @@ import type { PopupPositionElement, VerticalAlignment } from './types' -import { ComponentType } from 'svelte' export interface CompAndProps { id: string @@ -88,65 +87,6 @@ export function closePopup (category?: string): void { }) } -interface IDatePopup { - component: AnySvelteComponent | ComponentType | undefined - currentDate: Date | undefined - anchor: HTMLElement | undefined - popup: HTMLElement | undefined - frendlyFocus: HTMLElement[] | undefined - mode?: DateRangeMode - onClose?: (result: any) => void - onChange?: (result: any) => void - shift?: boolean -} - -export const dpstore = writable({ - component: undefined, - currentDate: undefined, - anchor: undefined, - popup: undefined, - frendlyFocus: undefined, - onClose: undefined, - onChange: undefined, - shift: undefined, - mode: undefined -}) - -export function showDatePopup ( - component: AnySvelteComponent | ComponentType | undefined, - currentDate: Date, - anchor?: HTMLElement, - popup?: HTMLElement, - frendlyFocus?: HTMLElement[] | undefined, - onClose?: (result: any) => void, - onChange?: (result: any) => void, - shift?: boolean -): void { - dpstore.set({ - component, - currentDate, - anchor, - popup, - frendlyFocus, - onClose, - onChange, - shift - }) -} - -export function closeDatePopup (): void { - dpstore.set({ - component: undefined, - currentDate: undefined, - anchor: undefined, - popup: undefined, - frendlyFocus: undefined, - onClose: undefined, - onChange: undefined, - shift: undefined - }) -} - /** * @public * diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 35b0b7e61d..d7dca9bfed 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -25,7 +25,6 @@ AnyComponent, CompAndProps, Component, - DatePickerPopup, Label, Location, PanelInstance, @@ -691,7 +690,6 @@ - {:else if employee}