tags migrated

Author: RafaelGB

src/cdm/DatabaseModel.ts

@@ -1,7 +1,7 @@
 import { RowType } from "cdm/RowTypeModel"
 import { LocalSettings } from "cdm/SettingsModel";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
-import { TableOptions } from "@tanstack/react-table";
+import { Column, TableOptions } from "@tanstack/react-table";
 import { BaseColumn, RowDataType, TableColumn, TableDataType } from "cdm/FolderModel";
 import { RowSelectOption } from "cdm/ComponentsModel";
 
@@ -41,7 +41,7 @@ export type OptionSelect = {
 }
 export type BaseComponentProps = {
     intialState: TableDataType;
-    column: TableColumn;
+    column: Column<RowDataType, unknown>;
 }
 
 export type SortedType = {

src/components/DefaultCell.tsx

@@ -217,7 +217,7 @@ export default function DefaultCell(cellProperties: CellProps) {
         return (
           <CalendarPortal
             intialState={tableData}
-            column={column.columnDef as TableColumn}
+            column={column}
             cellProperties={cellProperties}
           />
         );
@@ -227,7 +227,7 @@ export default function DefaultCell(cellProperties: CellProps) {
         return (
           <CalendarTimePortal
             intialState={tableData}
-            column={column.columnDef as TableColumn}
+            column={column}
             cellProperties={cellProperties}
           />
         );
@@ -239,7 +239,7 @@ export default function DefaultCell(cellProperties: CellProps) {
             <PopperSelectPortal
               dispatch={dataDispatch}
               row={row}
-              column={column.columnDef as TableColumn}
+              column={column}
               columns={columns}
               note={note}
               intialState={tableData}
@@ -252,7 +252,7 @@ export default function DefaultCell(cellProperties: CellProps) {
           <CellContext.Provider value={{ contextValue, setContextValue }}>
             <TagsPortal
               intialState={tableData}
-              column={column.columnDef as TableColumn}
+              column={column}
               columns={columns}
               dispatch={dataDispatch}
               cellProperties={cellProperties}

src/components/portals/CalendarPortal.tsx

@@ -6,18 +6,19 @@ import NoteInfo from "services/NoteInfo";
 import { Portal } from "@mui/material";
 import { c } from "helpers/StylesHelper";
 import { CalendarProps } from "cdm/ComponentsModel";
-import { TableDataType } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const CalendarPortal = (calendarProps: CalendarProps) => {
   const { column, cellProperties, intialState } = calendarProps;
   const { row, table } = cellProperties;
+  const tableColumn = column.columnDef as TableColumn;
   const dataDispatch = (table.options.meta as TableDataType).dispatch;
   /** state of cell value */
   const [showDatePicker, setShowDatePicker] = useState(false);
   /** Note info of current Cell */
   const note: NoteInfo = row.original.__note__;
   const [calendarState, setCalendarState] = useState(
-    intialState.view.rows[row.index][column.key]
+    intialState.view.rows[row.index][tableColumn.key]
   );
 
   function handleSpanOnClick(event: any) {
@@ -31,7 +32,7 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
     dataDispatch({
       type: ActionTypes.UPDATE_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: newValue.toFormat("yyyy-MM-dd"),
       row: row,
       columnId: column.id,
@@ -59,7 +60,11 @@ const CalendarPortal = (calendarProps: CalendarProps) => {
       placeholderText="Pick a date..."
     />
   ) : (
-    <span className={`${c("calendar")}`} onClick={handleSpanOnClick}>
+    <span
+      className={`${c("calendar")}`}
+      onClick={handleSpanOnClick}
+      style={{ width: column.getSize() }}
+    >
       {DateTime.isDateTime(calendarState)
         ? (calendarState as unknown as DateTime).toFormat("yyyy-MM-dd")
         : null}

src/components/portals/CalendarTimePortal.tsx

@@ -5,15 +5,16 @@ import DatePicker from "react-datepicker";
 import NoteInfo from "services/NoteInfo";
 import { Portal } from "@mui/material";
 import { CalendarProps } from "cdm/ComponentsModel";
-import { TableDataType } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 
 const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
   const { column, cellProperties, intialState } = calendarTimeProps;
   const { row, table } = cellProperties;
+  const tableColumn = column.columnDef as TableColumn;
   const dataDispatch = (table.options.meta as TableDataType).dispatch;
   // Calendar state
   const [calendarTimeState, setCalendarTimeState] = useState(
-    intialState.view.rows[row.index][column.key]
+    intialState.view.rows[row.index][tableColumn.key]
   );
   /** state of cell value */
   const [showDatePicker, setShowDatePicker] = useState(false);
@@ -32,7 +33,7 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
     dataDispatch({
       type: ActionTypes.UPDATE_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: DateTime.fromJSDate(date).toISO(),
       row: row,
       columnId: column.id,
@@ -47,7 +48,7 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
     return <Portal container={el}>{containerProps.children}</Portal>;
   };
 
-  return showDatePicker && !column.isMetadata ? (
+  return showDatePicker && !tableColumn.isMetadata ? (
     <div className="calendar-time">
       <DatePicker
         dateFormat="yyyy-MM-dd h:mm aa"
@@ -66,7 +67,11 @@ const CalendarTimePortal = (calendarTimeProps: CalendarProps) => {
       />
     </div>
   ) : (
-    <span className="calendar-time" onClick={handleSpanOnClick}>
+    <span
+      className="calendar-time"
+      onClick={handleSpanOnClick}
+      style={{ width: column.getSize() }}
+    >
       {DateTime.isDateTime(calendarTimeState)
         ? (calendarTimeState as DateTime).toFormat("yyyy-MM-dd h:mm a")
         : null}

src/components/portals/PopperSelectPortal.tsx

@@ -8,6 +8,7 @@ import { usePopper } from "react-popper";
 import { PopperProps } from "cdm/ComponentsModel";
 import { CellContext } from "components/contexts/CellContext";
 import CrossIcon from "components/img/CrossIcon";
+import { TableColumn } from "cdm/FolderModel";
 
 const PopperSelectPortal = (popperProps: PopperProps) => {
   const { dispatch, row, column, columns, note, intialState } = popperProps;
@@ -24,6 +25,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   // Selector popper state
   const [domReady, setDomReady] = useState(false);
 
+  const tableColumn = column.columnDef as TableColumn;
   React.useEffect(() => {
     setDomReady(true);
   });
@@ -32,7 +34,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
     dispatch({
       type: ActionTypes.UPDATE_OPTION_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: "",
       row: row,
       columnId: column.id,
@@ -50,7 +52,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
     dispatch({
       type: ActionTypes.UPDATE_OPTION_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: option.label,
       row: row,
       columnId: column.id,
@@ -78,10 +80,12 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   }
   function addNewOption(e: any) {
     // check if option already exists
-    const alreadyExist = column.options.find((option: { label: string }) => {
-      if (option.label === e.target.value) {
+    const alreadyExist = tableColumn.options.find(
+      (option: { label: string }) => {
+        if (option.label === e.target.value) {
+        }
       }
-    });
+    );
     if (!alreadyExist) {
       dispatch({
         type: ActionTypes.ADD_OPTION_TO_COLUMN,
@@ -93,7 +97,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
   }
 
   function getColor() {
-    const match = column.options.find(
+    const match = tableColumn.options.find(
       (option: { label: string }) => option.label === contextValue.value
     );
     return (match && match.backgroundColor) || grey(200);
@@ -125,7 +129,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
               className="d-flex flex-wrap-wrap"
               style={{ marginTop: "-0.5rem" }}
             >
-              {column.options.map((option: any) => (
+              {tableColumn.options.map((option: any) => (
                 <div
                   key={option.label}
                   className="cursor-pointer"
@@ -198,6 +202,7 @@ const PopperSelectPortal = (popperProps: PopperProps) => {
         ref={setSelectRef}
         className="cell-padding d-flex cursor-default align-items-center flex-1"
         onClick={() => setShowSelect(true)}
+        style={{ width: column.getSize() }}
       >
         {contextValue.value && (
           <Relationship

src/components/portals/TagsPortal.tsx

@@ -9,24 +9,26 @@ import { c } from "helpers/StylesHelper";
 import { Literal } from "obsidian-dataview/lib/data-model/value";
 import { ActionTypes } from "helpers/Constants";
 import NoteInfo from "services/NoteInfo";
+import { TableColumn } from "cdm/FolderModel";
 
 const TagsPortal = (tagsProps: TagsProps) => {
   const { intialState, column, dispatch, cellProperties, columns } = tagsProps;
   const { row } = cellProperties;
+  const tableColumn = column.columnDef as TableColumn;
   // Tags reference state
   const [showSelectTags, setShowSelectTags] = useState(false);
   // tags values state
   const [tagsState, setTagsState] = useState(
-    Array.isArray(intialState.view.rows[row.index][column.key])
-      ? (intialState.view.rows[row.index][column.key] as Literal[])
+    Array.isArray(intialState.view.rows[row.index][tableColumn.key])
+      ? (intialState.view.rows[row.index][tableColumn.key] as Literal[])
       : []
   );
 
   /** Note info of current Cell */
   const note: NoteInfo = (cellProperties.row.original as any).__note__;
 
   function getColor(tag: string) {
-    const match = column.options.find(
+    const match = tableColumn.options.find(
       (option: { label: string }) => option.label === tag
     );
     if (match) {
@@ -50,7 +52,7 @@ const TagsPortal = (tagsProps: TagsProps) => {
     color: getColor(tag),
   }));
 
-  const multiOptions = column.options.map((option: RowSelectOption) => ({
+  const multiOptions = tableColumn.options.map((option: RowSelectOption) => ({
     value: option.label,
     label: option.label,
     color: option.backgroundColor,
@@ -63,7 +65,7 @@ const TagsPortal = (tagsProps: TagsProps) => {
     dispatch({
       type: ActionTypes.UPDATE_CELL,
       file: note.getFile(),
-      key: column.key,
+      key: tableColumn.key,
       value: arrayTags,
       row: cellProperties.row,
       columnId: column.id,
@@ -72,7 +74,7 @@ const TagsPortal = (tagsProps: TagsProps) => {
     newValue
       .filter(
         (tag: any) =>
-          !column.options.find((option: any) => option.label === tag.value)
+          !tableColumn.options.find((option: any) => option.label === tag.value)
       )
       .forEach((tag: any) => {
         dispatch({
@@ -118,6 +120,7 @@ const TagsPortal = (tagsProps: TagsProps) => {
                 c("tags-container") + " cell-padding d-flex flex-wrap-wrap"
               }
               onClick={() => setShowSelectTags(true)}
+              style={{ width: column.getSize() }}
             >
               {tagsState.map((tag: string) => (
                 <div key={`key-${tag}`}>