From 445619db8b6c327e6656e35ec24aec25beab2d6b Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 24 Apr 2019 20:49:52 +0200
Subject: [PATCH] Show cards on event card

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/App.vue                        |  2 ++
 js/src/components/Event/EventCard.vue | 27 ++++++++++++++++++++++++++-
 js/src/graphql/event.ts               |  6 +++++-
 js/src/types/event.model.ts           |  1 +
 js/src/types/tag.model.ts             |  4 ++++
 js/src/variables.scss                 |  9 +++++++++
 6 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 js/src/types/tag.model.ts

diff --git a/js/src/App.vue b/js/src/App.vue
index 69ac8798e..5df5c8f2b 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -76,6 +76,7 @@ export default class App extends Vue {
   @import "~bulma/sass/elements/title.sass";
   @import "~bulma/sass/elements/image.sass";
   @import "~bulma/sass/elements/box.sass";
+  @import "~bulma/sass/elements/tag.sass";
   @import "~bulma/sass/components/navbar.sass";
   @import "~bulma/sass/components/modal.sass";
   @import "~bulma/sass/grid/_all.sass";
@@ -86,6 +87,7 @@ export default class App extends Vue {
   @import "~buefy/src/scss/components/modal";
   @import "~buefy/src/scss/components/form";
   @import "~buefy/src/scss/components/dropdown";
+  @import "~buefy/src/scss/components/tag";
 
 .router-enter-active,
 .router-leave-active {
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 55b0906d1..1fcd23f72 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -2,6 +2,9 @@
   <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
     <div class="card-image" v-if="!event.image">
       <figure class="image is-16by9">
+        <div class="tag-container">
+          <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag>
+        </div>
         <img src="https://picsum.photos/g/400/225/?random">
       </figure>
     </div>
@@ -80,7 +83,7 @@ export default class EventCard extends Vue {
     return { ...this.defaultOptions, ...this.options };
   }
 
-  get actorDisplayName() {
+  get actorDisplayName(): string {
     const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
     return actor.displayName();
   }
@@ -95,6 +98,28 @@ export default class EventCard extends Vue {
     border: none;
     background: $secondary;
 
+    div.tag-container {
+      position: absolute;
+      top: 10px;
+      right: 0;
+      margin-right: -5px;
+      z-index: 10;
+      max-width: 40%;
+
+      span.tag {
+        margin: 5px auto;
+        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
+        /*word-break: break-all;*/
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: block;
+        /*text-align: right;*/
+        font-size: 1em;
+        /*padding: 0 1px;*/
+        line-height: 1.75em;
+      }
+    }
+
     div.card-image {
       background: $secondary;
     }
diff --git a/js/src/graphql/event.ts b/js/src/graphql/event.ts
index 66a1a046a..b2a9c77de 100644
--- a/js/src/graphql/event.ts
+++ b/js/src/graphql/event.ts
@@ -111,7 +111,11 @@ export const FETCH_EVENTS = gql`
       category,
       participants {
         ${participantQuery}
-      }
+      },
+      tags {
+        slug,
+        title
+      },
     }
   }
 `;
diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts
index a243dd67b..c5f9cafbb 100644
--- a/js/src/types/event.model.ts
+++ b/js/src/types/event.model.ts
@@ -1,5 +1,6 @@
 import { Actor, IActor } from './actor.model';
 import { IAddress } from '@/types/address.model';
+import { ITag } from '@/types/tag.model';
 
 export enum EventStatus {
   TENTATIVE,
diff --git a/js/src/types/tag.model.ts b/js/src/types/tag.model.ts
new file mode 100644
index 000000000..1c4a1d01f
--- /dev/null
+++ b/js/src/types/tag.model.ts
@@ -0,0 +1,4 @@
+export interface ITag {
+  slug: string;
+  title: string;
+}
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 8439fd44b..cb109f98d 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -1,5 +1,14 @@
+@import "~bulma/sass/utilities/_all";
+
 $primary: #424056;
+$primary-invert: findColorInvert($primary);
 $secondary: #FAB12D;
+$secondary-invert: findColorInvert($secondary);
+
+$colors: (
+        "primary": ($primary, $primary-invert),
+        "secondary": ($secondary, $secondary-invert),
+);
 
 // Navbar
 $navbar-background-color: $secondary;