Mercurial > gemma

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
2737:4a5c0e7cb75b 2738:add2d47c2567
22 </div> 22 </div>
23 </div> 23 </div>
24 <UITableHeader 24 <UITableHeader
25 :columns="[ 25 :columns="[
26 { id: 'id', title: 'ID', class: 'col-1' }, 26 { id: 'id', title: 'ID', class: 'col-1' },
27 { id: 'type', title: 'Type', class: 'col-2' }, 27 { id: 'kind', title: 'Type', class: 'col-2' },
28 { id: 'author', title: 'Author', class: 'col-2' }, 28 { id: 'user', title: 'Author', class: 'col-2' },
29 { id: 'schedule', title: 'Schedule', class: 'col-2' }, 29 { id: 'config.cron', title: 'Schedule', class: 'col-2' },
30 { id: 'email', title: 'Email', class: 'col-2' } 30 { id: 'config.send-email', title: 'Email', class: 'col-2' }
31 ]" 31 ]"
32 :sortable="false"
33 /> 32 />
34 <UITableBody :data="schedules" v-slot="{ item: schedule }"> 33 <UITableBody
34 :data="filteredSchedules() | sortTable(sortColumn, sortDirection)"
35 v-slot="{ item: schedule }"
36 >
35 <div class="py-1 col-1">{{ schedule.id }}</div> 37 <div class="py-1 col-1">{{ schedule.id }}</div>
36 <div class="py-1 col-2">{{ schedule.kind.toUpperCase() }}</div> 38 <div class="py-1 col-2">{{ schedule.kind.toUpperCase() }}</div>
37 <div class="py-1 col-2">{{ schedule.user }}</div> 39 <div class="py-1 col-2">{{ schedule.user }}</div>
38 <div class="py-1 col-2">{{ schedule.config.cron }}</div> 40 <div class="py-1 col-2">{{ schedule.config.cron }}</div>
39 <div class="py-1 col-2 text-center"> 41 <div class="py-1 col-2 text-center">
84 </div> 86 </div>
85 <Importscheduledetail></Importscheduledetail> 87 <Importscheduledetail></Importscheduledetail>
86 </div> 88 </div>
87 </template> 89 </template>
88 90
91 <style lang="sass" scoped>
92 th
93 border-top: 0px
94
95 .card-body
96 padding-bottom: $small-offset
97
98 .schedulecard
99 margin-right: $small-offset
100 min-height: 20rem
101
102 .schedulecard-body
103 width: 100%
104 margin-left: auto
105 margin-right: auto
106 </style>
107
89 <script> 108 <script>
90 /* This is Free Software under GNU Affero General Public License v >= 3.0 109 /* This is Free Software under GNU Affero General Public License v >= 3.0
91 * without warranty, see README.md and license for details. 110 * without warranty, see README.md and license for details.
92 * 111 *
93 * SPDX-License-Identifier: AGPL-3.0-or-later 112 * SPDX-License-Identifier: AGPL-3.0-or-later
102 * Markus Kottländer <markus.kottlaender@intevation.de> 121 * Markus Kottländer <markus.kottlaender@intevation.de>
103 */ 122 */
104 123
105 import { mapState } from "vuex"; 124 import { mapState } from "vuex";
106 import { HTTP } from "@/lib/http"; 125 import { HTTP } from "@/lib/http";
107 import { displayInfo, displayError } from "@/lib/errors.js"; 126 import { displayInfo, displayError } from "@/lib/errors";
127 import { sortTable } from "@/lib/mixins";
108 128
109 export default { 129 export default {
110 name: "importschedule", 130 name: "importschedule",
131 mixins: [sortTable],
111 components: { 132 components: {
112 Importscheduledetail: () => import("./Importscheduledetail"), 133 Importscheduledetail: () => import("./Importscheduledetail"),
113 Spacer: () => import("@/components/Spacer") 134 Spacer: () => import("@/components/Spacer")
114 }, 135 },
115 data() { 136 data() {
116 return { 137 return {
117 searchQuery: "" 138 searchQuery: ""
118 }; 139 };
119 }, 140 },
120 mounted() { 141 computed: {
121 this.getSchedules(); 142 ...mapState("application", ["showSidebar"]),
143 ...mapState("importschedule", ["schedules", "importScheduleDetailVisible"]),
144 spacerStyle() {
145 return [
146 "spacer ml-3",
147 {
148 "spacer-expanded": this.showSidebar,
149 "spacer-collapsed": !this.showSidebar
150 }
151 ];
152 }
122 }, 153 },
123 methods: { 154 methods: {
155 filteredSchedules() {
156 return this.schedules.filter(s => {
157 return (s.id + s.kind)
158 .toLowerCase()
159 .includes(this.searchQuery.toLowerCase());
160 });
161 },
124 editSchedule(id) { 162 editSchedule(id) {
125 this.$store 163 this.$store
126 .dispatch("importschedule/loadSchedule", id) 164 .dispatch("importschedule/loadSchedule", id)
127 .then(() => { 165 .then(() => {
128 this.$store.commit("importschedule/setImportScheduleDetailVisible"); 166 this.$store.commit("importschedule/setImportScheduleDetailVisible");
203 icon: "times" 241 icon: "times"
204 } 242 }
205 }); 243 });
206 } 244 }
207 }, 245 },
208 computed: { 246 mounted() {
209 ...mapState("application", ["showSidebar"]), 247 this.getSchedules();
210 ...mapState("importschedule", ["schedules", "importScheduleDetailVisible"]),
211 spacerStyle() {
212 return [
213 "spacer ml-3",
214 {
215 "spacer-expanded": this.showSidebar,
216 "spacer-collapsed": !this.showSidebar
217 }
218 ];
219 }
220 } 248 }
221 }; 249 };
222 </script> 250 </script>
223
224 <style lang="scss" scoped>
225 th {
226 border-top: 0px;
227 }
228
229 .card-body {
230 padding-bottom: $small-offset;
231 }
232
233 .schedulecard {
234 margin-right: $small-offset;
235 min-height: 20rem;
236 }
237
238 .schedulecard-body {
239 width: 100%;
240 margin-left: auto;
241 margin-right: auto;
242 }
243 </style>