Add and rename board column in-place

src/lib/dataApi.ts

@@ -78,6 +78,43 @@ export class DataApi {
     );
   }
 
+  async addOption(
+    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) => doAddOption(data, field, value))()
+        )
+    );
+  }
+
+  async renameOption(paths: string[], from: string, to: string): Promise<void> {
+    Promise.all(
+      paths
+        .map((path) => this.fileSystem.getFile(path))
+        .filter(notEmpty)
+        .map((file) =>
+          this.updateFile(file, (data) => doRenameOption(data, from, to))()
+        )
+    );
+  }
+
+  async deleteOption(paths: string[], name: string): Promise<void> {
+    Promise.all(
+      paths
+        .map((path) => this.fileSystem.getFile(path))
+        .filter(notEmpty)
+        .map((file) =>
+          this.updateFile(file, (data) => doDeleteOption(data, name))()
+        )
+    );
+  }
+
   async createNote(record: DataRecord, templatePath: string): Promise<void> {
     let content = "";
 
@@ -226,6 +263,57 @@ export function doRenameField(
   );
 }
 
+export function doRenameOption(
+  data: string,
+  from: string,
+  to: string
+): E.Either<Error, string> {
+  return F.pipe(
+    data,
+    decodeFrontMatter,
+    E.map((frontmatter) => ({
+      ...frontmatter,
+      [to]: frontmatter[from],
+      [from]: undefined,
+    })),
+    E.chain((frontmatter) =>
+      encodeFrontMatter(data, frontmatter, getDefaultStringType())
+    )
+  );
+}
+
+export function doAddOption(
+  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 doDeleteOption(data: string, field: string) {
+  return F.pipe(
+    data,
+    decodeFrontMatter,
+    E.map((frontmatter) => ({
+      ...frontmatter,
+      [field]: undefined,
+    })),
+    E.chain((frontmatter) =>
+      encodeFrontMatter(data, frontmatter, getDefaultStringType())
+    )
+  );
+}
+
 export function createProject(): ProjectDefinition {
   return Object.assign({}, DEFAULT_PROJECT, {
     id: uuidv4(),

src/lib/stores/dataframe.ts

@@ -86,6 +86,41 @@ function createDataFrame() {
         })
       );
     },
+    addOption(newField: DataField, position?: number) {
+      update((state) =>
+        produce(state, (draft) => {
+          position
+            ? draft.fields.splice(position, 0, newField)
+            : draft.fields.push(newField);
+        })
+      );
+    },
+    updateOption(updated: DataField, oldName?: string) {
+      update((state) =>
+        produce(state, (draft) => {
+          draft.fields = draft.fields
+            .map((field) => (field.name === oldName ? updated : field))
+            .filter((field) => field.name !== oldName);
+
+          draft.records = draft.records.map((record) =>
+            produce(record, (draft) => {
+              if (oldName) {
+                // @ts-ignore
+                draft.values[updated.name] = draft.values[oldName];
+                delete draft.values[oldName];
+              }
+            })
+          );
+        })
+      );
+    },
+    deleteOption(fieldName: string) {
+      update((state) =>
+        produce(state, (draft) => {
+          draft.records.values;
+        })
+      );
+    },
     merge(updated: DataFrame) {
       update((existing) =>
         produce(existing, (draft) => {

src/lib/viewApi.ts

@@ -66,4 +66,34 @@ export class ViewApi {
       field
     );
   }
+
+  addOption(field: DataField, value: Optional<DataValue>, position?: number) {
+    dataFrame.addOption(field, position);
+
+    this.dataApi.addOption(
+      get(dataFrame).records.map((record) => record.id),
+      field,
+      value
+    );
+  }
+
+  updateOption(field: DataField, oldName?: string) {
+    dataFrame.updateOption(field, oldName);
+
+    if (oldName) {
+      this.dataApi.renameOption(
+        get(dataFrame).records.map((record) => record.id),
+        oldName,
+        field.name
+      );
+    }
+  }
+
+  deleteOption(field: string) {
+    dataFrame.deleteOption(field);
+    this.dataApi.deleteOption(
+      get(dataFrame).records.map((record) => record.id),
+      field
+    );
+  }
 }

src/ui/app/toolbar/ViewItem.svelte

@@ -100,6 +100,8 @@
         }
       }}
       on:blur={() => {
+        editing = false;
+
         if (!error) {
           fallback = label;
 

src/ui/views/Board/BoardView.svelte

@@ -10,6 +10,7 @@
   import { notUndefined } from "src/lib/helpers";
   import { i18n } from "src/lib/stores/i18n";
   import { app } from "src/lib/stores/obsidian";
+  import { settings } from "src/lib/stores/settings";
   import type { ViewApi } from "src/lib/viewApi";
   import type { ProjectDefinition } from "src/settings/settings";
   import { CreateNoteModal } from "src/ui/modals/createNoteModal";
@@ -207,6 +208,61 @@
       }).open();
     };
 
+  // catch rename error of yaml parser!
+  const handleColumnRename = (
+    field: DataField | undefined,
+    names: string[], // all column names, detected & defined
+    records: DataRecord[], // notes that belong to the column
+    oldname: string, // old column id
+    newname: string // proposing column id
+  ) => {
+    if (!field) return;
+    if (oldname === newname) return;
+
+    records.forEach((record) => {
+      api.updateRecord(
+        {
+          ...record,
+          values: { ...record.values, [field.name]: newname },
+        },
+        fields
+      );
+    });
+
+    const projectFields = Object.fromEntries(
+      Object.entries(project.fieldConfig ?? {}).filter(([key, _]) =>
+        fields.find((f) => f.name === key)
+      )
+    );
+
+    if (field.typeConfig && field.typeConfig.options) {
+      const options = field.typeConfig.options.map((option) =>
+        option === oldname ? newname : option
+      );
+
+      settings.updateProject({
+        ...project,
+        fieldConfig: {
+          ...projectFields,
+          [field.name]: {
+            ...field.typeConfig,
+            options: options,
+          },
+        },
+      });
+    }
+
+    const columns = names.map((name) => (name === oldname ? newname : name));
+    saveConfig({
+      ...config,
+      columns: Object.fromEntries(
+        columns.map((name, i) => {
+          return [name, { weight: i }];
+        })
+      ),
+    });
+  };
+
   const handleSortColumns =
     (field: DataField | undefined): OnSortColumns =>
     (names) => {
@@ -229,6 +285,53 @@
       });
     };
 
+  function handleColumnAdd(
+    field: DataField | undefined,
+    columns: string[], // all column names, detected & predefined
+    name: string
+  ) {
+    if (!field) return;
+
+    const projectFields = Object.fromEntries(
+      Object.entries(project.fieldConfig ?? {}).filter(([key, _]) =>
+        fields.find((f) => f.name === key)
+      )
+    );
+
+    if (field.typeConfig && field.typeConfig.options) {
+      settings.updateProject({
+        ...project,
+        fieldConfig: {
+          ...projectFields,
+          [field.name]: {
+            ...field.typeConfig,
+            options: [...field.typeConfig.options, name],
+          },
+        },
+      });
+    } else {
+      settings.updateProject({
+        ...project,
+        fieldConfig: {
+          ...projectFields,
+          [field.name]: {
+            ...field.typeConfig,
+            options: [name],
+          },
+        },
+      });
+    }
+
+    saveConfig({
+      ...config,
+      columns: Object.fromEntries(
+        [...columns, name].map((column, i) => {
+          return [column, { weight: i }];
+        })
+      ),
+    });
+  }
+
   function saveConfig(cfg: BoardConfig) {
     config = cfg;
     onConfigChange(cfg);
@@ -262,6 +365,10 @@
     onRecordAdd={handleRecordAdd(groupByField)}
     onRecordUpdate={handleRecordUpdate(groupByField)}
     onSortColumns={handleSortColumns(groupByField)}
+    onColumnAdd={(columns, name) =>
+      handleColumnAdd(groupByField, columns, name)}
+    onColumnRename={(columns, records, oldname, newname) =>
+      handleColumnRename(groupByField, columns, records, oldname, newname)}
     {readonly}
     richText={groupByField?.typeConfig?.richText ?? false}
   />