From deb00b3856563d9b45410460a2e9433a1e21c45c Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Fri, 8 Mar 2024 21:40:55 +0800
Subject: [PATCH] fix: sync manager ui

fix: #915
---
 addon/chrome/content/syncManager.xhtml    |  2 +-
 addon/chrome/content/templateEditor.xhtml |  2 +-
 src/addon.ts                              | 12 +++++-----
 src/modules/sync/managerWindow.ts         | 28 +++++++++++++++++++++++
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/addon/chrome/content/syncManager.xhtml b/addon/chrome/content/syncManager.xhtml
index 990204f..5295cbc 100644
--- a/addon/chrome/content/syncManager.xhtml
+++ b/addon/chrome/content/syncManager.xhtml
@@ -70,7 +70,7 @@
       #table-container {
         height: 100%;
         width: 100%;
-        overflow: hidden;
+        overflow: auto;
       }
     </style>
     <link rel="localization" href="__addonRef__-syncManager.ftl" />
diff --git a/addon/chrome/content/templateEditor.xhtml b/addon/chrome/content/templateEditor.xhtml
index e478bd0..a40b455 100644
--- a/addon/chrome/content/templateEditor.xhtml
+++ b/addon/chrome/content/templateEditor.xhtml
@@ -75,7 +75,7 @@
       #table-container {
         height: 100%;
         width: 100%;
-        overflow: hidden;
+        overflow: auto;
       }
       .editor-viewport {
         display: flex;
diff --git a/src/addon.ts b/src/addon.ts
index 3ad1f04..c378645 100644
--- a/src/addon.ts
+++ b/src/addon.ts
@@ -8,6 +8,7 @@ import ToolkitGlobal from "zotero-plugin-toolkit/dist/managers/toolkitGlobal";
 
 import { getPref, setPref } from "./utils/prefs";
 import { OutlineType } from "./utils/workspace";
+import { SyncDataType } from "./modules/sync/managerWindow";
 import hooks from "./hooks";
 import api from "./api";
 import { createZToolkit } from "./utils/ztoolkit";
@@ -36,12 +37,9 @@ class Addon {
       manager: {
         window?: Window;
         tableHelper?: VirtualizedTableHelper;
-        data: {
-          noteId: number;
-          noteName: string;
-          lastSync: string;
-          filePath: string;
-        }[];
+        data: SyncDataType[];
+        columnIndex: number;
+        columnAscending: boolean;
       };
       diff: {
         window?: Window;
@@ -101,6 +99,8 @@ class Addon {
       lock: false,
       manager: {
         data: [],
+        columnAscending: true,
+        columnIndex: 0,
       },
       diff: {},
     },
diff --git a/src/modules/sync/managerWindow.ts b/src/modules/sync/managerWindow.ts
index ecfd71d..493b783 100644
--- a/src/modules/sync/managerWindow.ts
+++ b/src/modules/sync/managerWindow.ts
@@ -4,6 +4,13 @@ import { getString } from "../../utils/locale";
 import { jointPath } from "../../utils/str";
 import { isWindowAlive } from "../../utils/window";
 
+export interface SyncDataType {
+  noteId: number;
+  noteName: string;
+  lastSync: string;
+  filePath: string;
+}
+
 export async function showSyncManager() {
   if (isWindowAlive(addon.data.sync.manager.window)) {
     addon.data.sync.manager.window?.focus();
@@ -92,6 +99,12 @@ export async function showSyncManager() {
         "getRowString",
         (index) => addon.data.prefs?.rows[index].title || "",
       )
+      // @ts-ignore TODO: Fix type in zotero-plugin-toolkit
+      .setProp("onColumnSort", (columnIndex, ascending) => {
+        addon.data.sync.manager.columnIndex = columnIndex;
+        addon.data.sync.manager.columnAscending = ascending > 0;
+        refresh();
+      })
       .render();
     const refreshButton = win.document.querySelector(
       "#refresh",
@@ -120,7 +133,12 @@ export async function showSyncManager() {
   }
 }
 
+const sortDataKeys = ["noteName", "lastSync", "filePath"] as Array<
+  keyof SyncDataType
+>;
+
 function updateData() {
+  const sortKey = sortDataKeys[addon.data.sync.manager.columnIndex];
   addon.data.sync.manager.data = addon.api.sync
     .getSyncNoteIds()
     .map((noteId) => {
@@ -131,6 +149,16 @@ function updateData() {
         lastSync: new Date(syncStatus.lastsync).toLocaleString(),
         filePath: jointPath(syncStatus.path, syncStatus.filename),
       };
+    })
+    .sort((a, b) => {
+      if (!a || !b) {
+        return 0;
+      }
+      const valueA = String(a[sortKey] || "");
+      const valueB = String(b[sortKey] || "");
+      return addon.data.sync.manager.columnAscending
+        ? valueA.localeCompare(valueB)
+        : valueB.localeCompare(valueA);
     });
 }