column config updated after close modal

RafaelGB · RafaelGB · commit 40c0beaf6b90 · 2022-05-21T14:29:05.000+02:00
diff --git a/src/cdm/HeaderModel.ts b/src/cdm/HeaderModel.ts
@@ -0,0 +1,13 @@
+import { DatabaseHeaderProps } from "cdm/FolderModel";
+
+export type HeaderMenuProps = {
+    headerProps: DatabaseHeaderProps;
+    setSortBy: any;
+    propertyIcon: any;
+    expanded: boolean;
+    setExpanded: (expanded: boolean) => void;
+    created: boolean;
+    referenceElement: any;
+    labelState: string;
+    setLabelState: (label: string) => void;
+};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -58,8 +58,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
   const [expanded, setExpanded] = useState(created || false);
   const [domReady, setDomReady] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
-  console.log("headerProps", headerProps);
-  const [isInline, setIsInline] = useState(headerProps.column.config.isInline);
   const [labelState, setLabelState] = useState(headerProps.column.label);
   React.useEffect(() => {
     setDomReady(true);
@@ -123,7 +121,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
       >
         <span className="svg-icon svg-gray icon-margin">{propertyIcon}</span>
         {labelState}
-        {isInline && <span>*</span>}
+        {headerProps.column.config.isInline && <span>*</span>}
       </div>
       {domReady
         ? ReactDOM.createPortal(
@@ -137,8 +135,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
               referenceElement={referenceElement}
               labelState={labelState}
               setLabelState={setLabelState}
-              isInline={isInline}
-              setIsInline={setIsInline}
             />,
             document.getElementById("popper-container")
           )
diff --git a/src/components/HeaderMenu.tsx b/src/components/HeaderMenu.tsx
@@ -1,4 +1,3 @@
-import { DatabaseHeaderProps } from "cdm/FolderModel";
 import {
   ActionTypes,
   DataTypes,
@@ -22,22 +21,9 @@ import { Column } from "react-table";
 import { usePopper } from "react-popper";
 import { HeaderContext } from "components/contexts/HeaderContext";
 import { getColumnWidthStyle } from "components/styles/ColumnWidthStyle";
-import { FormControlLabel, FormGroup, Switch } from "@material-ui/core";
 import { ColumnModal } from "./modals/ColumnModal";
+import { HeaderMenuProps } from "cdm/HeaderModel";
 
-type HeaderMenuProps = {
-  headerProps: DatabaseHeaderProps;
-  setSortBy: any;
-  propertyIcon: any;
-  expanded: boolean;
-  setExpanded: (expanded: boolean) => void;
-  created: boolean;
-  referenceElement: any;
-  labelState: string;
-  setLabelState: (label: string) => void;
-  isInline: boolean;
-  setIsInline: (isInline: boolean) => void;
-};
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   /** state of width columns */
   const { columnWidthState, setColumnWidthState } = useContext(HeaderContext);
@@ -51,8 +37,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     referenceElement,
     labelState,
     setLabelState,
-    isInline,
-    setIsInline,
   } = headerMenuProps;
   const { column, rows, initialState } = headerMenuProps.headerProps;
   const dispatch = (headerMenuProps.headerProps as any).dataDispatch;
@@ -69,12 +53,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   const [typePopperElement, setTypePopperElement] = useState(null);
   const [showType, setShowType] = useState(false);
 
-  // Manage settings
-  const [settingsReferenceElement, setSettingsReferenceElement] =
-    useState(null);
-  const [settingsPopperElement, setSettingsPopperElement] = useState(null);
-  const [showSettings, setShowSettings] = useState(false);
-
   // Manage errors
   const [labelStateInvalid, setLabelStateInvalid] = useState(false);
 
@@ -241,15 +219,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     strategy: "fixed",
   });
 
-  const settingsPopper = usePopper(
-    settingsReferenceElement,
-    settingsPopperElement,
-    {
-      placement: "auto",
-      strategy: "fixed",
-    }
-  );
-
   function persistLabelChange(newKey: string) {
     const futureOrder = headerMenuProps.headerProps.allColumns.map(
       (o: Column) => (o.id === column.id ? newKey : o.id)
@@ -318,15 +287,6 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     return { name: columnName, position: wantedPosition, label: columnLabel };
   }
 
-  function handleChangeToggleInlineFrontmatter(e: any) {
-    setIsInline(e.target.checked);
-    dispatch({
-      type: ActionTypes.TOGGLE_INLINE_FRONTMATTER,
-      columnId: column.id,
-      isInline: e.target.checked,
-    });
-  }
-
   return (
     <div>
       {expanded && (
@@ -460,45 +420,15 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 <div style={{ padding: "4px 0px" }}>
                   <div
                     className="menu-item sort-button"
-                    // onMouseEnter={() => setShowSettings(true)}
-                    // onMouseLeave={() => setShowSettings(false)}
                     onClick={() =>
-                      new ColumnModal(initialState.view, column).open()
+                      new ColumnModal(initialState.view, headerMenuProps).open()
                     }
-                    ref={setSettingsReferenceElement}
                   >
                     <span className="svg-icon svg-text icon-margin">
                       <AdjustmentsIcon />
                     </span>
                     <span>Settings</span>
                   </div>
-                  {/* {showSettings && (
-                    <div
-                      className={`menu ${c("popper")}`}
-                      ref={setSettingsPopperElement}
-                      onMouseEnter={() => setShowSettings(true)}
-                      onMouseLeave={() => setShowSettings(false)}
-                      {...settingsPopper.attributes.popper}
-                      style={{
-                        ...settingsPopper.styles.popper,
-                        width: 200,
-                        zIndex: 4,
-                        padding: "4px 0px",
-                      }}
-                    >
-                      <FormGroup>
-                        <FormControlLabel
-                          control={
-                            <Switch
-                              checked={isInline}
-                              onChange={handleChangeToggleInlineFrontmatter}
-                            />
-                          }
-                          label="Inline"
-                        />
-                      </FormGroup>
-                    </div>
-                  )} */}
                 </div>
               </div>
             )}
diff --git a/src/components/markdown/MarkdownRenderer.tsx b/src/components/markdown/MarkdownRenderer.tsx
@@ -14,11 +14,11 @@ export async function renderMarkdown(
   try {
     const view = (cell as any).initialState.view;
     const column = cell.column as unknown as DatabaseColumn;
-    if (isValidHttpUrl(markdownString, column)) {
-      const { height, width } = view.diskConfig.yaml.config.media_settings;
+    const { media_height, media_width, enable_media_view } = column.config;
+    if (enable_media_view && isValidHttpUrl(markdownString)) {
       // TODO option to generate Iframes
       //markdownString = `<div class=iframe-container> <iframe width="427" height="240" src="${markdownString}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>`;
-      markdownString = `![embedded link|${height}x${width}](${markdownString})`;
+      markdownString = `![embedded link|${media_height}x${media_width}](${markdownString})`;
     }
 
     await MarkdownRenderer.renderMarkdown(
@@ -130,7 +130,7 @@ function handleVideo(el: HTMLElement, file: TFile, view: DatabaseView) {
   el.addClasses(["media-embed", "is-loaded"]);
 }
 
-function isValidHttpUrl(urlCandidate: string, column: DatabaseColumn) {
+function isValidHttpUrl(urlCandidate: string) {
   let url;
 
   try {
@@ -139,8 +139,5 @@ function isValidHttpUrl(urlCandidate: string, column: DatabaseColumn) {
     return false;
   }
 
-  return (
-    (url.protocol === "http:" || url.protocol === "https:") &&
-    column.config.enable_media_view
-  );
+  return url.protocol === "http:" || url.protocol === "https:";
 }
diff --git a/src/components/modals/ColumnModal.ts b/src/components/modals/ColumnModal.ts
@@ -1,25 +1,25 @@
-import { TableColumn } from "cdm/FolderModel";
+import { ConfigColumn, TableColumn } from "cdm/FolderModel";
 import { DatabaseView } from "DatabaseView";
 import { Modal } from "obsidian";
 import { add_setting_header } from "settings/SettingsComponents";
-import { ColumnHandler } from "components/modals/handlers/AbstractColumnHandler";
-import { MediaDimensionsHandler } from "components/modals/handlers/MediaDimensionsHandler";
-import { MediaToggleHandler } from "components/modals/handlers/MediaToggleHandler";
-import { StyleClasses } from "helpers/Constants";
+import { ActionTypes, StyleClasses } from "helpers/Constants";
 import { ColumnHandlerResponse } from "cdm/ModalSettingsModel";
+import { media_settings_section, behavior_settings_section } from "components/modals/ColumnSections";
+import { HeaderMenuProps } from "cdm/HeaderModel";
+import { Dispatch } from "react";
 
 export class ColumnModal extends Modal {
     view: DatabaseView;
-    column: TableColumn;
+    headerMenuProps: HeaderMenuProps;
     columnSettingsManager: ColumnSettingsManager;
     constructor(
         view: DatabaseView,
-        column: TableColumn
+        headerMenuProps: HeaderMenuProps
     ) {
         super(view.app);
         this.view = view;
-        this.column = column;
-        this.columnSettingsManager = new ColumnSettingsManager(this.view, this.column);
+        this.headerMenuProps = headerMenuProps;
+        this.columnSettingsManager = new ColumnSettingsManager(this.view, this.headerMenuProps.headerProps.column);
     }
 
     onOpen() {
@@ -28,12 +28,11 @@ export class ColumnModal extends Modal {
         this.columnSettingsManager.constructUI(contentEl);
     }
 
-    reset(columnHandlerResponse: ColumnHandlerResponse) {
-
-    }
-
     onClose() {
         const { contentEl } = this;
+        handleColumnChanges(
+            (this.headerMenuProps.headerProps as any).dataDispatch,
+            this.headerMenuProps.headerProps.column)
         contentEl.empty();
     }
 }
@@ -65,6 +64,8 @@ export class ColumnSettingsManager {
     }
 
     constructBody(settingHandlerResponse: ColumnHandlerResponse) {
+        /** behavior section */
+        behavior_settings_section(settingHandlerResponse);
         /** media section */
         media_settings_section(settingHandlerResponse);
     }
@@ -78,28 +79,10 @@ export class ColumnSettingsManager {
     }
 }
 
-function media_settings_section(settingHandlerResponse: ColumnHandlerResponse): ColumnHandlerResponse {
-    const folder_section = settingHandlerResponse.containerEl.createDiv("configuration-section-container-folder");
-    // title of the section
-    add_setting_header(folder_section, "Media adjustments", 'h3');
-    // section settings
-    const handlers = getHandlers();
-    let i = 1;
-    while (i < handlers.length) {
-        handlers[i - 1].setNext(handlers[i]);
-        i++;
-    }
-
-    settingHandlerResponse.containerEl = folder_section;
-    return handlers[0].handle(settingHandlerResponse);
-}
-
-/**
- * Obtain all classes than extends from AbstractHandler
- */
-function getHandlers(): ColumnHandler[] {
-    return [
-        new MediaToggleHandler(),
-        new MediaDimensionsHandler(),
-    ];
+function handleColumnChanges(dispatch: Dispatch<any>, column: TableColumn) {
+    dispatch({
+        type: ActionTypes.MODIFY_COLUMN_CONFIG,
+        columnId: column.id,
+        columnConfig: column.config,
+    });
 }
diff --git a/src/components/modals/ColumnSections.ts b/src/components/modals/ColumnSections.ts
@@ -0,0 +1,45 @@
+import { ColumnHandlerResponse } from "cdm/ModalSettingsModel";
+import { add_setting_header } from "settings/SettingsComponents";
+import { MediaDimensionsHandler } from "components/modals/handlers/MediaDimensionsHandler";
+import { MediaToggleHandler } from "components/modals/handlers/MediaToggleHandler";
+import { InlineToggleHandler } from "components/modals/handlers/InlineToggleHandler";
+
+export function behavior_settings_section(settingHandlerResponse: ColumnHandlerResponse) {
+    const behavior_section = settingHandlerResponse.containerEl.createDiv("column-section-container-behavior");
+    add_setting_header(behavior_section, "Behavior", "h3");
+    /**
+     * Obtain all classes than extends from AbstractHandler
+     */
+    const handlers = [
+        new InlineToggleHandler()
+    ]
+    let i = 1;
+    while (i < handlers.length) {
+        handlers[i - 1].setNext(handlers[i]);
+        i++;
+    }
+
+    settingHandlerResponse.containerEl = behavior_section;
+    return handlers[0].handle(settingHandlerResponse);
+}
+
+export function media_settings_section(settingHandlerResponse: ColumnHandlerResponse): ColumnHandlerResponse {
+    const folder_section = settingHandlerResponse.containerEl.createDiv("column-section-container-media");
+    // title of the section
+    add_setting_header(folder_section, "Media adjustments", 'h3');
+    /**
+     * Obtain all classes than extends from AbstractHandler
+     */
+    const handlers = [
+        new MediaToggleHandler(),
+        new MediaDimensionsHandler(),
+    ]
+    let i = 1;
+    while (i < handlers.length) {
+        handlers[i - 1].setNext(handlers[i]);
+        i++;
+    }
+
+    settingHandlerResponse.containerEl = folder_section;
+    return handlers[0].handle(settingHandlerResponse);
+}
diff --git a/src/components/modals/handlers/InlineToggleHandler.ts b/src/components/modals/handlers/InlineToggleHandler.ts
@@ -0,0 +1,24 @@
+import { add_toggle } from "settings/SettingsComponents";
+import { AbstractColumnHandler } from "components/modals/handlers/AbstractColumnHandler";
+import { ColumnHandlerResponse } from "cdm/ModalSettingsModel";
+export class InlineToggleHandler extends AbstractColumnHandler {
+    settingTitle: string = 'Inline field';
+    handle(columnHandlerResponse: ColumnHandlerResponse): ColumnHandlerResponse {
+        const { column, containerEl, view } = columnHandlerResponse;
+        const inline_togle_promise = async (value: boolean): Promise<void> => {
+            column.config.isInline = value;
+            // Persist value
+            await view.diskConfig.updateColumnConfig(column.key, {
+                isInline: value
+            });
+        }
+        add_toggle(
+            containerEl,
+            this.settingTitle,
+            "Convert field to inline (field:: value) or leave it as frontmatter (---field: value---)",
+            column.config.isInline,
+            inline_togle_promise
+        );
+        return this.goNext(columnHandlerResponse);
+    }
+}
diff --git a/src/components/modals/handlers/MediaDimensionsHandler.ts b/src/components/modals/handlers/MediaDimensionsHandler.ts
@@ -20,7 +20,7 @@ export class MediaDimensionsHandler extends AbstractColumnHandler {
                             const validatedNumber = isNaN(parsedNumber) ? config.media_height : parsedNumber;
                             config.media_height = validatedNumber;
                             // Persist changes in local config
-                            view.diskConfig.updateColumnConfig(column.key, {
+                            await view.diskConfig.updateColumnConfig(column.key, {
                                 media_height: validatedNumber
                             });
                         })
diff --git a/src/components/reducers/DatabaseDispatch.tsx b/src/components/reducers/DatabaseDispatch.tsx
diff --git a/src/helpers/Constants.ts b/src/helpers/Constants.ts
