Merge branch '25-fr-inline-field-supported'

Author: RafaelGB

docs/changelog.md

@@ -1,3 +1,11 @@
+## 0.2.0
+### Shiny new things
+- Edit inline fields are now supported! [ISSUE#25](https://github.com/RafaelGB/obsidian-db-folder/issues/25)
+- Big refactor about edit engine to improve resiliency and performance
+- new adjsutment section in column menu where, at the moment, you can select if column is of inline type or not
+
+### Improved
+- Now when you create a column, the field asociated is not inserted into all the rows. Just will be inserted when you edit the cell asociated.
 ## 0.1.2
 *Published on 2022/05/04*
 ### Improved

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"minAppVersion": "0.14.6",
 	"description": "Folder with the capability to store and retrieve data from a folder like database",
 	"author": "RafaelGB",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-dbfolder",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {

src/cdm/FolderModel.ts

@@ -121,5 +121,5 @@ export type NoteContentAction = {
     file: TFile,
     action: string,
     regexp: RegExp,
-    newValue: string
+    newValue?: string
 }

src/cdm/RowSelectModel.ts

@@ -1,5 +1,6 @@
 import { ActionType } from "react-table";
 import NoteInfo from "services/NoteInfo";
+import { TableDataType } from "cdm/FolderModel";
 
 export type RowSelectOption = {
     backgroundColor: string,
@@ -11,4 +12,5 @@ export type PopperProps = {
     column: any;
     columns: any;
     note: NoteInfo;
+    state: TableDataType;
 };

src/components/Cell.tsx

@@ -122,6 +122,7 @@ export default function DefaultCell(cellProperties: Cell) {
               column={cellProperties.column}
               columns={columns}
               note={note}
+              state={(cellProperties as any).initialState}
             />
           </CellContext.Provider>
         );

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

@@ -14,10 +14,12 @@ import TrashIcon from "components/img/Trash";
 import TextIcon from "components/img/Text";
 import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
+import AdjustmentsIcon from "components/img/AdjustmentsIcon";
 import React, { useContext, useEffect, useState } from "react";
 import { ActionType } from "react-table";
 import { usePopper } from "react-popper";
 import { HeaderContext } from "components/contexts/HeaderContext";
+import { FormControlLabel, FormGroup, Switch } from "@material-ui/core";
 type HeaderMenuProps = {
   dispatch: (action: ActionType) => void;
   setSortBy: any;
@@ -31,6 +33,8 @@ type HeaderMenuProps = {
   labelState: string;
   setLabelState: (label: string) => void;
   initialState: TableDataType;
+  isInline: boolean;
+  setIsInline: (isInline: boolean) => void;
 };
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   const {
@@ -44,6 +48,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     labelState,
     setLabelState,
     initialState,
+    isInline,
+    setIsInline,
   } = headerMenuProps;
   /** state of width columns */
   const { columnWidthState, setColumnWidthState } = useContext(HeaderContext);
@@ -56,11 +62,17 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     placement: "bottom",
     strategy: "absolute",
   });
+  // Manage type of data
   const [typeReferenceElement, setTypeReferenceElement] = useState(null);
   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);
+
   useEffect(() => {
     if (created) {
       setExpanded(true);
@@ -193,6 +205,15 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     strategy: "fixed",
   });
 
+  const settingsPopper = usePopper(
+    settingsReferenceElement,
+    settingsPopperElement,
+    {
+      placement: "right",
+      strategy: "fixed",
+    }
+  );
+
   function persistLabelChange() {
     dispatch({
       type: ActionTypes.UPDATE_COLUMN_LABEL,
@@ -240,6 +261,15 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     return { name: columnName, position: columnNumber, label: columnLabel };
   }
 
+  function handleChangeToggleInlineFrontmatter(e: any) {
+    setIsInline(e.target.checked);
+    dispatch({
+      type: ActionTypes.TOGGLE_INLINE_FRONTMATTER,
+      columnId: id,
+      isInline: e.target.checked,
+    });
+  }
+
   return (
     <div>
       {expanded && (
@@ -288,7 +318,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 Property Type
               </span>
             </div>
-            {/** Edit header label section */}
+            {/** Type of column section */}
             <div style={{ padding: "4px 0px" }}>
               <button
                 className="sort-button"
@@ -330,6 +360,7 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 </div>
               )}
             </div>
+            {/** Action buttons section */}
             <div
               style={{
                 borderTop: `2px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
@@ -350,6 +381,58 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
                 </button>
               ))}
             </div>
+            <div
+              style={{
+                borderTop: `2px solid ${StyleVariables.BACKGROUND_DIVIDER}`,
+                padding: "4px 0px",
+              }}
+            >
+              {/** Column settings section */}
+              <div style={{ padding: "4px 0px" }}>
+                <button
+                  className="sort-button"
+                  type="button"
+                  onMouseEnter={() => setShowSettings(true)}
+                  onMouseLeave={() => setShowSettings(false)}
+                  ref={setSettingsReferenceElement}
+                >
+                  <span className="svg-icon svg-text icon-margin">
+                    <AdjustmentsIcon />
+                  </span>
+                  <span>Settings</span>
+                </button>
+                {showSettings && (
+                  <div
+                    className="shadow-5 border-radius-m"
+                    ref={setSettingsPopperElement}
+                    onMouseEnter={() => setShowSettings(true)}
+                    onMouseLeave={() => setShowSettings(false)}
+                    {...settingsPopper.attributes.popper}
+                    style={{
+                      ...settingsPopper.styles.popper,
+                      width: 200,
+                      backgroundColor: StyleVariables.BACKGROUND_SECONDARY,
+                      zIndex: 4,
+                      padding: "4px 0px",
+                    }}
+                  >
+                    <FormGroup>
+                      <FormControlLabel
+                        control={
+                          <Switch
+                            checked={isInline}
+                            onChange={(event) => {
+                              handleChangeToggleInlineFrontmatter(event);
+                            }}
+                          />
+                        }
+                        label="Inline"
+                      />
+                    </FormGroup>
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
         </div>
       )}

src/components/img/AdjustmentsIcon.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+export default function AdjustmentsIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke="currentColor"
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <circle cx="14" cy="6" r="2" />
+      <line x1="4" y1="6" x2="12" y2="6" />
+      <line x1="16" y1="6" x2="20" y2="6" />
+      <circle cx="8" cy="12" r="2" />
+      <line x1="4" y1="12" x2="6" y2="12" />
+      <line x1="10" y1="12" x2="20" y2="12" />
+      <circle cx="17" cy="18" r="2" />
+      <line x1="4" y1="18" x2="15" y2="18" />
+      <line x1="19" y1="18" x2="20" y2="18" />
+    </svg>
+  );
+}

src/components/portals/PopperSelectPortal.tsx

@@ -9,7 +9,7 @@ import { PopperProps } from "cdm/RowSelectModel";
 import { CellContext } from "components/contexts/CellContext";
 
 const PopperSelectPortal = (popperProps: PopperProps) => {
-  const { dispatch, row, column, columns, note } = popperProps;
+  const { dispatch, row, column, columns, note, state } = popperProps;
   /** state of cell value */
   const { value, setValue } = useContext(CellContext);
   // Selector reference state
@@ -41,6 +41,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
       value: option.label,
       row: row,
       columnId: column.id,
+      state: state,
     });
   }