Create field through Table view (#731)

src/lib/dataApi.ts

@@ -41,6 +41,21 @@ export class DataApi {
     }
   }
 
+  async addField(
+    paths: string[],
+    field: DataField,
+    value: Optional<DataValue>
+  ): Promise<void> {
+    Promise.all(
+      paths
+        .map((path) => this.fileSystem.getFile(path))
+        .filter(notEmpty)
+        .map((file) =>
+          this.updateFile(file, (data) => doAddField(data, field, value))()
+        )
+    );
+  }
+
   async renameField(paths: string[], from: string, to: string): Promise<void> {
     Promise.all(
       paths
@@ -155,6 +170,24 @@ export function doUpdateRecord(
   );
 }
 
+export function doAddField(
+  data: string,
+  field: DataField,
+  value: Optional<DataValue>
+): E.Either<Error, string> {
+  return F.pipe(
+    data,
+    decodeFrontMatter,
+    E.map((frontmatter) => ({
+      ...frontmatter,
+      [field.name]: value,
+    })),
+    E.chain((frontmatter) =>
+      encodeFrontMatter(data, frontmatter, getDefaultStringType())
+    )
+  );
+}
+
 export function doDeleteField(data: string, field: string) {
   return F.pipe(
     data,

src/lib/dataframe/dataframe.ts

@@ -64,6 +64,7 @@ export enum DataFieldType {
   Number = "number",
   Boolean = "boolean",
   Date = "date",
+  List = "multitext",
   Unknown = "unknown",
 }
 

src/lib/helpers.ts

@@ -3,6 +3,7 @@ import { get } from "svelte/store";
 
 import { app } from "src/lib/stores/obsidian";
 import type { ProjectDefinition, ViewDefinition } from "src/settings/settings";
+import type { DataField } from "./dataframe/dataframe";
 
 /**
  * notEmpty is a convenience function for filtering arrays with optional values.
@@ -43,7 +44,7 @@ export function nextUniqueProjectName(
 }
 
 /**
- * nextUniqueViewName returns the given project name with the lowest
+ * nextUniqueViewName returns the given view name with the lowest
  * available sequence number appended to it.
  */
 export function nextUniqueViewName(views: ViewDefinition[], name: string) {
@@ -52,6 +53,16 @@ export function nextUniqueViewName(views: ViewDefinition[], name: string) {
   });
 }
 
+/**
+ * nextUniqueFieldName returns the given field name with the lowest
+ * available sequence number appended to it.
+ */
+export function nextUniqueFieldName(fields: DataField[], name: string) {
+  return uniquify(name, (candidate) => {
+    return !!fields.find((field) => field.name === candidate);
+  });
+}
+
 /**
  * uniquify appends a sequence number to a string, where the number is the
  * lowest available according to a callback function.

src/lib/stores/dataframe.ts

@@ -49,6 +49,15 @@ function createDataFrame() {
         })
       );
     },
+    addField(newField: DataField, position?: number) {
+      update((state) =>
+        produce(state, (draft) => {
+          position
+            ? draft.fields.splice(position, 0, newField)
+            : draft.fields.push(newField);
+        })
+      );
+    },
     updateField(updated: DataField, oldName?: string) {
       update((state) =>
         produce(state, (draft) => {

src/lib/stores/translations/en.json

@@ -229,6 +229,34 @@
                         "description": "For fields with Markdown content."
                     },
                     "save": "Save"
+                },
+                "create": {
+                    "short-title": "New field",
+                    "title": "Create new field",
+                    "name": {
+                        "name": "Name",
+                        "description": ""
+                    },
+                    "untitled": "New field",
+                    "empty-name-error": "Field name can't be empty.",
+                    "existing-name-error": "A field with that name already exists.",
+                    "type": {
+                        "name": "Type",
+                        "description": ""
+                    },
+                    "default": {
+                        "name": "Default value",
+                        "description": ""
+                    },
+                    "options": {
+                        "name": "Options",
+                        "description": "Allows you to auto-complete using predefined values for the field."
+                    },
+                    "rich-text": {
+                        "name": "Enable rich text formatting",
+                        "description": "For fields with Markdown content."
+                    },
+                    "create": "Create field"
                 }
             },
             "input": {
@@ -322,6 +350,9 @@
             "data-grid": {
                 "column": {
                     "configure": "Configure field",
+                    "add": "Add field",
+                    "insert-left": "Insert left",
+                    "insert-right": "Insert right",
                     "rename": "Rename field",
                     "delete": "Delete field",
                     "hide": "Hide field"

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

@@ -229,6 +229,34 @@
                         "description": "依照 Markdown 格式渲染字段内容。"
                     },
                     "save": "保存"
+                },
+                "create": {
+                    "short-title": "添加字段",
+                    "title": "添加字段",
+                    "name": {
+                        "name": "字段名称",
+                        "description": ""
+                    },
+                    "untitled": "新字段",
+                    "empty-name-error": "字段名不能为空。",
+                    "existing-name-error": "字段名称重复。",
+                    "type": {
+                        "name": "字段类型",
+                        "description": ""
+                    },
+                    "default": {
+                        "name": "默认值",
+                        "description": ""
+                    },
+                    "options": {
+                        "name": "选项预设",
+                        "description": "在填写该字段内容时，将使用下面提供的预设值进行自动补全。"
+                    },
+                    "rich-text": {
+                        "name": "富文本",
+                        "description": "依照 Markdown 格式渲染字段内容。"
+                    },
+                    "create": "添加字段"
                 }
             },
             "input": {
@@ -322,6 +350,9 @@
             "data-grid": {
                 "column": {
                     "configure": "配置字段",
+                    "add": "新建字段",
+                    "insert-left": "向左插入字段",
+                    "insert-right": "向右插入字段",
                     "rename": "重命名字段",
                     "delete": "删除字段",
                     "hide": "隐藏字段"

src/lib/viewApi.ts

@@ -1,6 +1,11 @@
 import { get } from "svelte/store";
 
-import type { DataField, DataRecord } from "./dataframe/dataframe";
+import type {
+  DataField,
+  DataRecord,
+  DataValue,
+  Optional,
+} from "./dataframe/dataframe";
 import type { DataApi } from "./dataApi";
 import { dataFrame } from "./stores/dataframe";
 import type { DataSource } from "./datasources";
@@ -32,6 +37,16 @@ export class ViewApi {
     this.dataApi.deleteRecord(recordId);
   }
 
+  addField(field: DataField, value: Optional<DataValue>, position?: number) {
+    dataFrame.addField(field, position);
+
+    this.dataApi.addField(
+      get(dataFrame).records.map((record) => record.id),
+      field,
+      value
+    );
+  }
+
   updateField(field: DataField, oldName?: string) {
     dataFrame.updateField(field, oldName);
 

src/ui/components/TagsInput/Tag/Tag.svelte

@@ -139,8 +139,6 @@
     display: inline-flex;
     align-items: center;
     gap: var(--size-4-1);
-
-    text-wrap: nowrap;
   }
 
   .tag:hover {

src/ui/components/TagsInput/TagInput/TagInput.svelte

@@ -82,7 +82,7 @@
 
 <style>
   div {
-    min-width: 1ch;
+    min-width: 1px;
     max-width: max-content;
     box-sizing: border-box;