From b3876e7ea3a3c4fc94f0fd051f4cba7087266fc8 Mon Sep 17 00:00:00 2001
From: Charlie Zhang <cz317@georgetown.edu>
Date: Mon, 26 Aug 2024 16:29:29 -0400
Subject: [PATCH] Update Downloading History to add Dimension Name

---
 src/renderer/src/output.css                   |  44 +++++-
 .../src/pages/DownloadHistory/index.jsx       | 144 +++++++++---------
 src/renderer/src/service/db.js                |   1 +
 3 files changed, 117 insertions(+), 72 deletions(-)

diff --git a/src/renderer/src/output.css b/src/renderer/src/output.css
index 4f4bccb..edda2ed 100644
--- a/src/renderer/src/output.css
+++ b/src/renderer/src/output.css
@@ -608,10 +608,18 @@ html {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 .inset-0 {
   inset: 0px;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -821,6 +829,10 @@ html {
   flex-grow: 1;
 }
 
+.table-auto {
+  table-layout: auto;
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -923,6 +935,10 @@ html {
   white-space: normal;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
@@ -969,10 +985,6 @@ html {
   border-bottom-width: 1px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-r {
   border-right-width: 1px;
 }
@@ -1091,6 +1103,10 @@ html {
   --tw-bg-opacity: 0.75;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1286,6 +1302,16 @@ html {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.text-green-600 {
+  --tw-text-opacity: 1;
+  color: rgb(22 163 74 / var(--tw-text-opacity));
+}
+
+.text-purple-600 {
+  --tw-text-opacity: 1;
+  color: rgb(147 51 234 / var(--tw-text-opacity));
+}
+
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -1439,6 +1465,16 @@ html {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.hover\:text-green-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity));
+}
+
+.hover\:text-purple-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(107 33 168 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
diff --git a/src/renderer/src/pages/DownloadHistory/index.jsx b/src/renderer/src/pages/DownloadHistory/index.jsx
index bcd028c..847f003 100644
--- a/src/renderer/src/pages/DownloadHistory/index.jsx
+++ b/src/renderer/src/pages/DownloadHistory/index.jsx
@@ -279,80 +279,88 @@ const HistoryPage = ({ dictionaryDb, queryDb }) => {
       {/* Table Component */}
       <div className="overflow-x-auto px-4">
         <form onSubmit={handleSaveNotes}>
-          <table className="w-full max-w-4xl mx-auto bg-white rounded-lg shadow-lg">
-            <thead>
-              <tr className="bg-gray-100 text-gray-800 uppercase text-sm leading-normal">
-                <th className="py-3 px-3 border-b-2 border-gray-300">
-                  <input
-                    type="checkbox"
-                    className="form-checkbox h-4 w-4 text-gray-600 transition duration-150 ease-in-out"
-                    checked={selectedRows.length === downloadQueries.length}
-                    onChange={handleSelectAllChange}
-                  />
-                </th>
-
-                {queryHeaders.map((name, index) => (
-                  <th key={index} className="py-2 px-2 border-b-2 border-gray-300">
-                    {name}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody className="text-gray-800 text-xs font-light">
-              {currentPageData.map((el) => (
-                <tr key={el.id} className="hover:bg-gray-50">
-                  <td className="py-2 px-3 border-b border-gray-300">
+          <div className="w-full bg-white rounded-lg shadow-lg">
+            <table className="w-full table-auto">
+              <thead>
+                <tr className="bg-gray-100 text-gray-800 uppercase text-sm leading-normal">
+                  <th className="py-3 px-3 sticky left-0 z-10 bg-gray-100">
                     <input
                       type="checkbox"
                       className="form-checkbox h-4 w-4 text-gray-600 transition duration-150 ease-in-out"
-                      checked={selectedRows.includes(el.id)}
-                      onChange={() => handleCheckboxChange(el.id)}
+                      checked={selectedRows.length === downloadQueries.length}
+                      onChange={handleSelectAllChange}
                     />
-                    <td className="py-3 text-left">
-                      <button type="button" onClick={() => handleEditClick(el.id, el.notes)}>
-                        Edit
-                      </button>
-                      {editedRow.rowId === el.id && (
-                        <>
-                          <button type="submit">Save</button>
-                          <button type="button" onClick={() => handlePassParams(el.id)}>
-                            Pass
-                          </button>
-                        </>
-                      )}
-                    </td>
-                  </td>
-
-                  {queryHeaders.map((header) => (
-                    <td
-                      key={header}
-                      className="py-2 px-2 border-b border-gray-300 [word-break:break-word]"
-                    >
-                      {editedRow.rowId === el.id && header === 'notes' ? (
-                        <input
-                          type="text"
-                          name={header}
-                          value={temporaryNote}
-                          onChange={handleNoteChange}
-                        />
-                      ) : header === 'url' ? (
-                        <a
-                          href={el[header]}
-                          className="text-blue-500 hover:text-blue-600"
-                          target="_blank"
-                          rel="noopener noreferrer"
-                        >
-                          {el[header]}
-                        </a>
-                      ) : (
-                        el[header]
-                      )}
-                    </td>
+                  </th>
+                  {queryHeaders.map((name, index) => (
+                    <th key={index} className="py-2 px-2 whitespace-nowrap">
+                      {name}
+                    </th>
                   ))}
                 </tr>
-              ))}
-            </tbody>
-          </table>
+              </thead>
+              <tbody className="text-gray-800 text-xs font-light">
+                {currentPageData.map((el) => (
+                  <tr key={el.id} className="hover:bg-gray-50">
+                    <td className="py-2 px-3 sticky left-0 z-10 bg-white">
+                      <input
+                        type="checkbox"
+                        className="form-checkbox h-4 w-4 text-gray-600 transition duration-150 ease-in-out"
+                        checked={selectedRows.includes(el.id)}
+                        onChange={() => handleCheckboxChange(el.id)}
+                      />
+                      <div className="flex space-x-2 mt-1">
+                        <button
+                          type="button"
+                          onClick={() => handleEditClick(el.id, el.notes)}
+                          className="text-blue-600 hover:text-blue-800"
+                        >
+                          Edit
+                        </button>
+                        {editedRow.rowId === el.id && (
+                          <>
+                            <button type="submit" className="text-green-600 hover:text-green-800">
+                              Save
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => handlePassParams(el.id)}
+                              className="text-purple-600 hover:text-purple-800"
+                            >
+                              Pass
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    </td>
+                    {queryHeaders.map((header) => (
+                      <td key={header} className="py-2 px-2 [word-break:break-word]">
+                        {editedRow.rowId === el.id && header === 'notes' ? (
+                          <input
+                            type="text"
+                            name={header}
+                            value={temporaryNote}
+                            onChange={handleNoteChange}
+                            className="w-full p-1 border rounded"
+                          />
+                        ) : header === 'url' ? (
+                          <a
+                            href={el[header]}
+                            className="text-blue-500 hover:text-blue-600"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {el[header]}
+                          </a>
+                        ) : (
+                          el[header]
+                        )}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </form>
         <Pagination
           currentPage={currentPage}
diff --git a/src/renderer/src/service/db.js b/src/renderer/src/service/db.js
index 43e8c49..532d29a 100644
--- a/src/renderer/src/service/db.js
+++ b/src/renderer/src/service/db.js
@@ -13,6 +13,7 @@ export const queryHeaders = [
   'organizationLevel',
   'period',
   'dimension',
+  'dimensionName',
   'disaggregation',
   'url'
 ]