diff client/src/components/importschedule/Importschedule.vue @ 2738:add2d47c2567

client: tables: implemented simple default sorting
author Markus Kottlaender <markus@intevation.de>
date Tue, 19 Mar 2019 18:59:40 +0100
parents 4bcb26542767
children c6fba10926cc
line wrap: on
line diff
--- a/client/src/components/importschedule/Importschedule.vue	Tue Mar 19 18:07:50 2019 +0100
+++ b/client/src/components/importschedule/Importschedule.vue	Tue Mar 19 18:59:40 2019 +0100
@@ -24,14 +24,16 @@
         <UITableHeader
           :columns="[
             { id: 'id', title: 'ID', class: 'col-1' },
-            { id: 'type', title: 'Type', class: 'col-2' },
-            { id: 'author', title: 'Author', class: 'col-2' },
-            { id: 'schedule', title: 'Schedule', class: 'col-2' },
-            { id: 'email', title: 'Email', class: 'col-2' }
+            { id: 'kind', title: 'Type', class: 'col-2' },
+            { id: 'user', title: 'Author', class: 'col-2' },
+            { id: 'config.cron', title: 'Schedule', class: 'col-2' },
+            { id: 'config.send-email', title: 'Email', class: 'col-2' }
           ]"
-          :sortable="false"
         />
-        <UITableBody :data="schedules" v-slot="{ item: schedule }">
+        <UITableBody
+          :data="filteredSchedules() | sortTable(sortColumn, sortDirection)"
+          v-slot="{ item: schedule }"
+        >
           <div class="py-1 col-1">{{ schedule.id }}</div>
           <div class="py-1 col-2">{{ schedule.kind.toUpperCase() }}</div>
           <div class="py-1 col-2">{{ schedule.user }}</div>
@@ -86,6 +88,23 @@
   </div>
 </template>
 
+<style lang="sass" scoped>
+th
+  border-top: 0px
+
+.card-body
+  padding-bottom: $small-offset
+
+.schedulecard
+  margin-right: $small-offset
+  min-height: 20rem
+
+.schedulecard-body
+  width: 100%
+  margin-left: auto
+  margin-right: auto
+</style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
@@ -104,10 +123,12 @@
 
 import { mapState } from "vuex";
 import { HTTP } from "@/lib/http";
-import { displayInfo, displayError } from "@/lib/errors.js";
+import { displayInfo, displayError } from "@/lib/errors";
+import { sortTable } from "@/lib/mixins";
 
 export default {
   name: "importschedule",
+  mixins: [sortTable],
   components: {
     Importscheduledetail: () => import("./Importscheduledetail"),
     Spacer: () => import("@/components/Spacer")
@@ -117,10 +138,27 @@
       searchQuery: ""
     };
   },
-  mounted() {
-    this.getSchedules();
+  computed: {
+    ...mapState("application", ["showSidebar"]),
+    ...mapState("importschedule", ["schedules", "importScheduleDetailVisible"]),
+    spacerStyle() {
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
+    }
   },
   methods: {
+    filteredSchedules() {
+      return this.schedules.filter(s => {
+        return (s.id + s.kind)
+          .toLowerCase()
+          .includes(this.searchQuery.toLowerCase());
+      });
+    },
     editSchedule(id) {
       this.$store
         .dispatch("importschedule/loadSchedule", id)
@@ -205,39 +243,8 @@
       });
     }
   },
-  computed: {
-    ...mapState("application", ["showSidebar"]),
-    ...mapState("importschedule", ["schedules", "importScheduleDetailVisible"]),
-    spacerStyle() {
-      return [
-        "spacer ml-3",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
-    }
+  mounted() {
+    this.getSchedules();
   }
 };
 </script>
-
-<style lang="scss" scoped>
-th {
-  border-top: 0px;
-}
-
-.card-body {
-  padding-bottom: $small-offset;
-}
-
-.schedulecard {
-  margin-right: $small-offset;
-  min-height: 20rem;
-}
-
-.schedulecard-body {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-}
-</style>