✨ Allows sorting items by most used

src/components/LinkItems/Item.vue

@@ -49,6 +49,7 @@ import Icon from '@/components/LinkItems/ItemIcon.vue';
 import ItemOpenMethodIcon from '@/components/LinkItems/ItemOpenMethodIcon';
 import StatusIndicator from '@/components/LinkItems/StatusIndicator';
 import ContextMenu from '@/components/LinkItems/ContextMenu';
+import { localStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'Item',
@@ -106,6 +107,7 @@ export default {
       } else {
         this.$emit('itemClicked');
       }
+      this.incrementMostUsedCount(this.id);
     },
     /* Open custom context menu, and set position */
     openContextMenu(e) {
@@ -198,6 +200,14 @@ export default {
         default: window.open(url, '_blank');
       }
     },
+    /* Used for smart-sort when sorting items by most/ last used */
+    incrementMostUsedCount(itemId) {
+      const mostUsed = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
+      let counter = mostUsed[itemId] || 0;
+      counter += 1;
+      mostUsed[itemId] = counter;
+      localStorage.setItem(localStorageKeys.MOST_USED, JSON.stringify(mostUsed));
+    },
   },
   mounted() {
     // If ststus checking is enabled, then check service status

src/components/LinkItems/Section.vue

@@ -17,9 +17,9 @@
       :style="gridStyle"
     >
       <Item
-        v-for="(item, index) in sortedItems"
+        v-for="(item) in sortedItems"
-        :id="`${index}_${makeId(item.title)}`"
+        :id="makeId(item.title)"
-        :key="`${index}_${makeId(item.title)}`"
+        :key="makeId(item.title)"
         :url="item.url"
         :title="item.title"
         :description="item.description"
@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import { sortOrder as defaultSortOrder } from '@/utils/defaults';
+import { sortOrder as defaultSortOrder, localStorageKeys } from '@/utils/defaults';
 import Item from '@/components/LinkItems/Item.vue';
 import Collapsable from '@/components/LinkItems/Collapsable.vue';
 import IframeModal from '@/components/LinkItems/IframeModal.vue';
@@ -76,11 +76,13 @@ export default {
       return this.displayData.sortBy || defaultSortOrder;
     },
     sortedItems() {
-      const { items } = this;
+      let { 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));
+      } else if (this.sortOrder === 'most-used') {
+        items = this.sortByMostUsed(items);
       }
       return items;
     },
@@ -125,6 +127,13 @@ export default {
       if (interval < 1) interval = 0;
       return interval;
     },
+    /* Sorts items by most used to least used, based on click-count */
+    sortByMostUsed(items) {
+      const usageCount = JSON.parse(localStorage.getItem(localStorageKeys.MOST_USED) || '{}');
+      const gmu = (item) => usageCount[this.makeId(item.title)] || 0;
+      items.reverse().sort((a, b) => (gmu(a) < gmu(b) ? 1 : -1));
+      return items;
+    },
   },
 };
 </script>

src/utils/defaults.js

@@ -93,6 +93,7 @@ module.exports = {
     BACKUP_HASH: 'backupHash',
     HIDE_SETTINGS: 'hideSettings',
     USERNAME: 'username',
+    MOST_USED: 'mostUsed',
   },
   /* Key names for cookie identifiers */
   cookieKeys: {