Merge branch '65-fr-top-bar-icon-for-sorting'

Author: RafaelGB

docs/docs/changelog.md

@@ -1,3 +1,6 @@
+## 1.4.1
+### Visual
+- Text column style now justify the content of cells
 ## 1.4.0
 *Published on 2022/05/25*
 ### Shiny new things

src/DatabaseView.tsx

@@ -1,12 +1,13 @@
 import { DatabaseColumn } from "cdm/DatabaseModel";
-import { TableDataType } from "cdm/FolderModel";
+import { InitialState, TableDataType } from "cdm/FolderModel";
 import {
   obtainColumnsFromFolder,
   obtainMetadataColumns,
 } from "components/Columns";
 import { createDatabase } from "components/index/Database";
 import { DbFolderError } from "errors/AbstractError";
 import { DatabaseCore, DataTypes, StyleClasses } from "helpers/Constants";
+import obtainInitialState from "helpers/InitialState";
 import { adapterTFilesToRows, isDatabaseNote } from "helpers/VaultManagement";
 import DBFolderPlugin from "main";
 
@@ -133,6 +134,7 @@ export class DatabaseView extends TextFileView implements HoverParent {
         columns,
         this.diskConfig.yaml.filters
       );
+      const initialState: InitialState = obtainInitialState(columns, rows);
       // Define table properties
       const tableProps: TableDataType = {
         columns: columns,
@@ -141,6 +143,7 @@ export class DatabaseView extends TextFileView implements HoverParent {
         skipReset: false,
         view: this,
         stateManager: this.plugin.getStateManager(this.file),
+        initialState: initialState,
       };
       // Render database
       const table = createDatabase(tableProps);

src/cdm/DatabaseModel.ts

@@ -47,3 +47,8 @@ export type CalendarProps = {
     column: TableColumn;
     cellProperties: Cell;
 };
+
+export type SortedType = {
+    id: string;
+    desc: boolean;
+}

src/cdm/FolderModel.ts

@@ -52,6 +52,8 @@ export interface BaseColumn {
     config: ConfigColumn;
 }
 export interface TableColumn extends BaseColumn {
+    isSortedDesc?: boolean;
+    isSorted?: boolean;
     id: string;
     minWidth?: number;
     width?: number;
@@ -68,14 +70,23 @@ export type RowDataType = {
     [key: string]: Literal | NoteInfo
 }
 
+export type SortByElement = {
+    id: string;
+    desc: boolean;
+}
+export type InitialState = {
+    sortBy?: SortByElement[],
+}
+
 export type TableDataType = {
     columns: TableColumn[],
     shadowColumns: TableColumn[],
     data: Array<RowDataType>,
     skipReset: boolean,
     view: DatabaseView,
     stateManager: StateManager,
-    dispatch?: Dispatch<any>
+    dispatch?: Dispatch<any>,
+    initialState?: InitialState,
 }
 export interface DatabaseHeaderProps {
     columns: any,

src/components/Cell.tsx

@@ -7,10 +7,11 @@ import PopperSelectPortal from "components/portals/PopperSelectPortal";
 import { CellContext } from "components/contexts/CellContext";
 import { c } from "helpers/StylesHelper";
 import CalendarPortal from "./portals/CalendarPortal";
-import { TableColumn } from "cdm/FolderModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
 import CalendarTimePortal from "components/portals/CalendarTimePortal";
 import { renderMarkdown } from "components/markdown/MarkdownRenderer";
 import { DataviewService } from "services/DataviewService";
+import { CheckboxCell } from "./Checkbox";
 
 export default function DefaultCell(cellProperties: Cell) {
   const dataDispatch = (cellProperties as any).dataDispatch;
@@ -135,7 +136,7 @@ export default function DefaultCell(cellProperties: Cell) {
             onChange={handleOnChange}
             onKeyDown={handleKeyDown}
             onBlur={handlerEditableOnBlur}
-            className={"data-input"}
+            className="data-input"
             ref={editableMdRef}
           />
         ) : (
@@ -198,7 +199,9 @@ export default function DefaultCell(cellProperties: Cell) {
         return (
           <CellContext.Provider value={{ contextValue, setContextValue }}>
             <CalendarPortal
-              intialState={(cellProperties as any).initialState}
+              intialState={
+                (cellProperties as any).initialState as unknown as TableDataType
+              }
               column={cellProperties.column as unknown as TableColumn}
               cellProperties={cellProperties}
             />
@@ -208,6 +211,18 @@ export default function DefaultCell(cellProperties: Cell) {
       case DataTypes.TASK:
         return <div ref={taskRef} className="data-input"></div>;
 
+      case DataTypes.CHECKBOX:
+        return (
+          <CellContext.Provider value={{ contextValue, setContextValue }}>
+            <CheckboxCell
+              intialState={
+                (cellProperties as any).initialState as unknown as TableDataType
+              }
+              column={cellProperties.column as unknown as TableColumn}
+              cellProperties={cellProperties}
+            />
+          </CellContext.Provider>
+        );
       /** Default option */
       default:
         LOGGER.warn(`Unknown data type: ${dataType}`);

src/components/Checkbox.tsx

@@ -0,0 +1,40 @@
+import React, { useContext, useState } from "react";
+import { CellContext } from "components/contexts/CellContext";
+import { ActionTypes } from "helpers/Constants";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
+import { Cell } from "react-table";
+import NoteInfo from "services/NoteInfo";
+
+type CheckboxProps = {
+  intialState: TableDataType;
+  column: TableColumn;
+  cellProperties: Cell;
+};
+export function CheckboxCell(props: CheckboxProps) {
+  const { intialState, column, cellProperties } = props;
+  const dataDispatch = (cellProperties as any).dataDispatch;
+  /** Note info of current Cell */
+  const note: NoteInfo = (cellProperties.row.original as any).note;
+  /** state of cell value */
+  const { contextValue, setContextValue } = useContext(CellContext);
+  const [checked, setChecked] = useState(contextValue.value === 1);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.checked ? 1 : 0;
+    // save on disk
+    dataDispatch({
+      type: ActionTypes.UPDATE_CELL,
+      file: note.getFile(),
+      key: column.key,
+      value: newValue,
+      row: cellProperties.row,
+      columnId: column.id,
+    });
+    setChecked(event.target.checked);
+    setContextValue({ value: event.target.checked ? 1 : 0, update: true });
+  };
+  return (
+    <div className="data-input-checkbox">
+      <input type="checkbox" checked={checked} onChange={handleChange} />
+    </div>
+  );
+}

src/components/Header.tsx

@@ -4,6 +4,8 @@ import TextIcon from "components/img/Text";
 import MultiIcon from "components/img/Multi";
 import HashIcon from "components/img/Hash";
 import PlusIcon from "components/img/Plus";
+import ArrowDown from "components/img/ArrowDown";
+import ArrowUp from "components/img/ArrowUp";
 import HeaderMenu from "components/HeaderMenu";
 import CalendarIcon from "components/img/CalendarIcon";
 import MarkdownObsidian from "components/img/Markdown";
@@ -94,6 +96,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
       propertyIcon = <MarkdownObsidian />;
       break;
     case DataTypes.TASK:
+    case DataTypes.CHECKBOX:
       propertyIcon = <TaskIcon />;
       break;
     default:
@@ -133,6 +136,18 @@ export default function Header(headerProps: DatabaseHeaderProps) {
         <span className="svg-icon svg-gray icon-margin">{propertyIcon}</span>
         {labelState}
         {headerProps.column.config.isInline && <span>*</span>}
+        {/* Add a sort direction indicator */}
+        <span className="svg-icon svg-gray icon-margin">
+          {headerProps.column.isSorted ? (
+            headerProps.column.isSortedDesc ? (
+              <ArrowDown />
+            ) : (
+              <ArrowUp />
+            )
+          ) : (
+            ""
+          )}
+        </span>
       </div>
       {domReady
         ? ReactDOM.createPortal(

src/components/HeaderMenu.tsx

@@ -21,9 +21,11 @@ import { Column } from "react-table";
 import { usePopper } from "react-popper";
 import { HeaderContext } from "components/contexts/HeaderContext";
 import { getColumnWidthStyle } from "components/styles/ColumnWidthStyle";
+import { generateSortedColumns } from "components/behavior/SortingColumns";
 import { ColumnModal } from "./modals/ColumnModal";
 import { HeaderMenuProps } from "cdm/HeaderModel";
 import TaskIcon from "components/img/TaskIcon";
+import CrossIcon from "components/img/CrossIcon";
 
 const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
   /** state of width columns */
@@ -86,19 +88,47 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
     buttons.push(
       {
         onClick: (e: any) => {
-          setSortBy([{ id: column.id, desc: false }]);
+          const sortArray = generateSortedColumns(initialState, column, false);
+          // Update state
+          dispatch({
+            type: ActionTypes.SET_SORT_BY,
+            sortArray: sortArray,
+          });
+          setSortBy(sortArray);
           setExpanded(false);
         },
-        icon: <ArrowUpIcon />,
-        label: "Sort ascending",
+        icon:
+          column.isSorted && !column.isSortedDesc ? (
+            <CrossIcon />
+          ) : (
+            <ArrowUpIcon />
+          ),
+        label:
+          column.isSorted && !column.isSortedDesc
+            ? "Remove ascending sort"
+            : "Sort ascending",
       },
       {
         onClick: (e: any) => {
-          setSortBy([{ id: column.id, desc: true }]);
+          const sortArray = generateSortedColumns(initialState, column, true);
+          // Update state
+          dispatch({
+            type: ActionTypes.SET_SORT_BY,
+            sortArray: sortArray,
+          });
+          setSortBy(sortArray);
           setExpanded(false);
         },
-        icon: <ArrowDownIcon />,
-        label: "Sort descending",
+        icon:
+          column.isSorted && column.isSortedDesc ? (
+            <CrossIcon />
+          ) : (
+            <ArrowDownIcon />
+          ),
+        label:
+          column.isSorted && column.isSortedDesc
+            ? "Remove descending sort"
+            : "Sort descending",
       }
     );
   }
@@ -218,6 +248,20 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
       icon: <CalendarTimeIcon />,
       label: MetadataLabels.CALENDAR_TIME,
     },
+    ,
+    {
+      onClick: (e: any) => {
+        dispatch({
+          type: ActionTypes.UPDATE_COLUMN_TYPE,
+          columnId: column.id,
+          dataType: DataTypes.CHECKBOX,
+        });
+        setShowType(false);
+        setExpanded(false);
+      },
+      icon: <TaskIcon />,
+      label: DataTypes.CHECKBOX,
+    },
   ];
 
   const typePopper = usePopper(typeReferenceElement, typePopperElement, {

src/components/Table.tsx

@@ -26,7 +26,7 @@ import { HeaderContext } from "components/contexts/HeaderContext";
 import { getDndListStyle, getDndItemStyle } from "./styles/DnDStyle";
 
 const defaultColumn = {
-  minWidth: 50,
+  minWidth: 25,
   maxWidth: 400,
   Cell: DefaultCell,
   Header: Header,
@@ -92,6 +92,7 @@ export function Table(initialState: TableDataType) {
     dataDispatch,
     sortTypes,
   };
+  propsUseTable.initialState = initialState.initialState;
   /** Obsidian event to show page preview */
   const onMouseOver = React.useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {

src/components/behavior/SortingColumns.ts

@@ -0,0 +1,41 @@
+import { SortedType } from "cdm/DatabaseModel";
+import { TableColumn, TableDataType } from "cdm/FolderModel";
+import { LOGGER } from "services/Logger";
+
+export function generateSortedColumns(tableDataType: TableDataType, currentCol: TableColumn, isSortedDesc: boolean): SortedType[] {
+    LOGGER.debug(`=>generateSortedColumns currentCol ${currentCol.id} isSortedDesc ${isSortedDesc}`);
+    const sortArray: SortedType[] = [];
+    tableDataType.columns
+        // Filter if col is already sorted or is current col
+        .filter(col => col.id === currentCol.id || col.isSorted)
+        .forEach((col) => {
+            if (currentCol.id === col.id) {
+                // When is current col
+                if (currentCol.isSorted && currentCol.isSortedDesc === isSortedDesc) {
+                    // If sort direction is the same, remove sort
+                    tableDataType.view.diskConfig.updateColumnProperties(
+                        currentCol.id,
+                        {
+                            isSorted: false,
+                        }
+                    );
+                } else {
+                    // If sort direction is different or not sorted, set sort
+                    sortArray.push({ id: currentCol.id, desc: isSortedDesc });
+                    tableDataType.view.diskConfig.updateColumnProperties(
+                        currentCol.id,
+                        {
+                            isSorted: true,
+                            isSortedDesc: isSortedDesc,
+                        }
+                    );
+                }
+
+            } else {
+                // When is not current col
+                sortArray.push({ id: col.id, desc: col.isSortedDesc });
+            }
+        });
+    LOGGER.debug(`<=generateSortedColumns`, `sortArray ${JSON.stringify(sortArray)}`);
+    return sortArray;
+}