Mercurial > gemma
comparison client/src/components/Sidebar.vue @ 2651:9f3856337f55
import_overview: new unified interface as default
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 14 Mar 2019 14:53:17 +0100 |
parents | 472b0e653644 |
children | 906e9a13592f |
comparison
equal
deleted
inserted
replaced
2650:a308baa7e7af | 2651:9f3856337f55 |
---|---|
1 <template> | 1 <template> |
2 <div class="position-relative"> | 2 <div class="position-relative"> |
3 <span class="indicator" v-if="!showSidebar && staging.length"> | 3 <span class="indicator" v-if="!showSidebar && stagingNotifications"> |
4 {{ staging.length }} | 4 {{ stagingNotifications }} |
5 </span> | 5 </span> |
6 <div :class="sidebarStyle"> | 6 <div :class="sidebarStyle"> |
7 <div | 7 <div |
8 @click="$store.commit('application/showSidebar', !showSidebar)" | 8 @click="$store.commit('application/showSidebar', !showSidebar)" |
9 class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" | 9 class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" |
33 class="fa-fw mr-2" | 33 class="fa-fw mr-2" |
34 fixed-width | 34 fixed-width |
35 icon="clipboard-check" | 35 icon="clipboard-check" |
36 ></font-awesome-icon> | 36 ></font-awesome-icon> |
37 <span class="fix-trans-space" v-translate>Staging area</span> | 37 <span class="fix-trans-space" v-translate>Staging area</span> |
38 <span class="indicator" v-if="showSidebar && staging.length"> | 38 <span class="indicator" v-if="showSidebar && stagingNotifications"> |
39 {{ staging.length }} | 39 {{ stagingNotifications }} |
40 </span> | 40 </span> |
41 </router-link> | 41 </router-link> |
42 </div> | 42 </div> |
43 <div v-if="isSysAdmin"> | 43 <div v-if="isSysAdmin"> |
44 <router-link to="/stretches"> | 44 <router-link to="/stretches"> |
152 * Markus Kottländer <markus.kottlaender@intevation.de> | 152 * Markus Kottländer <markus.kottlaender@intevation.de> |
153 */ | 153 */ |
154 import { mapGetters, mapState } from "vuex"; | 154 import { mapGetters, mapState } from "vuex"; |
155 import { logOff } from "@/lib/session.js"; | 155 import { logOff } from "@/lib/session.js"; |
156 import { displayError } from "@/lib/errors"; | 156 import { displayError } from "@/lib/errors"; |
157 import { HTTP } from "@/lib/http"; | |
157 | 158 |
158 export default { | 159 export default { |
159 name: "sidebar", | 160 name: "sidebar", |
160 props: ["routeName"], | 161 props: ["routeName"], |
162 data() { | |
163 return { | |
164 stagingNotifications: null | |
165 }; | |
166 }, | |
161 computed: { | 167 computed: { |
162 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), | 168 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), |
163 ...mapState("user", ["user"]), | 169 ...mapState("user", ["user"]), |
164 ...mapState("imports", ["staging"]), | |
165 ...mapState("application", [ | 170 ...mapState("application", [ |
166 "showSidebar", | 171 "showSidebar", |
167 "showSearchbarLastState", | 172 "showSearchbarLastState", |
168 "contextBoxContent", | 173 "contextBoxContent", |
169 "showContextBox" | 174 "showContextBox" |
195 this.contextBoxContent === item && | 200 this.contextBoxContent === item && |
196 this.routeName == "mainview" | 201 this.routeName == "mainview" |
197 ); | 202 ); |
198 }, | 203 }, |
199 updateIndicators() { | 204 updateIndicators() { |
200 this.$store.dispatch("imports/getStaging").catch(error => { | 205 this.$store; |
201 const { status, data } = error.response; | 206 HTTP.get("/imports?states=pending", { |
202 displayError({ | 207 headers: { "X-Gemma-Auth": localStorage.getItem("token") } |
203 title: "Backend Error", | 208 }) |
204 message: `${status}: ${data.message || data}` | 209 .then(response => { |
210 const { imports } = response.data; | |
211 this.stagingNotifications = imports.length; | |
212 }) | |
213 .catch(error => { | |
214 const { status, data } = error.response; | |
215 displayError({ | |
216 title: "Backend Error", | |
217 message: `${status}: ${data.message || data}` | |
218 }); | |
205 }); | 219 }); |
206 }); | |
207 } | 220 } |
208 }, | 221 }, |
209 mounted() { | 222 mounted() { |
210 this.updateIndicators(); | 223 this.updateIndicators(); |
211 setInterval(this.updateIndicators, 15000); | 224 setInterval(this.updateIndicators, 15000); |