FK secondary checkbox

packages/datalib/src/PerspectiveTreeNode.ts

@@ -139,6 +139,12 @@ export abstract class PerspectiveTreeNode {
     // return this.defaultChecked;
     return false;
   }
+  get isSecondaryChecked() {
+    return false;
+  }
+  get secondaryCheckable() {
+    return false;
+  }
   get columnTitle() {
     return this.title;
   }
@@ -192,6 +198,8 @@ export abstract class PerspectiveTreeNode {
     // }
   }
 
+  toggleSecondaryChecked(value?: boolean) {}
+
   createReferenceConfigColumns(): PerspectiveReferenceConfig['columns'] {
     return null;
   }
@@ -531,6 +539,37 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     return !!this.parentNode?.parentNode?.hasTableCode(this.tableCode);
   }
 
+  get isSecondaryChecked() {
+    return super.isChecked;
+  }
+  get isChecked() {
+    if (this.foreignKey) return !!this.config.nodes?.find(x => x.designerId == this.designerId)?.isNodeChecked;
+    return super.isChecked;
+  }
+  get secondaryCheckable() {
+    return !!this.foreignKey;
+  }
+  toggleChecked(value?: boolean) {
+    if (this.foreignKey) {
+      this.setConfig(cfg => ({
+        ...cfg,
+        nodes: cfg.nodes.map(node =>
+          node.designerId == this.designerId
+            ? {
+                ...node,
+                isNodeChecked: value == null ? !node.isNodeChecked : value,
+              }
+            : node
+        ),
+      }));
+    } else {
+      super.toggleChecked(value);
+    }
+  }
+  toggleSecondaryChecked(value?: boolean) {
+    super.toggleChecked(value == null ? !this.isSecondaryChecked : value);
+  }
+
   generateChildNodes(): PerspectiveTreeNode[] {
     if (!this.foreignKey) return [];
     const tbl = this?.db?.tables?.find(

packages/web/src/designer/DesignerTable.svelte

@@ -236,7 +236,14 @@
   >
     <div>
       {#if settings?.canCheckTables}
-        <CheckboxField checked={false} />
+        <CheckboxField
+          checked={settings?.isTableChecked ? settings?.isTableChecked(designerId) : false}
+          on:change={e => {
+            if (settings?.setTableChecked) {
+              settings?.setTableChecked(designerId, e.target.checked);
+            }
+          }}
+        />
       {/if}
 
       {alias || pureName}

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -108,6 +108,20 @@
         ),
       }));
     },
+    isTableChecked: designerId => config.nodes?.find(x => x.designerId == designerId)?.isNodeChecked,
+    setTableChecked: (designerId, value) => {
+      onChange(cfg => ({
+        ...cfg,
+        nodes: cfg.nodes.map(node =>
+          node.designerId == designerId
+            ? {
+                ...node,
+                isNodeChecked: value,
+              }
+            : node
+        ),
+      }));
+    },
   }}
   referenceComponent={QueryDesignerReference}
   value={createDesignerModel(config, dbInfos)}

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -52,6 +52,22 @@
     }}
   />
 
+  {#if node.secondaryCheckable}
+    <input
+      type="checkbox"
+      checked={node.isSecondaryChecked}
+      on:click={e => {
+        e.stopPropagation();
+      }}
+      on:mousedown={e => {
+        e.stopPropagation();
+      }}
+      on:change={() => {
+        node.toggleSecondaryChecked();
+      }}
+    />
+  {/if}
+
   <FontIcon icon={node.icon} />
 
   <span>{node.title}</span>