sql generator - basic concept

packages/web/src/appobj/AppObjectCore.svelte

@@ -2,12 +2,14 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import contextMenu from '../utility/contextMenu';
   import { createEventDispatcher } from 'svelte';
+  import CheckboxField from '../forms/CheckboxField.svelte';
 
   const dispatch = createEventDispatcher();
 
   export let icon;
   export let title;
   export let data;
+  export let module;
 
   export let isBold = false;
   export let isBusy = false;
@@ -16,22 +18,54 @@
   export let extInfo = undefined;
   export let menu = undefined;
   export let expandIcon = undefined;
+  export let checkedObjectsStore = null;
+
+  $: isChecked = checkedObjectsStore && $checkedObjectsStore.find(x => module.extractKey(data) == module.extractKey(x));
 
   function handleExpand() {
     dispatch('expand');
   }
+  function handleClick() {
+    if (checkedObjectsStore) {
+      if (isChecked) {
+        checkedObjectsStore.update(x => x.filter(y => module.extractKey(data) != module.extractKey(y)));
+      } else {
+        checkedObjectsStore.update(x => [...x, data]);
+      }
+    } else {
+      dispatch('click');
+    }
+  }
+
+  function setChecked(value) {
+    if (!value && isChecked) {
+      checkedObjectsStore.update(x => x.filter(y => module.extractKey(data) != module.extractKey(y)));
+    }
+    if (value && !isChecked) {
+      checkedObjectsStore.update(x => [...x, data]);
+    }
+  }
 </script>
 
 <div
   class="main"
   class:isBold
   draggable={true}
-  on:click
+  on:click={handleClick}
   use:contextMenu={menu}
   on:dragstart={e => {
     e.dataTransfer.setData('app_object_drag_data', JSON.stringify(data));
   }}
 >
+  {#if checkedObjectsStore}
+    <CheckboxField
+      checked={!!isChecked}
+      on:change={e => {
+        // @ts-ignore
+        setChecked(e.target.checked);
+      }}
+    />
+  {/if}
   {#if expandIcon}
     <span class="expand-icon" on:click|stopPropagation={handleExpand}>
       <FontIcon icon={expandIcon} />

packages/web/src/appobj/AppObjectGroup.svelte

@@ -8,6 +8,7 @@
   export let group;
   export let items;
   export let module;
+  export let checkedObjectsStore = null;
 
   let isExpanded = true;
 
@@ -26,7 +27,7 @@
 
 {#if isExpanded}
   {#each filtered as item (module.extractKey(item.data))}
-    <AppObjectListItem {...$$restProps} {module} data={item.data} on:objectClick />
+    <AppObjectListItem {...$$restProps} {module} data={item.data} {checkedObjectsStore} on:objectClick />
   {/each}
 {/if}
 

packages/web/src/appobj/AppObjectList.svelte

@@ -11,6 +11,7 @@
   export let isExpandable = undefined;
   export let filter;
   export let expandIconFunc = undefined;
+  export let checkedObjectsStore = null;
 
   export let groupFunc = undefined;
 
@@ -36,7 +37,15 @@
 
 {#if groupFunc}
   {#each _.keys(groups) as group (group)}
-    <AppObjectGroup {group} {module} items={groups[group]} {expandIconFunc} {isExpandable} {subItemsComponent} />
+    <AppObjectGroup
+      {group}
+      {module}
+      items={groups[group]}
+      {expandIconFunc}
+      {isExpandable}
+      {subItemsComponent}
+      {checkedObjectsStore}
+    />
   {/each}
 {:else}
   {#each filtered as data (module.extractKey(data))}
@@ -48,6 +57,7 @@
       {isExpandable}
       on:objectClick
       {expandIconFunc}
+      {checkedObjectsStore}
     />
   {/each}
 {/if}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -16,6 +16,7 @@
   export let expandOnClick;
   export let isExpandable = undefined;
   export let expandIconFunc = plusExpandIcon;
+  export let checkedObjectsStore = null;
 
   let isExpanded = false;
 
@@ -41,6 +42,8 @@
   on:click={handleExpand}
   on:expand={handleExpandButton}
   expandIcon={getExpandIcon(expandable, subItemsComponent, isExpanded, expandIconFunc)}
+  {checkedObjectsStore}
+  {module}
 />
 
 {#if isExpanded && subItemsComponent}