Upgrade date/time picker for New Event (#2320)

* remove duplication

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

* shifted value should start from start date

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

* upgrade date/time selector

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

Signed-off-by: Ruslan Bayandinov <wazsone@ya.ru>

packages/ui/src/components/calendar/DatePickerPopup.svelte

@@ -25,7 +25,6 @@
   let frendlyFocus: HTMLElement[] | undefined
   let componentInstance: any
 
-  $: component = $dpstore.component
   $: frendlyFocus = $dpstore.frendlyFocus
   $: if ($dpstore.anchor) {
     anchor = $dpstore.anchor
@@ -99,12 +98,12 @@
 <svelte:window on:resize={fitPopup} on:keydown={handleKeydown} />
 <div
   class="popup"
-  class:visibility={$dpstore.component !== undefined}
+  class:visibility={component !== undefined}
   bind:this={modalHTML}
   tabindex="0"
   on:blur={(ev) => unfocus(ev)}
 >
-  {#if $dpstore.component}
+  {#if component}
     <svelte:component
       this={component}
       bind:shift

packages/ui/src/components/calendar/DateRangePopup.svelte

@@ -62,7 +62,7 @@
             <div
               class="btn"
               on:click={() => {
-                const shiftedDate = new Date(today.getTime() + value * base)
+                const shiftedDate = new Date(currentDate.getTime() + value * base)
                 dispatch('change', shiftedDate)
               }}
             >

packages/ui/src/components/calendar/DateRangePresenter.svelte

@@ -45,8 +45,7 @@
   const editsType: TEdits[] = ['day', 'month', 'year', 'hour', 'min']
   const getIndex = (id: TEdits): number => editsType.indexOf(id)
   const today: Date = new Date(Date.now())
-  let currentDate: Date = new Date(value ?? Date.now())
-  currentDate.setSeconds(0, 0)
+  let currentDate: Date
   let selected: TEdits = 'day'
 
   let edit: boolean = false
@@ -114,22 +113,13 @@
     })
     edits = edits
   }
-  const saveDate = (): void => {
-    // currentDate.setHours(edits[3].value > 0 ? edits[3].value : 0)
-    // currentDate.setMinutes(edits[4].value > 0 ? edits[4].value : 0)
+  export const saveDate = (): void => {
     currentDate.setSeconds(0, 0)
     value = currentDate.getTime()
     dateToEdits()
     $dpstore.currentDate = currentDate
     dispatch('change', value)
   }
-  if (value !== null && value !== undefined) dateToEdits()
-  else if (value === null) {
-    edits.forEach((edit) => {
-      edit.value = -1
-    })
-    currentDate = today
-  }
 
   const fixEdits = (): void => {
     const tempValues: number[] = []
@@ -265,6 +255,21 @@
     frendlyFocus.push(closeBtn)
     $dpstore.frendlyFocus = frendlyFocus
   }
+
+  export const adaptValue = () => {
+    currentDate = new Date(value ?? Date.now())
+    currentDate.setSeconds(0, 0)
+    if (value !== null && value !== undefined) {
+      dateToEdits()
+    } else if (value === null) {
+      edits.forEach((edit) => {
+        edit.value = -1
+      })
+      currentDate = today
+    }
+  }
+
+  adaptValue()
 </script>
 
 <button

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

@@ -17,6 +17,7 @@
   import { Class, Doc, getCurrentAccount, Ref } from '@hcengineering/core'
   import { Card, getClient, UserBoxList } from '@hcengineering/presentation'
   import ui, { EditBox, DateRangePresenter } from '@hcengineering/ui'
+  import { tick } from 'svelte'
   import { createEventDispatcher } from 'svelte'
   import calendar from '../plugin'
 
@@ -27,10 +28,14 @@
   export let withTime = false
 
   const now = new Date()
+  const defaultDuration = 30 * 60 * 1000
 
-  let value =
+  let startDate =
     date === undefined ? now.getTime() : withTime ? date.getTime() : date.setHours(now.getHours(), now.getMinutes())
-  let dueDate = value + 30 * 60 * 1000
+  let duration = defaultDuration
+  let dueDate = startDate + duration
+  let dueDateRef: DateRangePresenter
+
   const currentUser = getCurrentAccount() as EmployeeAccount
   let participants: Ref<Employee>[] = [currentUser.employee]
   const space = calendar.space.PersonalEvents
@@ -44,7 +49,7 @@
 
   async function saveEvent () {
     let date: number | undefined
-    if (value != null) date = value
+    if (startDate != null) date = startDate
     if (date === undefined) return
     await client.createDoc(calendar.class.Event, space, {
       attachedTo,
@@ -57,20 +62,56 @@
       title
     })
   }
+
+  const handleNewStartDate = async (newStartDate: number | null) => {
+    if (newStartDate !== null) {
+      startDate = newStartDate
+      dueDate = startDate + duration
+      await tick()
+      dueDateRef.adaptValue()
+    }
+  }
+
+  const handleNewDueDate = async (newDueDate: number | null) => {
+    if (newDueDate !== null) {
+      const diff = newDueDate - startDate
+      if (diff > 0) {
+        dueDate = newDueDate
+        duration = diff
+      } else {
+        dueDate = startDate + duration
+      }
+      await tick()
+      dueDateRef.adaptValue()
+    }
+  }
 </script>
 
 <Card
   label={calendar.string.CreateEvent}
   okAction={saveEvent}
-  canSave={title !== undefined && title.trim().length > 0 && participants.length > 0 && value !== undefined}
+  canSave={title !== undefined && title.trim().length > 0 && participants.length > 0 && startDate !== undefined}
   on:close={() => {
     dispatch('close')
   }}
 >
   <EditBox bind:value={title} placeholder={calendar.string.Title} kind={'large-style'} focus />
   <svelte:fragment slot="pool">
-    <DateRangePresenter bind:value withTime editable labelNull={ui.string.SelectDate} />
-    <DateRangePresenter bind:value={dueDate} labelNull={calendar.string.DueTo} withTime editable />
+    <DateRangePresenter
+      value={startDate}
+      labelNull={ui.string.SelectDate}
+      on:change={async (event) => await handleNewStartDate(event.detail)}
+      withTime
+      editable
+    />
+    <DateRangePresenter
+      bind:this={dueDateRef}
+      value={dueDate}
+      labelNull={calendar.string.DueTo}
+      on:change={async (event) => await handleNewDueDate(event.detail)}
+      withTime
+      editable
+    />
     <UserBoxList bind:items={participants} label={calendar.string.Participants} />
   </svelte:fragment>
 </Card>