start a better events selection

2020-10-17 00:41:21 +02:00
parent b80eb3f6e3
commit 3f892f7f4a
18 changed files with 199 additions and 266 deletions
--- a/components/Calendar.vue
+++ b/components/Calendar.vue
@@ -19,6 +19,9 @@ import { take, get } from 'lodash'

 export default {
  name: 'Calendar',
+  props: {
+    events: { type: Array, default: [] }
+  },
  data () {
    const month = dayjs().month() + 1
    const year = dayjs().year()
@@ -27,7 +30,6 @@ export default {
    }
  },
  computed: {
-    ...mapGetters(['filteredEventsWithPast']),
    ...mapState(['tags', 'filters', 'in_past', 'settings']),

    // TODO: could be better
@@ -48,7 +50,7 @@ export default {
        return color
      }

-      attributes = attributes.concat(this.filteredEventsWithPast
+      attributes = attributes.concat(this.events
        .filter(e => !e.multidate)
        .map(e => {
          return {
@@ -58,7 +60,7 @@ export default {
          }
        }))

-      attributes = attributes.concat(this.filteredEventsWithPast
+      attributes = attributes.concat(this.events
        .filter(e => e.multidate)
        .map(e => ({
          key: e.id,
@@ -72,11 +74,12 @@ export default {
  methods: {
    ...mapActions(['updateEvents', 'showPastEvents']),
    updatePage (page) {
-      this.updateEvents(page)
+      this.$emit('monthchange', page)
    },
    click (day) {
-      const element = document.getElementById(day.day)
-      if (element) { element.scrollIntoView() } // Even IE6 supports this
+      this.$emit('dayclick', day)
+      // const element = document.getElementById(day.day)
+      // if (element) { element.scrollIntoView() } // Even IE6 supports this
    }
  }
 }
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -9,11 +9,11 @@
    v-card-text
      
      time.text-h6(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')  <v-icon>mdi-event</v-icon> {{ event|when }}
-      v-btn.d-block.text-h6(text color='primary' big) <v-icon>mdi-map-marker</v-icon> {{event.place.name}}
+      v-btn.d-block.text-h6(text color='primary' big @click="$emit('placeclick', event.place.id)") <v-icon>mdi-map-marker</v-icon> {{event.place.name}}

    v-card-actions
      v-chip.ml-1(v-for='tag in event.tags' link
-        :key='tag' outlined color='primary' @click='addTag(tag)') {{tag}}
+        :key='tag' outlined color='primary' @click="$emit('tagclick',tag)") {{tag}}
      v-spacer

      v-menu(offset-y)
@@ -31,20 +31,9 @@ import { mapState, mapActions } from 'vuex'
 export default {
  props: {
    event: { type: Object, default: () => ({}) },
-    showTags: {
-      type: Boolean,
-      default: true
-    },
-    showImage: {
-      type: Boolean,
-      default: true
-    }
  },
  computed: {
-    ...mapState(['settings', 'filters']),
-    description () {
-      return this.event.description.replace(/(<br>)+/g, '<br>')
-    },
+    ...mapState(['settings']),
    show_footer () {
      return (this.event.tags.length || this.event.resources.length)
    }
--- a/components/Home.vue
+++ b/components/Home.vue
@@ -10,18 +10,26 @@
        //- this is needed as v-calendar does not support SSR
        //- https://github.com/nathanreyes/v-calendar/issues/336
        client-only
-          Calendar
+          Calendar(@dayclick='dayClick' 
+            @monthchange='monthChange' :events='events')

      .col
-        Search
+        Search(
+          :filters='filters'
+          @update='updateFilters'
+        )

+    .text-h3.text-center(v-if='selectedDay') {{selectedDay|day}}
    #events
-      Event(v-for='event in events' :key='event.id' :event='event')
+      Event(v-for='event in events'
+        :key='event.id' :event='event' 
+          @tagclick='tagClick' @placeclick='placeClick')

 </template>

 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
+import dayjs from 'dayjs'
 import Event from '@/components/Event'
 import Announcement from '@/components/Announcement'
 import Calendar from '@/components/Calendar'
@@ -29,13 +37,66 @@ import Search from '@/components/Search'

 export default {
  name: 'Home',
+  data () {
+    return {
+      events: [],
+      start: null,
+      end: null,
+      filters: { tags: [], places: []},
+      selectedDay: null
+    }
+  },
  components: { Calendar, Event, Search, Announcement },
  computed: {
-    events () {
-      return this.in_past ? this.filteredEventsWithPast : this.filteredEvents
+    ...mapState(['settings', 'announcements'])
+  },
+  methods: {
+    ...mapActions(['setFilters']),
+    async updateEvents () {
+      this.events = await this.$api.getEvents({
+        start: this.start, end: this.end,
+        places: this.filters.places, tags: this.filters.tags
+      })
+      this.setFilters(this.filters)
    },
-    ...mapGetters(['filteredEvents', 'filteredEventsWithPast']),
-    ...mapState(['settings', 'in_past', 'announcements'])
+    placeClick (place_id) {
+      if (this.filters.places.includes(place_id)) {
+        this.filters.places = this.filters.places.filter(p_id => p_id !== place_id)
+      } else {
+        this.filters.places.push(place_id)
+      }
+      this.updateEvents()
+    },
+    tagClick (tag) {
+      if (this.filters.tags.includes(tag)) {
+        this.filters.tags = this.filters.tags.filter(t => t !== tag)
+      } else {
+        this.filters.tags.push(tag)
+      }
+      this.updateEvents()
+    },
+    updateFilters (filters) {
+      this.filters = filters
+      this.updateEvents()
+    },
+    monthChange (page) {
+      this.start = dayjs().year(page.year).month(page.month - 1).startOf('month').startOf('week').unix()
+      this.end = dayjs().year(page.year).month(page.month - 1).endOf('month').endOf('week').unix()
+      this.updateEvents ()
+    },
+    async dayClick (day) {
+      const datetime = day.dateTime / 1000
+      if (this.selectedDay === datetime) {
+        this.selectedDay = null
+        this.updateEvents()
+        return
+      }
+      this.selectedDay = datetime
+      this.events = await this.$api.getEvents({
+        start: this.selectedDay,
+        end: this.selectedDay+24*60*60
+      })
+    }
  },
  head () {
    return {
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -77,8 +77,8 @@ export default {
  computed: {
    ...mapState(['filters', 'settings']),
    feedLink () {
-      const tags = this.filters.tags.join(',')
-      const places = this.filters.places.join(',')
+      const tags = this.filters.tags && this.filters.tags.join(',')
+      const places = this.filters.places && this.filters.places.join(',')
      let query = ''
      if (tags || places) {
        query = '?'
--- a/components/Search.vue
+++ b/components/Search.vue
@@ -4,28 +4,27 @@
      v-if='recurrentFilter && settings.allow_recurrent_event'
      inset color='primary'
      :label="$t('event.show_recurrent')"
-      v-model='showRecurrent')
+      @change="v => $emit('showrecurrent', v)")

    v-switch.mt-0(
      v-if='pastFilter' inset color='primary'
      :label="$t('event.show_past')"
-      v-model='showPast')
+      @change="v => $emit('showpast', v)")

    v-autocomplete.mt-0(
      :label='$t("common.search")'
      :items='keywords'
-      v-model='filter'
+      @change='change'
+      :value='selectedFilters'
+      clearable
      :search-input.sync='search'
      item-text='label'
-      item-value='id'
-      chips rounded outlined single-line
+      return-object
+      chips single-line
      multiple)
      template(v-slot:selection="data")
        v-chip(v-bind="data.attrs"
-          :input-value="data.selected"
-          close
-          @click="data.select"
-          @click:close="remove(data.item)")
+          :input-value="data.selected")
          v-avatar(left)
            v-icon {{data.item.type === 'place' ? 'mdi-map-marker' : 'mdi-tag' }}
          span {{ data.item.label }}
@@ -41,8 +40,9 @@ import { mapState, mapActions } from 'vuex'
 export default {
  name: 'Search',
  props: {
-    pastFilter: Boolean,
-    recurrentFilter: Boolean
+    pastFilter: { type: Boolean, default: true },
+    recurrentFilter: { type: Boolean, default: true },
+    filters: { type: Object, default: () => {} }
  },
  data () {
    return {
@@ -51,80 +51,29 @@ export default {
    }
  },
  computed: {
-    filter: {
-      set (value) {
-        console.error('set', value)
-        this.tmpfilter = value
-      },
-      get () {
-        // console.error('dentro get')
-        // const tags = this.filters.tags.map(t => t.tag)// ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
-        // const places = this.filters.places.map(p => p.name) //({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
-        // const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
-        // const ret = tags.concat(places)
-        // console.error(ret)
-        return this.tmpfilter
-        // const ret = this.filters.tags
-        // console.error(ret)
-        // return ret
-        // return ['ciao']
-      }
-    },
-    ...mapState(['tags', 'places', 'filters', 'settings']),
-    // selectedPlaces () {
-    //   return this.places.filter(p => this.filters.places.includes(p.id))
-    // },
-    keywords () {
-      const tags = this.tags.filter(t => !this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
-      const places = this.places.filter(p => !this.filters.places.includes(p.id))
+    ...mapState(['tags', 'places', , 'settings']),
+    selectedFilters () {
+      const tags = this.tags.filter(t => this.filters.tags.includes(t.tag)).map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
+      const places = this.places.filter(p => this.filters.places.includes(p.id))
        .map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
      const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
+      return keywords      
+    },
+    keywords () {
+      const tags = this.tags.map(t => ({ type: 'tag', label: t.tag, weigth: t.weigth, id: t.tag }))
+      const places = this.places.map(p => ({ type: 'place', label: p.name, weigth: p.weigth, id: p.id }))
+      const keywords = tags.concat(places).sort((a, b) => b.weigth - a.weigth)
      return keywords
    },
-    showPast: {
-      set (value) { this.showPastEvents(value) },
-      get () { return this.filters.show_past_events }
-    },
-    showRecurrent: {
-      set (value) { this.showRecurrentEvents(value) },
-      get () { return this.filters.show_recurrent_events }
-    }
-    // filter () {
-    //   return this.filters.tags.concat(this.filters.places)
-    // }
  },
  methods: {
-    ...mapActions(['setSearchPlaces', 'setSearchTags',
-      'showPastEvents', 'showRecurrentEvents', 'updateEvent']),
-    remove (item) {
-      console.error(item)
-      if (item.type === 'tag') {
-        this.removeTag(item.id)
-      } else {
-        this.removePlace(item.id)
+    change (filters) {
+      filters = {
+        tags: filters.filter(t => t.type === 'tag').map(t => t.id),
+        places: filters.filter(p => p.type === 'place').map(p => p.id)
      }
+      this.$emit('update', filters)
    },
-    removeTag (tag) {
-      this.setSearchTags(this.filters.tags.filter(t => t !== tag))
-    },
-    removePlace (place) {
-      this.setSearchPlaces(this.filters.places.filter(p => p !== place))
-    },
-    querySearch (queryString, cb) {
-      const ret = this.keywords
-        .filter(k => !this.filter.map(f => f.id).includes(k.id))
-        .filter(k => k.label.toLowerCase().includes(queryString))
-        .slice(0, 5)
-      cb(ret)
-    },
-    addFilter (item) {
-      if (item.type === 'tag') {
-        this.setSearchTags(this.filters.tags.concat(item.id))
-      } else {
-        this.setSearchPlaces(this.filters.places.concat(item.id))
-      }
-      this.search = ''
-    }
  }
 }
 </script>