Root Workspace Sort Dropdown (Alphabetical)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## GUI and Functionality
 
+- **New Feature**: Users can use a drop down to order root directories (currently only alphabetically ascending/descending )
 - **New Feature**: You can hide the toolbar button and words count block in the
   preference
 - Added "Copy filename", "Copy path" and "Copy ID" to document tabs context

source/win-main/file-manager/file-tree.vue

@@ -13,7 +13,6 @@
           {{ noResultsMessage }}
         </div>
       </div>
-
       <div v-show="getFiles.length > 0" id="directories-files-header">
         <clr-icon
           shape="file"
@@ -33,6 +32,20 @@
           shape="tree-view"
           role="presentation"
         ></clr-icon>{{ workspaceSectionHeading }}
+        <select id="sort-header" v-model="sortSelection">
+          <option
+            value="null"
+            selected
+          >
+            Sort By{{ sortByOption }}
+          </option>
+          <option value="AlphaA">
+            Alphabetical (Ascending){{ alphabeticalAscOption }}
+          </option>
+          <option value="AlphaD">
+            Alphabetical (Descending){{ alphabeticalDescOption }}
+          </option>
+        </select>
       </div>
       <TreeItem
         v-for="item in getDirectories"
@@ -75,6 +88,7 @@ import matchQuery from './util/match-query'
 import matchTree from './util/match-tree'
 import { defineComponent } from 'vue'
 import { MDFileMeta, CodeFileMeta, DirMeta } from '@dts/common/fsal'
+import sortDirectories from './util/sort-directories'
 
 const ipcRenderer = window.ipc
 
@@ -94,7 +108,9 @@ export default defineComponent({
     }
   },
   data: function () {
-    return {}
+    return {
+      sortSelection: null
+    }
   },
   computed: {
     fileTree: function (): Array<MDFileMeta|CodeFileMeta|DirMeta> {
@@ -136,7 +152,12 @@ export default defineComponent({
       return this.getFilteredTree.filter(item => item.type !== 'directory') as Array<MDFileMeta|CodeFileMeta>
     },
     getDirectories: function (): DirMeta[] {
-      return this.getFilteredTree.filter(item => item.type === 'directory') as DirMeta[]
+      if (this.sortSelection === 'AlphaA' || this.sortSelection === 'AlphaD') {
+        let temp = this.getFilteredTree.filter(item => item.type === 'directory') as DirMeta[]
+        return sortDirectories(temp, this.sortSelection) as DirMeta[]
+      } else {
+        return this.getFilteredTree.filter(item => item.type === 'directory') as DirMeta[]
+      }
     },
     fileSectionHeading: function (): string {
       return trans('gui.files')
@@ -149,6 +170,15 @@ export default defineComponent({
     },
     noResultsMessage: function () {
       return trans('gui.no_search_results')
+    },
+    sortByOption: function () {
+      return trans('gui.sort_by_option')
+    },
+    alphabeticalAscOption: function () {
+      return trans('gui.alphabetical_asc_option')
+    },
+    alphabeticalDescOption: function () {
+      return trans('gui.alphabetical_desc_option')
     }
   },
   methods: {
@@ -194,6 +224,9 @@ body {
         margin-right: 3px;
         vertical-align: bottom;
       }
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
     }
 
     .list-item {
@@ -218,6 +251,16 @@ body {
         }
     }
   }
+
+  #sort-header {
+    font-size: 11px;
+    width: 12vw;
+    padding: 0px 0px 0px 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-right: 5px;
+    margin-left: auto;
+  }
 }
 
 body.darwin {
@@ -231,7 +274,6 @@ body.darwin {
       font-weight: bold;
       font-size: inherit;
       margin: 20px 0px 5px 10px;
-
       clr-icon { display: none; }
     }
   }
@@ -246,9 +288,22 @@ body.win32 {
       font-size: 11px;
       padding: 5px 0px 5px 10px;
       margin: 0px 0px 5px 0px;
+      //display: flex;
+      //flex-flow: row wrap;
+      //align-items: center;
     }
   }
 
+  // #sort-header {
+  //  font-size: 11px;
+  //  width: 12vw;
+  //  padding: 0px 0px 0px 0px;
+  //  margin-top: 0px;
+  //  margin-bottom: 0px;
+  //  margin-right: 5px;
+  //  margin-left: auto;
+  // }
+
   &.dark {
     #file-tree {
       background-color: rgb(30, 30, 40);

source/win-main/file-manager/util/sort-directories.ts

@@ -0,0 +1,55 @@
+/**
+ * @ignore
+ * BEGIN HEADER
+ *
+ * Contains:        sortDirectories
+ * CVM-Role:        Utility Function
+ * Maintainer:      Hendrik Erz
+ * License:         GNU GPL v3
+ *
+ * Description:     A utility function that sorts a given array of directories.
+ *                  The function should be passed the array and a string determining
+ *                  how to sort the array.
+ *
+ * END HEADER
+ */
+
+import { DirMeta } from '@dts/common/fsal'
+
+/**
+ * Returns a sorted array of directories
+ *
+ * @param   {DirMeta}   dirArray         The directories to be sorted
+ * @param   {string}    sortBy           How to sort the directories
+ *
+ * @return  {DirMeta[]}                  The sorted array
+ */
+export default function sortDirectories (dirArray: DirMeta[], sortBy: string): DirMeta[] {
+  function compare (a: DirMeta, b: DirMeta): number {
+    // get names of directory in lowercase due to ASCII values
+    let nameA = a.name.toLowerCase()
+    let nameB = b.name.toLowerCase()
+
+    // if directories have the same name, compare the names of the directory they are in
+    if (nameA === nameB) {
+      let dirA = a.dir
+      let dirB = b.dir
+      if (dirA < dirB) { return -1 }
+      if (dirA > dirB) { return 1 }
+
+    // else compare regularly
+    } else {
+      if (nameA < nameB) { return -1 }
+      if (nameA > nameB) { return 1 }
+    }
+    return 0
+  }
+
+  // return array in reverse alphabetical order
+  if (sortBy === 'AlphaD') {
+    return dirArray.sort(compare).reverse()
+  }
+
+  // return array in alphabetical order
+  return dirArray.sort(compare)
+}

test/sort-directories.spec.ts

@@ -0,0 +1,56 @@
+/* eslint-disable no-undef */
+/**
+ * @ignore
+ * BEGIN HEADER
+ *
+ * Contains:        sortDirectories tester
+ * CVM-Role:        TESTING
+ * Maintainer:      Hendrik Erz
+ * License:         GNU GPL v3
+ *
+ * Description:     This file tests a component of Zettlr.
+ *
+ * END HEADER
+ */
+
+import sortDirectories from '../source/win-main/file-manager/util/sort-directories'
+import { deepStrictEqual } from 'assert'
+import { DirMeta } from '@dts/common/fsal'
+
+const sort = 'AlphaD'
+
+const sortDirectoriesTesters = [
+  {
+    input: [{ name: 'titled', dir: 'Documents' }, { name: 'titled', dir: 'Desktop' }],
+    expected: [{ name: 'titled', dir: 'Documents' }, { name: 'titled', dir: 'Desktop' }],
+    message: `Should return {name: 'titled', dir: 'Documents' } , { name: 'titled', dir: 'Desktop' }` 
+  },
+  {
+    input: [{ name: 'untitled', dir: 'Downloads' }, { name: 'titled', dir: 'Documents' }],
+    expected: [{ name: 'untitled', dir: 'Downloads' }, { name: 'titled', dir: 'Documents' }],
+    message: `Should return { name: 'untitled', dir: 'Downloads' } , { name: 'titled', dir: 'Documents' }`
+  },
+  {
+    input: [{ name: 'first', dir: 'Applications' }, { name: 'first', dir: 'Music' }],
+    expected: [{ name: 'first', dir: 'Music' }, { name: 'first', dir: 'Applications' }],
+    message: `Should return { name: 'first', dir: 'Music' } , { name: 'first', dir: 'Applications' }`
+  },
+  {
+    input: [{ name: 'file', dir: 'Test' }, { name: 'file', dir: 'Beats' }],
+    expected: [{ name: 'file', dir: 'Test' }, { name: 'file', dir: 'Beats' }],
+    message: `Should return { name: 'file', dir: 'Test' } , { name: 'file', dir: 'Beats' }`
+  },
+  {
+    input: [{ name: 'Root', dir: '/home/B' }, { name: 'Root', dir: '/home/D' }, { name: 'Root', dir: '/home/C' }, { name: 'Root', dir: '/home/A' }],
+    expected: [{ name: 'Root', dir: '/home/D' }, { name: 'Root', dir: '/home/C' }, { name: 'Root', dir: '/home/B' }, { name: 'Root', dir: '/home/A' }],
+    message: `Should return { name: 'Root', dir: '/home/D' }, { name: 'Root', dir: '/home/C' }, { name: 'Root', dir: '/home/B' }, { name: 'Root', dir: '/home/A' }`
+  }
+]
+
+describe('Utility#sortDirectories()', function () {
+  for (const test of sortDirectoriesTesters) {
+    it(`${test.message}`, function () {
+      deepStrictEqual(sortDirectories(test.input as DirMeta[], sort), test.expected)
+    })
+  }
+})