From 1700006c3ab68eb2438caa68427b110001dc1c66 Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Tue, 29 Mar 2022 17:29:53 +0300 Subject: [PATCH] Update DatePicker, DatePresenter. (#1221) Signed-off-by: Alexander Platov --- .../presentation/src/components/Card.svelte | 2 +- .../src/components/StyledTextBox.svelte | 9 +- packages/theme/styles/_layouts.scss | 19 +- packages/theme/styles/components.scss | 82 ++-- packages/ui/src/components/DatePicker.svelte | 80 ---- packages/ui/src/components/DatePopup.svelte | 335 -------------- .../ui/src/components/DatePresenter.svelte | 57 --- packages/ui/src/components/EditBox.svelte | 2 +- packages/ui/src/components/Tooltip.svelte | 3 +- .../ui/src/components/TooltipInstance.svelte | 19 +- .../src/components/calendar/DatePicker.svelte | 39 ++ .../src/components/calendar/DatePopup.svelte | 206 +++++++++ .../components/calendar/DatePresenter.svelte | 415 ++++++++++++++++++ .../{ => calendar}/DateTimePresenter.svelte | 7 +- .../components/calendar/MonthCalendar.svelte | 14 +- .../src/components/calendar/TimePopup.svelte | 56 +++ .../components/calendar/YearCalendar.svelte | 10 - .../calendar/icons/DPCalendar.svelte | 8 + .../components/calendar/icons/DPClock.svelte | 9 + .../calendar/icons/DPClockBold.svelte | 8 + .../components/calendar/icons/DPEnd.svelte | 9 + .../components/calendar/icons/DPStart.svelte | 9 + .../components/calendar/internal/DateUtils.ts | 24 +- packages/ui/src/index.ts | 9 +- packages/ui/src/tooltips.ts | 12 +- packages/ui/src/types.ts | 9 +- .../src/components/DateTimePresenter.svelte | 2 +- .../src/components/EditReminder.svelte | 6 +- .../src/components/Hour.svelte | 2 +- .../src/components/ReminderPresenter.svelte | 2 +- .../activity/ReminderViewlet.svelte | 2 +- .../src/components/review/CreateReview.svelte | 76 ++-- .../src/components/review/EditReview.svelte | 15 - .../activity/TxIntegrationDisable.svelte | 2 +- .../src/components/todos/CreateTodo.svelte | 4 +- .../src/components/todos/EditTodo.svelte | 6 +- .../components/todos/TodoItemsPopup.svelte | 16 +- .../src/components/DateEditor.svelte | 34 +- .../src/components/DatePresenter.svelte | 16 +- .../src/components/Workbench.svelte | 10 +- tests/sanity/tests/recruit.spec.ts | 12 +- 41 files changed, 938 insertions(+), 719 deletions(-) delete mode 100644 packages/ui/src/components/DatePicker.svelte delete mode 100644 packages/ui/src/components/DatePopup.svelte delete mode 100644 packages/ui/src/components/DatePresenter.svelte create mode 100644 packages/ui/src/components/calendar/DatePicker.svelte create mode 100644 packages/ui/src/components/calendar/DatePopup.svelte create mode 100644 packages/ui/src/components/calendar/DatePresenter.svelte rename packages/ui/src/components/{ => calendar}/DateTimePresenter.svelte (77%) create mode 100644 packages/ui/src/components/calendar/TimePopup.svelte create mode 100644 packages/ui/src/components/calendar/icons/DPCalendar.svelte create mode 100644 packages/ui/src/components/calendar/icons/DPClock.svelte create mode 100644 packages/ui/src/components/calendar/icons/DPClockBold.svelte create mode 100644 packages/ui/src/components/calendar/icons/DPEnd.svelte create mode 100644 packages/ui/src/components/calendar/icons/DPStart.svelte diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte index 6b77319c83..859f9564ea 100644 --- a/packages/presentation/src/components/Card.svelte +++ b/packages/presentation/src/components/Card.svelte @@ -41,7 +41,7 @@ const dispatch = createEventDispatcher() -
{} }> + {} }>
{#if $$slots.error} diff --git a/packages/text-editor/src/components/StyledTextBox.svelte b/packages/text-editor/src/components/StyledTextBox.svelte index 418054b05b..c7ed068ed9 100644 --- a/packages/text-editor/src/components/StyledTextBox.svelte +++ b/packages/text-editor/src/components/StyledTextBox.svelte @@ -131,15 +131,12 @@ pointer-events: none; user-select: none; } - .emphasized .emphasized-focus + .label { - top: 0.5rem; - } } .emphasized { padding: 1rem; background-color: var(--theme-bg-accent-color); border: 1px solid var(--theme-bg-accent-hover); - border-radius: 0.75rem; + border-radius: .5rem; &.emphasized-focus { background-color: var(--theme-bg-focused-color); border-color: var(--theme-bg-focused-border); @@ -149,9 +146,5 @@ overflow: auto; flex-grow: 1; line-height: 150%; - - .nolabel { - padding-top: 0; - } } diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index cb347455bd..5858cfe442 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -49,6 +49,7 @@ input { background-color: transparent; outline: none; color: var(--theme-caption-color); + &.wrong-input { background-color: var(--system-error-color) !important; } } audio, canvas, embed, iframe, img, object, svg, video { display: block; @@ -108,10 +109,8 @@ p:last-child { margin-block-end: 0; } .inline-flex { display: inline-flex; } .flex-grow { flex-grow: 1; } .flex-no-shrink { flex-shrink: 0; } -.flex-nowrap { - display: flex; - flex-wrap: nowrap; -} +.flex-wrap { flex-wrap: wrap; } +.flex-nowrap { flex-wrap: nowrap; } .flex-baseline { display: inline-flex; align-items: baseline; @@ -141,9 +140,6 @@ p:last-child { margin-block-end: 0; } align-items: stretch; flex-wrap: nowrap; } -.flex-wrap { - flex-wrap: wrap; -} .flex-row-top { display: flex; align-items: flex-start; @@ -297,6 +293,8 @@ p:last-child { margin-block-end: 0; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } +.mx-1 { margin: 0 .125rem; } +.mx-2 { margin: 0 .25rem; } .pr-1 { padding-right: .25rem; } .pr-4 { padding-right: 1rem; } @@ -305,6 +303,7 @@ p:last-child { margin-block-end: 0; } .p-10 { padding: 2.5rem; } /* --------- */ +.no-word-wrap { word-wrap: none; } .relative { position: relative; } .abs-lt-content { position: absolute; @@ -344,8 +343,8 @@ p:last-child { margin-block-end: 0; } .h-2 { height: .5rem; } .h-9 { height: 2.25rem; } .w-full { width: 100%; } -.w-2125rem {width: 21.25rem; } -.w-4125rem {width: 41.25rem; } +.w-85 {width: 21.25rem; } +.w-165 {width: 41.25rem; } .min-w-0 { min-width: 0; } .min-h-0 { min-height: 0; } .clear-mins { @@ -433,6 +432,8 @@ a.no-line { overflow: hidden; white-space: pre-wrap; width: max-content; + user-select: none; + min-width: auto; } .overflow-label { white-space: nowrap; diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index e2ea819783..3b0185a03d 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -466,26 +466,17 @@ & > .icon { color: var(--theme-caption-color); } } - .label, .result { + .label { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; user-select: none; + min-width: 0; - } - .label { font-size: .75rem; font-weight: 500; color: var(--theme-content-accent-color); } - .result { - &.selected { color: var(--theme-caption-color); } - &.not-selected { color: var(--theme-content-dark-color); } - &.highlight { - font-weight: 500; - font-size: 1rem; - } - } .group { display: flex; @@ -494,20 +485,6 @@ margin-left: .75rem; min-height: 0; } - - .divider { - margin: 0 .125rem; - font-weight: 500; - font-size: .75em; - color: var(--theme-content-dark-color); - - &.inter { font-size: 1em; } - &.max { - margin: 0 .5rem; - font-size: .75rem; - color: var(--theme-content-trans-color); - } - } } /* Wraps */ @@ -518,23 +495,48 @@ flex-wrap: nowrap; min-width: 0; - &::after, &::before { - position: absolute; - width: 6px; - height: 6px; - background-color: var(--primary-button-enabled); - } - &::before { - top: -2px; - left: -4px; - clip-path: path('M0,6v-6h6v1h-5v5z'); - } - &::after { - bottom: -2px; - right: -4px; - clip-path: path('M0,6h6v-6h-1v5h-5z'); + &.conners { + &::after, &::before { + position: absolute; + width: 6px; + height: 6px; + background-color: var(--primary-button-enabled); + } + &::before { + top: -2px; + left: -4px; + clip-path: path('M0,6v-6h6v1h-5v5z'); + } + &::after { + bottom: -2px; + right: -4px; + clip-path: path('M0,6h6v-6h-1v5h-5z'); + } } &.wraped::before, &.wraped::after { content: ''; } &.focusWI:focus-within::before, &.focusWI:focus-within::after { content: ''; } &.focus:focus::before, &.focus:focus::after { content: ''; } + + .result { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + user-select: none; + min-width: 0; + + &.selected { color: var(--theme-caption-color); } + &.not-selected { color: var(--theme-content-dark-color); } + &.highlight { + font-weight: 500; + font-size: 1rem; + } + } + + .divider { + font-weight: 500; + font-size: .75em; + color: var(--theme-content-dark-color); + + &.inter { font-size: 1em; } + } } diff --git a/packages/ui/src/components/DatePicker.svelte b/packages/ui/src/components/DatePicker.svelte deleted file mode 100644 index 67bf08852e..0000000000 --- a/packages/ui/src/components/DatePicker.svelte +++ /dev/null @@ -1,80 +0,0 @@ - - - -
{ - btn.focus() - if (!opened) { - opened = true - showPopup(DatePopup, { title, value, withTime }, container, (ev) => { - changeValue(ev) - opened = false - }, changeValue) - } - }} -> - -
- - {#if value != null} - - {:else} - - {/if} -
-
diff --git a/packages/ui/src/components/DatePopup.svelte b/packages/ui/src/components/DatePopup.svelte deleted file mode 100644 index fde04124a2..0000000000 --- a/packages/ui/src/components/DatePopup.svelte +++ /dev/null @@ -1,335 +0,0 @@ - - - - -
-
-
-
- -
- {monthYear} -
- -
-
- -
-
Mo
-
Tu
-
We
-
Th
-
Fr
-
Sa
-
Su
- {#each days as day, i} -
{ - result = new Date(view.getFullYear(), view.getMonth(), i + 1, view.getHours(), view.getMinutes()) - view = value = result - if (withTime) { - dispatch('update', result) - hourDiv.focus() - } else dispatch('close', result) - }} - > - {i + 1} -
- {/each} -
- {#if withTime} -
-
-
-
-
- -
:
- -
-
- {/if} -
- - diff --git a/packages/ui/src/components/DatePresenter.svelte b/packages/ui/src/components/DatePresenter.svelte deleted file mode 100644 index 85e3484c28..0000000000 --- a/packages/ui/src/components/DatePresenter.svelte +++ /dev/null @@ -1,57 +0,0 @@ - - - -{#if value !== undefined} -
- - {#if value === null}--{:else}{inter ? value.getDate() : value.getMonth() + 1}{/if} - - {inter ? '.' : '/'} - - {#if value === null}--{:else}{inter ? value.getMonth() + 1 : value.getDate()}{/if} - - {inter ? '.' : '/'} - - {#if value === null}--{:else}{value.getFullYear()}{/if} - - {#if withTime} - — - - {#if value === null}--{:else}{zeroLead(value.getHours())}{/if} - - : - - {#if value === null}--{:else}{zeroLead(value.getMinutes())}{/if} - - {/if} -
-{/if} diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte index 996e5c6f4b..ed096503d4 100644 --- a/packages/ui/src/components/EditBox.svelte +++ b/packages/ui/src/components/EditBox.svelte @@ -75,7 +75,7 @@
{/if} -
+
{#if format === 'password'} ev.target && computeSize(ev.target)} on:change/> {:else if format === 'number'} diff --git a/packages/ui/src/components/Tooltip.svelte b/packages/ui/src/components/Tooltip.svelte index 0981db6365..838c49e498 100644 --- a/packages/ui/src/components/Tooltip.svelte +++ b/packages/ui/src/components/Tooltip.svelte @@ -22,6 +22,7 @@ export let component: AnySvelteComponent | AnyComponent | undefined = undefined export let props: any | undefined = undefined export let anchor: HTMLElement | undefined = undefined + export let onUpdate: ((result: any) => void) | undefined = undefined export let fill = false let triggerHTML: HTMLElement @@ -34,7 +35,7 @@ name={`tooltip-${label}`} bind:this={triggerHTML} on:mousemove={() => { - if (!shown) showTooltip(label, triggerHTML, direction, component, props, anchor) + if (!shown) showTooltip(label, triggerHTML, direction, component, props, anchor, onUpdate) }} > diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte index d85a55e43a..df15ac3234 100644 --- a/packages/ui/src/components/TooltipInstance.svelte +++ b/packages/ui/src/components/TooltipInstance.svelte @@ -28,6 +28,7 @@ let clWidth: number $: tooltipSW = !$tooltip.component + $: onUpdate = $tooltip.onUpdate const fitTooltip = (): void => { if (($tooltip.label || $tooltip.component) && tooltipHTML) { @@ -146,27 +147,15 @@ whileShow(ev) }} /> - - - - {#if $tooltip.component} -
+
{#if $tooltip.label}
{/if} {#if typeof $tooltip.component === 'string'} - + {}} /> {:else} - + {}} /> {/if}
diff --git a/packages/ui/src/components/calendar/DatePicker.svelte b/packages/ui/src/components/calendar/DatePicker.svelte new file mode 100644 index 0000000000..252615591c --- /dev/null +++ b/packages/ui/src/components/calendar/DatePicker.svelte @@ -0,0 +1,39 @@ + + + +
+
+ + +
+
diff --git a/packages/ui/src/components/calendar/DatePopup.svelte b/packages/ui/src/components/calendar/DatePopup.svelte new file mode 100644 index 0000000000..1612523e6e --- /dev/null +++ b/packages/ui/src/components/calendar/DatePopup.svelte @@ -0,0 +1,206 @@ + + + +
+
+
+ {#if currentDate} + {getMonthName(currentDate)} + {currentDate.getFullYear()} + {/if} +
+ + {#if currentDate} +
+ {#each [...Array(7).keys()] as dayOfWeek} +
{getWeekDayName(day(firstDayOfCurrentMonth, dayOfWeek), 'short')}
+ {/each} + {#each days as day, i} +
{ + if (currentDate) currentDate.setDate(i + 1) + value = currentDate.getTime() + dispatch('update', value) + }} + > + {i + 1} +
+ {/each} +
+ {/if} +
+
+ + diff --git a/packages/ui/src/components/calendar/DatePresenter.svelte b/packages/ui/src/components/calendar/DatePresenter.svelte new file mode 100644 index 0000000000..6aeda0ec93 --- /dev/null +++ b/packages/ui/src/components/calendar/DatePresenter.svelte @@ -0,0 +1,415 @@ + + + +{#if currentDate !== undefined} +
+ {#if editable} +
+
{ withDate = !withDate }}> +
+
+
+
hoverEdits(ev, 'date')} + > + editClick(ev, edits[0].id)} + on:input={ev => onInput(ev.target, edits[0].id)} + on:keydown={ev => keyDown(ev, edits[0].id)} + /> +
.
+ editClick(ev, edits[1].id)} + on:input={ev => onInput(ev.target, edits[1].id)} + on:keydown={ev => keyDown(ev, edits[1].id)} + /> +
.
+ editClick(ev, edits[2].id)} + on:input={ev => onInput(ev.target, edits[2].id)} + on:keydown={ev => keyDown(ev, edits[2].id)} + /> +
+
+
{ withTime = !withTime }}> +
+
+
hoverEdits(ev, 'time')} + > + editClick(ev, edits[3].id)} + on:input={ev => onInput(ev.target, edits[3].id)} + on:keydown={ev => keyDown(ev, edits[3].id)} + /> +
:
+ editClick(ev, edits[4].id)} + on:input={ev => onInput(ev.target, edits[4].id)} + on:blur={ev => onInput(ev.target, edits[4].id)} + on:keydown={ev => keyDown(ev, edits[4].id)} + /> +
+ {:else} +
+
+
+ {currentDate.getDate().toString().padStart(2, '0')} +
.
+ {currentDate.getMonth().toString().padStart(2, '0')} +
.
+ {currentDate.getFullYear()} +
+ {#if withTime} +
+
+ {currentDate.getHours().toString().padStart(2, '0')} +
:
+ {currentDate.getMinutes().toString().padStart(2, '0')} +
+ {/if} +
+ {/if} +
+{/if} + + diff --git a/packages/ui/src/components/DateTimePresenter.svelte b/packages/ui/src/components/calendar/DateTimePresenter.svelte similarity index 77% rename from packages/ui/src/components/DateTimePresenter.svelte rename to packages/ui/src/components/calendar/DateTimePresenter.svelte index 16034efe6f..5ec70723a3 100644 --- a/packages/ui/src/components/DateTimePresenter.svelte +++ b/packages/ui/src/components/calendar/DateTimePresenter.svelte @@ -13,12 +13,9 @@ // limitations under the License. --> - + diff --git a/packages/ui/src/components/calendar/MonthCalendar.svelte b/packages/ui/src/components/calendar/MonthCalendar.svelte index 4ca213643f..788757ae89 100644 --- a/packages/ui/src/components/calendar/MonthCalendar.svelte +++ b/packages/ui/src/components/calendar/MonthCalendar.svelte @@ -70,8 +70,11 @@
diff --git a/packages/ui/src/components/calendar/TimePopup.svelte b/packages/ui/src/components/calendar/TimePopup.svelte new file mode 100644 index 0000000000..e7d4785907 --- /dev/null +++ b/packages/ui/src/components/calendar/TimePopup.svelte @@ -0,0 +1,56 @@ + + + + +
+ {#each actions as action} + + {/each} +
+ + diff --git a/packages/ui/src/components/calendar/YearCalendar.svelte b/packages/ui/src/components/calendar/YearCalendar.svelte index 2f03ffe546..87995cac86 100644 --- a/packages/ui/src/components/calendar/YearCalendar.svelte +++ b/packages/ui/src/components/calendar/YearCalendar.svelte @@ -54,15 +54,5 @@ display: grid; grid-template-columns: repeat(4, 1fr); border-collapse: collapse; - .row { - display: table-row; - } - .th { - display: table-cell; - } - .calendar { - display: table-cell; - padding: 0.3em; - } } diff --git a/packages/ui/src/components/calendar/icons/DPCalendar.svelte b/packages/ui/src/components/calendar/icons/DPCalendar.svelte new file mode 100644 index 0000000000..09b84816e6 --- /dev/null +++ b/packages/ui/src/components/calendar/icons/DPCalendar.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/packages/ui/src/components/calendar/icons/DPClock.svelte b/packages/ui/src/components/calendar/icons/DPClock.svelte new file mode 100644 index 0000000000..ef7ff1c729 --- /dev/null +++ b/packages/ui/src/components/calendar/icons/DPClock.svelte @@ -0,0 +1,9 @@ + + + + + + diff --git a/packages/ui/src/components/calendar/icons/DPClockBold.svelte b/packages/ui/src/components/calendar/icons/DPClockBold.svelte new file mode 100644 index 0000000000..0a53df6211 --- /dev/null +++ b/packages/ui/src/components/calendar/icons/DPClockBold.svelte @@ -0,0 +1,8 @@ + + + + + diff --git a/packages/ui/src/components/calendar/icons/DPEnd.svelte b/packages/ui/src/components/calendar/icons/DPEnd.svelte new file mode 100644 index 0000000000..cccf910473 --- /dev/null +++ b/packages/ui/src/components/calendar/icons/DPEnd.svelte @@ -0,0 +1,9 @@ + + + + + + diff --git a/packages/ui/src/components/calendar/icons/DPStart.svelte b/packages/ui/src/components/calendar/icons/DPStart.svelte new file mode 100644 index 0000000000..477f35453f --- /dev/null +++ b/packages/ui/src/components/calendar/icons/DPStart.svelte @@ -0,0 +1,9 @@ + + + + + + diff --git a/packages/ui/src/components/calendar/internal/DateUtils.ts b/packages/ui/src/components/calendar/internal/DateUtils.ts index fb86438d2b..6c3682a28b 100644 --- a/packages/ui/src/components/calendar/internal/DateUtils.ts +++ b/packages/ui/src/components/calendar/internal/DateUtils.ts @@ -11,9 +11,9 @@ // See the License for the specific language governing permissions and // limitations under the License. -const DAYS_IN_WEEK = 7 -const MILLISECONDS_IN_DAY = 86400000 -const MILLISECONDS_IN_MINUTE = 60000 +export const DAYS_IN_WEEK = 7 +export const MILLISECONDS_IN_DAY = 86400000 +export const MILLISECONDS_IN_MINUTE = 60000 export function firstDay (date: Date, mondayStart: boolean): Date { const firstDayOfMonth = new Date(date) @@ -33,6 +33,15 @@ export function firstDay (date: Date, mondayStart: boolean): Date { return result } +export function getWeek (date: Date): number { + const onejan = new Date(date.getFullYear(), 0, 1) + return Math.ceil((((date.getTime() - onejan.getTime()) / MILLISECONDS_IN_DAY) + onejan.getDay() + 1) / DAYS_IN_WEEK) +} + +export function daysInMonth (date: Date): number { + return 33 - new Date(date.getFullYear(), date.getMonth(), 33).getDate() +} + export function getWeekDayName (weekDay: Date, weekFormat: 'narrow' | 'short' | 'long' | undefined = 'short'): string { const locale = new Intl.NumberFormat().resolvedOptions().locale return new Intl.DateTimeFormat(locale, { @@ -67,6 +76,15 @@ export function getMonthName (date: Date): string { const locale = new Intl.NumberFormat().resolvedOptions().locale return new Intl.DateTimeFormat(locale, { month: 'long' }).format(date) } + +export type TCellStyle = 'not-selected' | 'selected' +export interface ICell { + dayOfWeek: number + style: TCellStyle + focused: boolean + today?: boolean +} + export function getMonday (d: Date, mondayStart: boolean): Date { d = new Date(d) const day = d.getDay() diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 7b8005d2c1..69838c93c3 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -44,10 +44,11 @@ export { default as PopupMenu } from './components/PopupMenu.svelte' // export { default as PopupItem } from './components/PopupItem.svelte' export { default as TextArea } from './components/TextArea.svelte' export { default as Section } from './components/Section.svelte' -export { default as DatePicker } from './components/DatePicker.svelte' -export { default as DatePopup } from './components/DatePopup.svelte' -export { default as DatePresenter } from './components/DatePresenter.svelte' -export { default as DateTimePresenter } from './components/DateTimePresenter.svelte' +export { default as DatePicker } from './components/calendar/DatePicker.svelte' +export { default as DatePopup } from './components/calendar/DatePopup.svelte' +export { default as TimePopup } from './components/calendar/TimePopup.svelte' +export { default as DatePresenter } from './components/calendar/DatePresenter.svelte' +export { default as DateTimePresenter } from './components/calendar/DateTimePresenter.svelte' export { default as StylishEdit } from './components/StylishEdit.svelte' export { default as Grid } from './components/Grid.svelte' export { default as Row } from './components/Row.svelte' diff --git a/packages/ui/src/tooltips.ts b/packages/ui/src/tooltips.ts index 0fab56bfeb..ccb879887c 100644 --- a/packages/ui/src/tooltips.ts +++ b/packages/ui/src/tooltips.ts @@ -8,7 +8,8 @@ export const tooltipstore = writable({ direction: undefined, component: undefined, props: undefined, - anchor: undefined + anchor: undefined, + onUpdate: undefined }) export function showTooltip ( @@ -17,7 +18,8 @@ export function showTooltip ( direction?: TooltipAligment, component?: AnySvelteComponent | AnyComponent, props?: any, - anchor?: HTMLElement + anchor?: HTMLElement, + onUpdate?: (result: any) => void ): void { tooltipstore.set({ label: label, @@ -25,7 +27,8 @@ export function showTooltip ( direction: direction, component: component, props: props, - anchor: anchor + anchor: anchor, + onUpdate: onUpdate }) } @@ -36,6 +39,7 @@ export function closeTooltip (): void { direction: undefined, component: undefined, props: undefined, - anchor: undefined + anchor: undefined, + onUpdate: undefined }) } diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts index cef3afccb4..6865edd740 100644 --- a/packages/ui/src/types.ts +++ b/packages/ui/src/types.ts @@ -74,6 +74,7 @@ export interface LabelAndProps { component?: AnySvelteComponent | AnyComponent props?: any anchor: HTMLElement | undefined + onUpdate?: (result: any) => void } export interface ListItem { @@ -86,11 +87,3 @@ export interface DropdownTextItem { id: string label: string } - -export type TSelectDate = Date | null | undefined -export type TCellStyle = 'not-selected' | 'selected' -export interface ICell { - dayOfWeek: number - style: TCellStyle - today?: boolean -} diff --git a/plugins/calendar-resources/src/components/DateTimePresenter.svelte b/plugins/calendar-resources/src/components/DateTimePresenter.svelte index 044e112bd1..cf1ed0b287 100644 --- a/plugins/calendar-resources/src/components/DateTimePresenter.svelte +++ b/plugins/calendar-resources/src/components/DateTimePresenter.svelte @@ -47,7 +47,7 @@
{#if date} - + {#if interval > 0} {#await formatDueDate(interval) then t} ({t}) diff --git a/plugins/calendar-resources/src/components/EditReminder.svelte b/plugins/calendar-resources/src/components/EditReminder.svelte index 9b55cff6ca..9b4369ca4a 100644 --- a/plugins/calendar-resources/src/components/EditReminder.svelte +++ b/plugins/calendar-resources/src/components/EditReminder.svelte @@ -26,7 +26,7 @@ let title: string = value.title let description: string = value.description - let startDate: Date = new Date(value.date) + let startDate: number = value.date let participants: Ref[] = value.participants ?? [] const space = calendar.space.PersonalEvents @@ -39,7 +39,7 @@ async function saveReminder () { await client.updateDoc(value._class, value.space, value._id, { - date: startDate.getTime(), + date: startDate, description, participants, title @@ -56,7 +56,7 @@ label={calendar.string.EditReminder} okAction={saveReminder} okLabel={presentation.string.Save} - canSave={title.trim().length > 0 && startDate.getTime() > 0 && participants.length > 0} + canSave={title.trim().length > 0 && startDate > 0 && participants.length > 0} {space} on:close={() => { dispatch('close') diff --git a/plugins/calendar-resources/src/components/Hour.svelte b/plugins/calendar-resources/src/components/Hour.svelte index 699a3bcfba..302f28e04c 100644 --- a/plugins/calendar-resources/src/components/Hour.svelte +++ b/plugins/calendar-resources/src/components/Hour.svelte @@ -16,7 +16,7 @@ import { Event } from '@anticrm/calendar' import { Class, Doc, DocumentQuery, FindOptions, Ref } from '@anticrm/core' import { Tooltip } from '@anticrm/ui' -import { addZero } from '@anticrm/ui/src/components/calendar/internal/DateUtils' + import { addZero } from '@anticrm/ui/src/components/calendar/internal/DateUtils' import calendar from '../plugin' import EventsPopup from './EventsPopup.svelte' diff --git a/plugins/calendar-resources/src/components/ReminderPresenter.svelte b/plugins/calendar-resources/src/components/ReminderPresenter.svelte index 44cd238c5b..6a1777f542 100644 --- a/plugins/calendar-resources/src/components/ReminderPresenter.svelte +++ b/plugins/calendar-resources/src/components/ReminderPresenter.svelte @@ -37,6 +37,6 @@ {/await}
- + {/if}
\ No newline at end of file diff --git a/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte b/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte index fd315f1e3f..c841368d81 100644 --- a/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte +++ b/plugins/calendar-resources/src/components/activity/ReminderViewlet.svelte @@ -37,7 +37,7 @@ {#await getEvent(tx.objectId) then event} {#if event} { click(event) }}>{event.title}  - + {/if} {/await}
diff --git a/plugins/recruit-resources/src/components/review/CreateReview.svelte b/plugins/recruit-resources/src/components/review/CreateReview.svelte index 69fe382638..eb9ca3fb1c 100644 --- a/plugins/recruit-resources/src/components/review/CreateReview.svelte +++ b/plugins/recruit-resources/src/components/review/CreateReview.svelte @@ -22,7 +22,7 @@ import type { Candidate, Review } from '@anticrm/recruit' import task, { SpaceWithStates } from '@anticrm/task' import { StyledTextBox } from '@anticrm/text-editor' - import { DatePicker, Grid, Status as StatusControl, StylishEdit } from '@anticrm/ui' + import { DatePicker, Grid, Status as StatusControl, StylishEdit, EditBox, Row } from '@anticrm/ui' import view from '@anticrm/view' import { createEventDispatcher } from 'svelte' import recruit from '../../plugin' @@ -38,8 +38,8 @@ let title: string = '' let description: string = '' - let startDate: Date = new Date() - let dueDate: Date = new Date() + let startDate: number = Date.now() + let dueDate: number = Date.now() let location: string = '' let company: Ref | undefined = undefined @@ -102,8 +102,8 @@ await client.addCollection(recruit.class.Review, doc.space, doc.attachedTo, doc.attachedToClass, 'reviews', { number: (incResult as any).object.sequence, - date: startDate?.getTime() ?? null, - dueDate: dueDate?.getTime() ?? null, + date: startDate ?? null, + dueDate: dueDate ?? null, description, verdict: '', title, @@ -133,6 +133,12 @@ } $: validate(doc, doc._class) + const updateStart = (result: any): void => { + if (result.detail !== undefined) { + dueDate = result.detail + dueDate = dueDate + } + } - - - - {#if !preserveCandidate} -
- -
- {/if} - - - - -
- -
- -
- -
-
- -
+ + + {#if !preserveCandidate} + + {:else} +
+ {/if} + + + + + + + diff --git a/plugins/recruit-resources/src/components/review/EditReview.svelte b/plugins/recruit-resources/src/components/review/EditReview.svelte index f676387a6f..85840f03be 100644 --- a/plugins/recruit-resources/src/components/review/EditReview.svelte +++ b/plugins/recruit-resources/src/components/review/EditReview.svelte @@ -106,18 +106,3 @@ on:change={() => client.update(object, { verdict: object.verdict })} /> {/if} - - diff --git a/plugins/setting-resources/src/components/activity/TxIntegrationDisable.svelte b/plugins/setting-resources/src/components/activity/TxIntegrationDisable.svelte index 513a09c3c4..09b8200def 100644 --- a/plugins/setting-resources/src/components/activity/TxIntegrationDisable.svelte +++ b/plugins/setting-resources/src/components/activity/TxIntegrationDisable.svelte @@ -21,7 +21,7 @@ import setting from '../../plugin' export let tx: TxUpdateDoc - export let doc: Integration + // export let doc: Integration const client = getClient() diff --git a/plugins/task-resources/src/components/todos/CreateTodo.svelte b/plugins/task-resources/src/components/todos/CreateTodo.svelte index f30566418f..1ce01ca4be 100644 --- a/plugins/task-resources/src/components/todos/CreateTodo.svelte +++ b/plugins/task-resources/src/components/todos/CreateTodo.svelte @@ -27,7 +27,7 @@ let name: string const done = false - let dueTo: Date + let dueTo: number $: _space = space @@ -48,7 +48,7 @@ { name, done, - dueTo: dueTo?.getTime() ?? undefined + dueTo: dueTo ?? undefined } ) } diff --git a/plugins/task-resources/src/components/todos/EditTodo.svelte b/plugins/task-resources/src/components/todos/EditTodo.svelte index fc8040c7ff..00df1b8e9f 100644 --- a/plugins/task-resources/src/components/todos/EditTodo.svelte +++ b/plugins/task-resources/src/components/todos/EditTodo.svelte @@ -24,7 +24,7 @@ export let item: TodoItem let name: string = '' - let dueTo: Date | undefined | null = null + let dueTo: number | null | undefined = null let _itemId: Ref @@ -32,7 +32,7 @@ _itemId = item._id name = item.name if (item.dueTo != null) { - dueTo = new Date(item.dueTo) + dueTo = item.dueTo } else { dueTo = null } @@ -51,7 +51,7 @@ ops.name = name } if (item.dueTo !== dueTo) { - ops.dueTo = (dueTo?.getTime() ?? null) as unknown as Timestamp + ops.dueTo = (dueTo ?? null) as unknown as Timestamp } if (Object.keys(ops).length === 0) { diff --git a/plugins/task-resources/src/components/todos/TodoItemsPopup.svelte b/plugins/task-resources/src/components/todos/TodoItemsPopup.svelte index aa88debfa7..ce704581f2 100644 --- a/plugins/task-resources/src/components/todos/TodoItemsPopup.svelte +++ b/plugins/task-resources/src/components/todos/TodoItemsPopup.svelte @@ -24,7 +24,7 @@ $: todos = (value.$lookup?.todoItems as TodoItem[]) ?? [] -
+
{#if todos.length > 0} {/if} - - diff --git a/plugins/view-resources/src/components/DateEditor.svelte b/plugins/view-resources/src/components/DateEditor.svelte index b288a24773..b0ba09c04b 100644 --- a/plugins/view-resources/src/components/DateEditor.svelte +++ b/plugins/view-resources/src/components/DateEditor.svelte @@ -15,34 +15,14 @@ --> -
{ - if (!opened) { - opened = true - showPopup(DatePopup, { value: date, title: label, withTime: attributeType?.withTime ?? false }, container, (result) => { - if (result) { - value = result.getTime() - onChange(value) - } - opened = false - }) - } - }} > - -
\ No newline at end of file + diff --git a/plugins/view-resources/src/components/DatePresenter.svelte b/plugins/view-resources/src/components/DatePresenter.svelte index 40bcf5ebe9..484eefda23 100644 --- a/plugins/view-resources/src/components/DatePresenter.svelte +++ b/plugins/view-resources/src/components/DatePresenter.svelte @@ -15,19 +15,11 @@ --> -
- {#if date} - - {:else} - No date - {/if} -
\ No newline at end of file + diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 770374533a..3f768d1c0c 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -213,13 +213,17 @@ {#if client} - + + + + + + +
diff --git a/tests/sanity/tests/recruit.spec.ts b/tests/sanity/tests/recruit.spec.ts index 44b35e0c7a..96fc3558f7 100644 --- a/tests/sanity/tests/recruit.spec.ts +++ b/tests/sanity/tests/recruit.spec.ts @@ -142,17 +142,17 @@ test.describe('recruit tests', () => { // Click button:has-text("Review") await page.click('button:has-text("Review")') // Click [placeholder="\ "] - await page.click('[placeholder="\\ "]') + await page.click('[placeholder="placeholder"]') // Fill [placeholder="\ "] - await page.fill('[placeholder="\\ "]', 'Meet PEterson') + await page.fill('[placeholder="placeholder"]', 'Meet PEterson') // Click text=Location Company Company >> [placeholder="\ "] - await page.click('text=Location Company Company >> [placeholder="\\ "]') + await page.click('text=placeholder Location >> [placeholder="placeholder"]') // Fill text=Location Company Company >> [placeholder="\ "] - await page.fill('text=Location Company Company >> [placeholder="\\ "]', 'NSK') + await page.fill('text=placeholder Location >> [placeholder="placeholder"]', 'NSK') // Click text=Company Company >> div - await page.click('text=Company Company >> div') + // await page.click('text=Company Company >> div') // Click button:has-text("Apple") - await page.click('button:has-text("Apple")') + // await page.click('button:has-text("Apple")') // Click text=Candidate Not selected >> span await page.click('text=Candidate Not selected >> span') // Click button:has-text("Andrey P.")