Mercurial > gemma
changeset 2745:d2896bb852e7
import_overview: paging interval selection
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 20 Mar 2019 16:48:08 +0100 |
parents | 7dcca9649a61 |
children | 349a3610dfc5 |
files | client/package.json client/src/components/importoverview/ImportOverview.vue client/yarn.lock |
diffstat | 3 files changed, 183 insertions(+), 4 deletions(-) [+] |
line wrap: on
line diff
--- a/client/package.json Wed Mar 20 12:49:52 2019 +0100 +++ b/client/package.json Wed Mar 20 16:48:08 2019 +0100 @@ -35,6 +35,7 @@ "bootstrap": "^4.1.1", "d3": "^5.7.0", "d3-line-chunked": "^1.4.1", + "date-fns": "^1.30.1", "debounce": "^1.2.0", "font-awesome": "^4.7.0", "glob-all": "^3.1.0",
--- a/client/src/components/importoverview/ImportOverview.vue Wed Mar 20 12:49:52 2019 +0100 +++ b/client/src/components/importoverview/ImportOverview.vue Wed Mar 20 16:48:08 2019 +0100 @@ -24,6 +24,62 @@ </button> </div> </div> + <div + class="ml-2 mr-2 mb-2 datefilter d-flex flex-row justify-content-between" + > + <div class="mr-3 my-auto pointer"> + <button + @click="earlier" + class="btn btn-sm btn-outline-light text-dark" + > + <translate>Earlier</translate> + <font-awesome-icon class="ml-2" icon="angle-left" /> + </button> + </div> + <div class="selected-interval my-auto"> + <span class="date">{{ interval[0] | dateTime }}</span> + <span class="ml-3 mr-3">-</span> + <span class="date">{{ interval[1] | dateTime }}</span> + </div> + <div class="ml-3 my-auto pointer"> + <button + :disabled="!laterPossible" + @click="later" + class="btn btn-sm btn-outline-light text-dark" + > + <font-awesome-icon class="mr-2" icon="angle-right" /><translate + >Later</translate + > + </button> + </div> + <div class="d-flex flex-row"> + <select + class="my-auto btn btn-outline-light text-dark form-control interval-select" + v-model="selectedInterval" + > + <option + :selected="selectedInterval === $options.LAST_HOUR" + :value="$options.LAST_HOUR" + ><translate>Hour</translate></option + > + <option + :selected="selectedInterval === $options.TODAY" + :value="$options.TODAY" + ><translate>Day</translate></option + > + <option + :selected="selectedInterval === $options.LAST_7_DAYS" + :value="$options.LAST_7_DAYS" + ><translate>7 days</translate></option + > + <option + :selected="selectedInterval === $options.LAST_30_DAYS" + :value="$options.LAST_30_DAYS" + ><translate>30 Days</translate></option + > + </select> + </div> + </div> <UITableHeader :columns="[ { id: 'id', title: 'Id', width: '79px' }, @@ -71,9 +127,20 @@ import { displayError, displayInfo } from "@/lib/errors"; import { STATES } from "@/store/imports"; import { sortTable } from "@/lib/mixins"; +import { + startOfDay, + startOfHour, + endOfHour, + addHours, + subHours, + endOfDay, + addDays, + subDays, + isFuture +} from "date-fns"; export default { - name: "importoverviewalt", + name: "importoverview", mixins: [sortTable], components: { Filters: () => import("./Filters.vue"), @@ -81,15 +148,94 @@ }, data() { return { - loading: false + loading: false, + startDate: subHours(new Date(), 1), + endDate: new Date(), + selectedInterval: this.$options.LAST_HOUR, + laterPossible: false }; }, + LAST_HOUR: "lasthour", + TODAY: "today", + LAST_7_DAYS: "lastsevendays", + LAST_30_DAYS: "lastthirtydays", computed: { ...mapState("application", ["searchQuery"]), ...mapState("imports", ["imports", "reviewed"]), - ...mapGetters("imports", ["filters"]) + ...mapGetters("imports", ["filters"]), + interval() { + return [this.startDate, this.endDate]; + } }, methods: { + earlier() { + switch (this.selectedInterval) { + case this.$options.LAST_HOUR: + this.startDate = subHours(startOfHour(this.startDate), 1); + this.endDate = endOfHour(this.startDate); + this.laterPossible = true; + break; + case this.$options.TODAY: + this.startDate = subDays(startOfDay(this.startDate), 1); + this.endDate = endOfDay(this.startDate); + this.laterPossible = true; + break; + case this.$options.LAST_7_DAYS: + this.startDate = subDays(startOfDay(this.startDate), 7); + this.endDate = endOfDay(addDays(this.startDate, 7)); + this.laterPossible = true; + break; + case this.$options.LAST_30_DAYS: + this.startDate = subDays(startOfDay(this.startDate), 30); + this.endDate = endOfDay(addDays(this.startDate, 30)); + this.laterPossible = true; + break; + } + }, + later() { + let start, end; + const now = new Date(); + switch (this.selectedInterval) { + case this.$options.LAST_HOUR: + start = addHours(startOfHour(this.startDate), 1); + end = endOfHour(start); + this.laterPossible = !isFuture(end); + if (isFuture(subHours(end, 1))) { + return; + } + this.startDate = start; + this.endDate = isFuture(end) ? now : end; + break; + case this.$options.TODAY: + start = addDays(startOfDay(this.startDate), 1); + end = endOfDay(start); + this.laterPossible = !isFuture(end); + if (isFuture(subDays(end, 1))) { + return; + } + this.startDate = start; + this.endDate = isFuture(end) ? now : end; + break; + case this.$options.LAST_7_DAYS: + start = addDays(startOfDay(this.startDate), 7); + end = endOfDay(addDays(start, 7)); + this.laterPossible = !isFuture(end); + if (isFuture(subDays(end, 7))) { + return; + } + this.startDate = start; + this.endDate = isFuture(end) ? now : end; + break; + case this.$options.LAST_30_DAYS: + start = addDays(startOfDay(this.startDate), 30); + end = endOfDay(addDays(start, 30)); + this.laterPossible = !isFuture(end); + if (isFuture(subDays(end, 7))) return; + this.startDate = start; + this.endDate = isFuture(end) ? now : end; + break; + } + }, filteredImports() { return this.imports.filter(i => { return (i.kind + i.id) @@ -180,6 +326,27 @@ } }, watch: { + selectedInterval() { + const now = new Date(); + switch (this.selectedInterval) { + case this.$options.LAST_HOUR: + this.startDate = subHours(now, 1); + this.endDate = now; + break; + case this.$options.TODAY: + this.startDate = startOfDay(now); + this.endDate = now; + break; + case this.$options.LAST_7_DAYS: + this.startDate = subDays(startOfDay(now), 7); + this.endDate = now; + break; + case this.$options.LAST_30_DAYS: + this.startDate = subDays(startOfDay(now), 30); + this.endDate = now; + break; + } + }, filters() { this.$store.dispatch("imports/getImports", this.filters); } @@ -189,3 +356,14 @@ } }; </script> + +<style lang="scss" scoped> +.date { + font-stretch: condensed; +} +.interval-select { + padding: 0px; + margin: 0px; + font-size: 80%; +} +</style>
--- a/client/yarn.lock Wed Mar 20 12:49:52 2019 +0100 +++ b/client/yarn.lock Wed Mar 20 16:48:08 2019 +0100 @@ -3761,7 +3761,7 @@ whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" -date-fns@^1.23.0: +date-fns@^1.23.0, date-fns@^1.30.1: version "1.30.1" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==