encrypt/gancio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

split add event in smaller components

Browse Source
This commit is contained in:
les
2020-10-25 00:31:38 +02:00
parent 732643ecf3
commit cf5975e7ba
6 changed files with 423 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
pages/add/DateInput.vue Normal file
View File

@@ -0,0 +1,237 @@
<template lang="pug">
v-row
v-menu(
v-model="datePickerMenu"
:close-on-content-click="false"
:nudge-right="40"
transition="scale-transition"
offset-y
min-width="290px"
)
template(v-slot:activator="{ on, attrs }")
v-text-field.col-md-8(
v-model='date'
:label="$t('common.when')"
:rules="[$validators.required('common.when')]"
prepend-icon='mdi-calendar'
readonly
v-bind="attrs"
v-on="on")
v-date-picker(
:min='today'
v-model="date"
:range="type === 'multidate'"
:locale='settings.locale'
@input="pick")
v-btn-toggle.col-md-4(@change='changeType' color='primary' :value='type')
v-btn(value='normal') {{$t('event.normal')}}
v-btn(value='multidate') {{$t('event.multidate')}}
v-menu(v-if='settings.allow_recurrent_event' offset-y open-on-hover)
template(v-slot:activator="{ on, attrs }")
v-btn(value='recurrent' v-on='on') {{$t('event.recurrent')}}
v-list
v-list-item(v-for='f in frequencies' :key='f.value'
@click='selectFrequency(f.value)') {{f.text}}
//- //- p.col-12 {{$t(`event.${type}_description`)}}
//- v-btn-toggle(v-if="type === 'recurrent'" v-model='recurrent.frequency' color='primary')
//- v-btn(v-for='f in frequencies' :value='f.value') {{f.text}}
//- .datePicker
//- v-date-picker(
//- :mode='datePickerMode'
//- v-model='date'
//- :rules="[$validators.required('event.when')]"
//- :locale='$i18n.locale'
//- :is-dark="settings['theme.is_dark']"
//- is-inline
//- is-expanded
//- :min-date='type !== "recurrent" && new Date()')
div.text-center.mb-2(v-if='type === "recurrent"')
span(v-if='recurrent.frequency !== "1m" && recurrent.frequency !== "2m"') {{whenPatterns}}
v-btn-toggle.mt-1(v-else v-model='recurrent.type' color='primary')
v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small)
span {{whenPattern.label}}
//- List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
</template>
<script>
// import VInput from 'vuetify/es5/components/VInput'
import dayjs from 'dayjs'
import { mapState } from 'vuex'
import List from '@/components/List'
export default {
name: 'WhenInput',
components: { List },
props: {
value: { type: Object, default: () => ({ date: null, type: 'normal', recurrent: {} }) }
},
data () {
return {
date: null,
datePickerMenu: false,
today: dayjs().format('YYYY-MM-DD'),
type: 'normal',
recurrent: { },
frequencies: [
{ value: '1w', text: this.$t('event.each_week') },
{ value: '2w', text: this.$t('event.each_2w') },
{ value: '1m', text: this.$t('event.each_month') }
]
}
},
computed: {
...mapState(['settings', 'events']),
datePickerMode () {
const modeMap = {
multidate: 'range',
normal: 'single',
recurrent: 'single'
}
return modeMap[this.type]
},
whenPatterns () {
if (!this.date) { return }
const date = dayjs(this.date)
const freq = this.recurrent.frequency
const weekDay = date.format('dddd')
if (freq === '1w' || freq === '2w') {
return this.$t(`event.recurrent_${freq}_days`, { days: weekDay })
} else if (freq === '1m' || freq === '2m') {
const monthDay = date.format('D')
console.error('monthDay ', monthDay)
const n = Math.floor((monthDay - 1) / 7) + 1
const patterns = [
{ label: this.$t(`event.recurrent_${freq}_days`, { days: monthDay }), key: 'ordinal' }
// { label: this.$tc(`event.recurrent_${freq}_ordinal`, { n, days: weekDay }), key: 'weekday' }
]
// if selected day is in last week, propose also this type of selection
const lastWeek = date.daysInMonth() - monthDay < 7
if (lastWeek) {
patterns.push(
{
label: this.$t(`event.recurrent_${freq}_ordinal`,
{ n: this.$t('ordinal.-1'), days: weekDay }),
key: 'weekday'
}
)
}
if (n < 5) {
patterns.push(
{
label: this.$t(`event.recurrent_${freq}_ordinal`,
{ n: this.$t(`ordinal.${n}`), days: weekDay }),
key: 'weekday'
}
)
}
return patterns
} else if (freq === '1d') {
return this.$t('event.recurrent_each_day')
}
return ''
}
// todayEvents () {
// if (this.type === 'multidate') {
// if (!this.date || !this.date.start) { return }
// const date_start = dayjs(this.date.start)
// const date_end = dayjs(this.date.end)
// return this.events.filter(e =>
// !e.multidate
// ? date_start.isSame(dayjs.unix(e.start_datetime), 'day') ||
// (date_start.isBefore(dayjs.unix(e.start_dateime)) && date_end.isAfter(dayjs.unix(e.start_datetime)))
// : date_start.isSame(dayjs.unix(e.start_datetime), 'day') || date_start.isSame(dayjs.unix(e.end_datetime)) ||
// (date_start.isAfter(dayjs.unix(e.start_datetime)) && date_start.isBefore(dayjs.unix(e.end_datetime))))
// } else if (this.type === 'recurrent') {
// return []
// } else {
// const date = dayjs(this.date)
// return this.events.filter(e =>
// !e.multidate
// ? !e.recurrent && date.isSame(dayjs.unix(e.start_datetime), 'day')
// : dayjs.unix(e.start_datetime).isSame(date, 'day') ||
// (dayjs.unix(e.start_datetime).isBefore(date) && dayjs.unix(e.end_datetime).isAfter(date))
// )
// }
// },
// attributes () {
// let attributes = []
// // attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'red' } })
// const date = dayjs(this.date)
// const start = date.toDate()
// attributes = attributes.concat(this.events
// .filter(e => !e.multidate && (!e.parentId || this.type === 'recurrent'))
// .map(e => ({ key: e.id, dot: { color: this.type === 'recurrent' ? 'orange' : 'green' }, dates: dayjs.unix(e.start_datetime).toDate() })))
// if (this.type === 'recurrent' && this.date && this.date.length) {
// let dates = {}
// if (this.recurrent.frequency !== '1m') {
// dates = {
// weeklyInterval: this.recurrent.frequency === '1w' ? 1 : 2,
// weekdays: date.day(),
// start
// }
// } else if (this.recurrent.type === 'ordinal') {
// const day = date.date()
// dates = {
// monthlyInterval: 1,
// start,
// days
// }
// } else if (this.recurrent.type === 'weekday') {
// dates = {
// monthlyInterval: 1,
// start,
// days: [Math.floor((date.day() - 1 / 7) + 1), date.day()]
// }
// } else {
// dates = {
// monthlyInterval: 1,
// start,
// days: [-1, date.day()]
// }
// }
// attributes.push({
// key: 'recurrent',
// dot: { color: 'orange' },
// dates
// })
// }
// attributes = attributes.concat(this.events
// .filter(e => e.multidate && !e.parentId)
// .map(e => ({
// key: e.id,
// highlight: {},
// dates: { start: dayjs.unix(e.start_datetime).toDate(), end: dayjs.unix(e.end_datetime).toDate() }
// })))
// return attributes
// }
},
methods: {
changeType (type) {
this.date = null
this.type = type || 'normal'
},
selectFrequency (f) {
this.recurrent.frequency = f
this.type = 'recurrent'
},
pick (value) {
if (this.type === 'normal' || this.type === 'recurrent' || this.date.length === 2) {
this.datePickerMenu = false
}
}
}
}
</script>

77
pages/add/HourInput.vue Normal file
View File

@@ -0,0 +1,77 @@
<template lang="pug">
v-row
v-col.col-6
v-menu(v-model='startTimeMenu'
:close-on-content-click="false"
transition="slide-x-transition"
ref='startTimeMenu'
:return-value.sync="time.start"
offset-y
absolute
top
max-width="290px"
min-width="290px")
template(v-slot:activator='{ on }')
v-text-field(
:label="$t('event.from')"
:rules="[$validators.required('event.from')]"
:value='time.start'
v-on='on'
clearable)
v-time-picker(
v-if='startTimeMenu'
:label="$t('event.from')"
format="24hr"
ref='time_start'
:allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
v-model='time.start'
@click:minute="selectTime('start')")
v-col.col-6
v-menu(v-model='endTimeMenu'
:close-on-content-click="false"
transition="slide-x-transition"
ref='endTimeMenu'
:return-value.sync="time.end"
offset-y
absolute
top
max-width="290px"
min-width="290px")
template(v-slot:activator='{ on }')
v-text-field(
:label="$t('event.due')"
:value='time.end'
v-on='on'
clearable
readonly)
v-time-picker(
v-if='endTimeMenu'
:label="$t('event.due')"
format="24hr"
:allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
v-model='time.end'
@click:minute="selectTime('end')")
</template>
<script>
export default {
name: 'HourInput',
props: {
value: { type: Object, default: () => { } }
},
data () {
return {
time: {},
startTimeMenu: false,
endTimeMenu: false
}
},
methods: {
selectTime (type) {
this.$refs[`${type}TimeMenu`].save(this.time.end)
this.$emit('input', this.time)
}
}
}
</script>

2
pages/add/ImportDialog.vue
View File

@@ -13,7 +13,7 @@
v-file-input(
v-model='file'
accept=".ics"
:label="$t('common.ics')"
:label="$t('event.ics')"
:hint="$t('event.import_ICS')"
persistent-hint
)

187
pages/add/WhenInput.vue
View File

@@ -1,187 +0,0 @@
<template lang="pug">
.when
.text-center
v-btn-toggle(v-model="type" color='primary')
v-btn(value='normal' label="normal") {{$t('event.normal')}}
v-btn(value='multidate' label="multidate") {{$t('event.multidate')}}
v-btn(v-if='settings.allow_recurrent_event' value='recurrent' label="recurrent") {{$t('event.recurrent')}}
p {{$t(`event.${type}_description`)}}
v-select(v-if='type==="recurrent"'
:items="frequencies"
v-model='recurrent.frequency')
client-only
.datePicker
v-date-picker(
:mode='datePickerMode'
:attributes='attributes'
v-model='date'
:locale='$i18n.locale'
:is-dark="settings['theme.is_dark']"
is-inline
is-expanded
:min-date='type !== "recurrent" && new Date()')
div.text-center.mb-2(v-if='type === "recurrent"')
span(v-if='recurrent.frequency !== "1m" && recurrent.frequency !== "2m"') {{whenPatterns}}
v-btn-toggle.mt-1(v-else v-model='recurrent.type' color='primary')
v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small)
span {{whenPattern.label}}
List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
</template>
<script>
// import VInput from 'vuetify/es5/components/VInput'
import dayjs from 'dayjs'
import { mapState } from 'vuex'
import List from '@/components/List'
export default {
name: 'WhenInput',
components: { List },
props:{
value: { type: Object, default: () => ({ type: 'normal', recurrent: {} }) }
},
data () {
return {
date: null,
type: 'normal',
recurrent: { },
frequencies: [
{ value: '1w', text: this.$t('event.each_week') },
{ value: '2w', text: this.$t('event.each_2w') },
{ value: '1m', text: this.$t('event.each_month') }
]
}
},
computed: {
...mapState(['settings', 'events']),
datePickerMode () {
const modeMap = {
multidate: 'range',
normal: 'single',
recurrent: 'single'
}
return modeMap[this.type]
},
whenPatterns () {
if (!this.date) return
const date = dayjs(this.date)
const freq = this.recurrent.frequency
const weekDay = date.day()
if (freq === '1w' || freq === '2w') {
return this.$t(`event.recurrent_${freq}_day`, { day: weekDay })
} else if (freq === '1m' || freq === '2m') {
const monthDay = date.date()
const n = Math.floor((monthDay - 1) / 7) + 1
const patterns = [
{ label: this.$t(`event.recurrent_${freq}_days`, { day: monthDay }), key: 'ordinal' },
{ label: this.$t(`event.recurrent_${freq}_ordinal`, { n, day: weekDay }), key: 'weekday' },
]
// if selected day is in last week, propose also this type of selection
const lastWeek = date.daysInMonth()-monthDay < 7
if (lastWeek) {
patterns.push(
{ label: this.$t(`event.recurrent_${freq}_ordinaldesc`, { n, day: weekDay }), key: 'weekday_desc' }
)
}
return patterns
} else if (freq === '1d') {
return this.$t('event.recurrent_each_day')
}
return ''
},
todayEvents () {
if (this.type === 'multidate') {
if (!this.date || !this.date.start) { return }
const date_start = dayjs(this.date.start)
const date_end = dayjs(this.date.end)
return this.events.filter(e =>
!e.multidate
? date_start.isSame(dayjs.unix(e.start_datetime), 'day') ||
(date_start.isBefore(dayjs.unix(e.start_dateime)) && date_end.isAfter(dayjs.unix(e.start_datetime)))
: date_start.isSame(dayjs.unix(e.start_datetime), 'day') || date_start.isSame(dayjs.unix(e.end_datetime)) ||
(date_start.isAfter(dayjs.unix(e.start_datetime)) && date_start.isBefore(dayjs.unix(e.end_datetime))))
} else if (this.type === 'recurrent') {
return []
} else {
const date = dayjs(this.date)
return this.events.filter(e =>
!e.multidate
? !e.recurrent && date.isSame(dayjs.unix(e.start_datetime), 'day')
: dayjs.unix(e.start_datetime).isSame(date, 'day') ||
(dayjs.unix(e.start_datetime).isBefore(date) && dayjs.unix(e.end_datetime).isAfter(date))
)
}
},
attributes () {
let attributes = []
// attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'red' } })
const date = dayjs(this.date)
const start = date.toDate()
attributes = attributes.concat(this.events
.filter(e => !e.multidate && (!e.parentId || this.type === 'recurrent'))
.map(e => ({ key: e.id, dot: { color: this.type === 'recurrent' ? 'orange' : 'green' }, dates: dayjs.unix(e.start_datetime).toDate() })))
if (this.type === 'recurrent' && this.date && this.date.length) {
let dates = {}
if (this.recurrent.frequency !== '1m') {
dates = {
weeklyInterval: this.recurrent.frequency === '1w' ? 1 : 2,
weekdays: date.day(),
start
}
} else {
if (this.recurrent.type === 'ordinal') {
const day = date.date()
dates = {
monthlyInterval: 1,
start,
days
}
} else if (this.recurrent.type === 'weekday') {
dates = {
monthlyInterval: 1,
start,
days: [Math.floor((date.day() -1 /7)+1), date.day()]
}
} else {
dates = {
monthlyInterval: 1,
start,
days: [-1, date.day()]
}
}
}
attributes.push({
key: 'recurrent',
dot: { color: 'orange' },
dates
})
}
attributes = attributes.concat(this.events
.filter(e => e.multidate && !e.parentId)
.map(e => ({
key: e.id,
highlight: {},
dates: { start: dayjs.unix(e.start_datetime).toDate(), end: dayjs.unix(e.end_datetime).toDate() }
})))
return attributes
}
},
methods: {
dateChanged (value) {
console.error('date changed', value)
}
}
// extends: VInput
}
</script>

60
pages/add/WhereInput.vue Normal file
View File

@@ -0,0 +1,60 @@
<template lang="pug">
v-row
v-combobox.col-md-6(ref='place'
:rules="[$validators.required('common.where')]"
:label="$t('common.where')"
:hint="$t('event.where_description')"
:hide-no-data="!place._name"
:search-input.sync="place._name"
persistent-hint
:items="places"
item-text='name'
@change='selectPlace')
template(v-slot:no-data)
v-list-item
p Create {{place._name}}
v-text-field.col-md-6(ref='address'
:disabled='disableAddress'
:rules="[$validators.required('common.address')]"
:label="$t('common.address')"
@change="changeAddress"
:value="place.address")
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'WhereInput',
data () {
return {
place: { _name: '' },
disableAddress: true
}
},
computed: {
...mapState(['places'])
},
methods: {
selectPlace (p) {
console.error(p)
const place = p && this.places.find(place => place.id === p.id)
if (place && place.address) {
this.place.name = p.name
this.place.address = place.address
this.disableAddress = true
} else {
this.disableAddress = false
this.$refs.place.blur()
this.$refs.address.focus()
}
this.$emit('input', this.place)
},
changeAddress (v) {
this.place.address = v
this.$emit('input', this.place)
}
}
}
</script>

184
pages/add/_edit.vue
View File

@@ -4,130 +4,59 @@
v-card-title
h4 {{edit?$t('common.edit_event'):$t('common.add_event')}}
v-spacer
v-btn(link text color='primary' @click='openImportDialog=true')
v-btn(link text color='primary' @click='openImportDialog=true')
<v-icon>mdi-file-import</v-icon> {{$t('common.import')}}
v-dialog(v-model='openImportDialog')
ImportDialog(@close='openImportDialog=false' @imported='eventImported')
v-card-text
v-form(v-model='valid' ref='form' lazy-validation)
v-container
v-row
//- Not logged event
v-col.col-12(v-if='!$auth.loggedIn')
v-divider <v-icon name='user-secret'/> {{$t('event.anon')}}
p(v-html="$t('event.anon_description')")
//- Not logged event
div(v-if='!$auth.loggedIn')
v-divider <v-icon name='user-secret'/> {{$t('event.anon')}}
p(v-html="$t('event.anon_description')")
//- Title
v-text-field.col-12(
@change='v => event.title = v'
:value = 'event.title'
:rules="[$validators.required('common.title')]"
:hint="$t('event.what_description')"
:label="$t('common.title')"
autofocus
ref='title')
//- Title
v-text-field.mb-3(
@change='v => event.title = v'
:value = 'event.title'
:rules="[$validators.required('common.title')]"
:label="$t('event.what_description')"
autofocus
ref='title')
//- Where
WhereInput.col-12(v-model='event.place')
//- Description
Editor(
v-model='event.description'
:placeholder="$t('event.description_description')"
max-height='400px')
//- When
DateInput.col-12(v-model='date')
HourInput.col-12(v-model='time')
//- Where
v-combobox.mt-2(v-model='event.place.name'
:rules="[$validators.required('common.where')]"
:label="$t('common.where')"
:hint="$t('event.where_description')"
persistent-hint
:items="places"
item-text='name'
@change='selectPlace')
//- template(v-slot:item="{ item }")
v-list-item(color='primary')
v-list-item-content(color='pink')
v-list-item-title {{item.name}}
v-list-item-subtitle {{item.address}}
//- Description
Editor.col-12.mb-3(
v-model='event.description'
:placeholder="$t('event.description_description')"
max-height='400px')
v-text-field.mt-3(ref='address'
:rules="[$validators.required('common.address')]"
:label="$t('common.address')"
@change="v => event.place.address = v"
:value="event.place.address"
:disabled='disableAddress')
//- MEDIA / FLYER / POSTER
//- When
WhenInput(v-model='date'
:rules="$validators.required('common.when')")
v-file-input.col-6.mt-3(
:label="$t('common.media')"
:hint="$t('event.media_description')"
prepend-icon="mdi-camera"
v-model='event.image'
persistent-hint
accept='image/*')
v-row
v-col
v-menu(v-model='fromDateMenu'
:close-on-content-click="false"
transition="slide-x-transition"
ref='fromDateMenu'
:return-value.sync="time.start"
offset-y
absolute
top
max-width="290px"
min-width="290px")
template(v-slot:activator='{ on }')
v-text-field(
:label="$t('event.from')"
:rules="[$validators.required('event.from')]"
:value='time.start'
v-on='on'
clearable)
v-time-picker(
v-if='fromDateMenu'
:label="$t('event.from')"
format="24hr"
ref='time_start'
:allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
v-model='time.start'
@click:minute="$refs.fromDateMenu.save(time.start)")
v-col
v-menu(v-model='dueDateMenu'
:close-on-content-click="false"
transition="slide-x-transition"
ref='dueDateMenu'
:return-value.sync="time.end"
offset-y
absolute
top
max-width="290px"
min-width="290px")
template(v-slot:activator='{ on }')
v-text-field(
:label="$t('event.due')"
:value='time.end'
v-on='on'
clearable
readonly)
v-time-picker(
v-if='dueDateMenu'
:label="$t('event.due')"
format="24hr"
:allowed-minutes="[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]"
v-model='time.end'
@click:minute="$refs.dueDateMenu.save(time.end)")
//- MEDIA / FLYER / POSTER
v-file-input(
:label="$t('common.media')"
:hint="$t('event.media_description')"
prepend-icon="mdi-camera"
v-model='event.image'
persistent-hint
accept='image/*')
//- tags
v-combobox.mt-3(v-model='event.tags'
chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ' ']"
:items="tags.map(t => t.tag)"
:label="$t('common.tags')")
//- tags
v-combobox.col-6.mt-3(v-model='event.tags'
chips small-chips multiple deletable-chips hide-no-data hide-selected persistent-hint
:delimiters="[',', ' ']"
:items="tags.map(t => t.tag)"
:label="$t('common.tags')")
v-card-actions
v-spacer
@@ -142,11 +71,13 @@ import dayjs from 'dayjs'
import Editor from '@/components/Editor'
import List from '@/components/List'
import ImportDialog from './ImportDialog'
import WhenInput from './WhenInput'
import DateInput from './DateInput'
import HourInput from './HourInput'
import WhereInput from './WhereInput'
export default {
name: 'NewEvent',
components: { List, Editor, ImportDialog, WhenInput },
components: { List, Editor, ImportDialog, WhereInput, HourInput, DateInput },
validate ({ store }) {
return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
},
@@ -191,8 +122,6 @@ export default {
const year = dayjs().year()
return {
valid: false,
dueDateMenu: false,
fromDateMenu: false,
openImportDialog: false,
event: {
type: 'normal',
@@ -200,7 +129,7 @@ export default {
title: '',
description: '',
tags: [],
image: {},
image: null,
recurrent: { frequency: '1m', days: [], type: 'weekday_desc' }
},
page: { month, year },
@@ -211,29 +140,17 @@ export default {
edit: false,
loading: false,
mediaUrl: '',
disableAddress: false,
disableAddress: false
}
},
computed: {
...mapState(['tags', 'places', 'events', 'settings']),
...mapState(['tags', 'places', 'events', 'settings'])
},
methods: {
...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
eventImported (event) {
this.event = Object.assign(this.event, event)
},
selectPlace (p) {
const place = p && this.places.find(place => place.id === p.id)
if (place && place.address) {
this.event.place.name = p.name
this.event.place.address = place.address
this.disableAddress = true
} else {
this.disableAddress = false
this.event.place.address = ''
}
// this.$nextTick(() => this.$refs.address.focus() )
},
// recurrentDays () {
// if (this.event.type !== 'recurrent' || !this.date || !this.date.length) { return }
// const type = this.event.recurrent.type
@@ -244,7 +161,7 @@ export default {
this.event.image = {}
},
async done () {
if (!this.$refs.form.validate()) return
if (!this.$refs.form.validate()) { return }
this.loading = true
let start_datetime, end_datetime
const [start_hour, start_minute] = this.time.start.split(':')
@@ -325,11 +242,6 @@ export default {
}
</script>
<style style='less'>
.datePicker {
max-width: 500px !important;
margin: 0 auto;
}
.container {
max-width: 1400px;
}