From 7b0806a2075d52be604bc085d661615451092f44 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Mar 2022 17:35:55 +0100
Subject: [PATCH] Update some event emitters

---
 client/src/components/HeaderBar.vue           |   4 +-
 client/src/components/UserWidget.vue          | 110 ++++++++++--------
 .../components/school-class/CurrentClass.vue  |  33 +++---
 client/src/directives/click-outside.ts        |  23 ++++
 4 files changed, 105 insertions(+), 65 deletions(-)

diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 8e6fcde4..1f67bbb7 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -14,14 +14,14 @@
       >
         <current-class
           class="user-header__current-class"
-          @click.stop="openSidebar('profile')"
+          @click="openSidebar('profile')"
         />
       </a>
 
       <user-widget
         :avatar-url="me.avatarUrl"
         data-cy="header-user-widget"
-        @click.stop="openSidebar('profile')"
+        @click="openSidebar('profile')"
       />
     </div>
   </header>
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 2c8c8310..f535534a 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -1,70 +1,82 @@
 <template>
-  <div :class="{ 'user-widget--is-profile': isProfile }" class="user-widget">
-    <div class="user-widget__avatar" data-cy="user-widget-avatar">
-      <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
+  <div
+    :class="{'user-widget--is-profile': isProfile}"
+    class="user-widget"
+    @click.stop="$emit('click', $event)"
+  >
+    <div
+      class="user-widget__avatar"
+      data-cy="user-widget-avatar"
+    >
+      <avatar
+        :avatar-url="avatarUrl"
+        :icon-highlighted="isProfile"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import Avatar from '@/components/profile/Avatar';
+  import Avatar from '@/components/profile/Avatar';
 
-export default {
-  props: {
-    avatarUrl: {
-      type: String,
+  export default {
+    props: {
+      avatarUrl: {
+        type: String
+      }
     },
-  },
 
-  components: {
-    Avatar,
-  },
-  computed: {
-    isProfile() {
-      return this.$route.meta.isProfile;
+    emits: ['click'],
+
+    components: {
+      Avatar
     },
-  },
-};
+    computed: {
+      isProfile() {
+        return this.$route.meta.isProfile;
+      }
+    }
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.user-widget {
-  color: $color-silver-dark;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  // todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
-  margin-right: $medium-spacing;
-
-  &__popover {
-    top: 40px;
-    white-space: nowrap;
-  }
-
-  &__name {
-    padding: 0px $small-spacing;
+  .user-widget {
     color: $color-silver-dark;
-    font-family: $sans-serif-font-family;
-  }
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    // todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
+    margin-right: $medium-spacing;
 
-  &__date {
-    font-family: $sans-serif-font-family;
-  }
+    &__popover {
+      top: 40px;
+      white-space: nowrap;
+    }
 
-  &__avatar {
-    width: 30px;
-    height: 30px;
-    fill: $color-silver-dark;
-    cursor: pointer;
-  }
+    &__name {
+      padding: 0px $small-spacing;
+      color: $color-silver-dark;
+      font-family: $sans-serif-font-family;
+    }
 
-  &--is-profile {
-    & > span {
-      color: $color-brand;
+    &__date {
+      font-family: $sans-serif-font-family;
+    }
+
+    &__avatar {
+      width: 30px;
+      height: 30px;
+      fill: $color-silver-dark;
+      cursor: pointer;
+    }
+
+    &--is-profile {
+      & > span {
+        color: $color-brand;
+      }
     }
   }
-}
 </style>
diff --git a/client/src/components/school-class/CurrentClass.vue b/client/src/components/school-class/CurrentClass.vue
index f597a993..1090b872 100644
--- a/client/src/components/school-class/CurrentClass.vue
+++ b/client/src/components/school-class/CurrentClass.vue
@@ -1,24 +1,29 @@
 <template>
-  <span class="current-class" data-cy="current-class-name">{{ currentClassName }}</span>
+  <span
+    class="current-class"
+    data-cy="current-class-name"
+    @click.stop="$emit('click', $event)"
+  >{{ currentClassName }}</span>
 </template>
 
 <script>
-import me from '@/mixins/me';
+  import me from '@/mixins/me';
 
-export default {
-  mixins: [me],
-};
+  export default {
+    emits: ['click'],
+    mixins: [me],
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.current-class {
-  display: flex;
-  flex-direction: column;
-  align-self: center;
-  line-height: 1;
-  @include regular-text;
-}
+  .current-class {
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+    line-height: 1;
+    @include regular-text;
+  }
 </style>
diff --git a/client/src/directives/click-outside.ts b/client/src/directives/click-outside.ts
index accc24ad..af7cb083 100644
--- a/client/src/directives/click-outside.ts
+++ b/client/src/directives/click-outside.ts
@@ -7,6 +7,29 @@ declare global {
   }
 }
 
+/*
+  todo:
+   there is a special interaction with nested elements where the parent has a @click event:
+   the parent triggers the event, something happens, but the click event bubbles to the child element.
+   If the event is then used to open some kind of sidebar or modal that has the `click-outside` propert, t
+   he bubbled event will be outside of it, thereby closing it.
+
+   example:
+   <div
+    class="sidebar"
+    v-if="showSidebar"
+    v-click-outside="showSidebar=false"
+   >
+   ...
+   </div>
+
+   <a class="sidebar-toggle" @click="showSidebar=true">
+     <span>Hello</span>
+   </a>
+
+  FIX:
+   In this example, setting the event on the a-tag as `@click.stop` will solve the problem
+ */
 export default {
   unmounted(el: HTMLElement) {
     document.body.removeEventListener('click', el.clickOutsideEvent);