keep migrating to vuetify
This commit is contained in:
les
@@ -3,7 +3,7 @@
|
||||
v-calendar(
|
||||
title-position='left'
|
||||
:is-dark="settings['theme.is_dark']"
|
||||
:columns="$screens({ default: 1, md: 2 })"
|
||||
:columns="2"
|
||||
@update:from-page='updatePage'
|
||||
:locale='$i18n.locale'
|
||||
:attributes='attributes'
|
||||
@@ -21,7 +21,7 @@ import { take, get } from 'lodash'
|
||||
export default {
|
||||
name: 'Calendar',
|
||||
props: {
|
||||
events: { type: Array, default: [] }
|
||||
events: { type: Array, default: () => [] }
|
||||
},
|
||||
data () {
|
||||
const month = dayjs().month() + 1
|
||||
@@ -35,13 +35,14 @@ export default {
|
||||
|
||||
// TODO: could be better
|
||||
attributes () {
|
||||
return []
|
||||
const colors = ['blue', 'orange', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
|
||||
const tags = take(this.tags, 10).map(t => t.tag)
|
||||
let attributes = []
|
||||
attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'green', fillMode: 'outline' } })
|
||||
|
||||
function getColor (event) {
|
||||
const color = { class: 'vc-rounded-full', color: 'blue', fillMode: 'outline' }
|
||||
const color = { class: 'vc-rounded-full', color: 'blue', fillMode: 'normal' }
|
||||
const tag = get(event, 'tags[0]')
|
||||
if (!tag) { return color }
|
||||
const idx = tags.indexOf(tag)
|
||||
|
||||
@@ -1,78 +1,83 @@
|
||||
<template lang="pug">
|
||||
<template lang="pug" functional>
|
||||
v-card.h-event.event.mt-1
|
||||
nuxt-link(:to='`/event/${event.id}`')
|
||||
v-img.align-end.white--text(:src="`/media/thumb/${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 {{event.title}}
|
||||
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-text
|
||||
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}}
|
||||
|
||||
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 @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 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 event.tags' link
|
||||
:key='tag' outlined color='primary' @click="$emit('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='copyLink'
|
||||
v-clipboard:copy='`${settings.baseurl}/event/${event.id}`')
|
||||
v-list-item-icon
|
||||
v-icon mdi-content-copy
|
||||
v-list-item-content
|
||||
v-list-item-title {{$t('common.copy_link')}}
|
||||
v-list-item(:href='`/api/event/${event.id}.ics`')
|
||||
v-list-item-icon
|
||||
v-icon mdi-calendar-export
|
||||
v-list-item-content
|
||||
v-list-item-title {{$t('common.add_to_calendar')}}
|
||||
</template>
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
// import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
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))
|
||||
}
|
||||
}
|
||||
event: { type: Object, default: () => ({}) },
|
||||
show: { type: Boolean }
|
||||
}
|
||||
// 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" scoped>
|
||||
<style lang="less">
|
||||
.event {
|
||||
width: 330px;
|
||||
height: 370px;
|
||||
max-width: 450px;
|
||||
flex-grow: 1;
|
||||
margin: .2em;
|
||||
|
||||
@@ -22,24 +22,10 @@
|
||||
v-btn(icon nuxt to='/export' v-on='on')
|
||||
v-icon mdi-share-variant
|
||||
|
||||
//- v-menu(v-if='settings.enable_trusted_instances && settings.trusted_instances && settings.trusted_instances.length'
|
||||
offset-y bottom open-on-hover transition="slide-y-transition")
|
||||
template(v-slot:activator="{ on, attrs }")
|
||||
v-btn(icon v-bind='attrs' v-on='on')
|
||||
v-icon mdi-map-marker-path
|
||||
v-list
|
||||
v-list-item(v-for='instance in settings.trusted_instances'
|
||||
:key='instance.name'
|
||||
:href='instance.url'
|
||||
two-line)
|
||||
v-list-item-avatar
|
||||
v-img(:src='`${instance.url}/favicon.ico`')
|
||||
v-list-item-content
|
||||
v-list-item-title {{instance.name}}
|
||||
v-list-item-subtitle {{instance.label}}
|
||||
|
||||
v-btn(v-if='!$auth.loggedIn' icon nuxt to='/login')
|
||||
v-icon mdi-login
|
||||
v-tooltip(v-if='!$auth.loggedIn' bottom) {{$t('common.login')}}
|
||||
template(v-slot:activator='{ on }')
|
||||
v-btn(icon nuxt to='/login' v-on='on')
|
||||
v-icon mdi-login
|
||||
|
||||
v-menu(v-else
|
||||
offset-y bottom open-on-hover transition="slide-y-transition")
|
||||
|
||||
@@ -2,9 +2,10 @@
|
||||
v-container
|
||||
v-switch.mt-0(
|
||||
v-if='recurrentFilter && settings.allow_recurrent_event'
|
||||
v-model='filters.show_recurrent'
|
||||
inset color='primary'
|
||||
:label="$t('event.show_recurrent')"
|
||||
@change="v => $emit('showrecurrent', v)")
|
||||
@change="toggleShowRecurrent")
|
||||
|
||||
v-autocomplete.mt-0(
|
||||
:label='$t("common.search")'
|
||||
@@ -37,7 +38,6 @@ import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'Search',
|
||||
props: {
|
||||
pastFilter: { type: Boolean, default: true },
|
||||
recurrentFilter: { type: Boolean, default: true },
|
||||
filters: { type: Object, default: () => {} }
|
||||
},
|
||||
@@ -67,14 +67,24 @@ export default {
|
||||
remove (item) {
|
||||
const filters = {
|
||||
tags: item.type === 'tag' ? this.filters.tags.filter(f => f !== item.id) : this.filters.tags,
|
||||
places: item.type === 'place' ? this.filters.places.filter(f => f !== item.id) : this.filters.places
|
||||
places: item.type === 'place' ? this.filters.places.filter(f => f !== item.id) : this.filters.places,
|
||||
show_recurrent: this.filters.show_recurrent
|
||||
}
|
||||
this.$emit('update', filters)
|
||||
},
|
||||
toggleShowRecurrent (v) {
|
||||
const filters = {
|
||||
tags: this.filters.tags,
|
||||
places: this.filters.places,
|
||||
show_recurrent: v
|
||||
}
|
||||
this.$emit('update', filters)
|
||||
},
|
||||
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)
|
||||
places: filters.filter(p => p.type === 'place').map(p => p.id),
|
||||
show_recurrent: this.filters.show_recurrent
|
||||
}
|
||||
this.$emit('update', filters)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user