From 9cf54902c22bb8ff360da1b8ead9d381da0572a5 Mon Sep 17 00:00:00 2001
From: Yong Sheng Tan <tanysh@pm.me>
Date: Sat, 30 Nov 2024 13:58:12 +0800
Subject: [PATCH] Support account sort order

---
 src/core/api.jsx               |  3 ++-
 src/settings/accounts-form.jsx |  1 +
 src/settings/accounts-grid.jsx | 44 +++++++++++++++++++++++++++++++++-
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/core/api.jsx b/src/core/api.jsx
index 3060e6f..0be7d97 100644
--- a/src/core/api.jsx
+++ b/src/core/api.jsx
@@ -82,7 +82,8 @@ const api = () => {
         listAccounts: (callback) => apiCall(GET, 'account', callback),
         addAccount: (payload, callback) => apiCall(POST, 'account', callback, payload),
         editAccount: (id, payload, callback) => apiCall(PUT, `account/${id}`, callback, payload),
-        editAccountVisibility: (accountId, visible, callback) => apiCall(PUT, `account/${accountId}/${visible}`, callback),
+        editAccountVisibility: (accountId, visible, callback) => apiCall(PUT, `account/${accountId}?visible=${visible}`, callback),
+        editAccountSort: (accountId, direction, callback) => apiCall(PUT, `account/${accountId}/sort/${direction}`, callback),
         deleteAccount: (id, callback) => apiCall(DELETE, `account/${id}`, callback),
         listTransactions: (id, callback) => apiCall(GET, `transaction/${id}`, callback),
         addTransaction: (payload, callback) => apiCall(POST, 'transaction', callback, payload),
diff --git a/src/settings/accounts-form.jsx b/src/settings/accounts-form.jsx
index 99e600f..67ca761 100644
--- a/src/settings/accounts-form.jsx
+++ b/src/settings/accounts-form.jsx
@@ -79,6 +79,7 @@ const AccountsDialog = ({ issuers, accounts, setAccounts, setShowAddDialog, acco
         if (!accountToEdit) {
             addAccount(newAccount, postProcess);
         } else {
+            newAccount.sortOrder = accountToEdit.sortOrder;
             editAccount(accountToEdit.id, newAccount, postProcess);
         }
     };
diff --git a/src/settings/accounts-grid.jsx b/src/settings/accounts-grid.jsx
index 020409f..01dee51 100644
--- a/src/settings/accounts-grid.jsx
+++ b/src/settings/accounts-grid.jsx
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import Switch from '@mui/material/Switch';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import { HorizontalLoader } from '../core/utils';
+import Button from '@mui/material/Button/Button';
 
 const GridBox = styled.div`
     display: flex;
@@ -46,7 +47,7 @@ const AccountsGrid = ({
     issuers, accounts, setAccounts, isMobile, selectedAccount, setSelectedAccount, setAccountToEdit, setShowAddDialog,
 }) => {
     const [ visibleColumns, setVisibleColumns ] = useState({});
-    const { editAccountVisibility, showStatus } = api();
+    const { editAccountVisibility, showStatus, editAccountSort } = api();
     const colors = {
         'Cash': 'success',
         'Credit': 'warning',
@@ -125,6 +126,47 @@ const AccountsGrid = ({
             valueGetter: (_, row) => row.transactions || 0,
             sortable: false,
         },
+        {
+            field: "sortOrder",
+            headerName: "Sort",
+            width: 200,
+            sortable: false,
+            renderCell: (params) => {
+                const reviseSort = (e, direction) => {
+                    e.stopPropagation();
+                    editAccountSort(params.row.id, direction, (newSortOrder) =>
+                        setAccounts((accounts) => accounts
+                            .map(account => ({ ...account, sortOrder: newSortOrder[account.id] ?? account.sortOrder}))
+                            .sort((a, b) =>
+                                a.type.localeCompare(b.type) ||
+                                a.sortOrder - b.sortOrder ||
+                                getIssuer(a.issuerId).name.localeCompare(getIssuer(b.issuerId).name) ||
+                                a.name.localeCompare(b.name)
+                            )
+                    ));
+                };
+                return (
+                    <>
+                        <Button
+                            variant="contained"
+                            onClick={(e) => reviseSort(e, 'up')}
+                            sx={{ margin: 'auto .8rem auto 0' }}
+                            disabled={params.row.sortOrder === 0}
+                        >
+                            Up
+                        </Button>
+                        <Button
+                            variant="contained"
+                            onClick={(e) => reviseSort(e, 'down')}
+                            sx={{ margin: 'auto 0' }}
+                            disabled={accounts.filter(a => a.type === params.row.type).slice(-1)[0].id === params.row.id}
+                        >
+                            Down
+                        </Button>
+                    </>
+                );
+            }
+        }
     ];
 
     useEffect(() => {