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);