Mercurial > gemma
diff client/src/components/importoverview/Filters.vue @ 2579:5295a182b4a4
overview2 WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 11 Mar 2019 15:53:31 +0100 |
parents | |
children | 956b230c6062 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importoverview/Filters.vue Mon Mar 11 15:53:31 2019 +0100 @@ -0,0 +1,111 @@ +<template> + <div> + <button @click="setFilter('pending')" :class="pendingStyle"> + <translate>pending</translate> + </button> + <button @click="setFilter('failed')" :class="failedStyle"> + <translate>failed</translate> + </button> + <button @click="setFilter('accepted')" :class="acceptedStyle"> + <translate>accepted</translate> + </button> + <button @click="setFilter('declined')" :class="declinedStyle"> + <translate>declined</translate> + </button> + <button @click="setFilter('warning')" :class="warningStyle"> + <translate>warning</translate> + </button> + </div> +</template> + +<script> +export default { + name: "importfilters", + data() { + return { + failed: false, + pending: false, + accepted: false, + declined: false, + warning: false + }; + }, + methods: { + setFilter(name) { + if (this.loading) return; + this[name] = !this[name]; + const allSet = + this.failed && + this.pending && + this.accepted && + this.declined && + this.warning; + if (allSet) { + this.warning = false; + this.successful = false; + this.failed = false; + this.pending = false; + this.accepted = false; + this.declined = false; + this.$store.commit("imports/clearFilers"); + } + const filters = [ + "failed", + "pending", + "accepted", + "declined", + "warning" + ].filter(x => this[x]); + this.$store.commit("imports/setFilers", filters); + } + }, + computed: { + pendingStyle() { + return { + btn: true, + "btn-sm": true, + "btn-light": !this.pending, + "btn-secondary": this.pending + }; + }, + failedStyle() { + return { + "ml-2": true, + btn: true, + "btn-sm": true, + "btn-light": !this.failed, + "btn-secondary": this.failed + }; + }, + declinedStyle() { + return { + "ml-2": true, + btn: true, + "btn-sm": true, + "btn-light": !this.declined, + "btn-secondary": this.declined + }; + }, + acceptedStyle() { + return { + "ml-2": true, + btn: true, + "btn-sm": true, + "btn-light": !this.accepted, + "btn-secondary": this.accepted + }; + }, + warningStyle() { + return { + "ml-2": true, + btn: true, + "btn-sm": true, + "btn-light": !this.warning, + "btn-secondary": this.warning + }; + } + } +}; +</script> + +<style lang="scss" scoped></style>