Add Date action (#1418)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>

plugins/board-assets/lang/en.json

@@ -59,6 +59,12 @@
     "Create": "Create",
     "CreateDescription": "If you want, we can create a card for every new line ({number}). You can also create one card with a long title.",
     "CreateSingle": "Just one card",
-    "CreateMultiple": "Create {number} cards"
+    "CreateMultiple": "Create {number} cards",
+    "StartDate": "Start date",
+    "DueDate": "Due date",
+    "Save": "Save",
+    "Remove": "Remove",
+    "Cancel": "Cancel",
+    "NullDate": "M/D/YYYY"
   }
 }

plugins/board-assets/lang/ru.json

@@ -59,6 +59,12 @@
     "Create": "Создать",
     "CreateDescription": "Можно создать отдельные карточки для каждой строки ({number}) или одну с длинным названием.",
     "CreateSingle": "Создать одну",
-    "CreateMultiple": "Создать несколько ({number})"
+    "CreateMultiple": "Создать несколько ({number})",
+    "StartDate": "Начало",
+    "DueDate": "Срок",
+    "Save": "Сохранить",
+    "Remove": "Удалить",
+    "Cancel": "Закрыть",
+    "NullDate": "М/Д/ГГГГ"
   }
 }

plugins/board-resources/package.json

@@ -34,6 +34,7 @@
     "@anticrm/attachment": "~0.6.1",
     "@anticrm/attachment-resources": "~0.6.0",
     "@anticrm/board": "~0.6.0",
+    "@anticrm/calendar": "~0.6.0",
     "@anticrm/chunter": "~0.6.1",
     "@anticrm/chunter-resources": "~0.6.0",
     "@anticrm/contact": "~0.6.5",

plugins/board-resources/src/components/editor/CardDetails.svelte

@@ -99,7 +99,7 @@
       <div class="text-md font-medium">
         <Label label={board.string.Dates} />
       </div>
-      <DatePresenter value={value.date} on:click={dateHandler} />
+      <DatePresenter {value} on:click={dateHandler} />
     </div>
   {/if}
 {/if}

plugins/board-resources/src/components/popups/DateRangePicker.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+  import { Label, Button, DateRangePresenter, CheckBox, Component } from '@anticrm/ui'
+  import { Card } from '@anticrm/board'
+  import calendar from '@anticrm/calendar'
+  import board from '../../plugin'
+  import { getClient } from '@anticrm/presentation';
+
+  export let object: Card
+
+  const client = getClient()
+  const dispatch = createEventDispatcher()
+
+  let startDate = object.date?.startDate
+  let savedStartDate = object.date?.startDate ?? Date.now()
+  let startDateEnabled = startDate !== undefined
+  $: startDate && (savedStartDate = startDate)
+  let dueDate = object.date?.dueDate
+  let savedDueDate = object.date?.dueDate ?? Date.now()
+  let dueDateEnabled = dueDate !== undefined
+  $: dueDate && (savedDueDate = dueDate)
+</script>
+
+<div class="antiPopup antiPopup-withHeader antiPopup-withTitle antiPopup-withCategory w-85">
+  <div class="ap-space"/>
+  <div class="fs-title ap-header flex-row-center">
+    <Label label={board.string.Dates}/>
+  </div>
+  <div class="ap-space bottom-divider"/>
+    <div class="ap-category">
+      <div class="categoryItem flex-center whitespace-nowrap">
+        <Label label={board.string.StartDate}/>
+      </div>
+    <div class="categoryItem p-2 flex-center">
+      <CheckBox bind:checked={startDateEnabled} on:value={() => {startDate = startDateEnabled ? savedStartDate : undefined}}/>
+    </div>
+    <div class="categoryItem w-full p-2">
+      <DateRangePresenter bind:value={startDate} editable={startDateEnabled} labelNull={board.string.NullDate}/>
+    </div>
+  </div>
+  <div class="ap-category">
+    <div class="categoryItem flex-center whitespace-nowrap">
+      <Label label={board.string.DueDate}/>
+    </div>
+    <div class="categoryItem p-2 flex-center">
+      <CheckBox bind:checked={dueDateEnabled} on:value={() => {dueDate = dueDateEnabled ? savedDueDate : undefined}}/>
+    </div>
+    <div class="categoryItem w-full p-2">
+      <DateRangePresenter bind:value={dueDate} editable={dueDateEnabled} labelNull={board.string.NullDate}/>
+    </div>
+  </div>
+  <div class="ap-footer">
+    <Button
+      size={'small'}
+      label={board.string.Cancel}
+      on:click={() => {
+        dispatch('close')
+      }}
+    />
+    <Button
+      label={board.string.Remove}
+      size={'small'}
+      on:click={() => {
+        client.update(object, {date: {}})
+        dispatch('close')
+      }}
+    />
+    <Button
+      label={board.string.Save}
+      size={'small'}
+      kind={'primary'}
+      on:click={() => {
+        client.update(object, {date: {startDate, dueDate}})
+        dispatch('close')
+      }}
+    />
+    <div class="flex-center mr-2">
+      <Component is={calendar.component.DocReminder} props={{ value: object }} />
+    </div>
+  </div>
+</div>

plugins/board-resources/src/components/presenters/DatePresenter.svelte

@@ -1,25 +1,26 @@
 <script lang="ts">
-  import type { CardDate } from '@anticrm/board'
+  import type { Card } from '@anticrm/board'
+  import { getClient } from '@anticrm/presentation'
   import { CheckBox, DatePresenter } from '@anticrm/ui'
 
-  // TODO: implement
-  export let value: CardDate
+  export let value: Card
 
+  const client = getClient()
+  const {date} = value
+  let isChecked = date?.isChecked
 </script>
 
-{#if value}
+{#if date}
   <div class="flex-presenter flex-gap-1 h-full">
-    <CheckBox checked={value.isChecked} />
-    <div class="flex-center h-full">
+    <CheckBox bind:checked={isChecked} on:value={() => client.update(value, {date: {...date, isChecked}})}/>
+    <div class="flex-center h-full" on:click>
       <div class="flex-row-center background-button-bg-color border-radius-1 w-full">
-        {#if value.startDate && value.dueDate}
-          <DatePresenter bind:value={value.startDate} showIcon={false} />
-          -
-          <DatePresenter bind:value={value.dueDate} withTime={true} showIcon={false} />
-        {:else if value.startDate}
-          <DatePresenter bind:value={value.startDate} />
-        {:else if value.dueDate}
-          <DatePresenter bind:value={value.dueDate} withTime={true} showIcon={false} />
+        {#if date.startDate}
+          <DatePresenter bind:value={date.startDate} />
+        {/if}
+        {#if date.startDate && date.dueDate}-{/if}
+        {#if date.dueDate}
+          <DatePresenter bind:value={date.dueDate} withTime={true} showIcon={false} />
         {/if}
       </div>
     </div>

plugins/board-resources/src/index.ts

@@ -15,6 +15,8 @@
 //
 
 import { Resources } from '@anticrm/platform'
+import { showPopup } from '@anticrm/ui'
+import { Card } from '@anticrm/board'
 import CardPresenter from './components/CardPresenter.svelte'
 import CreateBoard from './components/CreateBoard.svelte'
 import CreateCard from './components/CreateCard.svelte'
@@ -22,8 +24,12 @@ import EditCard from './components/EditCard.svelte'
 import KanbanCard from './components/KanbanCard.svelte'
 import TemplatesIcon from './components/TemplatesIcon.svelte'
 import KanbanView from './components/KanbanView.svelte'
+import DateRangePicker from './components/popups/DateRangePicker.svelte'
 import { addCurrentUser, canAddCurrentUser, isArchived, isUnarchived } from './utils/CardUtils'
 
+async function showDatePickerPopup (object: Card): Promise<void> {
+  showPopup(DateRangePicker, { object })
+}
 export default async (): Promise<Resources> => ({
   component: {
     CreateBoard,
@@ -35,7 +41,8 @@ export default async (): Promise<Resources> => ({
     KanbanView
   },
   cardActionHandler: {
-    Join: addCurrentUser
+    Join: addCurrentUser,
+    Dates: showDatePickerPopup
   },
   cardActionSupportedHandler: {
     Join: canAddCurrentUser,

plugins/board-resources/src/plugin.ts

@@ -80,7 +80,13 @@ export default mergeIds(boardId, board, {
     Create: '' as IntlString,
     CreateDescription: '' as IntlString,
     CreateSingle: '' as IntlString,
-    CreateMultiple: '' as IntlString
+    CreateMultiple: '' as IntlString,
+    StartDate: '' as IntlString,
+    DueDate: '' as IntlString,
+    Save: '' as IntlString,
+    Remove: '' as IntlString,
+    Cancel: '' as IntlString,
+    NullDate: '' as IntlString
   },
   component: {
     CreateCustomer: '' as AnyComponent,