first commit

Author: RafaelGB

src/components/Cell.tsx

@@ -190,6 +190,10 @@ export default function DefaultCell(cellProperties: Cell) {
           </CellContext.Provider>
         );
 
+      case DataTypes.TASK:
+        return (
+          <span ref={containerCellRef} className={`${c("md_cell")}`}></span>
+        );
       /** Default option */
       default:
         LOGGER.warn(`Unknown data type: ${dataType}`);

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,12 @@ export default function Header(headerProps: DatabaseHeaderProps) {
       propertyIcon = <CalendarTimeIcon />;
       break;
     case DataTypes.MARKDOWN:
-      // TODO : add a markdown icon
       propertyIcon = <MarkdownObsidian />;
       break;
+    case DataTypes.TASK:
+      // TODO : add a markdown icon
+      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 */
@@ -212,6 +213,19 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       icon: <CalendarTimeIcon />,
       label: MetadataLabels.CALENDAR_TIME,
     },
+    {
+      onClick: (e: any) => {
+        dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.TASK,
+        });
+        setShowType(false);
+        setExpanded(false);
+      },
+      icon: <TaskIcon />,
+      label: MetadataLabels.TASK,
+    },
   ];
 
   const typePopper = usePopper(typeReferenceElement, typePopperElement, {

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/reducers/DatabaseDispatch.tsx

@@ -210,6 +210,20 @@ export function databaseReducer(state: TableDataType, action: ActionType) {
               $set: parsedData,
             },
           });
+        case DataTypes.TASK:
+          return update(state, {
+            skipReset: { $set: true },
+            columns: {
+              $set: [
+                ...state.columns.slice(0, typeIndex),
+                { ...state.columns[typeIndex], dataType: action.dataType },
+                ...state.columns.slice(typeIndex + 1, state.columns.length),
+              ],
+            },
+            data: {
+              $set: parsedData,
+            },
+          });
         default:
           /**
            * GENERIC update change

src/helpers/Constants.ts

@@ -24,6 +24,7 @@ export const DataTypes = Object.freeze({
   MARKDOWN: 'markdown',
   CALENDAR: 'calendar',
   CALENDAR_TIME: 'calendar_time',
+  TASK: 'task',
   NEW_COLUMN: 'new_column'
 });
 
@@ -43,6 +44,7 @@ export const MetadataLabels = Object.freeze({
   MODIFIED: 'Modified',
   CALENDAR: 'Date',
   CALENDAR_TIME: 'Datetime',
+  TASK: 'Task',
 });
 
 export const DEFAULT_COLUMN_CONFIG = Object.freeze({