platform/plugins/calendar-resources/src/components/DateTimePresenter.svelte
Alexander Platov 30976696f9
Update DataPicker layout (#1309)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2022-04-07 17:02:01 +07:00

59 lines
1.9 KiB
Svelte

<!--
// Copyright © 2022 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
import { Event } from '@anticrm/calendar'
import { translate } from '@anticrm/platform'
import { DateRangePresenter } from '@anticrm/ui'
import calendar from '../plugin'
export let value: Event
$: date = value ? new Date(value.date) : undefined
$: dueDate = value ? new Date(value.dueDate ?? value.date) : undefined
$: interval = (value.dueDate ?? value.date) - value.date
const SECOND = 1000
const MINUTE = SECOND * 60
const HOUR = MINUTE * 60
const DAY = HOUR * 24
async function formatDueDate (interval: number): Promise<string> {
let passed = interval
if (interval < 0) passed = 0
if (passed < HOUR) {
return await translate(calendar.string.DueMinutes, { minutes: Math.floor(passed / MINUTE) })
} else if (passed < DAY) {
return await translate(calendar.string.DueHours, { hours: Math.floor(passed / HOUR) })
} else {
return await translate(calendar.string.DueDays, { days: Math.floor(passed / DAY) })
}
}
</script>
<div class="antiSelect">
{#if date}
<DateRangePresenter value={date.getTime()} withTime={date.getMinutes() !== 0 && date.getHours() !== 0 && interval < DAY} />
{#if interval > 0}
{#await formatDueDate(interval) then t}
<span class='ml-2 mr-1 whitespace-nowrap'>({t})</span>
{/await}
{/if}
{:else}
No date
{/if}
</div>