small adjustments to edit/add page

This commit is contained in:
les 2020-08-16 14:07:44 +02:00
parent d0c49de7eb
commit fde382f9e8

View file

@ -1,6 +1,8 @@
<template lang="pug"> <template lang="pug">
v-container v-container.container
h2.text-center {{edit?$t('common.edit_event'):$t('common.add_event')}} v-card
v-card-title {{edit?$t('common.edit_event'):$t('common.add_event')}}
v-card-text
v-form(v-model='valid') v-form(v-model='valid')
//- NOT LOGGED EVENT //- NOT LOGGED EVENT
@ -12,38 +14,41 @@
v-text-field.mb-3(v-model='event.title' v-text-field.mb-3(v-model='event.title'
:rules="[validators.required('title')]" :rules="[validators.required('title')]"
:label="$t('event.what_description')" :label="$t('event.what_description')"
autofocus
ref='title') ref='title')
//- description //- description
//- span {{$t('event.description_description')}} //- span {{$t('event.description_description')}}
Editor( Editor(
v-model='event.description' v-model='event.description'
:label="$t('event.description')" :label="$t('event.description_description')"
style='max-height: 400px;') style='max-height: 400px;')
//- tags //- tags
//- div {{$t('event.tag_description')}} //- div {{$t('event.tag_description')}}
//- client-only //- client-only
v-combobox(v-model='event.tags' v-combobox.mt-3(v-model='event.tags'
chips multiple chips small-chips multiple deletable-chips hide-no-data hide-selected
:items="tags" :delimiters="[',', ' ']"
item-text='tag', :items="tags.map(t => t.tag)"
item-value='tag'
:hints="$t('event.tag_description')" :hints="$t('event.tag_description')"
:label="$t('common.tags')") :label="$t('common.tags')")
//- v-option(v-for='tag in filteredTags' :key='tag.tag' :label='tag.tag' :value='tag.tag')
//- WHERE //- WHERE
//- v-divider //- v-divider
//- i.el-icon-location-outline //- i.el-icon-location-outline
//- span {{$t('common.where')}} //- span {{$t('common.where')}}
//- p(v-html="$t('event.where_description')") //- p(v-html="$t('event.where_description')")
v-autocomplete(v-model='event.place.name' v-combobox(v-model='event.place.name'
:label="$t('common.where')" :label="$t('common.where')"
:items="places" :items="places"
item-text="name" item-text='name'
item-value="name"
@change='selectPlace') @change='selectPlace')
template(v-slot:item="{ item }")
v-list
v-list-item-content
v-list-item-title {{item.name}}
v-list-item-subtitle {{item.address}}
//- div {{$t("common.address")}} //- div {{$t("common.address")}}
v-text-field(ref='address' :label="$t('common.address')" v-model='event.place.address' :disabled='disableAddress') v-text-field(ref='address' :label="$t('common.address')" v-model='event.place.address' :disabled='disableAddress')
@ -149,10 +154,10 @@
persistent-hint persistent-hint
accept='image/*') accept='image/*')
v-card-actions v-card-actions
v-spacer v-spacer
v-btn(@click='done' :loading='loading' :disabled='!valid || loading' v-btn(@click='done' :loading='loading' :disabled='!valid || loading'
color='primary') {{edit?$t('common.edit'):$t('common.send')}} color='primary') {{edit?$t('common.edit'):$t('common.send')}}
</template> </template>
<script> <script>
@ -322,40 +327,42 @@ export default {
return attributes return attributes
}, },
filteredTags () { // filteredTags () {
const queryTags = this.queryTags.toLowerCase() // const queryTags = this.queryTags.toLowerCase()
return _(this.tags) // return _(this.tags)
.filter(t => !this.event.tags.includes(t.tag)) // .filter(t => !this.event.tags.includes(t.tag))
.filter(t => t.tag.includes(queryTags)) // .filter(t => t.tag.includes(queryTags))
// .pick('tag') // // .pick('tag')
.take(5) // .take(5)
.value() // .value()
}, // },
couldProceed () { // couldProceed () {
return true // return true
// return (this.event.place.name.length > 0 && // return (this.event.place.name.length > 0 &&
// this.event.place.address.length > 0 && // this.event.place.address.length > 0 &&
// (this.date && this.time.start) && // (this.date && this.time.start) &&
// this.event.title.length > 0) // this.event.title.length > 0)
} // }
},
mounted () {
this.$refs.title.focus()
}, },
// mounted () {
// this.$refs.title.focus()
// },
methods: { methods: {
...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']), ...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
filterPlaces (q, cb) { // filterPlaces (q, cb) {
const query = q.toLowerCase() // const query = q.toLowerCase()
const ret = _(this.places) // const ret = _(this.places)
.filter(p => p.name.toLowerCase().includes(query)) // .filter(p => p.name.toLowerCase().includes(query))
.take(5) // .take(5)
.map(p => ({ value: p.name })) // .map(p => ({ value: p.name }))
.value() // .value()
ret.unshift({ value: q }) // ret.unshift({ value: q })
cb(ret) // cb(ret)
}, // },
selectPlace (p) { selectPlace (p) {
console.error('dentro selecte place ', p)
const place = this.places.find(place => place.id === p) const place = this.places.find(place => place.id === p)
console.error('vediamo se ho trovato il place', place)
if (place && place.address) { if (place && place.address) {
this.event.place.address = place.address this.event.place.address = place.address
this.disableAddress = true this.disableAddress = true
@ -425,7 +432,7 @@ export default {
if (this.edit) { if (this.edit) {
formData.append('id', this.event.id) formData.append('id', this.event.id)
} }
if (this.event.tags) { this.event.tags.forEach(tag => formData.append('tags[]', tag)) } if (this.event.tags) { this.event.tags.forEach(tag => formData.append('tags[]', tag.tag || tag)) }
try { try {
if (this.edit) { if (this.edit) {
await this.updateEvent(formData) await this.updateEvent(formData)
@ -461,6 +468,10 @@ export default {
max-width: 500px !important; max-width: 500px !important;
margin: 0 auto; margin: 0 auto;
} }
.container {
max-width: 1400px;
}
/* #edit_page /* #edit_page
i { i {
font-size: 1.3em; font-size: 1.3em;