control inline fields with new rows

Author: RafaelGB

src/components/Header.tsx

@@ -57,6 +57,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
   const [domReady, setDomReady] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [isMetadata, setIsMetadata] = useState(headerProps.column.isMetadata);
+  const [isInline, setIsInline] = useState(headerProps.column.isInline);
   const [labelState, setLabelState] = useState(headerProps.column.label);
   React.useEffect(() => {
     setDomReady(true);
@@ -119,6 +120,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
       >
         <span className="svg-icon svg-gray icon-margin">{propertyIcon}</span>
         {labelState}
+        {isInline && <span>*</span>}
       </div>
       {!isMetadata && domReady
         ? ReactDOM.createPortal(
@@ -134,6 +136,8 @@ export default function Header(headerProps: DatabaseHeaderProps) {
               referenceElement={referenceElement}
               labelState={labelState}
               setLabelState={setLabelState}
+              isInline={isInline}
+              setIsInline={setIsInline}
               initialState={initialState}
             />,
             document.getElementById("popper-container")

src/components/HeaderMenu.tsx

@@ -19,7 +19,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { ActionType } from "react-table";
 import { usePopper } from "react-popper";
 import { HeaderContext } from "components/contexts/HeaderContext";
-import { Checkbox, FormControlLabel, FormGroup } from "@material-ui/core";
+import { FormControlLabel, FormGroup, Switch } from "@material-ui/core";
 type HeaderMenuProps = {
   dispatch: (action: ActionType) => void;
   setSortBy: any;
@@ -33,6 +33,8 @@ type HeaderMenuProps = {
   labelState: string;
   setLabelState: (label: string) => void;
   initialState: TableDataType;
+  isInline: boolean;
+  setIsInline: (isInline: boolean) => void;
 };
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   const {
@@ -46,6 +48,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     labelState,
     setLabelState,
     initialState,
+    isInline,
+    setIsInline,
   } = headerMenuProps;
   /** state of width columns */
   const { columnWidthState, setColumnWidthState } = useContext(HeaderContext);
@@ -68,9 +72,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     useState(null);
   const [settingsPopperElement, setSettingsPopperElement] = useState(null);
   const [showSettings, setShowSettings] = useState(false);
-  const [toggleInlineFrontmatter, setToggleInlineFrontmatter] = useState(
-    headerMenuProps.column.isInline
-  );
 
   useEffect(() => {
     if (created) {
@@ -261,7 +262,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   }
 
   function handleChangeToggleInlineFrontmatter(e: any) {
-    setToggleInlineFrontmatter(e.target.checked);
+    setIsInline(e.target.checked);
     dispatch({
       type: ActionTypes.TOGGLE_INLINE_FRONTMATTER,
       columnId: id,
@@ -418,8 +419,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                     <FormGroup>
                       <FormControlLabel
                         control={
-                          <Checkbox
-                            checked={toggleInlineFrontmatter}
+                          <Switch
+                            checked={isInline}
                             onChange={(event) => {
                               handleChangeToggleInlineFrontmatter(event);
                             }}

src/components/reducers/DatabaseDispatch.tsx

@@ -12,7 +12,7 @@ import { ActionType } from "react-table";
 import { VaultManagerDB } from "services/FileManagerService";
 import { moveFile, updateRowFile } from "helpers/VaultManagement";
 import { randomColor } from "helpers/Colors";
-import { DatabaseColumn } from "cdm/DatabaseModel";
+import { DatabaseColumn, RowDatabaseFields } from "cdm/DatabaseModel";
 import NoteInfo from "services/NoteInfo";
 import { dbTrim } from "helpers/StylesHelper";
 import { parseFrontmatterFieldsToString } from "parsers/RowDatabaseFieldsToFile";
@@ -54,24 +54,33 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
      */
     case ActionTypes.ADD_ROW:
       const filename = `${state.view.file.parent.path}/${action.filename}.md`;
-      const rowRecord: Record<string, any> = {};
+      const rowRecord: RowDatabaseFields = { inline: {}, frontmatter: {} };
       state.columns
         .filter((column: TableColumn) => !column.isMetadata)
         .forEach((column: TableColumn) => {
-          rowRecord[column.key] = "";
+          if (column.isInline) {
+            rowRecord.inline[column.key] = "";
+          } else {
+            rowRecord.frontmatter[column.key] = "";
+          }
         });
       // Add note to persist row
       VaultManagerDB.create_markdown_file(
         state.view.file.parent,
         action.filename,
-        parseFrontmatterFieldsToString(rowRecord)
+        rowRecord
       );
 
       const row: RowDataType = {
-        ...rowRecord,
+        ...rowRecord.frontmatter,
+        ...rowRecord.inline,
         id: state.data.length + 1,
         note: new NoteInfo(
-          { ...rowRecord, file: { path: filename } },
+          {
+            ...rowRecord.frontmatter,
+            ...rowRecord.inline,
+            file: { path: filename },
+          },
           state.data.length + 1
         ),
         [MetadataColumns.FILE]: `[[${filename}|${action.filename}]]`,
@@ -408,7 +417,7 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
       return update(state, { skipReset: { $set: false } });
 
     case ActionTypes.TOGGLE_INLINE_FRONTMATTER:
-      // Update configuration & row files on disk
+      // Altern between inline & frontmatter mode
       state.view.diskConfig.updateColumnProperties(action.columnId, {
         isInline: action.isInline,
       });

src/helpers/VaultManagement.ts

@@ -145,7 +145,7 @@ export async function updateRowFile(file: TFile, columnId: string, newValue: str
       action: 'replace',
       file: file,
       regexp: frontmatterGroupRegex,
-      newValue: parseFrontmatterFieldsToString(rowFields.frontmatter, content, deletedColumn)
+      newValue: parseFrontmatterFieldsToString(rowFields, content, deletedColumn)
     };
     await VaultManagerDB.editNoteContent(noteObject);
   }

src/parsers/RowDatabaseFieldsToFile.ts

@@ -1,21 +1,37 @@
+import { RowDatabaseFields } from "cdm/DatabaseModel";
 import { parseYaml } from "obsidian";
-export const parseFrontmatterFieldsToString = (frontmatterFields: Record<string, any>, original?: string, deletedColumn?: string): string => {
-    const match = original.match(/^---\s+([\w\W]+?)\s+---/);
-
+export const parseFrontmatterFieldsToString = (databaseFields: RowDatabaseFields, original?: string, deletedColumn?: string): string => {
+    const frontmatterFields = databaseFields.frontmatter;
+    const inlineFields = databaseFields.inline;
     const array: string[] = [];
     array.push(`---`);
     Object.keys(frontmatterFields).forEach(key => {
-        array.push(`${key}: ${frontmatterFields[key]}`);
+        // check if frontmatter field is inside inline fields
+        if (!inlineFields.hasOwnProperty(key)) {
+            array.push(`${key}: ${frontmatterFields[key]}`);
+        }
     });
-    if (match) {
-        const frontmatterRaw = match[1];
-        const yaml = parseYaml(frontmatterRaw);
-        Object.keys(yaml).forEach(key => {
-            if (!frontmatterFields[key] && key !== deletedColumn) {
-                array.push(`${key}: ${yaml[key]}`);
-            }
-        });
+    if (original !== undefined) {
+        const match = original.match(/^---\s+([\w\W]+?)\s+---/);
+        if (match) {
+            const frontmatterRaw = match[1];
+            const yaml = parseYaml(frontmatterRaw);
+            Object.keys(yaml).forEach(key => {
+                // add frontmatter fields that are not specified as database fields
+                if (!frontmatterFields[key] && key !== deletedColumn) {
+                    array.push(`${key}: ${yaml[key]}`);
+                }
+            });
+        }
     }
     array.push(`---`);
     return array.join('\n');
+}
+
+export const parseInlineFieldsToString = (inlineFields: RowDatabaseFields): string => {
+    const array: string[] = [];
+    Object.keys(inlineFields.inline).forEach(key => {
+        array.push(`${key}:: ${inlineFields.inline[key]}`);
+    });
+    return array.join('\n');
 }

src/services/FileManagerService.ts

@@ -1,6 +1,8 @@
+import { RowDatabaseFields } from "cdm/DatabaseModel";
 import { NoteContentAction } from "cdm/FolderModel";
 import { FileContent } from "helpers/FileContent";
 import { TFile, TFolder } from "obsidian";
+import { parseFrontmatterFieldsToString, parseInlineFieldsToString } from "parsers/RowDatabaseFieldsToFile";
 import { LOGGER } from "services/Logger";
 export class VaultManager {
   private static instance: VaultManager;
@@ -11,20 +13,21 @@ export class VaultManager {
    * @param filename 
    * @param content 
    */
-  async create_markdown_file(targetFolder: TFolder, filename: string, content?: string): Promise<TFile> {
+  async create_markdown_file(targetFolder: TFolder, filename: string, databasefields: RowDatabaseFields): Promise<TFile> {
     LOGGER.debug(`=> create_markdown_file. name:${targetFolder.path}/${filename})`);
     const created_note = await app.fileManager.createNewMarkdownFile(
       targetFolder,
       filename ?? "Untitled"
     );
+    const content = parseFrontmatterFieldsToString(databasefields).concat("\n").concat(parseInlineFieldsToString(databasefields));
     await app.vault.modify(created_note, content ?? "");
     LOGGER.debug(`<= create_markdown_file`);
     return created_note;
   }
 
   /**
   * Edit file content
-  * @param note 
+  * @param note
   */
   async editNoteContent(note: NoteContentAction): Promise<string> {
     LOGGER.debug(`=> editNoteContent. action:${note.action} filePath:${note.file.path}`);