Merge pull request #1029 from DDMAL/doc-upload-btn

🧱 Add sorting by name option for files and folios
DDMAL · Jun 19, 2023 · 63b6aad · 63b6aad
2 parents 943c792 + ba70dfe
commit 63b6aad
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 5 deletions.
diff --git a/deployment/server/css/dashboard.css b/deployment/server/css/dashboard.css
@@ -300,11 +300,13 @@
 
 #unpaired_container {
   margin-right: 5%;
-  width: 65%
+  width: 65%;
 }
 
 #paired_container {
-  width: 30%
+  width: 30%;
+  display: flex;
+  flex-direction: column;
 }
 
 
@@ -345,6 +347,21 @@
   border-bottom: 1px solid #dfdfdf;
 }
 
+.file_sort_name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color:rgba(123, 177, 183, 0.1);
+  border-bottom: 1px solid #dfdfdf;
+  font-size: 80%;
+}
+
+.arrow_btn {
+  margin-left: 4px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
 .file_list {
   height: 100%;
   width: 98%;

diff --git a/src/Dashboard/UploadArea.ts b/src/Dashboard/UploadArea.ts
@@ -1,6 +1,6 @@
 import { addNewFiles } from './UploadManager';
 import { ModalWindow, ModalWindowView } from '../utils/ModalWindow';
-import { handleUploadAllDocuments, handleMakePair } from './UploadManager';
+import { handleUploadAllDocuments, handleMakePair, sortFileByName } from './UploadManager';
 import { updateDocumentSelector } from './DocumentSelector';
 import { fm } from '../../deployment/scripts/dashboard';
 
@@ -77,4 +77,10 @@ export function InitUploadArea(): void {
       window.alert(`The following files are not .mei, .png, .jpeg, or .jsonld files: \n\n${filenames.join('\n')}`);
     }
   };
+
+  // Listener for sorting file/folio
+  const sortByNameBtns = document.querySelectorAll('.sort_name');
+  sortByNameBtns.forEach(sortByNameBtn => {
+    sortByNameBtn.addEventListener('click', () => sortFileByName(sortByNameBtn));
+  });
 }
diff --git a/src/Dashboard/UploadManager.ts b/src/Dashboard/UploadManager.ts
@@ -170,4 +170,35 @@ async function uploadFolio(name: string, mei: File, image: File): Promise<boolea
 
 // async function uploadManuscript(manuscript: File): Promise<boolean> {
 //   return addEntry(manuscript.name, manuscript, false);
-// }
+// }
+
+export async function sortFileByName(sortByNameBtn: Element): Promise<void>  {
+  const fileList = sortByNameBtn.parentElement.nextElementSibling;
+  const fileElements = Array.from(fileList.children);
+
+  let isAscending = sortByNameBtn.classList.contains('arrow-up');
+
+  if (isAscending) {
+    sortByNameBtn.classList.remove('arrow-up');
+    sortByNameBtn.classList.add('arrow-down');
+    sortByNameBtn.innerHTML = '&#x22C1;';
+  } else {
+    sortByNameBtn.classList.remove('arrow-down');
+    sortByNameBtn.classList.add('arrow-up');
+    sortByNameBtn.innerHTML = '&#x22C0;';
+  }
+
+  isAscending = !isAscending;
+
+  fileElements.sort((a, b) => {
+    const nameA = a.textContent.trim();
+    const nameB = b.textContent.trim();
+    return isAscending ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
+  });
+
+  fileElements.forEach(element => {
+    fileList.appendChild(element);
+  });
+
+  sortByNameBtn.setAttribute('style', 'color: black');
+}
diff --git a/src/Dashboard/dashboard_components.ts b/src/Dashboard/dashboard_components.ts
@@ -18,11 +18,19 @@ export const uploadAreaHTML =
 
           <div id="mei_container">
             <div class="file_heading">MEI</div>
+            <div class="file_sort_name">
+              <div>Name</div>
+              <div class="sort_name arrow_btn">&#x22C0;</div>
+            </div>
             <div class="file_list" id="mei_list"></div>
           </div>
 
           <div id="image_container">
             <div class="file_heading">Images</div>
+            <div class="file_sort_name">
+              <div>Name</div>
+              <div class="sort_name arrow_btn">&#x22C0;</div>
+            </div>
             <div class="file_list" id="image_list"></div>
           </div>
 
@@ -36,7 +44,10 @@ export const uploadAreaHTML =
       <div class="file_container" id="paired_container">
 
         <div class="file-container-title">Paired Folios</div>
-        
+        <div class="file_sort_name">
+          <div>Name</div>
+          <div class="sort_name arrow_btn">&#x22C0;</div>
+        </div>
         <div class="folio_list" id="paired_list"></div>
 
         <div id="upload_button_container">