Update Kanban Cards to display selections (#182)

* Update Kanban Cards to display selections * PR feedback: show selections by default * 1.17.0
RoamJS · Dec 6, 2023 · 26b863b · 26b863b
1 parent dac9f2b
commit 26b863b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "query-builder",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Introduces new user interfaces for building queries in Roam",
   "main": "./build/main.js",
   "author": {

diff --git 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,8 @@ const KanbanCard = (card: {
   $priority: number;
   $reprioritize: Reprioritize;
   $displayKey: string;
+  $columnKey: string;
+  $selectionValues: string[];
   $getColumnElement: (x: number) => HTMLDivElement | undefined;
   result: Result;
 }) => {
@@ -74,10 +76,36 @@ const KanbanCard = (card: {
         }}
       >
         <div className={`rounded-xl bg-white p-4 hover:bg-gray-200`}>
-          {toCellValue({
-            value: card.result[card.$displayKey],
-            uid: card.result[`${card.$displayKey}-uid`],
-          })}
+          <div className="card-display-value">
+            {toCellValue({
+              value: card.result[card.$displayKey],
+              uid: card.result[`${card.$displayKey}-uid`],
+            })}
+          </div>
+          <div className="card-selections mt-3">
+            <HTMLTable condensed={true}>
+              <tbody>
+                {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 (
+                    <tr key={sv}>
+                      <td className="font-semibold text-sm text-gray-700 p-1">
+                        {sv}:
+                      </td>
+                      <td className="text-sm text-gray-700 p-1">{value}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </HTMLTable>
+          </div>
         </div>
       </div>
     </Draggable>
@@ -443,6 +471,8 @@ const Kanban = ({
                     $reprioritize={reprioritizeAndUpdateBlock}
                     $getColumnElement={getColumnElement}
                     $displayKey={displayKey}
+                    $columnKey={columnKey}
+                    $selectionValues={resultKeys.map((rk) => rk.key)}
                   />
                 ))}
               </div>

diff --git a/src/index.ts b/src/index.ts
@@ -184,7 +184,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) ||