comparison client/src/components/Sidebar.vue @ 2382:c28971cd70ce

client: indicator for imports waiting for review The main menu button and the staging area menu item now show an indicator for open imports
author Markus Kottlaender <markus@intevation.de>
date Mon, 25 Feb 2019 08:35:47 +0100
parents eebe0a8ddc82
children 8d025f85a3fe
comparison
equal deleted inserted replaced
2381:99274fed6f3d 2382:c28971cd70ce
1 <template> 1 <template>
2 <div :class="sidebarStyle"> 2 <div class="position-relative">
3 <div 3 <span class="indicator" v-if="!showSidebar && staging.length">
4 @click="$store.commit('application/showSidebar', !showSidebar)" 4 {{ staging.length }}
5 class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" 5 </span>
6 > 6 <div :class="sidebarStyle">
7 <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon> 7 <div
8 </div> 8 @click="$store.commit('application/showSidebar', !showSidebar)"
9 <div class="menu text-nowrap text-left"> 9 class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center"
10 <router-link to="/"> 10 >
11 <font-awesome-icon 11 <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon>
12 class="fa-fw mr-2" 12 </div>
13 fixed-width 13 <div class="menu text-nowrap text-left">
14 icon="map-marked-alt" 14 <router-link to="/">
15 ></font-awesome-icon>
16 <span class="fix-trans-space" v-translate>Map</span>
17 </router-link>
18 <router-link to="/bottlenecks">
19 <font-awesome-icon
20 class="fa-fw mr-2"
21 fixed-width
22 icon="ship"
23 ></font-awesome-icon>
24 <span class="fix-trans-space" v-translate>Bottlenecks</span>
25 </router-link>
26 <div v-if="isWaterwayAdmin">
27 <router-link to="/review">
28 <font-awesome-icon 15 <font-awesome-icon
29 class="fa-fw mr-2" 16 class="fa-fw mr-2"
30 fixed-width 17 fixed-width
31 icon="clipboard-check" 18 icon="map-marked-alt"
32 ></font-awesome-icon> 19 ></font-awesome-icon>
33 <span class="fix-trans-space" v-translate>Staging area</span> 20 <span class="fix-trans-space" v-translate>Map</span>
34 </router-link> 21 </router-link>
35 </div> 22 <router-link to="/bottlenecks">
36 <div v-if="isSysAdmin">
37 <router-link to="/stretches">
38 <font-awesome-icon 23 <font-awesome-icon
39 class="fa-fw mr-2" 24 class="fa-fw mr-2"
40 fixed-width 25 fixed-width
41 icon="road" 26 icon="ship"
42 ></font-awesome-icon> 27 ></font-awesome-icon>
43 <span class="fix-trans-space" v-translate>Define stretches</span> 28 <span class="fix-trans-space" v-translate>Bottlenecks</span>
44 </router-link> 29 </router-link>
45 </div> 30 <div v-if="isWaterwayAdmin">
46 <div v-if="isWaterwayAdmin"> 31 <router-link to="/review" class="position-relative">
47 <small class="text-muted pl-3"> <translate>Import</translate> </small> 32 <font-awesome-icon
33 class="fa-fw mr-2"
34 fixed-width
35 icon="clipboard-check"
36 ></font-awesome-icon>
37 <span class="fix-trans-space" v-translate>Staging area</span>
38 <span class="indicator" v-if="showSidebar && staging.length">
39 {{ staging.length }}
40 </span>
41 </router-link>
42 </div>
43 <div v-if="isSysAdmin">
44 <router-link to="/stretches">
45 <font-awesome-icon
46 class="fa-fw mr-2"
47 fixed-width
48 icon="road"
49 ></font-awesome-icon>
50 <span class="fix-trans-space" v-translate>Define stretches</span>
51 </router-link>
52 </div>
53 <div v-if="isWaterwayAdmin">
54 <small class="text-muted pl-3"> <translate>Import</translate> </small>
55 <hr class="m-0" />
56 <router-link to="/importsoundingresults">
57 <font-awesome-icon
58 class="fa-fw mr-2"
59 fixed-width
60 icon="upload"
61 ></font-awesome-icon>
62 <span class="fix-trans-space" v-translate
63 >Import soundingresults</span
64 >
65 </router-link>
66 <router-link to="/importapprovedgaugemeasurement">
67 <font-awesome-icon
68 class="fa-fw mr-2"
69 fixed-width
70 icon="upload"
71 ></font-awesome-icon>
72 <span class="fix-trans-space" v-translate
73 >Import approved gaugemeasurements</span
74 >
75 </router-link>
76 <router-link to="/importwaterwayprofiles">
77 <font-awesome-icon
78 class="fa-fw mr-2"
79 fixed-width
80 icon="upload"
81 ></font-awesome-icon>
82 <span class="fix-trans-space" v-translate
83 >Import waterway profiles</span
84 >
85 </router-link>
86 <router-link to="/importschedule">
87 <font-awesome-icon
88 class="fa-fw mr-2"
89 fixed-width
90 icon="clock"
91 ></font-awesome-icon>
92 <translate class="fix-trans-space">Imports</translate>
93 </router-link>
94 <small class="text-muted pl-3">
95 <translate>Systemadministration</translate>
96 </small>
97 <hr class="m-0" />
98 </div>
99 <div v-if="isSysAdmin">
100 <router-link to="/usermanagement">
101 <font-awesome-icon
102 class="fa-fw mr-2"
103 fixed-width
104 icon="users-cog"
105 ></font-awesome-icon>
106 <span class="fix-trans-space" v-translate>Users</span>
107 </router-link>
108 </div>
109 <div v-if="isWaterwayAdmin">
110 <router-link to="/systemconfiguration">
111 <font-awesome-icon
112 class="fa-fw mr-2"
113 fixed-width
114 icon="wrench"
115 ></font-awesome-icon>
116 <span class="fix-trans-space" v-translate>Configuration</span>
117 </router-link>
118 </div>
119 <div v-if="isSysAdmin">
120 <router-link to="/logs">
121 <font-awesome-icon
122 class="fa-fw mr-2"
123 fixed-width
124 icon="book"
125 ></font-awesome-icon>
126 <span class="fix-trans-space" v-translate>Logs</span>
127 </router-link>
128 </div>
129 <div v-if="isWaterwayAdmin">
130 <router-link to="/importqueue">
131 <font-awesome-icon
132 class="fa-fw mr-2"
133 fixed-width
134 icon="tasks"
135 ></font-awesome-icon>
136 <span class="fix-trans-space" v-translate>Importqueue</span>
137 </router-link>
138 </div>
48 <hr class="m-0" /> 139 <hr class="m-0" />
49 <router-link to="/importsoundingresults"> 140 <a @click="logoff" href="#" class="logout">
50 <font-awesome-icon 141 <font-awesome-icon
51 class="fa-fw mr-2" 142 class="fa-fw mr-2"
52 fixed-width 143 fixed-width
53 icon="upload" 144 icon="power-off"
54 ></font-awesome-icon> 145 ></font-awesome-icon>
55 <span class="fix-trans-space" v-translate 146 <span class="fix-trans-space" v-translate>Logout</span> {{ user }}
56 >Import soundingresults</span 147 </a>
57 >
58 </router-link>
59 <router-link to="/importapprovedgaugemeasurement">
60 <font-awesome-icon
61 class="fa-fw mr-2"
62 fixed-width
63 icon="upload"
64 ></font-awesome-icon>
65 <span class="fix-trans-space" v-translate
66 >Import approved gaugemeasurements</span
67 >
68 </router-link>
69 <router-link to="/importwaterwayprofiles">
70 <font-awesome-icon
71 class="fa-fw mr-2"
72 fixed-width
73 icon="upload"
74 ></font-awesome-icon>
75 <span class="fix-trans-space" v-translate
76 >Import waterway profiles</span
77 >
78 </router-link>
79 <router-link to="/importschedule">
80 <font-awesome-icon
81 class="fa-fw mr-2"
82 fixed-width
83 icon="clock"
84 ></font-awesome-icon>
85 <translate class="fix-trans-space">Imports</translate>
86 </router-link>
87 <small class="text-muted pl-3">
88 <translate>Systemadministration</translate>
89 </small>
90 <hr class="m-0" />
91 </div> 148 </div>
92 <div v-if="isSysAdmin">
93 <router-link to="/usermanagement">
94 <font-awesome-icon
95 class="fa-fw mr-2"
96 fixed-width
97 icon="users-cog"
98 ></font-awesome-icon>
99 <span class="fix-trans-space" v-translate>Users</span>
100 </router-link>
101 </div>
102 <div v-if="isWaterwayAdmin">
103 <router-link to="/systemconfiguration">
104 <font-awesome-icon
105 class="fa-fw mr-2"
106 fixed-width
107 icon="wrench"
108 ></font-awesome-icon>
109 <span class="fix-trans-space" v-translate>Configuration</span>
110 </router-link>
111 </div>
112 <div v-if="isSysAdmin">
113 <router-link to="/logs">
114 <font-awesome-icon
115 class="fa-fw mr-2"
116 fixed-width
117 icon="book"
118 ></font-awesome-icon>
119 <span class="fix-trans-space" v-translate>Logs</span>
120 </router-link>
121 </div>
122 <div v-if="isWaterwayAdmin">
123 <router-link to="/importqueue">
124 <font-awesome-icon
125 class="fa-fw mr-2"
126 fixed-width
127 icon="tasks"
128 ></font-awesome-icon>
129 <span class="fix-trans-space" v-translate>Importqueue</span>
130 </router-link>
131 </div>
132 <hr class="m-0" />
133 <a @click="logoff" href="#" class="logout">
134 <font-awesome-icon
135 class="fa-fw mr-2"
136 fixed-width
137 icon="power-off"
138 ></font-awesome-icon>
139 <span class="fix-trans-space" v-translate>Logout</span> {{ user }}
140 </a>
141 </div> 149 </div>
142 </div> 150 </div>
143 </template> 151 </template>
144 152
145 <script> 153 <script>
164 name: "sidebar", 172 name: "sidebar",
165 props: ["routeName"], 173 props: ["routeName"],
166 computed: { 174 computed: {
167 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), 175 ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]),
168 ...mapState("user", ["user"]), 176 ...mapState("user", ["user"]),
177 ...mapState("imports", ["staging"]),
169 ...mapState("application", [ 178 ...mapState("application", [
170 "showSidebar", 179 "showSidebar",
171 "showSearchbarLastState", 180 "showSearchbarLastState",
172 "contextBoxContent", 181 "contextBoxContent",
173 "showContextBox" 182 "showContextBox"
211 top: 0; 220 top: 0;
212 left: 0; 221 left: 0;
213 color: #666; 222 color: #666;
214 } 223 }
215 224
225 .indicator {
226 font-size: 11px;
227 line-height: 11px;
228 padding: 2px 4px 1px;
229 position: absolute;
230 top: 18px;
231 left: 0px;
232 z-index: 10;
233 color: #fff;
234 background: #17a2b8;
235 border-top-right-radius: 0.25rem;
236 border-bottom-left-radius: 0.25rem;
237 }
238
216 .menu a { 239 .menu a {
217 display: block; 240 display: block;
218 text-align: left; 241 text-align: left;
219 padding: 0.5rem 1rem; 242 padding: 0.5rem 1rem;
220 color: #333; 243 color: #333;
221 text-decoration: none; 244 text-decoration: none;
245 .indicator {
246 left: auto;
247 right: 10px;
248 top: 10px;
249 border-radius: 0.25rem;
250 }
222 } 251 }
223 252
224 .menu a svg path { 253 .menu a svg path {
225 fill: #666; 254 fill: #666;
226 } 255 }