From 48533f397a5cc56bfaa1d6c4ee3226042da8c497 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 4 Sep 2021 23:07:50 +0100
Subject: [PATCH] :sparkles: Implements optional alphabetical sort for sections

---
 src/components/LinkItems/Section.vue | 15 ++++++++++++++-
 src/utils/defaults.js                |  2 ++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index c88ad459..9b7d7eb8 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -17,7 +17,7 @@
       :style="gridStyle"
     >
       <Item
-        v-for="(item, index) in items"
+        v-for="(item, index) in sortedItems"
         :id="`${index}_${makeId(item.title)}`"
         :key="`${index}_${makeId(item.title)}`"
         :url="item.url"
@@ -49,6 +49,7 @@
 </template>
 
 <script>
+import { sortOrder as defaultSortOrder } from '@/utils/defaults';
 import Item from '@/components/LinkItems/Item.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 import IframeModal from '@/components/LinkItems/IframeModal.vue';
@@ -71,6 +72,18 @@ export default {
     IframeModal,
   },
   computed: {
+    sortOrder() {
+      return this.displayData.sortBy || defaultSortOrder;
+    },
+    sortedItems() {
+      const { items } = this;
+      if (this.sortOrder === 'alphabetical') {
+        items.sort((a, b) => (a.title > b.title ? 1 : -1));
+      } else if (this.sortOrder === 'reverse-alphabetical') {
+        items.sort((a, b) => (a.title < b.title ? 1 : -1));
+      }
+      return items;
+    },
     newItemSize() {
       return this.displayData.itemSize || this.itemSize;
     },
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index d60b5d04..45b48aea 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -25,6 +25,8 @@ module.exports = {
   fontAwesomeKey: '0821c65656',
   /* Default API to use for fetching of user service favicon icons (if enabled) */
   faviconApi: 'faviconkit',
+  /* The default sort order for sections */
+  sortOrder: 'auto',
   /* The page paths for each route within the app for the router */
   routePaths: {
     home: '/home',