From 92aa6779067f4692e6a29a7a2b66e0224dad9b99 Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Tue, 28 Nov 2023 20:42:00 -0600 Subject: [PATCH 1/3] Update Kanban Cards to display selections --- src/components/Kanban.tsx | 51 ++++++++++++++++++++++++++++++---- src/components/ResultsView.tsx | 1 + src/index.ts | 10 ++++++- 3 files changed, 56 insertions(+), 6 deletions(-) diff --git a/src/components/Kanban.tsx b/src/components/Kanban.tsx index dd60eb1f..fa5a9cff 100644 --- a/src/components/Kanban.tsx +++ b/src/components/Kanban.tsx @@ -7,7 +7,7 @@ import React, { useState, } from "react"; import { Column, Result } from "../utils/types"; -import { Button, Icon, Popover, Tooltip } from "@blueprintjs/core"; +import { Button, HTMLTable, Icon, Popover, Tooltip } from "@blueprintjs/core"; import Draggable from "react-draggable"; import setInputSettings from "roamjs-components/util/setInputSettings"; import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar"; @@ -28,6 +28,9 @@ const KanbanCard = (card: { $priority: number; $reprioritize: Reprioritize; $displayKey: string; + $columnKey: string; + $selectionValues: string[]; + $showSelections: string; $getColumnElement: (x: number) => HTMLDivElement | undefined; result: Result; }) => { @@ -74,10 +77,38 @@ const KanbanCard = (card: { }} >
- {toCellValue({ - value: card.result[card.$displayKey], - uid: card.result[`${card.$displayKey}-uid`], - })} +
+ {toCellValue({ + value: card.result[card.$displayKey], + uid: card.result[`${card.$displayKey}-uid`], + })} +
+ {card.$showSelections === "Yes" && ( +
+ + + {card.$selectionValues.map((sv) => { + if (sv === card.$displayKey || sv === card.$columnKey) + return null; + const value = toCellValue({ + value: + card.result[`${sv}-display`] || card.result[sv] || "", + uid: (card.result[`${sv}-uid`] as string) || "", + }); + + return ( + + + {sv}: + + {value} + + ); + })} + + +
+ )}
@@ -316,6 +347,13 @@ const Kanban = ({ () => (Array.isArray(layout.legend) ? layout.legend[0] : layout.legend), [layout.legend] ); + const showSelections = useMemo( + () => + Array.isArray(layout.selections) + ? layout.selections[0] + : layout.selections, + [layout.selections] + ); const [openedPopoverIndex, setOpenedPopoverIndex] = useState( null ); @@ -443,6 +481,9 @@ const Kanban = ({ $reprioritize={reprioritizeAndUpdateBlock} $getColumnElement={getColumnElement} $displayKey={displayKey} + $columnKey={columnKey} + $selectionValues={resultKeys.map((rk) => rk.key)} + $showSelections={showSelections} /> ))} diff --git a/src/components/ResultsView.tsx b/src/components/ResultsView.tsx index 7d91a359..80301e3e 100644 --- a/src/components/ResultsView.tsx +++ b/src/components/ResultsView.tsx @@ -202,6 +202,7 @@ const SUPPORTED_LAYOUTS = [ { key: "key", label: "Group By", options: "columns" }, { key: "display", label: "Display", options: "columns" }, { key: "legend", label: "Show Legend", options: ["No", "Yes"] }, + { key: "selections", label: "Show Selections", options: ["No", "Yes"] }, ], }, ] as const; diff --git a/src/index.ts b/src/index.ts index 306d599a..27fd9cb9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -182,7 +182,15 @@ svg.rs-svg-container { .roamjs-export-dialog-body .bp3-tab-list { padding: 10px 20px; border-bottom: 1px solid rgba(16,22,26,0.15); -}`); +} + +.roamjs-kanban-card .card-selections tr:first-child td { + box-shadow: none; +} +.roamjs-query-results-view .roamjs-kanban-card .card-selections table.bp3-html-table td { + padding: 0.50rem; +} +`); const isCanvasPage = (title: string) => { const canvasPageFormat = (extensionAPI.settings.get("canvas-page-format") as string) || From 45e1813baacc6c1490a6931eeca3d7b8f0c384df Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Tue, 5 Dec 2023 19:55:03 -0600 Subject: [PATCH 2/3] PR feedback: show selections by default --- src/components/Kanban.tsx | 57 ++++++++++++++-------------------- src/components/ResultsView.tsx | 1 - 2 files changed, 23 insertions(+), 35 deletions(-) diff --git a/src/components/Kanban.tsx b/src/components/Kanban.tsx index fa5a9cff..75c570cb 100644 --- a/src/components/Kanban.tsx +++ b/src/components/Kanban.tsx @@ -30,7 +30,6 @@ const KanbanCard = (card: { $displayKey: string; $columnKey: string; $selectionValues: string[]; - $showSelections: string; $getColumnElement: (x: number) => HTMLDivElement | undefined; result: Result; }) => { @@ -83,32 +82,30 @@ const KanbanCard = (card: { uid: card.result[`${card.$displayKey}-uid`], })} - {card.$showSelections === "Yes" && ( -
- - - {card.$selectionValues.map((sv) => { - if (sv === card.$displayKey || sv === card.$columnKey) - return null; - const value = toCellValue({ - value: - card.result[`${sv}-display`] || card.result[sv] || "", - uid: (card.result[`${sv}-uid`] as string) || "", - }); +
+ + + {card.$selectionValues.map((sv) => { + if (sv === card.$displayKey || sv === card.$columnKey) + return null; + const value = toCellValue({ + value: + card.result[`${sv}-display`] || card.result[sv] || "", + uid: (card.result[`${sv}-uid`] as string) || "", + }); - return ( - - - {sv}: - - {value} - - ); - })} - - -
- )} + return ( + + + {sv}: + + {value} + + ); + })} + + +
@@ -347,13 +344,6 @@ const Kanban = ({ () => (Array.isArray(layout.legend) ? layout.legend[0] : layout.legend), [layout.legend] ); - const showSelections = useMemo( - () => - Array.isArray(layout.selections) - ? layout.selections[0] - : layout.selections, - [layout.selections] - ); const [openedPopoverIndex, setOpenedPopoverIndex] = useState( null ); @@ -483,7 +473,6 @@ const Kanban = ({ $displayKey={displayKey} $columnKey={columnKey} $selectionValues={resultKeys.map((rk) => rk.key)} - $showSelections={showSelections} /> ))} diff --git a/src/components/ResultsView.tsx b/src/components/ResultsView.tsx index 80301e3e..7d91a359 100644 --- a/src/components/ResultsView.tsx +++ b/src/components/ResultsView.tsx @@ -202,7 +202,6 @@ const SUPPORTED_LAYOUTS = [ { key: "key", label: "Group By", options: "columns" }, { key: "display", label: "Display", options: "columns" }, { key: "legend", label: "Show Legend", options: ["No", "Yes"] }, - { key: "selections", label: "Show Selections", options: ["No", "Yes"] }, ], }, ] as const; From ae29bc61452f1427184766163d8e091244d0784c Mon Sep 17 00:00:00 2001 From: Michael Gartner Date: Tue, 5 Dec 2023 19:56:08 -0600 Subject: [PATCH 3/3] 1.17.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7ef60249..9352d475 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "query-builder", - "version": "1.13.0", + "version": "1.17.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "query-builder", - "version": "1.13.0", + "version": "1.17.0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 43b8e95c..9d111a5f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "query-builder", - "version": "1.13.0", + "version": "1.17.0", "description": "Introduces new user interfaces for building queries in Roam", "main": "./build/main.js", "author": {