Mercurial > gemma
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>