From a8ef590a36aa51351323cd50cf7e50237c735648 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Wed, 3 Jan 2024 22:57:38 +0300
Subject: [PATCH] added sort icon.

---
 frontend/src/components/Page-Completed.vue | 15 +++++++++++++++
 frontend/src/main.js                       |  4 ++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Page-Completed.vue b/frontend/src/components/Page-Completed.vue
index 977c4c75..af5fd6ae 100644
--- a/frontend/src/components/Page-Completed.vue
+++ b/frontend/src/components/Page-Completed.vue
@@ -63,6 +63,16 @@
           </span>
         </button>
       </div>
+      <div class="column is-1">
+        <button type="button" class="button is-fullwidth"
+          @click="direction = direction === 'desc' ? 'asc' : 'desc'">
+          <span class="icon-text">
+            <span class="icon">
+              <font-awesome-icon :icon="direction === 'desc' ? 'fa-solid fa-arrow-down-a-z' :'fa-solid fa-arrow-up-a-z'"/>
+            </span>
+          </span>
+        </button>
+      </div>
     </div>
 
     <div class="columns is-multiline">
@@ -223,6 +233,7 @@ const props = defineProps({
 const selectedElms = ref([]);
 const masterSelectAll = ref(false);
 const showCompleted = useStorage('showCompleted', true)
+const direction = useStorage('sortCompleted', 'desc')
 
 watch(masterSelectAll, (value) => {
   for (const key in props.completed) {
@@ -236,7 +247,11 @@ watch(masterSelectAll, (value) => {
 })
 
 const sortCompleted = computed(() => {
+  const thisDirection = direction.value;
   return Object.values(props.completed).sort((a, b) => {
+    if (thisDirection === 'asc') {
+      return new Date(a.datetime) - new Date(b.datetime);
+    }
     return new Date(b.datetime) - new Date(a.datetime);
   })
 })
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 5b613676..f0ac61a4 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,7 +5,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import {
   faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar
+  faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ
 } from '@fortawesome/free-solid-svg-icons'
 
 import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
@@ -17,7 +17,7 @@ import './assets/css/style.css'
 import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
 
 library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
-  faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar)
+  faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ)
 const app = createApp(App);
 
 app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);