From 8786e2b427770df577964c833fcb96d789c49603 Mon Sep 17 00:00:00 2001
From: Simba <ycyin8795@163.com>
Date: Sat, 2 Jan 2021 20:14:59 +0800
Subject: [PATCH] matter list sort.

---
 src/pages/matter/List.tsx                    | 15 ++--
 src/pages/matter/widget/MatterPanel.less     |  1 +
 src/pages/matter/widget/MatterSortPanel.less | 33 ++++++++
 src/pages/matter/widget/MatterSortPanel.tsx  | 83 ++++++++++++++++++++
 4 files changed, 127 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/matter/widget/MatterSortPanel.less
 create mode 100644 src/pages/matter/widget/MatterSortPanel.tsx

diff --git a/src/pages/matter/List.tsx b/src/pages/matter/List.tsx
index f114197..c72c954 100644
--- a/src/pages/matter/List.tsx
+++ b/src/pages/matter/List.tsx
@@ -22,16 +22,16 @@ import {
 } from "antd";
 import MessageBoxUtil from "../../common/util/MessageBoxUtil";
 import {
-  ExclamationCircleFilled,
   CloudUploadOutlined,
-  PlusSquareOutlined,
-  MinusSquareOutlined,
-  FolderOutlined,
-  SyncOutlined,
   DeleteOutlined,
   DownloadOutlined,
   DragOutlined,
+  ExclamationCircleFilled,
+  FolderOutlined,
+  MinusSquareOutlined,
+  PlusSquareOutlined,
   ShareAltOutlined,
+  SyncOutlined,
 } from "@ant-design/icons";
 import ImagePreviewer from "../widget/previewer/ImagePreviewer";
 import Sun from "../../common/model/global/Sun";
@@ -47,6 +47,7 @@ import BreadcrumbPanel from "../widget/BreadcrumbPanel";
 import Lang from "../../common/model/global/Lang";
 import FileUtil from "../../common/util/FileUtil";
 import SafeUtil from "../../common/util/SafeUtil";
+import MatterSortPanel from "./widget/MatterSortPanel";
 
 interface IProps extends RouteComponentProps {}
 
@@ -633,6 +634,10 @@ export default class List extends TankComponent<IProps, IState> {
           uploadMatters.map((m) => <UploadMatterPanel matter={m} />)
         )}
 
+        {pager.data.length ? (
+          <MatterSortPanel pager={pager} refresh={() => this.refresh()} />
+        ) : null}
+
         {director.createMode ? (
           <MatterPanel
             ref={this.newMatterRef}
diff --git a/src/pages/matter/widget/MatterPanel.less b/src/pages/matter/widget/MatterPanel.less
index 9fbcea0..f713345 100644
--- a/src/pages/matter/widget/MatterPanel.less
+++ b/src/pages/matter/widget/MatterPanel.less
@@ -102,6 +102,7 @@
 
     .matter-date {
       .basic-span;
+      width: 110px;
     }
   }
 
diff --git a/src/pages/matter/widget/MatterSortPanel.less b/src/pages/matter/widget/MatterSortPanel.less
new file mode 100644
index 0000000..f9a3130
--- /dev/null
+++ b/src/pages/matter/widget/MatterSortPanel.less
@@ -0,0 +1,33 @@
+.matter-sort-panel {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  height: 48px;
+  margin: 0;
+  line-height: 48px;
+  color: #999;
+
+  .sort-part {
+    &:hover {
+      cursor: pointer;
+      background-color: aliceblue;
+    }
+    &-name {
+      flex-grow: 1;
+      padding-left: 10px;
+    }
+    &-size {
+      flex-shrink: 0;
+      flex-basis: 90px;
+      padding-left: 10px;
+      cursor: pointer;
+    }
+    &-date {
+      flex-shrink: 0;
+      flex-basis: 130px;
+      padding: 0 10px;
+      cursor: pointer;
+    }
+
+  }
+}
diff --git a/src/pages/matter/widget/MatterSortPanel.tsx b/src/pages/matter/widget/MatterSortPanel.tsx
new file mode 100644
index 0000000..8ff0c99
--- /dev/null
+++ b/src/pages/matter/widget/MatterSortPanel.tsx
@@ -0,0 +1,83 @@
+import './MatterSortPanel.less'
+import React from "react";
+import Matter from "../../../common/model/matter/Matter";
+import TankComponent from "../../../common/component/TankComponent";
+import SortDirection from "../../../common/model/base/SortDirection";
+import {
+  ArrowDownOutlined,
+  ArrowUpOutlined,
+} from "@ant-design/icons";
+import Pager from "../../../common/model/base/Pager";
+
+interface IProps {
+  pager: Pager<Matter>,
+  refresh: () => any
+}
+
+interface IState {}
+
+export default class MatterSortPanel extends TankComponent<IProps, IState> {
+
+  static sortAutomaton = [SortDirection.ASC, SortDirection.DESC, null]; // 排序状态自动机：ASC -> DESC -> null -> ASC...
+
+  changeFilterOrder = (orderName: string) => {
+    const { pager } = this.props;
+    ["orderName", "orderSize", "orderUpdateTime"]
+      .filter((name) => name !== orderName)
+      .forEach((key) => {
+        pager.setFilterValue(key, null);
+      });
+    const filter = pager.getFilterValue(orderName);
+    const nextSortIndex = (MatterSortPanel.sortAutomaton.findIndex((key) => key === filter) + 1) % 3;
+    pager.setFilterValue(orderName, MatterSortPanel.sortAutomaton[nextSortIndex]);
+    this.props.refresh();
+  };
+
+  render() {
+    const { pager } = this.props;
+
+    return (
+      <div className="matter-sort-panel">
+        <div
+          className="sort-part sort-part-name"
+          onClick={() => this.changeFilterOrder("orderName")}
+        >
+          文件名
+          {pager.getFilterValue("orderName") ? (
+            pager.getFilterValue("orderName") === SortDirection.ASC ? (
+              <ArrowUpOutlined className="ml5 f10" />
+            ) : (
+              <ArrowDownOutlined className="ml5 f10" />
+            )
+          ) : null}
+        </div>
+        <div
+          className="sort-part sort-part-size"
+          onClick={() => this.changeFilterOrder("orderSize")}
+        >
+          大小
+          {pager.getFilterValue("orderSize") ? (
+            pager.getFilterValue("orderSize") === SortDirection.ASC ? (
+              <ArrowUpOutlined className="ml5 f10" />
+            ) : (
+              <ArrowDownOutlined className="ml5 f10" />
+            )
+          ) : null}
+        </div>
+        <div
+          className="sort-part sort-part-date"
+          onClick={() => this.changeFilterOrder("orderUpdateTime")}
+        >
+          修改日期
+          {pager.getFilterValue("orderUpdateTime") ? (
+            pager.getFilterValue("orderUpdateTime") === SortDirection.ASC ? (
+              <ArrowUpOutlined className="ml5 f10" />
+            ) : (
+              <ArrowDownOutlined className="ml5 f10" />
+            )
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+}