From aab8f21a8d8dbed54798af581e6e1ad9e86a4be1 Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Sun, 24 May 2020 17:56:14 +0100
Subject: [PATCH] clicking outside of a card closes it

---
 src/presentation/Scripts/Cards/CardList.vue | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/presentation/Scripts/Cards/CardList.vue b/src/presentation/Scripts/Cards/CardList.vue
index a828af77..78df9b53 100644
--- a/src/presentation/Scripts/Cards/CardList.vue
+++ b/src/presentation/Scripts/Cards/CardList.vue
@@ -4,6 +4,7 @@
       <CardListItem
         class="card"
         v-for="categoryId of categoryIds"
+        :data-category="categoryId"
         v-bind:key="categoryId"
         :categoryId="categoryId"
         :activeCategoryId="activeCategoryId"
@@ -32,6 +33,9 @@ export default class CardList extends StatefulVue {
   public async mounted() {
     const state = await this.getCurrentStateAsync();
     this.setCategories(state.app.categories);
+    this.onOutsideOfActiveCardClicked(() => {
+      this.activeCategoryId = null;
+    });
   }
 
   public onSelected(categoryId: number, isExpanded: boolean) {
@@ -41,7 +45,21 @@ export default class CardList extends StatefulVue {
   private setCategories(categories: ReadonlyArray<ICategory>): void {
     this.categoryIds = categories.map((category) => category.id);
   }
+
+  private onOutsideOfActiveCardClicked(callback) {
+    const outsideClickListener = (event) => {
+      if (!this.activeCategoryId) {
+        return;
+      }
+      const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
+      if (!element.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('click', outsideClickListener);
+  }
 }
+
 </script>
 
 <style scoped lang="scss">