Mercurial > gemma
changeset 2579:5295a182b4a4
overview2 WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 11 Mar 2019 15:53:31 +0100 |
parents | 3ad81357a57c |
children | 5125db802b79 |
files | client/src/components/importoverview/Filters.vue client/src/components/importoverview/ImportOverviewAlt.vue client/src/components/importoverview/LogEntry.vue |
diffstat | 3 files changed, 152 insertions(+), 1 deletions(-) [+] |
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>
--- a/client/src/components/importoverview/ImportOverviewAlt.vue Mon Mar 11 15:35:13 2019 +0100 +++ b/client/src/components/importoverview/ImportOverviewAlt.vue Mon Mar 11 15:53:31 2019 +0100 @@ -15,7 +15,14 @@ </button> </div> </div> - <LogEntry v-for="entry in imports" :key="entry.id"></LogEntry> + <div class="ml-3 mr-2 mt-2 w-95 "> + <LogEntry + class="border-bottom" + :entry="entry" + v-for="entry in imports" + :key="entry.id" + ></LogEntry> + </div> </div> </template>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importoverview/LogEntry.vue Mon Mar 11 15:53:31 2019 +0100 @@ -0,0 +1,33 @@ +<template> + <div class="d-flex flex-row"> + <font-awesome-icon + class="mr-1 text-info" + icon="angle-right" + fixed-width + ></font-awesome-icon + >Ich bin ein Eintrag! + <span + ><font-awesome-icon + v-if="entry.warnings" + class="ml-1 text-warning" + icon="exclamation-triangle" + fixed-width + ></font-awesome-icon + ></span> + <div v-if="reviewable">Review ME!</div> + </div> +</template> + +<script> +export default { + name: "importlogentry", + props: ["entry"], + computed: { + reviewable() { + return this.entry.state === "pending"; + } + } +}; +</script> + +<style></style>