From 8abadca4502a48616050e75c3414504b1c12faae Mon Sep 17 00:00:00 2001
From: Alex <41288429+Dvinyanin@users.noreply.github.com>
Date: Thu, 19 May 2022 13:38:59 +0700
Subject: [PATCH] Add checklist dueTo (#1796)

Signed-off-by: Dvinyanin Alexandr <dvinyanin.alexandr@gmail.com>
---
 .../components/editor/CardChecklist.svelte    | 24 +++++++++++++++++--
 .../presenters/ChecklistsPresenter.svelte     | 11 +++++++--
 .../board-resources/src/utils/BoardUtils.ts   | 12 ++++++++--
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/plugins/board-resources/src/components/editor/CardChecklist.svelte b/plugins/board-resources/src/components/editor/CardChecklist.svelte
index 77136bd590..44e456d0c4 100644
--- a/plugins/board-resources/src/components/editor/CardChecklist.svelte
+++ b/plugins/board-resources/src/components/editor/CardChecklist.svelte
@@ -17,12 +17,22 @@
   import { createQuery, getClient, UserBox, MessageBox } from '@anticrm/presentation'
   import type { TodoItem } from '@anticrm/task'
   import task from '@anticrm/task'
-  import { Button, CheckBox, TextAreaEditor, Icon, IconMoreH, Progress, showPopup } from '@anticrm/ui'
+  import {
+    Button,
+    CheckBox,
+    TextAreaEditor,
+    Icon,
+    IconMoreH,
+    Progress,
+    showPopup,
+    DateRangePresenter
+  } from '@anticrm/ui'
   import { ContextMenu, HTMLPresenter } from '@anticrm/view-resources'
   import contact, { Employee } from '@anticrm/contact'
 
   import board from '../../plugin'
   import { getPopupAlignment } from '../../utils/PopupUtils'
+  import { getDateIcon } from '../../utils/BoardUtils'
 
   export let value: TodoItem
   const client = getClient()
@@ -94,6 +104,10 @@
     client.update(item, { assignee })
   }
 
+  function updateDueDate (item: TodoItem, dueTo: number) {
+    client.update(item, { dueTo })
+  }
+
   async function setDoneToChecklistItem (item: TodoItem, event: CustomEvent<boolean>) {
     const isDone = event.detail
     if (!value) {
@@ -206,7 +220,13 @@
           >
             <HTMLPresenter bind:value={item.name} />
           </div>
-          <div class="flex-center">
+          <div class="flex-center gap-1">
+            <DateRangePresenter
+              editable
+              bind:value={item.dueTo}
+              icon={getDateIcon(item)}
+              on:change={(e) => updateDueDate(item, e.detail)}
+            />
             <UserBox
               _class={contact.class.Employee}
               label={board.string.Assignee}
diff --git a/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte b/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte
index 15ef2ee146..6ff3324105 100644
--- a/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/ChecklistsPresenter.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { Icon } from '@anticrm/ui'
+  import { DatePresenter, Icon } from '@anticrm/ui'
   import board, { Card } from '@anticrm/board'
   import { createQuery } from '@anticrm/presentation'
   import task, { TodoItem } from '@anticrm/task'
   import { Ref } from '@anticrm/core'
+  import { getDateIcon } from '../../utils/BoardUtils'
 
   export let value: Card
   export let size: 'small' | 'medium' | 'large' = 'small'
@@ -14,10 +15,13 @@
     todoLists = result.map(({ _id }) => _id)
   })
   const query = createQuery()
-  let done: number, total: number
+  let done: number, total: number, item: TodoItem
   $: query.query(task.class.TodoItem, { space: value.space, attachedTo: { $in: todoLists } }, (result) => {
     total = result.total
     done = result.filter((t) => t.done).length
+    item = result.reduce((min, cur) =>
+      cur.dueTo === null ? min : min.dueTo === null || cur.dueTo < min.dueTo ? cur : min
+    )
   })
 </script>
 
@@ -25,5 +29,8 @@
   <div class="sm-tool-icon ml-1 mr-1">
     <Icon icon={board.icon.Card} {size} />
     &nbsp;{done}/{total}
+    {#if item.dueTo !== null}
+      &nbsp;<DatePresenter value={item.dueTo} size="small" icon={getDateIcon(item)} kind="transparent" />
+    {/if}
   </div>
 {/if}
diff --git a/plugins/board-resources/src/utils/BoardUtils.ts b/plugins/board-resources/src/utils/BoardUtils.ts
index e24b753520..e36231ec50 100644
--- a/plugins/board-resources/src/utils/BoardUtils.ts
+++ b/plugins/board-resources/src/utils/BoardUtils.ts
@@ -1,6 +1,6 @@
 import board, { Board, CardLabel, Card } from '@anticrm/board'
 import core, { Ref, TxOperations, Space } from '@anticrm/core'
-import type { KanbanTemplate } from '@anticrm/task'
+import type { KanbanTemplate, TodoItem } from '@anticrm/task'
 import { createKanban } from '@anticrm/task'
 import {
   hexColorToNumber,
@@ -13,7 +13,8 @@ import {
   FeijoaColor,
   EastSideColor,
   SalmonColor,
-  SeagullColor
+  SeagullColor,
+  areDatesEqual
 } from '@anticrm/ui'
 
 export async function createBoard (
@@ -119,3 +120,10 @@ export async function createMissingLabels (
 
   return labelsUpdate
 }
+
+export function getDateIcon (item: TodoItem): 'normal' | 'warning' | 'overdue' {
+  if (item.dueTo === null) return 'normal'
+  const date = new Date()
+  const dueDate = new Date(item.dueTo)
+  return areDatesEqual(date, dueDate) ? 'warning' : dueDate < date ? 'overdue' : 'normal'
+}