# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1551080147 -3600
# Node ID c28971cd70ce573249bb5e5729002bd3354657a4
# Parent  99274fed6f3d9c665beefe79397400f01cd4aea4
client: indicator for imports waiting for review

The main menu button and the staging area menu item now show an indicator for open imports

diff -r 99274fed6f3d -r c28971cd70ce client/src/components/Sidebar.vue
--- a/client/src/components/Sidebar.vue	Fri Feb 22 18:02:23 2019 +0100
+++ b/client/src/components/Sidebar.vue	Mon Feb 25 08:35:47 2019 +0100
@@ -1,143 +1,151 @@
 <template>
-  <div :class="sidebarStyle">
-    <div
-      @click="$store.commit('application/showSidebar', !showSidebar)"
-      class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center"
-    >
-      <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon>
-    </div>
-    <div class="menu text-nowrap text-left">
-      <router-link to="/">
-        <font-awesome-icon
-          class="fa-fw mr-2"
-          fixed-width
-          icon="map-marked-alt"
-        ></font-awesome-icon>
-        <span class="fix-trans-space" v-translate>Map</span>
-      </router-link>
-      <router-link to="/bottlenecks">
-        <font-awesome-icon
-          class="fa-fw mr-2"
-          fixed-width
-          icon="ship"
-        ></font-awesome-icon>
-        <span class="fix-trans-space" v-translate>Bottlenecks</span>
-      </router-link>
-      <div v-if="isWaterwayAdmin">
-        <router-link to="/review">
+  <div class="position-relative">
+    <span class="indicator" v-if="!showSidebar && staging.length">
+      {{ staging.length }}
+    </span>
+    <div :class="sidebarStyle">
+      <div
+        @click="$store.commit('application/showSidebar', !showSidebar)"
+        class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center"
+      >
+        <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon>
+      </div>
+      <div class="menu text-nowrap text-left">
+        <router-link to="/">
           <font-awesome-icon
             class="fa-fw mr-2"
             fixed-width
-            icon="clipboard-check"
+            icon="map-marked-alt"
           ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate>Staging area</span>
-        </router-link>
-      </div>
-      <div v-if="isSysAdmin">
-        <router-link to="/stretches">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="road"
-          ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate>Define stretches</span>
+          <span class="fix-trans-space" v-translate>Map</span>
         </router-link>
-      </div>
-      <div v-if="isWaterwayAdmin">
-        <small class="text-muted pl-3"> <translate>Import</translate> </small>
-        <hr class="m-0" />
-        <router-link to="/importsoundingresults">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="upload"
-          ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate
-            >Import soundingresults</span
-          >
-        </router-link>
-        <router-link to="/importapprovedgaugemeasurement">
+        <router-link to="/bottlenecks">
           <font-awesome-icon
             class="fa-fw mr-2"
             fixed-width
-            icon="upload"
+            icon="ship"
           ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate
-            >Import approved gaugemeasurements</span
-          >
-        </router-link>
-        <router-link to="/importwaterwayprofiles">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="upload"
-          ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate
-            >Import waterway profiles</span
-          >
+          <span class="fix-trans-space" v-translate>Bottlenecks</span>
         </router-link>
-        <router-link to="/importschedule">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="clock"
-          ></font-awesome-icon>
-          <translate class="fix-trans-space">Imports</translate>
-        </router-link>
-        <small class="text-muted pl-3">
-          <translate>Systemadministration</translate>
-        </small>
+        <div v-if="isWaterwayAdmin">
+          <router-link to="/review" class="position-relative">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="clipboard-check"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate>Staging area</span>
+            <span class="indicator" v-if="showSidebar && staging.length">
+              {{ staging.length }}
+            </span>
+          </router-link>
+        </div>
+        <div v-if="isSysAdmin">
+          <router-link to="/stretches">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="road"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate>Define stretches</span>
+          </router-link>
+        </div>
+        <div v-if="isWaterwayAdmin">
+          <small class="text-muted pl-3"> <translate>Import</translate> </small>
+          <hr class="m-0" />
+          <router-link to="/importsoundingresults">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="upload"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate
+              >Import soundingresults</span
+            >
+          </router-link>
+          <router-link to="/importapprovedgaugemeasurement">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="upload"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate
+              >Import approved gaugemeasurements</span
+            >
+          </router-link>
+          <router-link to="/importwaterwayprofiles">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="upload"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate
+              >Import waterway profiles</span
+            >
+          </router-link>
+          <router-link to="/importschedule">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="clock"
+            ></font-awesome-icon>
+            <translate class="fix-trans-space">Imports</translate>
+          </router-link>
+          <small class="text-muted pl-3">
+            <translate>Systemadministration</translate>
+          </small>
+          <hr class="m-0" />
+        </div>
+        <div v-if="isSysAdmin">
+          <router-link to="/usermanagement">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="users-cog"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate>Users</span>
+          </router-link>
+        </div>
+        <div v-if="isWaterwayAdmin">
+          <router-link to="/systemconfiguration">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="wrench"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate>Configuration</span>
+          </router-link>
+        </div>
+        <div v-if="isSysAdmin">
+          <router-link to="/logs">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="book"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate>Logs</span>
+          </router-link>
+        </div>
+        <div v-if="isWaterwayAdmin">
+          <router-link to="/importqueue">
+            <font-awesome-icon
+              class="fa-fw mr-2"
+              fixed-width
+              icon="tasks"
+            ></font-awesome-icon>
+            <span class="fix-trans-space" v-translate>Importqueue</span>
+          </router-link>
+        </div>
         <hr class="m-0" />
-      </div>
-      <div v-if="isSysAdmin">
-        <router-link to="/usermanagement">
+        <a @click="logoff" href="#" class="logout">
           <font-awesome-icon
             class="fa-fw mr-2"
             fixed-width
-            icon="users-cog"
-          ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate>Users</span>
-        </router-link>
-      </div>
-      <div v-if="isWaterwayAdmin">
-        <router-link to="/systemconfiguration">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="wrench"
-          ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate>Configuration</span>
-        </router-link>
-      </div>
-      <div v-if="isSysAdmin">
-        <router-link to="/logs">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="book"
+            icon="power-off"
           ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate>Logs</span>
-        </router-link>
+          <span class="fix-trans-space" v-translate>Logout</span> {{ user }}
+        </a>
       </div>
-      <div v-if="isWaterwayAdmin">
-        <router-link to="/importqueue">
-          <font-awesome-icon
-            class="fa-fw mr-2"
-            fixed-width
-            icon="tasks"
-          ></font-awesome-icon>
-          <span class="fix-trans-space" v-translate>Importqueue</span>
-        </router-link>
-      </div>
-      <hr class="m-0" />
-      <a @click="logoff" href="#" class="logout">
-        <font-awesome-icon
-          class="fa-fw mr-2"
-          fixed-width
-          icon="power-off"
-        ></font-awesome-icon>
-        <span class="fix-trans-space" v-translate>Logout</span> {{ user }}
-      </a>
     </div>
   </div>
 </template>
@@ -166,6 +174,7 @@
   computed: {
     ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]),
     ...mapState("user", ["user"]),
+    ...mapState("imports", ["staging"]),
     ...mapState("application", [
       "showSidebar",
       "showSearchbarLastState",
@@ -213,12 +222,32 @@
   color: #666;
 }
 
+.indicator {
+  font-size: 11px;
+  line-height: 11px;
+  padding: 2px 4px 1px;
+  position: absolute;
+  top: 18px;
+  left: 0px;
+  z-index: 10;
+  color: #fff;
+  background: #17a2b8;
+  border-top-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
 .menu a {
   display: block;
   text-align: left;
   padding: 0.5rem 1rem;
   color: #333;
   text-decoration: none;
+  .indicator {
+    left: auto;
+    right: 10px;
+    top: 10px;
+    border-radius: 0.25rem;
+  }
 }
 
 .menu a svg path {