@afeefa/vue-app 0.0.350 → 0.0.352

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.350
+0.0.352

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.350",
+  "version": "0.0.352",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src-admin/components/App.vue

@@ -5,6 +5,10 @@
       class="impersonationBanner"
     >
       Angemeldet als {{ impersonatedAccountTitle }}
+      <a
+        class="impersonationBanner-exit ml-2"
+        @click="$auth.logout()"
+      >abmelden</a>
     </div>
 
     <v-overlay
@@ -266,4 +270,11 @@ export default class App extends Vue {
   white-space: nowrap;
 }
 
+.impersonationBanner-exit {
+  color: white;
+  font-weight: normal;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 </style>

package/src-admin/components/model/ModelCount.vue

@@ -1,21 +1,21 @@
 <template>
   <a-badge
-    color="#EEEEEE"
-    class="black--text"
+    v-if="isVisible"
+    :color="color_"
+    :class="['black--text', { colored: !!color }]"
     inline
     v-bind="$attrs"
     :content="content"
   />
 </template>
 
-
 <script>
 import { Component, Vue } from '@a-vue'
 import { modelCountService } from './ModelCountService'
 import { SaveEvent } from '@a-vue/events'
 
 @Component({
-  props: ['action', 'field', 'count']
+  props: ['action', 'field', 'count', 'color', { hideEmpty: false }]
 })
 export default class ModelCount extends Vue {
   countRequest = null
@@ -32,8 +32,41 @@ export default class ModelCount extends Vue {
     }
   }
 
-  loadCount () {
-    this.content = this.countRequest.get(this.field)
+  async loadCount () {
+    this.content = await this.countRequest.get(this.field)
+  }
+
+  /**
+   * hideEmpty: a badge is an attention marker. A permanent zero next to the
+   * menu entry is noise that readers learn to skip - and then they miss the one.
+   */
+  get isVisible () {
+    if (!this.hideEmpty) {
+      return true
+    }
+
+    return !!Number(this.content)
+  }
+
+  /**
+   * color may be a plain string or a function of the loaded count, so a badge
+   * can signal "something needs attention" without the caller knowing the
+   * number - it is loaded in here.
+   */
+  get color_ () {
+    if (typeof this.color === 'function') {
+      return this.color(Number(this.content))
+    }
+
+    return this.color || '#EEEEEE'
   }
 }
 </script>
+
+<style scoped lang="scss">
+// ABadge paints the badge text grey, which is unreadable on a saturated
+// background. A caller that picks a color gets light text instead.
+.colored :deep(.v-badge__badge) {
+  color: #FFFFFF;
+}
+</style>