Set particular date for reminder (#1801)

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

packages/ui/lang/en.json

@@ -15,6 +15,7 @@
     "SearchDots": "Search...",
     "Suggested": "Suggested",
     "TimeTooltip": "{value}",
+    "SelectDate": "Select date",
     "None": "None",
     "NotSelected": "Not selected",
     "Today": "Today",

packages/ui/lang/ru.json

@@ -15,6 +15,7 @@
     "SearchDots": "Поиск...",
     "Suggested": "Предложено",
     "TimeTooltip": "{value}",
+    "SelectDate": "Выберите дату",
     "None": "Нет",
     "NotSelected": "Не выбрано",
     "Today": "Сегодня",

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

plugins/calendar-resources/src/components/CreateReminder.svelte

@@ -16,7 +16,7 @@
   import contact, { Employee, EmployeeAccount } from '@anticrm/contact'
   import { Class, Doc, getCurrentAccount, Ref } from '@anticrm/core'
   import { Card, getClient, UserBoxList } from '@anticrm/presentation'
-  import { TimeShiftPicker, Grid, StylishEdit } from '@anticrm/ui'
+  import { DateOrShift, TimeShiftPicker, Grid, StylishEdit } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
 
@@ -24,7 +24,7 @@
   export let attachedToClass: Ref<Class<Doc>>
   export let title: string = ''
 
-  let shift = 30 * 60 * 1000
+  let value: DateOrShift = { shift: 30 * 60 * 1000 }
   const currentUser = getCurrentAccount() as EmployeeAccount
   let participants: Ref<Employee>[] = [currentUser.employee]
   const space = calendar.space.PersonalEvents
@@ -37,7 +37,15 @@
   }
 
   async function saveReminder () {
-    const date = new Date().getTime() + shift
+    let date: number | undefined = undefined
+    if (value.date !== undefined) {
+      date = new Date(value.date).getTime()
+    } else if (value.shift !== undefined) {
+      date = new Date().getTime() + value.shift
+    }
+    if (date === undefined) {
+      return
+    }
     const _id = await client.createDoc(calendar.class.Event, space, {
       attachedTo,
       attachedToClass,
@@ -58,7 +66,10 @@
 <Card
   label={calendar.string.CreateReminder}
   okAction={saveReminder}
-  canSave={title !== undefined && title.trim().length > 0 && participants.length > 0}
+  canSave={title !== undefined &&
+    title.trim().length > 0 &&
+    participants.length > 0 &&
+    (value.date !== undefined || value.shift !== undefined)}
   on:close={() => {
     dispatch('close')
   }}
@@ -66,7 +77,7 @@
   <Grid column={1} rowGap={1.75}>
     <StylishEdit bind:value={title} label={calendar.string.Title} />
     <div class="antiComponentBox">
-      <TimeShiftPicker title={calendar.string.Date} bind:value={shift} direction="after" />
+      <TimeShiftPicker title={calendar.string.Date} bind:value direction="after" />
     </div>
     <UserBoxList
       _class={contact.class.Employee}

plugins/calendar-resources/src/components/SaveEventReminder.svelte

@@ -14,9 +14,9 @@
 -->
 <script lang="ts">
   import { Event } from '@anticrm/calendar'
-  import { Class, Ref, Timestamp } from '@anticrm/core'
+  import { Class, Ref } from '@anticrm/core'
   import presentation, { Card, createQuery, getClient } from '@anticrm/presentation'
-  import { Grid, TimeShiftPicker } from '@anticrm/ui'
+  import { DateOrShift, Grid, TimeShiftPicker } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
 
@@ -28,7 +28,7 @@
   query.query(objectClass, { _id: objectId }, (res) => {
     event = res[0]
   })
-  let shift: Timestamp = -30 * 60 * 1000
+  let value: DateOrShift = { shift: -30 * 60 * 1000 }
   let event: Event | undefined
 
   const dispatch = createEventDispatcher()
@@ -38,7 +38,12 @@
   }
 
   async function saveReminder () {
-    if (event === undefined) return
+    if (event === undefined || (value.shift === undefined && value.date === undefined)) return
+    const shift = value.date !== undefined ? value.date - event.date : value.shift
+    if (shift === undefined) {
+      return
+    }
+
     await client.updateMixin(event._id, event._class, event.space, calendar.mixin.Reminder, {
       shift,
       state: 'active'
@@ -57,7 +62,7 @@
 >
   <Grid column={1} rowGap={1.75}>
     <div class="antiComponentBox">
-      <TimeShiftPicker title={calendar.string.RemindMeAt} bind:value={shift} />
+      <TimeShiftPicker title={calendar.string.RemindMeAt} direction="before" bind:value />
     </div>
   </Grid>
 </Card>

plugins/gmail-assets/src/tsdoc-metadata.json

@@ -1,11 +1,11 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.23.0"
-    }
-  ]
-}
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.23.0"
+    }
+  ]
+}