adds asc/desc order icons

package.json

@@ -4,6 +4,9 @@
   "description": "List arc-hive collections for Omeka",
   "main": "webpack.config.js",
   "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/vue-fontawesome": "^2.0.6",
     "axios": "^0.23.0",
     "babel-loader": "^8.2.3",
     "vue": "^2.6.14",

src/components/archiveList.vue

@@ -28,10 +28,38 @@ This file is part of ArciveList.
               data-accordion-item disabled>
             <a href="#" class="accordion-title">
               <ul class="">
-                <li class="title">Title</li>
-                <li class="curator">Artist</li>
-                <li class="collection-name">Collection</li>
-                <li class="date">Date</li>
+                <li class="title"
+                    v-on:click="setActiveColumn('title')">
+                  Title
+                  <span class="ascToggle"
+                        v-bind:class="{ activeColumn: isActiveCol('title')}">
+                    <font-awesome-icon :icon="getOrderIcon('title')" size="1x" />
+                  </span>
+                </li>
+                <li class="curator"
+                    v-on:click="setActiveColumn('artist')">
+                  Artist
+                  <span class="ascToggle"
+                        v-bind:class="{ activeColumn: isActiveCol('artist')}">
+                    <font-awesome-icon :icon="getOrderIcon('artist')" size="1x" />
+                  </span>
+                </li>
+                <li class="collection-name"
+                    v-on:click="setActiveColumn('collection')">
+                  Collection
+                  <span class="ascToggle"
+                        v-bind:class="{ activeColumn: isActiveCol('collection')}">
+                    <font-awesome-icon :icon="getOrderIcon('collection')" size="1x" />
+                  </span>
+                </li>
+                <li class="date"
+                    v-on:click="setActiveColumn('date')">
+                  Date
+                  <span class="ascToggle"
+                        v-bind:class="{ activeColumn: isActiveCol('date')}">
+                    <font-awesome-icon :icon="getOrderIcon('date')" size="1x" />
+                  </span>
+                </li>
               </ul>
             </a>
             <div class="accordion-content"
@@ -90,15 +118,23 @@ This file is part of ArciveList.
 <script>
 import axios from 'axios';
 import { mapMutations, mapGetters } from 'vuex'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faSortAlphaUp } from '@fortawesome/free-solid-svg-icons'
+import { faSortAlphaDown } from '@fortawesome/free-solid-svg-icons'
 import Search from './search.vue';
 export default {
   name: "List",
   components: {
-    'Search': Search
+    FontAwesomeIcon,
+    Search
   },
   data() {
     return {
-      //sites: Array,
+      columns_order: {'title': 'asc', 'artist': 'asc', 'collection': 'asc', 'date': 'asc'},
+      active_column: 'title',
+      column_order: 'asc',
+      faSortAlphaUp: faSortAlphaUp,
+      faSortAlphaDown: faSortAlphaDown,
     };
   },
   created() {
@@ -112,7 +148,19 @@ export default {
 
   },
   methods: {
-
+    setActiveColumn: function(name) {
+      if (this.active_column == name) {
+        this.columns_order[name] = this.columns_order[name] == 'asc' ? 'desc' : 'asc'
+      } else {
+        this.active_column = name
+      }
+    },
+    isActiveCol: function(name) {
+      return name == this.active_column ? true : false
+    },
+    getOrderIcon: function(name) {
+      return this.columns_order[name] == 'asc' ? faSortAlphaUp : faSortAlphaDown
+    },
     ...mapGetters([
       'getDisplayedSites'
     ]),
@@ -129,6 +177,11 @@ export default {
 };
 </script>
 
-<style>
-
+<style scoped>
+.ascToggle {
+  color: lightgray;
+}
+.activeColumn {
+  color: black;
+}
 </style>

src/components/search.vue

@@ -5,7 +5,6 @@ This file is part of ArciveList.
 # SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
-
 <template>
   <nav class="">
     <form class="search"
@@ -26,46 +25,23 @@ This file is part of ArciveList.
   </nav>
 </template>
 
-
 <script>
 import axios from 'axios';
 import { mapMutations } from 'vuex'
 
 export default {
   name: "Search",
-  components: {
-
-  },
   data() {
     return {
       search_text: "",
     };
   },
-  created() {
-
-  },
-  ready: function () {
-
-  },
-  mounted() {
-    /*
-    var self = this;
-    axios.get(this.api_endpoint +'/sites', {
-    })
-    .then(function (response) {
-      console.log(response.data)
-      self.sites = response.data
-    })
-    .catch(function (error) {
-      console.log(error);
-    });
-    */
-  },
   methods: {
     search: function() {
       console.log(this.search_text)
       this.setSearchText(this.search_text)
-      var search_url = this.api_endpoint + this.search_text;
+      var api_endpoint = '/api/collections/search?fulltext_search='
+      var search_url = api_endpoint + this.search_text;
       var self = this;
       axios.get(search_url, {
       })
@@ -77,23 +53,10 @@ export default {
         console.log(error);
       });
     },
-    /*
-    site_url: function(slug) {
-      return this.base_url + '/s/' + slug
-    }
-    */
     ...mapMutations([
       'setFilteredSites', 'setSearchText'
     ]),
   },
-  watched: {
-
-  },
-  computed: {
-    api_endpoint: function() {
-      return '/api/collections/search?fulltext_search='
-    },
-  }
 };
 </script>