From a4148f139c8c1d9b85742bb37affecbdec7d4608 Mon Sep 17 00:00:00 2001
From: les <lesion@autistici.org>
Date: Fri, 22 Jan 2021 21:14:41 +0100
Subject: [PATCH] render Event card ad funcional component

---
 components/Event.vue | 116 +++++++++++++++++--------------------------
 1 file changed, 46 insertions(+), 70 deletions(-)

diff --git a/components/Event.vue b/components/Event.vue
index 562fac1a..42216634 100644
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -1,94 +1,70 @@
 <template lang="pug" functional>
-  v-card.h-event.event.mt-1
-    template(v-if='props.show')
-      nuxt-link(:to='`/event/${props.event.id}`')
-        v-img.align-end.white--text(:src="`/media/thumb/${props.event.image_path}`"
-          gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.7), rgba(0,0,0,.9)"
-          height="250" position="top top")
-          v-card-title.text-h5.p-name {{props.event.title}}
+  v-card.h-event.event
+    nuxt-link(:to='`/event/${props.event.id}`')
+      v-img.align-end.white--text(:src="`/media/thumb/${props.event.image_path}`"
+        gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.7), rgba(0,0,0,.9)"
+        height="250" position="top top" )
+        v-card-title.text-h6.p-name {{props.event.title}}
 
-      v-card-text
-        v-icon.float-right(v-if='props.event.parentId' color='success') mdi-repeat
-        //- time.text-h6.dt-start(:datetime='props.event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <v-icon>mdi-event</v-icon> {{ event|when }}
-        .d-none.dt-end {{props.event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
-        v-btn.d-block.text-h6.p-location(text color='primary' big @click="$emit('placeclick', props.event.place.id)") <v-icon>mdi-map-marker</v-icon> {{props.event.place.name}}
+    v-card-text.pb-0
+      v-icon.float-right(v-if='props.event.parentId' color='success') mdi-repeat
+      time.dt-start(:datetime='props.event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  {{ props.event|when }}
+      .d-none.dt-end {{props.event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
+      v-btn.place.d-block.p-location(text color='primary' @click="listeners['placeclick'](props.event.place.id)") <v-icon>mdi-map-marker</v-icon> {{props.event.place.name}}
 
-      v-card-actions
-        v-chip.ml-1(v-for='tag in props.event.tags' link
-          :key='tag' outlined color='primary' @click="$emit('tagclick',tag)") {{tag}}
-        v-spacer
+    v-card-actions
+      v-chip.ml-1(v-for='tag in props.event.tags' link small
+        :key='tag' outlined color='primary' @click="listeners['tagclick'](tag)") {{tag}}
+      v-spacer
 
-        v-menu(offset-y)
-          template(v-slot:activator="{on}")
-            v-btn(icon v-on='on' color='primary')
-              v-icon mdi-dots-vertical
-          v-list(dense)
-            v-list-item-group
-              v-list-item(v-clipboard:success='copyLink'
-                    v-clipboard:copy='`${parent.settings.baseurl}/event/${props.event.id}`')
-                v-list-item-icon
-                  v-icon mdi-content-copy
-                v-list-item-content
-                  v-list-item-title {{parent.$t('common.copy_link')}}
-              v-list-item(:href='`/api/event/${props.event.id}.ics`')
-                v-list-item-icon
-                  v-icon mdi-calendar-export
-                v-list-item-content
-                  v-list-item-title {{parent.$t('common.add_to_calendar')}}
+      v-menu(offset-y)
+        template(v-slot:activator="{on}")
+          v-btn(icon v-on='on' color='primary')
+            v-icon mdi-dots-vertical
+        v-list(dense)
+          v-list-item-group
+            v-list-item(v-clipboard:success="() => parent.$root.$message('common.copied', { color: 'success' })"
+                  v-clipboard:copy='`${parent.settings.baseurl}/event/${props.event.id}`')
+              v-list-item-icon
+                v-icon mdi-content-copy
+              v-list-item-content
+                v-list-item-title {{parent.$t('common.copy_link')}}
+            v-list-item(:href='`/api/event/${props.event.id}.ics`')
+              v-list-item-icon
+                v-icon mdi-calendar-export
+              v-list-item-content
+                v-list-item-title {{parent.$t('common.add_to_calendar')}}
 
 </template>
 <script>
-// import { mapState, mapActions } from 'vuex'
 
 export default {
   props: {
-    event: { type: Object, default: () => ({}) },
-    show: { type: Boolean }
+    event: { type: Object, default: () => ({}) }
   }
-  // computed: {
-  //   ...mapState(['settings']),
-  //   show_footer () {
-  //     return (this.event.tags.length || this.event.resources.length)
-  //   }
-  // },
-  // methods: {
-  //   ...mapActions(['setSearchTags', 'setSearchPlaces']),
   //   copyLink () {
   //     this.$root.$message('common.copied', { color: 'success' })
   //   },
-  //   addTag (tag) {
-  //     if (this.filters.tags.includes(tag)) {
-  //       this.setSearchTags(this.filters.tags.filter(t => t !== tag))
-  //     } else {
-  //       this.setSearchTags(this.filters.tags.concat([tag]))
-  //     }
-  //   },
-  //   addPlace () {
-  //     const place = this.event.place.id
-  //     if (this.filters.places.includes(place)) {
-  //       this.setSearchPlaces(this.filters.places.filter(p => p !== place))
-  //     } else {
-  //       this.setSearchPlaces(this.filters.places.concat(place))
-  //     }
-  //   }
-  // }
 }
 </script>
 <style lang="less">
 .event {
   width: 330px;
-  height: 370px;
-  max-width: 450px;
+  height: 380px;
+  max-width: 500px;
   flex-grow: 1;
-  margin: .2em;
-  // background-color: #202020;
-  // overflow: hidden;
-  .title {
-    line-height: 1.2em;
-    max-height: 2.4em;
-    overflow: hidden;
-  }
+  margin-top: .2em;
+  margin-left: .2em;
 
+  .place {
+    max-width: 100%;
+    span {
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
   a {
     text-decoration: none;
   }