Mercurial > gemma
diff client/src/components/importoverview/LogDetail.vue @ 2594:ecec6d5aae00
overview2 WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 12 Mar 2019 11:14:56 +0100 |
parents | 956b230c6062 |
children | 02d5de05291f |
line wrap: on
line diff
--- a/client/src/components/importoverview/LogDetail.vue Tue Mar 12 10:42:27 2019 +0100 +++ b/client/src/components/importoverview/LogDetail.vue Tue Mar 12 11:14:56 2019 +0100 @@ -1,6 +1,48 @@ <template> <div> - <h1>logdetail</h1> + <div class="d-flex fex-row"> + <font-awesome-icon + v-if="entry.id === showAdditional" + @click="toggleAdditionalInfo" + class="my-auto mr-1 text-info pointer" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-if="entry.id !== showAdditional" + @click="toggleAdditionalInfo" + class="my-auto mr-1 text-info pointer" + icon="angle-right" + fixed-width + ></font-awesome-icon> + <span class="text-info"><translate>Additional Info</translate></span> + </div> + <AdditionalDetail + v-if="entry.id === showAdditional" + class="ml-2 d-flex flex-row" + ></AdditionalDetail> + <div class="d-flex fex-row"> + <font-awesome-icon + v-if="entry.id === showLogs" + @click="toggleAdditionalLogging" + class="my-auto mr-1 text-info pointer" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-if="entry.id !== showLogs" + @click="toggleAdditionalLogging" + class="my-auto mr-1 text-info pointer" + icon="angle-right" + fixed-width + ></font-awesome-icon> + <span class="text-info"><translate>Additional Logs</translate></span> + </div> + + <AdditionalLog + v-if="entry.id === showLogs" + class="ml-2 d-flex flex-row" + ></AdditionalLog> </div> </template> @@ -18,10 +60,36 @@ * Author(s): * Thomas Junk <thomas.junk@intevation.de> */ + +import { mapState } from "vuex"; + export default { name: "logdetail", - props: ["entry"] + props: ["entry"], + components: { + AdditionalDetail: () => import("./AdditionalDetail.vue"), + AdditionalLog: () => import("./AdditionalLog.vue") + }, + methods: { + toggleAdditionalInfo() { + if (this.entry.id === this.showAdditional) { + this.$store.commit("imports/hideAdditionalInfo"); + } else { + this.$store.commit("imports/showAdditionalInfoFor", this.entry.id); + } + }, + toggleAdditionalLogging() { + if (this.entry.id === this.showLogs) { + this.$store.commit("imports/hideAdditionalLogs"); + } else { + this.$store.commit("imports/showAdditionalLogsFor", this.entry.id); + } + } + }, + computed: { + ...mapState("imports", ["showAdditional", "showLogs"]) + } }; </script> -<style></style> +<style lang="scss" scoped></style>