action to change column inline property

Author: RafaelGB

src/components/HeaderMenu.tsx

@@ -68,6 +68,10 @@ 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) {
       setExpanded(true);
@@ -256,6 +260,15 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     return { name: columnName, position: columnNumber, label: columnLabel };
   }
 
+  function handleChangeToggleInlineFrontmatter(e: any) {
+    setToggleInlineFrontmatter(e.target.checked);
+    dispatch({
+      type: ActionTypes.TOGGLE_INLINE_FRONTMATTER,
+      columnId: id,
+      isInline: e.target.checked,
+    });
+  }
+
   return (
     <div>
       {expanded && (
@@ -405,7 +418,12 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                     <FormGroup>
                       <FormControlLabel
                         control={
-                          <Checkbox checked={headerMenuProps.column.isInline} />
+                          <Checkbox
+                            checked={toggleInlineFrontmatter}
+                            onChange={(event) => {
+                              handleChangeToggleInlineFrontmatter(event);
+                            }}
+                          />
                         }
                         label="Inline"
                       />

src/components/reducers/DatabaseDispatch.tsx

@@ -406,6 +406,13 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
      */
     case ActionTypes.ENABLE_RESET:
       return update(state, { skipReset: { $set: false } });
+
+    case ActionTypes.TOGGLE_INLINE_FRONTMATTER:
+      // Update configuration & row files on disk
+      state.view.diskConfig.updateColumnProperties(action.columnId, {
+        isInline: action.isInline,
+      });
+      return state;
     default:
       LOGGER.warn(`<=> databaseReducer: unknown action ${action.type}`);
   }

src/helpers/Constants.ts

@@ -11,6 +11,7 @@ export const ActionTypes = Object.freeze({
   DELETE_COLUMN: 'delete_column',
   ENABLE_RESET: 'enable_reset',
   SETTINGS_COLUMN: 'settings_column',
+  TOGGLE_INLINE_FRONTMATTER: 'toggle_inline_frontmatter',
 });
 
 /** Flavours of data types */