Set particular date for reminder (#1801)

Signed-off-by: Anna No <anna.no@xored.com>

packages/ui/src/components/TimeShiftPicker.svelte

@@ -16,13 +16,15 @@
   import type { IntlString } from '@anticrm/platform'
   import { createEventDispatcher, onMount } from 'svelte'
   import { Label, showPopup } from '..'
+  import { DateOrShift } from '../types'
+  import DateRangePresenter from './calendar/DateRangePresenter.svelte'
   import Calendar from './icons/Calendar.svelte'
   import Close from './icons/Close.svelte'
   import TimeShiftPopup from './TimeShiftPopup.svelte'
   import TimeShiftPresenter from './TimeShiftPresenter.svelte'
 
   export let title: IntlString
-  export let value: number
+  export let value: DateOrShift | undefined
   export let show: boolean = false
   export let direction: 'before' | 'after' = 'before'
 
@@ -32,7 +34,7 @@
   let container: HTMLElement
   let btn: HTMLElement
 
-  const changeValue = (result: any): void => {
+  const changeValue = (result: DateOrShift): void => {
     if (result !== undefined) {
       value = result
       dispatch('change', result)
@@ -61,7 +63,7 @@
     }
   }}
 >
-  <button bind:this={btn} class="button round-2" class:selected={value}>
+  <button bind:this={btn} class="button round-2" class:selected={value?.shift}>
     <div class="icon">
       {#if show}<Close size={'small'} />{:else}<Calendar size={'medium'} />{/if}
     </div>
@@ -69,6 +71,10 @@
 
   <div class="group">
     <span class="label"><Label label={title} /></span>
-    <TimeShiftPresenter {value} />
+    {#if value?.shift !== undefined}
+      <TimeShiftPresenter value={value.shift} />
+    {:else}
+      <DateRangePresenter value={value?.date} withTime={true} editable={false} />
+    {/if}
   </div>
 </div>

packages/ui/src/components/TimeShiftPopup.svelte

@@ -14,12 +14,18 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
+  import ui from '../plugin'
+  import { DateOrShift } from '../types'
+  import DateRangePresenter from './calendar/DateRangePresenter.svelte'
   import TimeShiftPresenter from './TimeShiftPresenter.svelte'
 
   export let direction: 'before' | 'after'
+  export let value: DateOrShift | undefined = undefined
   export let minutes: number[] = [5, 15, 30]
   export let hours: number[] = [1, 2, 4]
   export let days: number[] = [1, 3, 7, 30]
+
+  let date = value?.date
   const dispatch = createEventDispatcher()
 
   $: base = direction === 'before' ? -1 : 1
@@ -30,11 +36,25 @@
 </script>
 
 <div class="antiPopup">
+  <div class="flex-center mt-1 mb-1">
+    <DateRangePresenter
+      bind:value={date}
+      withTime={true}
+      editable={true}
+      labelNull={ui.string.SelectDate}
+      on:change={() => {
+        if (date) {
+          dispatch('close', { date })
+        }
+      }}
+    />
+  </div>
+  <div class="bottom-divider mb-2" />
   {#each values as value}
     <div
       class="ap-menuItem"
       on:click={() => {
-        dispatch('close', value)
+        dispatch('close', { shift: value })
       }}
     >
       <TimeShiftPresenter value={value * base} />

packages/ui/src/plugin.ts

@@ -40,6 +40,7 @@ export default plugin(uiId, {
     SearchDots: '' as IntlString,
     Suggested: '' as IntlString,
     TimeTooltip: '' as IntlString,
+    SelectDate: '' as IntlString,
     None: '' as IntlString,
     NotSelected: '' as IntlString,
     Today: '' as IntlString,

packages/ui/src/types.ts

@@ -82,6 +82,11 @@ export type HorizontalAlignment = 'left' | 'right'
 
 export type IconSize = 'inline' | 'tiny' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full'
 
+export interface DateOrShift {
+  date?: number
+  shift?: number
+}
+
 export interface LabelAndProps {
   label: IntlString | undefined
   element: HTMLElement | undefined