From fc7605f279efbc969912701ba7a297112f7e9256 Mon Sep 17 00:00:00 2001
From: Anna No <anna.no@xored.com>
Date: Mon, 18 Apr 2022 23:28:59 +0700
Subject: [PATCH] Board: Update Date Presenter to reuse as presenter

Signed-off-by: Anna No <anna.no@xored.com>
---
 .../src/components/editor/CardDetails.svelte  |  8 +++--
 .../presenters/DatePresenter.svelte           | 32 +++++++++----------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/plugins/board-resources/src/components/editor/CardDetails.svelte b/plugins/board-resources/src/components/editor/CardDetails.svelte
index 078f2056f0..d2c7e38c33 100644
--- a/plugins/board-resources/src/components/editor/CardDetails.svelte
+++ b/plugins/board-resources/src/components/editor/CardDetails.svelte
@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import type { Card, CardLabel } from '@anticrm/board'
+  import type { Card, CardDate, CardLabel } from '@anticrm/board'
 
   import contact, { Employee } from '@anticrm/contact'
   import { getResource } from '@anticrm/platform'
@@ -53,6 +53,10 @@
     labels = []
   }
 
+  function updateDate (e: CustomEvent<CardDate>) {
+    client.update(value, { date: e.detail })
+  }
+
   getCardActions(client, {
     _id: { $in: [board.cardAction.Dates, board.cardAction.Labels, board.cardAction.Members] }
   }).then(async (result) => {
@@ -105,7 +109,7 @@
         <Label label={board.string.Dates} />
       </div>
       {#key value.date}
-        <DatePresenter {value} on:click={dateHandler} />
+        <DatePresenter value={value.date} on:click={dateHandler} on:update={updateDate} />
       {/key}
     </div>
   {/if}
diff --git a/plugins/board-resources/src/components/presenters/DatePresenter.svelte b/plugins/board-resources/src/components/presenters/DatePresenter.svelte
index 71c7d9a1d0..eb0cb3f10b 100644
--- a/plugins/board-resources/src/components/presenters/DatePresenter.svelte
+++ b/plugins/board-resources/src/components/presenters/DatePresenter.svelte
@@ -1,31 +1,31 @@
 <script lang="ts">
-  import type { Card } from '@anticrm/board'
-  import { getClient } from '@anticrm/presentation'
+  import type { CardDate } from '@anticrm/board'
   import { CheckBox, DatePresenter } from '@anticrm/ui'
+  import { createEventDispatcher } from 'svelte'
 
-  export let value: Card
+  export let value: CardDate
+  export let isInline: boolean = false
 
-  const client = getClient()
-  const {date} = value
-  let isChecked = date?.isChecked
+  let isChecked = value?.isChecked
+  const dispatch = createEventDispatcher()
 
-  function update(){
-    if (isChecked === undefined) return
-    client.update(value, {date: {...date, isChecked}})
+  function check() {
+    if (isInline || isChecked === undefined) return
+    dispatch('update', { ...value, isChecked })
   }
 </script>
 
-{#if date}
+{#if value}
   <div class="flex-presenter flex-gap-1 h-full">
-    <CheckBox bind:checked={isChecked} on:value={update}/>
+    <CheckBox bind:checked={isChecked} on:value={check} />
     <div class="flex-center h-full" on:click>
       <div class="flex-row-center background-button-bg-color border-radius-1 w-full">
-        {#if date.startDate}
-          <DatePresenter bind:value={date.startDate} />
+        {#if value.startDate}
+          <DatePresenter bind:value={value.startDate} />
         {/if}
-        {#if date.startDate && date.dueDate}-{/if}
-        {#if date.dueDate}
-          <DatePresenter bind:value={date.dueDate} withTime={true} showIcon={false} />
+        {#if value.startDate && value.dueDate}-{/if}
+        {#if value.dueDate}
+          <DatePresenter bind:value={value.dueDate} withTime={true} showIcon={false} />
         {/if}
       </div>
     </div>