Merge branch '54-fr-checkbox-type-column'

Author: RafaelGB

docs/docs/changelog.md

@@ -1,3 +1,13 @@
+## 1.4.0
+*Published on 2022/05/25*
+### Shiny new things
+- New metadata column: File tasks! You can see the tasks that are associated with each file and interact with them. Powered with tasklist render of dataview. [ISSUE#54](https://github.com/RafaelGB/obsidian-db-folder/issues/54)
+
+### Improved
+- Extra margin added to the botton and top of every cell is removed. Markdown obsidian renderer add html tagging that affected the margin.[ISSUE#71](https://github.com/RafaelGB/obsidian-db-folder/issues/71)
+
+### No longer broken
+- Column settings that has a type without behavior section produce a console error no more and section tittle is not shown.
 ## 1.3.2
 *Published on 2022/05/24*
 ### Improved

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "dbfolder",
 	"name": "DB Folder",
-	"version": "1.3.2",
+	"version": "1.4.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": "1.3.2",
+	"version": "1.4.0",
 	"description": "This is a sample plugin for Obsidian (https://obsidian.md)",
 	"main": "main.js",
 	"scripts": {

src/Settings.ts

@@ -29,6 +29,7 @@ export interface LocalSettings {
   remove_field_when_delete_column: boolean;
   show_metadata_created: boolean;
   show_metadata_modified: boolean;
+  show_metadata_tasks: boolean;
 }
 
 export interface DatabaseSettings {
@@ -52,6 +53,7 @@ export const DEFAULT_SETTINGS: DatabaseSettings = {
     group_folder_column: '',
     show_metadata_created: false,
     show_metadata_modified: false,
+    show_metadata_tasks: false
   }
 };
 

src/components/Cell.tsx

@@ -10,6 +10,7 @@ import CalendarPortal from "./portals/CalendarPortal";
 import { TableColumn } from "cdm/FolderModel";
 import CalendarTimePortal from "components/portals/CalendarTimePortal";
 import { renderMarkdown } from "components/markdown/MarkdownRenderer";
+import { DataviewService } from "services/DataviewService";
 
 export default function DefaultCell(cellProperties: Cell) {
   const dataDispatch = (cellProperties as any).dataDispatch;
@@ -24,6 +25,7 @@ export default function DefaultCell(cellProperties: Cell) {
   /** Ref to cell container */
   const containerCellRef = useRef<HTMLDivElement>();
   const editableMdRef = useRef<HTMLInputElement>();
+  const taskRef = useRef<HTMLDivElement>();
   /** state of cell value */
   const [contextValue, setContextValue] = useState({
     value: initialValue,
@@ -38,11 +40,25 @@ export default function DefaultCell(cellProperties: Cell) {
   );
   // set contextValue when cell is loaded
   useEffect(() => {
-    if (!dirtyCell && initialValue !== contextValue.value) {
-      setContextValue({
-        value: initialValue,
-        update: false,
-      });
+    switch (dataType) {
+      case DataTypes.TASK:
+        //TODO - this is a hack. find why is layout effect called twice
+        taskRef.current.innerHTML = "";
+        DataviewService.getDataviewAPI().taskList(
+          contextValue.value,
+          false,
+          taskRef.current,
+          (cellProperties as any).initialState.view,
+          (cellProperties as any).initialState.view.file.path
+        );
+        break;
+      default:
+        if (!dirtyCell && initialValue !== contextValue.value) {
+          setContextValue({
+            value: initialValue,
+            update: false,
+          });
+        }
     }
   }, []);
 
@@ -54,7 +70,6 @@ export default function DefaultCell(cellProperties: Cell) {
 
   useEffect(() => {
     if (!dirtyCell && containerCellRef.current) {
-      renderMarkdown;
       //TODO - this is a hack. find why is layout effect called twice
       containerCellRef.current.innerHTML = "";
       renderMarkdown(
@@ -190,6 +205,9 @@ export default function DefaultCell(cellProperties: Cell) {
           </CellContext.Provider>
         );
 
+      case DataTypes.TASK:
+        return <div ref={taskRef} className="data-input"></div>;
+
       /** Default option */
       default:
         LOGGER.warn(`Unknown data type: ${dataType}`);

src/components/Columns.tsx

@@ -45,6 +45,16 @@ export async function obtainMetadataColumns(
     delete yamlColumns[MetadataColumns.MODIFIED];
   }
 
+  if (localSetting.show_metadata_tasks) {
+    // If Modified is not already in the table, add it
+    yamlColumns[MetadataColumns.TASKS] = {
+      ...MetadataDatabaseColumns.TASKS,
+      ...(yamlColumns[MetadataColumns.TASKS] ?? {}),
+    };
+  } else {
+    delete yamlColumns[MetadataColumns.TASKS];
+  }
+
   yamlColumns[MetadataColumns.ADD_COLUMN] = MetadataDatabaseColumns.ADD_COLUMN;
   return yamlColumns;
 }

src/components/Header.tsx

@@ -8,6 +8,7 @@ import HeaderMenu from "components/HeaderMenu";
 import CalendarIcon from "components/img/CalendarIcon";
 import MarkdownObsidian from "components/img/Markdown";
 import CalendarTimeIcon from "components/img/CalendarTime";
+import TaskIcon from "components/img/TaskIcon";
 import {
   ActionTypes,
   DataTypes,
@@ -90,9 +91,11 @@ export default function Header(headerProps: DatabaseHeaderProps) {
       propertyIcon = <CalendarTimeIcon />;
       break;
     case DataTypes.MARKDOWN:
-      // TODO : add a markdown icon
       propertyIcon = <MarkdownObsidian />;
       break;
+    case DataTypes.TASK:
+      propertyIcon = <TaskIcon />;
+      break;
     default:
       break;
   }

src/components/HeaderMenu.tsx

@@ -23,6 +23,7 @@ import { HeaderContext } from "components/contexts/HeaderContext";
 import { getColumnWidthStyle } from "components/styles/ColumnWidthStyle";
 import { ColumnModal } from "./modals/ColumnModal";
 import { HeaderMenuProps } from "cdm/HeaderModel";
+import TaskIcon from "components/img/TaskIcon";
 
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   /** state of width columns */
@@ -80,23 +81,28 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   /**
    * Array of action buttons asociated to the header
    */
-  const buttons = [
-    {
-      onClick: (e: any) => {
-        setSortBy([{ id: column.id, desc: false }]);
-        setExpanded(false);
-      },
-      icon: <ArrowUpIcon />,
-      label: "Sort ascending",
-    },
-    {
-      onClick: (e: any) => {
-        setSortBy([{ id: column.id, desc: true }]);
-        setExpanded(false);
+  const buttons = [];
+  if (column.dataType !== DataTypes.TASK) {
+    buttons.push(
+      {
+        onClick: (e: any) => {
+          setSortBy([{ id: column.id, desc: false }]);
+          setExpanded(false);
+        },
+        icon: <ArrowUpIcon />,
+        label: "Sort ascending",
       },
-      icon: <ArrowDownIcon />,
-      label: "Sort descending",
-    },
+      {
+        onClick: (e: any) => {
+          setSortBy([{ id: column.id, desc: true }]);
+          setExpanded(false);
+        },
+        icon: <ArrowDownIcon />,
+        label: "Sort descending",
+      }
+    );
+  }
+  buttons.push(
     {
       onClick: (e: any) => {
         dispatch({
@@ -122,8 +128,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       },
       icon: <ArrowRightIcon />,
       label: "Insert right",
-    },
-  ];
+    }
+  );
   /**
    * Add extra buttons if column is not a metadata
    */

src/components/img/TaskIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export default function TaskIcon() {
+  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" />
+      <path d="M13 5h8" />
+      <path d="M13 9h5" />
+      <path d="M13 15h8" />
+      <path d="M13 19h5" />
+      <rect x="3" y="4" width="6" height="6" rx="1" />
+      <rect x="3" y="14" width="6" height="6" rx="1" />
+    </svg>
+  );
+}

src/components/markdown/MarkdownRenderer.tsx

@@ -65,12 +65,6 @@ function handleEmbeds(dom: HTMLDivElement, view: DatabaseView, depth: number) {
       if (MediaExtensions.VIDEO.contains(target.extension)) {
         return handleVideo(el, target, view);
       }
-
-      //   if (target.extension === "md") {
-      //     return await handleMarkdown(el, target, normalizedPath, view, depth);
-      //   }
-
-      //return handleUnknownFile(el, target);
     })
   );
 }