From b3d6a111613bc51b1c8e013ea9acd3c21efb4114 Mon Sep 17 00:00:00 2001
From: Artyom Grigorovich <grigorovichartyom@gmail.com>
Date: Wed, 13 Apr 2022 00:12:53 +0700
Subject: [PATCH] Tracker: improve CheckBox (#1356)

Signed-off-by: Artyom Grigorovich <grigorovichartyom@gmail.com>
---
 packages/ui/src/components/CheckBox.svelte    | 14 +++++++-
 .../src/components/issues/IssuesList.svelte   |  9 ++---
 .../src/components/Table.svelte               | 36 ++++++++++---------
 3 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/packages/ui/src/components/CheckBox.svelte b/packages/ui/src/components/CheckBox.svelte
index 308d7e6b13..d615d8f19f 100644
--- a/packages/ui/src/components/CheckBox.svelte
+++ b/packages/ui/src/components/CheckBox.svelte
@@ -13,14 +13,26 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte'
+
   export let checked: boolean = false
   export let symbol: 'check' | 'minus' = 'check'
   export let circle: boolean = false
   export let primary: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  const handleValueChanged = (event: Event) => {
+    const eventTarget = event.target as HTMLInputElement
+    const isChecked = eventTarget.checked
+
+    dispatch('value', isChecked)
+  }
+
 </script>
 
 <label class="checkbox" class:circle class:primary class:checked>
-  <input class="chBox" type="checkbox" bind:checked on:change />
+  <input class="chBox" type="checkbox" bind:checked on:change={handleValueChanged} />
   <svg class="checkSVG" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
     {#if !circle}
       <path
diff --git a/plugins/tracker-resources/src/components/issues/IssuesList.svelte b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
index 40dbec6888..eaf064c54b 100644
--- a/plugins/tracker-resources/src/components/issues/IssuesList.svelte
+++ b/plugins/tracker-resources/src/components/issues/IssuesList.svelte
@@ -75,11 +75,8 @@
     })
   }
 
-  const handleIssueSelected = (id: Ref<Doc>, event: Event) => {
-    const eventTarget = event.target as HTMLInputElement
-    const isChecked = eventTarget.checked
-
-    if (isChecked) {
+  const handleIssueSelected = (id: Ref<Doc>, event: CustomEvent<boolean>) => {
+    if (event.detail) {
       selectedIssueIds.add(id)
     } else {
       selectedIssueIds.delete(id)
@@ -116,7 +113,7 @@
                 <div class="eListGridCheckBox ml-2">
                   <CheckBox
                     checked={selectedIssueIds.has(docObject._id)}
-                    on:change={(event) => {
+                    on:value={(event) => {
                       handleIssueSelected(docObject._id, event)
                     }}
                   />
diff --git a/plugins/view-resources/src/components/Table.svelte b/plugins/view-resources/src/components/Table.svelte
index ae2d696187..9ceb57ac7d 100644
--- a/plugins/view-resources/src/components/Table.svelte
+++ b/plugins/view-resources/src/components/Table.svelte
@@ -48,7 +48,8 @@
 
   const dispatch = createEventDispatcher()
 
-  $: sortingFunction = (config.find(it => (typeof it !== 'string') && it.sortingKey === sortKey) as BuildModelKey)?.sortingFunction
+  $: sortingFunction = (config.find((it) => typeof it !== 'string' && it.sortingKey === sortKey) as BuildModelKey)
+    ?.sortingFunction
 
   let qindex = 0
   async function update (
@@ -103,11 +104,9 @@
 
   let checked: Set<Ref<Doc>> = new Set<Ref<Doc>>()
 
-  function check (id: Ref<Doc>, e: Event) {
+  function check (id: Ref<Doc>, event: CustomEvent<boolean>) {
     if (!enableChecking) return
-    const target = e.target as HTMLInputElement
-    const value = target.checked
-    if (value) {
+    if (event.detail) {
       checked.add(id)
     } else {
       checked.delete(id)
@@ -138,8 +137,8 @@
                 <CheckBox
                   symbol={'minus'}
                   checked={objects?.length === checked.size && objects?.length > 0}
-                  on:change={(e) => {
-                    objects.map((o) => check(o._id, e))
+                  on:value={(event) => {
+                    objects.map((object) => check(object._id, event))
                   }}
                 />
               </div>
@@ -182,20 +181,23 @@
                           <div class="antiTable-cells__checkCell">
                             <CheckBox
                               checked={checked.has(object._id)}
-                              on:change={(e) => {
-                                check(object._id, e)
+                              on:value={(event) => {
+                                check(object._id, event)
                               }}
                             />
                           </div>
                         {/if}
-                        <Component is={notification.component.NotificationPresenter} props={{ value: object, kind: enableChecking ? 'table' : 'block' }} />
+                        <Component
+                          is={notification.component.NotificationPresenter}
+                          props={{ value: object, kind: enableChecking ? 'table' : 'block' }}
+                        />
                       </div>
                     {:else}
                       <div class="antiTable-cells__checkCell">
                         <CheckBox
                           checked={checked.has(object._id)}
-                          on:change={(e) => {
-                            check(object._id, e)
+                          on:value={(event) => {
+                            check(object._id, event)
                           }}
                         />
                       </div>
@@ -209,7 +211,11 @@
                       value={getObjectValue(attribute.key, object) ?? ''}
                       {...attribute.props}
                     />
-                    <div id='context-menu' class="antiTable-cells__firstCell-menuRow" on:click={(ev) => showMenu(ev, object, row)}>
+                    <div
+                      id="context-menu"
+                      class="antiTable-cells__firstCell-menuRow"
+                      on:click={(ev) => showMenu(ev, object, row)}
+                    >
                       <MoreV size={'small'} />
                     </div>
                   </div>
@@ -236,9 +242,7 @@
                 {#if enableChecking}
                   <td>
                     <div class="antiTable-cells__checkCell">
-                      <CheckBox
-                        checked={false}
-                      />
+                      <CheckBox checked={false} />
                     </div>
                   </td>
                 {/if}