Board: Add, rename, delete, pin/unpin, collapse/expand columns; check…

… cards and customize card headers (#846)

src/lib/dataApi.ts

@@ -41,12 +41,28 @@ export class DataApi {
     }
   }
 
+  async updateRecords(
+    fields: DataField[],
+    records: DataRecord[]
+  ): Promise<void> {
+    await Promise.all(
+      records.map(async (record) => {
+        const file = this.fileSystem.getFile(record.id);
+        if (file) {
+          await this.updateFile(file, (data) =>
+            doUpdateRecord(data, fields, record)
+          )();
+        }
+      })
+    );
+  }
+
   async addField(
     paths: string[],
     field: DataField,
     value: Optional<DataValue>
   ): Promise<void> {
-    Promise.all(
+    await Promise.all(
       paths
         .map((path) => this.fileSystem.getFile(path))
         .filter(notEmpty)

src/lib/stores/dataframe.ts

@@ -42,6 +42,22 @@ function createDataFrame() {
         })
       );
     },
+    updateRecords(records: DataRecord[]) {
+      update((state) =>
+        produce(state, (draft) => {
+          // @ts-ignore
+          draft.records = castDraft(
+            draft.records
+              .map(castImmutable)
+              // @ts-ignore
+              .map((r) => {
+                const found = records.find((_r) => _r.id === r.id);
+                return found ? found : r;
+              })
+          );
+        })
+      );
+    },
     deleteRecord(id: string) {
       update((state) =>
         produce(state, (draft) => {
@@ -123,8 +139,7 @@ function createDataFrame() {
             draft.records.some((record) => {
               return (
                 // @ts-ignore
-                record.values[field.name] !== undefined &&
-                record.values[field.name] !== null
+                record.values[field.name] !== undefined
               );
             })
           );

src/lib/stores/translations/en.json

@@ -285,6 +285,7 @@
                 "fields": {
                     "status": "Status",
                     "priority": "Priority",
+                    "check": "Check",
                     "none": "None"
                 },
                 "unprioritized": "Unprioritized",
@@ -295,6 +296,10 @@
                         "name": "Column width",
                         "description": "Width of each column in pixels."
                     },
+                    "custom-header": {
+                        "name": "Customize card header",
+                        "description": "Use selected field as the header of cards."
+                    },
                     "order-sync-field": {
                         "name": "Sync card order with field",
                         "description": "Field to store the position of cards in the board."
@@ -360,8 +365,8 @@
                     "insert-left": "Insert left",
                     "insert-right": "Insert right",
                     "rename": "Rename field",
-                    "pin-field": "Pin field",
-                    "unpin-field": "Unpin field",
+                    "pin": "Pin field",
+                    "unpin": "Unpin field",
                     "hide": "Hide field",
                     "delete": "Delete field"
                 },
@@ -382,6 +387,18 @@
                     "desc": "Sort New → Old"
                 }
             },
+            "board": {
+                "column": {
+                    "add": "Add column",
+                    "placeholder": "New column",
+                    "rename": "Rename column",
+                    "delete": "Delete column",
+                    "expand": "Expand column",
+                    "collapse": "Collapse column",
+                    "pin": "Pin column",
+                    "unpin": "Unpin column"
+                }
+            },
             "color": {
                 "label": "Color",
                 "where": "Where",

src/lib/stores/translations/zh-CN.json

@@ -233,8 +233,8 @@
                     "save": "保存修改"
                 },
                 "create": {
-                    "short-title": "添加字段",
-                    "title": "添加字段",
+                    "short-title": "新建字段",
+                    "title": "新建字段",
                     "name": {
                         "name": "字段名称",
                         "description": ""
@@ -285,6 +285,7 @@
                 "fields": {
                     "status": "状态",
                     "priority": "优先级",
+                    "check": "复选框",
                     "none": "未选择"
                 },
                 "unprioritized": "未设置优先级",
@@ -295,6 +296,10 @@
                         "name": "列宽度",
                         "description": "调整每列的像素宽度。"
                     },
+                    "custom-header": {
+                        "name": "自定义卡片标题",
+                        "description": "将使用所选字段值作为卡片标题。"
+                    },
                     "order-sync-field": {
                         "name": "卡片顺序同步字段",
                         "description": "该字段将用于存储卡片在看板列中的位置顺序信息。"
@@ -360,8 +365,8 @@
                     "insert-left": "向左插入字段",
                     "insert-right": "向右插入字段",
                     "rename": "重命名字段",
-                    "pin-field": "固定字段",
-                    "unpin-field": "取消固定",
+                    "pin": "固定字段",
+                    "unpin": "取消固定",
                     "hide": "隐藏字段",
                     "delete": "删除字段"
                 },
@@ -382,6 +387,18 @@
                     "desc": "按日期降序 新 → 旧"
                 }
             },
+            "board": {
+                "column": {
+                    "add": "新建列表",
+                    "placeholder": "新列表",
+                    "rename": "重命名列表",
+                    "delete": "删除列表",
+                    "expand": "展开列表",
+                    "collapse": "折叠列表",
+                    "pin": "固定列表",
+                    "unpin": "取消固定"
+                }
+            },
             "color": {
                 "label": "条件颜色",
                 "where": "当",

src/lib/viewApi.ts

@@ -30,6 +30,12 @@ export class ViewApi {
     this.dataApi.updateRecord(fields, record);
   }
 
+  async updateRecords(records: DataRecord[], fields: DataField[]) {
+    const rs = records.filter((r) => this.dataSource.includes(r.id));
+    if (rs) dataFrame.updateRecords(rs);
+    await this.dataApi.updateRecords(fields, records);
+  }
+
   deleteRecord(recordId: string) {
     if (this.dataSource.includes(recordId)) {
       dataFrame.deleteRecord(recordId);

src/ui/app/toolbar/ProjectSelect.svelte

@@ -9,7 +9,7 @@
   import { ConfirmDialogModal } from "src/ui/modals/confirmDialog";
   import { CreateProjectModal } from "src/ui/modals/createProjectModal";
   import type { ProjectDefinition, ProjectId } from "src/settings/settings";
-  import Flair from "./Flair.svelte";
+  import { Flair } from "src/ui/components/Flair";
 
   export let projectId: ProjectId | undefined;
   export let projects: ProjectDefinition[];
@@ -29,7 +29,9 @@
         value: project.id,
       })),
       (draft) => {
-        draft.sort((a, b) => a.label.localeCompare(b.label, undefined, {numeric: true}));
+        draft.sort((a, b) =>
+          a.label.localeCompare(b.label, undefined, { numeric: true })
+        );
       }
     )}
     on:change={({ detail: value }) => onProjectChange(value)}

src/ui/app/toolbar/Toolbar.svelte

@@ -8,7 +8,7 @@
   import { AddViewModal } from "src/ui/modals/addViewModal";
   import { ConfirmDialogModal } from "src/ui/modals/confirmDialog";
   import { CreateProjectModal } from "src/ui/modals/createProjectModal";
-  import Flair from "./Flair.svelte";
+  import { Flair } from "src/ui/components/Flair";
 
   import ProjectSelect from "./ProjectSelect.svelte";
   import ViewSelect from "./ViewSelect.svelte";

src/ui/app/toolbar/viewOptions/PopoverButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button, Icon, Popover } from "obsidian-svelte";
-  import Flair from "../Flair.svelte";
+  import { Flair } from "src/ui/components/Flair";
 
   export let label: string;
   export let icon: string;

src/ui/components/Flair/index.ts

@@ -0,0 +1 @@
+export { default as Flair } from "./Flair.svelte";

src/ui/modals/components/Inspector.svelte

@@ -6,9 +6,9 @@
     ModalContent,
     ModalLayout,
   } from "obsidian-svelte";
-  import Flair from "src/ui/app/toolbar/Flair.svelte";
-  import Accordion from "src/ui/components/Accordion/Accordion.svelte";
-  import AccordionItem from "src/ui/components/Accordion/AccordionItem.svelte";
+  import { Flair } from "src/ui/components/Flair";
+  import { Accordion } from "src/ui/components/Accordion";
+  import { AccordionItem } from "src/ui/components/Accordion";
   import type { RecordError } from "src/lib/datasources/frontmatter/datasource";
 
   import { i18n } from "src/lib/stores/i18n";

src/ui/views/Board/BoardOptions.svelte

@@ -12,7 +12,9 @@
   export let fields: DataField[];
 
   export let statusField: string | undefined;
+  export let checkField: string | undefined;
   export let onStatusFieldChange: (field: DataField | undefined) => void;
+  export let onCheckFieldChange: (field: DataField | undefined) => void;
 
   export let includedFields: string[];
   export let onIncludedFieldsChange: (fields: string[]) => void;
@@ -22,17 +24,23 @@
   $: groupByField = statusField
     ? getFieldByName(fields, statusField)
     : undefined;
+  $: booleanField = checkField ? getFieldByName(fields, checkField) : undefined;
 
-  $: validFields = getFieldsByType(
+  $: validGroupByFields = getFieldsByType(
     fields,
     DataFieldType.String,
     DataFieldType.Number
   );
+  $: validBooleanFields = getFieldsByType(fields, DataFieldType.Boolean);
 
   function handleStatusChange(event: CustomEvent<string>) {
     onStatusFieldChange(getFieldByName(fields, event.detail));
   }
 
+  function handleCheckFieldChange(event: CustomEvent<string>) {
+    onCheckFieldChange(getFieldByName(fields, event.detail));
+  }
+
   function handleIncludedFieldsChange(field: string, enabled: boolean) {
     const uniqueFields = new Set(includedFields);
 
@@ -55,11 +63,20 @@
   <Select
     value={groupByField?.name ?? ""}
     on:change={handleStatusChange}
-    options={validFields.map(fieldToSelectableValue)}
+    options={validGroupByFields.map(fieldToSelectableValue)}
     placeholder={$i18n.t("views.board.fields.none") ?? ""}
     allowEmpty
   />
 </Field>
+<Field name={$i18n.t("views.board.fields.check")}>
+  <Select
+    allowEmpty
+    value={booleanField?.name ?? ""}
+    options={validBooleanFields.map(fieldToSelectableValue)}
+    placeholder={$i18n.t("views.board.fields.none") ?? ""}
+    on:change={handleCheckFieldChange}
+  />
+</Field>
 <SwitchSelect
   label={$i18n.t("views.board.include-fields")}
   items={fields.map((field) => ({

src/ui/views/Board/BoardOptionsProvider.svelte

@@ -30,6 +30,12 @@
 
     onConfigChange(field ? { ...rest, groupByField: field.name } : { ...rest });
   }
+
+  function handleCheckFieldChange(field: DataField | undefined) {
+    const { checkField, ...rest } = config;
+
+    onConfigChange(field ? { ...rest, checkField: field.name } : { ...rest });
+  }
 </script>
 
 <!--
@@ -45,7 +51,9 @@
         slot="right"
         {fields}
         statusField={config.groupByField}
+        checkField={config.checkField}
         onStatusFieldChange={handleStatusFieldChange}
+        onCheckFieldChange={handleCheckFieldChange}
         includedFields={config.includeFields ?? []}
         onIncludedFieldsChange={handleIncludedFieldsChange}
         onSettings={() => {
@@ -59,6 +67,8 @@
   <ViewContent>
     <slot
       {columnWidth}
+      checkField={config.checkField ?? ""}
+      customHeader={config.headerField}
       groupByField={fields.find((field) => config.groupByField === field.name)}
       includeFields={config.includeFields ?? []}
     />