diff --git a/packages/ui/src/components/calendar/DayCalendar.svelte b/packages/ui/src/components/calendar/DayCalendar.svelte index bd0e786f00..029c12cd3f 100644 --- a/packages/ui/src/components/calendar/DayCalendar.svelte +++ b/packages/ui/src/components/calendar/DayCalendar.svelte @@ -101,20 +101,20 @@ let maxHeightAD: number = 0 let shownHeightAD: number = 0 let shownAD: boolean = false - let shortAlldays: { id: string; day: number }[] = [] + let shortAlldays: { id: string; day: number; fixRow?: boolean }[] = [] let moreCounts: number[] = Array(displayedDaysCount) $: if (newEvents !== events) { + newEvents = events grid = new Array(displayedDaysCount) alldaysGrid = new Array(displayedDaysCount) - newEvents = events alldays = [] shortAlldays = [] moreCounts = new Array(displayedDaysCount) - prepareAllDays() if (shownAD && adMaxRow <= maxAD) shownAD = false + prepareAllDays() } - $: minimizedAD = maxHeightAD === minHeightAD + $: minimizedAD = maxHeightAD === minHeightAD && maxHeightAD !== 0 $: newEvents .filter((ev) => !ev.allDay) .forEach((event, i, arr) => { @@ -232,8 +232,13 @@ } } else if (alldaysGrid[d].alldays[r] === null) { tempEventID = '' - if (filtered.length > 0) moreCounts[d] = filtered.length - else moreCounts[d] = 0 + if (filtered.length > 1) moreCounts[d] = filtered.length + else { + if (filtered.length === 1 && filtered[0] !== null) { + shortAlldays.push({ id: filtered[0], day: d, fixRow: true }) + } + moreCounts[d] = 0 + } } else if (alldaysGrid[d].alldays[r] === tempEventID) { if (filtered.length > 0) { tempEventID = '' @@ -263,14 +268,17 @@ const getRect = ( event: CalendarItem - ): { top: number; bottom: number; left: number; right: number; width: number } => { - const result = { top: 0, bottom: 0, left: 0, right: 0, width: 0 } + ): { top: number; bottom: number; left: number; right: number; width: number; visibility: number } => { + const result = { top: 0, bottom: 0, left: 0, right: 0, width: 0, visibility: 1 } const checkDate = new Date(currentDate.getTime() + MILLISECONDS_IN_DAY * event.day) - const startDay = checkDate.setHours(startHour, 0, 0) - const endDay = checkDate.setHours(displayedHours - 1, 59, 59) + const startDay = checkDate.setHours(startHour, 0, 0, 0) + const endDay = checkDate.setHours(displayedHours - 1, 59, 59, 999) const startTime = event.date < startDay ? { hours: 0, mins: 0 } : convertToTime(event.date) const endTime = event.dueDate > endDay ? { hours: displayedHours - startHour, mins: 0 } : convertToTime(event.dueDate) + if (getDay(weekMonday, event.day).setHours(endTime.hours, endTime.mins, 0, 0) <= todayDate.getTime()) { + result.visibility = 0 + } result.top = rem(3.5) + styleAD + @@ -301,13 +309,30 @@ (cols - index - 1) * rem(0.125) return result } - const getADRect = (id: string, day?: number): { top: number; left: number; width: number; fit: boolean } => { - const result = { top: 0, left: 0, width: 0, fit: true } + const getADRect = ( + id: string, + day?: number, + fixRow?: boolean + ): { top: number; left: number; width: number; height: number; fit: boolean; visibility: number } => { + const result = { top: 0, left: 0, width: 0, height: rem(heightAD), fit: true, visibility: 1 } const index = adRows.findIndex((ev) => ev.id === id) + + const checkTime = new Date().setHours(0, 0, 0, 0) + const startEvent = getDay(weekMonday, typeof day !== 'undefined' ? day : adRows[index].startCol).getTime() + const endEvent = getDay(weekMonday, adRows[index].endCol).setHours(24) + if (endEvent <= checkTime) result.visibility = 0 + else if (startEvent <= checkTime && endEvent > checkTime) { + const eventTime = endEvent - startEvent + const remained = endEvent - checkTime + const proc = remained / eventTime + result.visibility = proc + } + const shown = minimizedAD ? minAD : maxAD - const lastRow = adRows[index].row === shown - 1 + const row = fixRow ? shown - 1 : adRows[index].row + const lastRow = row === shown - 1 const fitting = !shownAD && lastRow && typeof day !== 'undefined' - result.top = rem(0.125 + adRows[index].row * (heightAD + 0.125)) + result.top = rem(0.125 + row * (heightAD + 0.125)) if (fitting) { result.left = rem(0.125) + day * (colWidth + 0.125) if (day < adRows[index].endCol) { @@ -318,7 +343,7 @@ } else if (d === adRows[index].endCol) result.width = colWidth + colWidth * (d - day) - rem(0.25) } } else result.width = colWidth - rem(0.25) - } else if (fitting && (adRows[index].row > shown - 1 || (lastRow && moreCounts[day] > 0))) { + } else if (fitting && (row > shown - 1 || (lastRow && moreCounts[day] > 0))) { result.fit = false } else { result.left = rem(0.125) + adRows[index].startCol * (colWidth + 0.125) @@ -327,6 +352,11 @@ } return result } + const getMask = (visibility: number): string => { + return visibility === 0 || visibility === 1 + ? 'none' + : `linear-gradient(-90deg, rgba(0, 0, 0, 1) ${visibility * 100}%, rgba(0, 0, 0, .4) ${visibility * 100}%)` + } const getMore = (day: number): { top: number; left: number; width: number } => { const result = { top: 0, left: 0, width: 0 } const lastRow = (minimizedAD ? minAD : maxAD) - 1 @@ -398,78 +428,85 @@
{#if shownHeightAD > maxHeightAD && shownAD} - {#key calendarWidth}{#key displayedDaysCount} -
+ {#key styleAD}{#key calendarWidth}{#key displayedDaysCount} +
+ {#each alldays as event, i} + {@const rect = getADRect(event.eventId)} + +
+ +
+ {/each} + {/key}{/key}{/key} + + {:else if shownAD} + {#key styleAD}{#key calendarWidth}{#key displayedDaysCount} {#each alldays as event, i} {@const rect = getADRect(event.eventId)}
- +
{/each} - {/key}{/key} - - {:else if shownAD} - {#key calendarWidth}{#key displayedDaysCount} - {#each alldays as event, i} - {@const rect = getADRect(event.eventId)} - -
- -
- {/each} - {/key}{/key} + {/key}{/key}{/key} {:else} - {#key calendarWidth}{#key displayedDaysCount} - {#each shortAlldays as event, i} - {@const rect = getADRect(event.id, event.day)} - -
- -
- {/each} - {#each moreCounts as more, day} - {@const addon = shortAlldays.length} - {#if more !== 0} - {@const rect = getMore(day)} + {#key styleAD}{#key calendarWidth}{#key displayedDaysCount} + {#each shortAlldays as event, i} + {@const rect = getADRect(event.id, event.day, event.fixRow)} -
(shownAD = true)} + style:opacity={rect.visibility === 0 ? 0.4 : 1} + style:--mask-image={getMask(rect.visibility)} + tabindex={500 + i} > -
- {/if} - {/each} - {/key}{/key} + {/each} + {#each moreCounts as more, day} + {@const addon = shortAlldays.length} + {#if more !== 0} + {@const rect = getMore(day)} + + +
(shownAD = true)} + > +
+ {/if} + {/each} + {/key}{/key}{/key} {/if}
@@ -514,9 +551,18 @@ style:bottom={`${rect.bottom}px`} style:left={`${rect.left}px`} style:right={`${rect.right}px`} + style:opacity={rect.visibility === 0 ? 0.4 : 1} + style:--mask-image={'none'} tabindex={1000 + i} > - +
{/each} {/key}{/key}{/key} @@ -539,6 +585,8 @@ } .calendar-element { position: absolute; + mask-image: var(--mask-image, none); + --webkit-mask-image: var(--mask-image, none); border-radius: 0.25rem; } .sticky-header { diff --git a/plugins/calendar-resources/src/components/CalendarView.svelte b/plugins/calendar-resources/src/components/CalendarView.svelte index 7a2f64b4ec..a1a46d3807 100644 --- a/plugins/calendar-resources/src/components/CalendarView.svelte +++ b/plugins/calendar-resources/src/components/CalendarView.svelte @@ -380,29 +380,10 @@ bind:currentDate on:create={(e) => showCreateDialog(e.detail.date, e.detail.withTime)} > - + {@const event = objects.find((event) => event.eventId === id)} {#if event} - { - showCreateDialog(e.detail.date, e.detail.withTime) - }} - /> - {/if} - - - {@const event = objects.find((event) => event.eventId === id)} - {#if event} - { - showCreateDialog(e.detail.date, e.detail.withTime) - }} - /> + {/if} @@ -417,29 +398,10 @@ bind:currentDate on:create={(e) => showCreateDialog(e.detail.date, e.detail.withTime)} > - + {@const event = objects.find((event) => event.eventId === id)} {#if event} - { - showCreateDialog(e.detail.date, e.detail.withTime) - }} - /> - {/if} - - - {@const event = objects.find((event) => event.eventId === id)} - {#if event} - { - showCreateDialog(e.detail.date, e.detail.withTime) - }} - /> + {/if} diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte index bd43c72234..503b7a9665 100644 --- a/plugins/calendar-resources/src/components/CreateEvent.svelte +++ b/plugins/calendar-resources/src/components/CreateEvent.svelte @@ -16,11 +16,12 @@ import { Calendar, generateEventId } from '@hcengineering/calendar' import { Employee, EmployeeAccount } from '@hcengineering/contact' import { UserBoxList } from '@hcengineering/contact-resources' - import { Class, DateRangeMode, Doc, Ref, Timestamp, getCurrentAccount } from '@hcengineering/core' + import { Class, DateRangeMode, Doc, Ref, getCurrentAccount } from '@hcengineering/core' import { Card, getClient } from '@hcengineering/presentation' import ui, { DateRangePresenter, EditBox, ToggleWithLabel } from '@hcengineering/ui' import { createEventDispatcher, tick } from 'svelte' import calendar from '../plugin' + import { saveUTC } from '../utils' export let attachedTo: Ref = calendar.ids.NoAttached export let attachedToClass: Ref> = calendar.class.Event @@ -49,19 +50,6 @@ return title !== undefined && title.trim().length === 0 && participants.length === 0 } - const saveUTC = (date: Timestamp): Timestamp => { - const utcdate = new Date(date) - return Date.UTC( - utcdate.getFullYear(), - utcdate.getMonth(), - utcdate.getDate(), - utcdate.getHours(), - utcdate.getMinutes(), - utcdate.getSeconds(), - utcdate.getMilliseconds() - ) - } - async function saveEvent () { let date: number | undefined if (startDate != null) date = startDate diff --git a/plugins/calendar-resources/src/components/EditEvent.svelte b/plugins/calendar-resources/src/components/EditEvent.svelte index d41c199704..3b1b13e82a 100644 --- a/plugins/calendar-resources/src/components/EditEvent.svelte +++ b/plugins/calendar-resources/src/components/EditEvent.svelte @@ -33,6 +33,7 @@ import { ContextMenu, ObjectPresenter, getObjectPreview } from '@hcengineering/view-resources' import { createEventDispatcher, tick } from 'svelte' import calendar from '../plugin' + import { saveUTC } from '../utils' export let object: Event @@ -60,26 +61,22 @@ $: mode = object.allDay ? DateRangeMode.DATE : DateRangeMode.DATETIME - const defaultDuration = 30 * 60 * 1000 - const allDayDuration = 24 * 60 * 60 * 1000 + const defaultDuration = 60 * 60 * 1000 + const allDayDuration = 24 * 60 * 60 * 1000 - 1 let duration = object.dueDate - object.date async function updateDate () { await client.update(object, { - date: object.date, - dueDate: object.dueDate, + date: object.allDay ? saveUTC(object.date) : object.date, + dueDate: object.allDay ? saveUTC(object.dueDate) : object.dueDate, allDay: object.allDay }) } async function handleNewStartDate (newStartDate: number | null) { if (newStartDate !== null) { - object.date = newStartDate + object.date = object.allDay ? new Date(newStartDate).setHours(0, 0, 0, 0) : newStartDate object.dueDate = object.date + (object.allDay ? allDayDuration : duration) - if (object.allDay) { - object.date = new Date(object.date).setUTCHours(0, 0, 0, 0) - object.dueDate = new Date(object.dueDate).setUTCHours(0, 0, 0, 0) - } await tick() dueDateRef.adaptValue() await updateDate() @@ -90,15 +87,11 @@ if (newDueDate !== null) { const diff = newDueDate - object.date if (diff > 0) { - object.dueDate = newDueDate - duration = diff + object.dueDate = object.allDay ? new Date(newDueDate).setHours(23, 59, 59, 999) : newDueDate + duration = object.dueDate - object.date } else { object.dueDate = object.date + (object.allDay ? allDayDuration : duration) } - if (object.allDay) { - object.date = new Date(object.date).setUTCHours(0, 0, 0, 0) - object.dueDate = new Date(object.dueDate).setUTCHours(0, 0, 0, 0) - } await tick() dueDateRef.adaptValue() await updateDate() @@ -107,8 +100,9 @@ async function allDayChangeHandler () { if (object.allDay) { - object.date = new Date(object.date).setUTCHours(0, 0, 0, 0) - object.dueDate = new Date(object.dueDate).setUTCHours(0, 0, 0, 0) + object.date = new Date(object.date).setHours(0, 0, 0, 0) + if (object.dueDate - object.date < allDayDuration) object.dueDate = allDayDuration + object.date + else object.dueDate = new Date(object.dueDate).setHours(23, 59, 59, 999) } else { object.dueDate = object.date + defaultDuration } diff --git a/plugins/calendar-resources/src/components/EventElement.svelte b/plugins/calendar-resources/src/components/EventElement.svelte index 61dbaa9abc..95481825bc 100644 --- a/plugins/calendar-resources/src/components/EventElement.svelte +++ b/plugins/calendar-resources/src/components/EventElement.svelte @@ -19,14 +19,13 @@ import EventPresenter from './EventPresenter.svelte' export let event: Event - export let allday: boolean = false - export let width: number = 0 + export let size: { width: number; height: number } $: startDate = new Date(event.date) $: endDate = new Date(event.dueDate) - $: oneRow = event.dueDate - event.date <= MILLISECONDS_IN_MINUTE * 30 || allday + $: oneRow = size.height < 42 || event.allDay $: narrow = event.dueDate - event.date < MILLISECONDS_IN_MINUTE * 25 - $: empty = width < 44 + $: empty = size.width < 44 const getTime = (date: Date): string => { return `${addZero(date.getHours())}:${addZero(date.getMinutes())}` diff --git a/plugins/calendar-resources/src/utils.ts b/plugins/calendar-resources/src/utils.ts new file mode 100644 index 0000000000..570c0c0fd9 --- /dev/null +++ b/plugins/calendar-resources/src/utils.ts @@ -0,0 +1,14 @@ +import { Timestamp } from '@hcengineering/core' + +export function saveUTC (date: Timestamp): Timestamp { + const utcdate = new Date(date) + return Date.UTC( + utcdate.getFullYear(), + utcdate.getMonth(), + utcdate.getDate(), + utcdate.getHours(), + utcdate.getMinutes(), + utcdate.getSeconds(), + utcdate.getMilliseconds() + ) +}