add: icon in sorting

Odaimoko · Jan 21, 2024 · ef3b10a · ef3b10a
1 parent dcad081
commit ef3b10a
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 20 deletions.
diff --git a/src/ui/obsidian/help-page/basic-tutorial.tsx b/src/ui/obsidian/help-page/basic-tutorial.tsx
@@ -52,7 +52,7 @@ export const BasicTutorial = (props: {
     const blockTldrShowStyle = props.tldrProps?.blockTldrShowStyle;
     const inlineTldrOmitStyle = props.tldrProps?.inlineTldrOmitStyle;
     const inlineTldrShowStyle = props.tldrProps?.inlineTldrShowStyle;
-    console.log(props.tldrProps)
+    // console.log(props.tldrProps)
     return <>
 
 

diff --git a/src/ui/react-view/icon/Down01.tsx b/src/ui/react-view/icon/Down01.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+export function Down01() {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
+                className="lucide lucide-arrow-down-0-1">
+        <path d="m3 16 4 4 4-4"/>
+        <path d="M7 20V4"/>
+        <rect x="15" y="4" width="4" height="6" ry="2"/>
+        <path d="M17 20v-6h-2"/>
+        <path d="M15 20h4"/>
+    </svg>
+}
+
+export function Up01() {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
+                className="lucide lucide-arrow-up-0-1">
+        <path d="m3 8 4-4 4 4"/>
+        <path d="M7 4v16"/>
+        <rect x="15" y="4" width="4" height="6" ry="2"/>
+        <path d="M17 20v-6h-2"/>
+        <path d="M15 20h4"/>
+    </svg>
+}
diff --git a/src/ui/react-view/icon/Down10.tsx b/src/ui/react-view/icon/Down10.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export function Down10() {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
+                className="lucide lucide-arrow-down-1-0">
+        <path d="m3 16 4 4 4-4"/>
+        <path d="M7 20V4"/>
+        <path d="M17 10V4h-2"/>
+        <path d="M15 10h4"/>
+        <rect x="15" y="14" width="4" height="6" ry="2"/>
+    </svg>
+}
diff --git a/src/ui/react-view/icon/DownAZ.tsx b/src/ui/react-view/icon/DownAZ.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+export function DownAZ() {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
+                className="lucide lucide-arrow-down-a-z">
+        <path d="m3 16 4 4 4-4"/>
+        <path d="M7 20V4"/>
+        <path d="M20 8h-5"/>
+        <path d="M15 10V6.5a2.5 2.5 0 0 1 5 0V10"/>
+        <path d="M15 14h5l-5 6h5"/>
+    </svg>
+}
+
+export function UpAZ() {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
+                className="lucide lucide-arrow-up-a-z">
+        <path d="m3 8 4-4 4 4"/>
+        <path d="M7 4v16"/>
+        <path d="M20 8h-5"/>
+        <path d="M15 10V6.5a2.5 2.5 0 0 1 5 0V10"/>
+        <path d="M15 14h5l-5 6h5"/>
+    </svg>
+}
diff --git a/src/ui/react-view/icon/DownZA.tsx b/src/ui/react-view/icon/DownZA.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export function DownZA() {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
+                className="lucide lucide-arrow-down-z-a">
+        <path d="m3 16 4 4 4-4"/>
+        <path d="M7 4v16"/>
+        <path d="M15 4h5l-5 6h5"/>
+        <path d="M15 20v-3.5a2.5 2.5 0 0 1 5 0V20"/>
+        <path d="M20 18h-5"/>
+    </svg>
+}
diff --git a/src/ui/react-view/icon/Minus.tsx b/src/ui/react-view/icon/Minus.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export function Minus() {
+    return <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"
+                className="lucide lucide-minus">
+        <path d="M5 12h14"/>
+    </svg>
+}
diff --git a/src/ui/react-view/task-table-view.tsx b/src/ui/react-view/task-table-view.tsx
@@ -26,6 +26,9 @@ import {appendBoldText} from "../common/html-template";
 import {notify} from "../../utils/o-notice";
 import {getIconByWorkflow, getStickyHeaderStyle} from "./style-def";
 import {loopIndex} from "./project-filter";
+import {Minus} from "./icon/Minus";
+import {DownAZ, UpAZ} from "./icon/DownAZ";
+import {Down01, Up01} from "./icon/Down01";
 
 export const taskCheckBoxMargin = {marginLeft: 3};
 
@@ -188,9 +191,15 @@ export function getDefaultTableStyleGetters(minSummaryWidth: number | string = 5
     return {cellStyleGetter, headStyleGetter};
 }
 
-function getSortSymbol(method: TableSortMethod) {
-    return method === TableSortMethod.Ascending ? "↑" :
-        method === TableSortMethod.Descending ? "↓" : "-";
+function getNameSortSymbol(method: TableSortMethod) {
+    return method === TableSortMethod.Ascending ? <UpAZ/> :
+        method === TableSortMethod.Descending ? <DownAZ/> : <Minus/>;
+}
+
+function getColumnSortSymbol(method: TableSortMethod) {
+    return method === TableSortMethod.Ascending ? <Up01/> :
+        method === TableSortMethod.Descending ? <Down01/> : <Minus/>;
+
 }
 
 export function TaskTableView({displayWorkflows, filteredTasks}: {
@@ -298,20 +307,24 @@ export function TaskTableView({displayWorkflows, filteredTasks}: {
         <div>
             <WorkflowOverviewView filteredTasks={filteredTasks}/>
             <div>
-                {columnSort.sortBy === TableSortBy.Name ? getSortSymbol(columnSort.method) : getSortSymbol(TableSortMethod.Appearance)}
+                {columnSort.sortBy === TableSortBy.Name ? getNameSortSymbol(columnSort.method) : getNameSortSymbol(TableSortMethod.Appearance)}
             </div>
         </div>
         , ...(getSettings()?.table_steps_shown ? displayStepNames.map(
-            (k, index) => <div>
+            (k, index) => <div key={k + index}>
                 <div>
                     {k}
                 </div>
-                <div>
+                <div style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                }}>
                     <label>({displayedTasks.filter((m: OdaPmTask) => m.hasStepName(k)).length})</label>
                     {
                         columnSort.sortBy === TableSortBy.Step && columnSort.column === index + 1 ?
-                            getSortSymbol(columnSort.method)
-                            : getSortSymbol(TableSortMethod.Appearance)
+                            getColumnSortSymbol(columnSort.method)
+                            : getColumnSortSymbol(TableSortMethod.Appearance)
                     }
                 </div>
             </div>
@@ -353,13 +366,7 @@ export function TaskTableView({displayWorkflows, filteredTasks}: {
                                            setSearchText("")
                                        }} iconName={"x-circle"}/>
                 </span>
-                {/*<HStack style={{alignItems: "center"}} spacing={4}>*/}
-                {/*    <label> Sort </label>*/}
-                {/*    <button onClick={setSortTo}*/}
-                {/*    >*/}
-                {/*        {nameSortMethod === TableSortMethod.Appearance ? "By Appearance" : ascending ? "Ascending" : "Descending"}*/}
-                {/*    </button>*/}
-                {/*</HStack>*/}
+
             </HStack>
             <p/>
             <HStack spacing={10}>
@@ -392,15 +399,21 @@ export function TaskTableView({displayWorkflows, filteredTasks}: {
         </>
     )
 
+
     function setSortToName() {
         const prevMethod = columnSort.sortBy;
         // Loop
+        const nextNameSortMethod = loopIndex(columnSort.method + 1, totalSortMethods);
         setColumnSort({
             sortBy: TableSortBy.Name,
             column: undefined,
-            method: prevMethod === TableSortBy.Name ? loopIndex(columnSort.method + 1, totalSortMethods) : TableSortMethod.Ascending
+            method: prevMethod === TableSortBy.Name ? nextNameSortMethod : TableSortMethod.Ascending
         })
-        setSettingsValueAndSave(plugin, "table_column_sorting", columnSort.method + 1)
+        setSettingsValueAndSave(plugin, "table_column_sorting", nextNameSortMethod)
+    }
+
+    function resetNameSortMethod() {
+        setSettingsValueAndSave(plugin, "table_column_sorting", TableSortMethod.Appearance)
     }
 
     function setSortToColumn(index: number) {
@@ -412,6 +425,7 @@ export function TaskTableView({displayWorkflows, filteredTasks}: {
             method: prevMethod === TableSortBy.Name || columnSort.column !== index
                 ? TableSortMethod.Ascending : loopIndex(columnSort.method + 1, totalSortMethods)
         })
+        resetNameSortMethod()
     }
 
     function handleShowCompletedChange() {

diff --git a/src/ui/react-view/view-template/data-table.tsx b/src/ui/react-view/view-template/data-table.tsx
@@ -55,9 +55,9 @@ export const DataTable = ({
                 {/*Draw header at the end, so it can cover body view. Or else the body content will be rendered above headers. */}
                 <thead>
                 <tr>
-                    {headers.map((header: string, index) => {
+                    {headers.map((header: IRenderable, index) => {
                         const headerStyle = thStyleGetter ? thStyleGetter(index) : thStyle;
-                        return <th style={headerStyle} key={header}>
+                        return <th style={headerStyle} key={index}>
                             <div onClick={() => {
                                 onHeaderClicked?.(index)
                             }}>{header}</div>