fix some dialog background on light theme

This commit is contained in:
lesion
2022-09-07 11:48:19 +02:00
parent e0d3b107a5
commit 4c6295351b
3 changed files with 68 additions and 68 deletions

View File

@@ -1,10 +1,10 @@
<template lang='pug'> <template lang='pug'>
v-container v-container
v-card-title {{$t('common.announcements')}} v-card-title {{ $t('common.announcements') }}
v-card-subtitle(v-html="$t('admin.announcement_description')") v-card-subtitle(v-html="$t('admin.announcement_description')")
v-dialog(v-model='dialog' width='800px' :fullscreen='$vuetify.breakpoint.xsOnly') v-dialog(v-model='dialog' width='800px' :fullscreen='$vuetify.breakpoint.xsOnly')
v-card v-card
v-card-title {{$t('admin.new_announcement')}} v-card-title {{ $t('admin.new_announcement') }}
v-card-text.px-0 v-card-text.px-0
v-form(v-model='valid' ref='announcement' @submit.prevent='save' lazy-validation) v-form(v-model='valid' ref='announcement' @submit.prevent='save' lazy-validation)
v-text-field.col-12(v-model='announcement.title' v-text-field.col-12(v-model='announcement.title'
@@ -14,21 +14,21 @@ v-container
border no-save max-height='400px' :placeholder="$t('common.description')") border no-save max-height='400px' :placeholder="$t('common.description')")
v-card-actions v-card-actions
v-spacer v-spacer
v-btn(@click='dialog=false' color='error') {{$t('common.cancel')}} v-btn(@click='dialog = false' color='error' outlined) {{ $t('common.cancel') }}
v-btn(@click='save' color='primary' :disabled='!valid || loading' :loading='loading') {{$t(`common.${editing?'save':'send'}`)}} v-btn(@click='save' color='primary' :disabled='!valid || loading' :loading='loading' outlined) {{ $t(`common.${editing ? 'save' : 'send'}`) }}
v-btn(@click='openDialog' text color='primary') <v-icon v-text='mdiPlus'></v-icon> {{$t('common.add')}} v-btn(@click='openDialog' text color='primary') <v-icon v-text='mdiPlus'></v-icon> {{ $t('common.add') }}
v-card-text v-card-text
v-data-table( v-data-table(
v-if='announcements.length' v-if='announcements.length'
:footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }' :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
:headers='headers' :headers='headers'
:items='announcements') :items='announcements')
template(v-slot:item.actions='{ item }') template(v-slot:item.actions='{ item }')
v-btn(text small @click.stop='toggle(item)' v-btn(text small @click.stop='toggle(item)'
:color='item.visible?"warning":"success"') {{item.visible?$t('common.disable'):$t('common.enable')}} :color='item.visible ? "warning" : "success"') {{ item.visible ? $t('common.disable') : $t('common.enable') }}
v-btn(text small @click='edit(item)' color='primary') {{$t('common.edit')}} v-btn(text small @click='edit(item)' color='primary') {{ $t('common.edit') }}
v-btn(text small @click='remove(item)' color='error') {{$t('common.delete')}} v-btn(text small @click='remove(item)' color='error') {{ $t('common.delete') }}
</template> </template>
<script> <script>
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
@@ -39,7 +39,7 @@ import { mdiPlus, mdiChevronRight, mdiChevronLeft } from '@mdi/js'
export default { export default {
components: { Editor, Announcement }, components: { Editor, Announcement },
data () { data() {
return { return {
mdiPlus, mdiChevronRight, mdiChevronLeft, mdiPlus, mdiChevronRight, mdiChevronLeft,
valid: false, valid: false,
@@ -54,32 +54,32 @@ export default {
announcement: { title: '', announcement: '' } announcement: { title: '', announcement: '' }
} }
}, },
async mounted () { async mounted() {
this.announcements = await this.$axios.$get('/announcements') this.announcements = await this.$axios.$get('/announcements')
}, },
methods: { methods: {
...mapActions(['setAnnouncements']), ...mapActions(['setAnnouncements']),
edit (announcement) { edit(announcement) {
this.announcement.title = announcement.title this.announcement.title = announcement.title
this.announcement.announcement = announcement.announcement this.announcement.announcement = announcement.announcement
this.announcement.id = announcement.id this.announcement.id = announcement.id
this.editing = true this.editing = true
this.dialog = true this.dialog = true
}, },
openDialog () { openDialog() {
this.announcement = { title: '', announcement: '' } this.announcement = { title: '', announcement: '' }
this.dialog = true this.dialog = true
this.$nextTick(() => this.$refs.announcement.reset()) this.$nextTick(() => this.$refs.announcement.reset())
}, },
async toggle (announcement) { async toggle(announcement) {
try { try {
announcement.visible = !announcement.visible announcement.visible = !announcement.visible
await this.$axios.$put(`/announcements/${announcement.id}`, announcement) await this.$axios.$put(`/announcements/${announcement.id}`, announcement)
this.announcements = this.announcements.map(a => a.id === announcement.id ? announcement : a) this.announcements = this.announcements.map(a => a.id === announcement.id ? announcement : a)
this.setAnnouncements(cloneDeep(this.announcements.filter(a => a.visible))) this.setAnnouncements(cloneDeep(this.announcements.filter(a => a.visible)))
} catch (e) {} } catch (e) { }
}, },
async remove (announcement) { async remove(announcement) {
const ret = await this.$root.$confirm('admin.delete_announcement_confirm') const ret = await this.$root.$confirm('admin.delete_announcement_confirm')
if (!ret) { return } if (!ret) { return }
this.$axios.delete(`/announcements/${announcement.id}`) this.$axios.delete(`/announcements/${announcement.id}`)
@@ -88,7 +88,7 @@ export default {
this.announcements = this.announcements.filter(a => a.id !== announcement.id) this.announcements = this.announcements.filter(a => a.id !== announcement.id)
}) })
}, },
async save () { async save() {
if (!this.$refs.announcement.validate()) { return } if (!this.$refs.announcement.validate()) { return }
this.loading = true this.loading = true
try { try {

View File

@@ -1,6 +1,6 @@
<template lang='pug'> <template lang='pug'>
v-container v-container
v-card-title {{$t('common.collections')}} v-card-title {{ $t('common.collections') }}
v-spacer v-spacer
v-text-field(v-model='search' v-text-field(v-model='search'
:append-icon='mdiMagnify' outlined rounded :append-icon='mdiMagnify' outlined rounded
@@ -8,11 +8,11 @@ v-container
single-line hide-details) single-line hide-details)
v-card-subtitle(v-html="$t('admin.collections_description')") v-card-subtitle(v-html="$t('admin.collections_description')")
v-btn(color='primary' text @click='newCollection') <v-icon v-text='mdiPlus'></v-icon> {{$t('admin.new_collection')}} v-btn(color='primary' text @click='newCollection') <v-icon v-text='mdiPlus'></v-icon> {{ $t('admin.new_collection') }}
v-dialog(v-model='dialog' width='800' destroy-on-close :fullscreen='$vuetify.breakpoint.xsOnly') v-dialog(v-model='dialog' width='800' destroy-on-close :fullscreen='$vuetify.breakpoint.xsOnly')
v-card(color='secondary') v-card
v-card-title {{$t('admin.edit_collection')}} v-card-title {{ $t('admin.edit_collection') }}
v-card-text v-card-text
v-form(v-model='valid' ref='form' @submit.prevent.native='saveCollection') v-form(v-model='valid' ref='form' @submit.prevent.native='saveCollection')
v-text-field( v-text-field(
@@ -23,7 +23,7 @@ v-container
:placeholder='$t("common.name")') :placeholder='$t("common.name")')
template(v-slot:append-outer v-if='!collection.id') template(v-slot:append-outer v-if='!collection.id')
v-btn(text @click='saveCollection' color='primary' :loading='loading' v-btn(text @click='saveCollection' color='primary' :loading='loading'
:disabled='!valid || loading || !!collection.id') {{$t('common.save')}} :disabled='!valid || loading || !!collection.id') {{ $t('common.save') }}
h3(v-else class='text-h5' v-text='collection.name') h3(v-else class='text-h5' v-text='collection.name')
v-row v-row
@@ -39,9 +39,9 @@ v-container
:delimiters="[',', ';']" :delimiters="[',', ';']"
:items="tags" :items="tags"
:label="$t('common.tags')") :label="$t('common.tags')")
template(v-slot:selection="{ item, on, attrs, selected, parent}") template(v-slot:selection="{ item, on, attrs, selected, parent }")
v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)' v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
:input-value="selected" label small) {{item}} :input-value="selected" label small) {{ item }}
v-col(cols=5) v-col(cols=5)
v-autocomplete(v-model='filterPlaces' v-autocomplete(v-model='filterPlaces'
@@ -58,51 +58,51 @@ v-container
:delimiters="[',', ';']" :delimiters="[',', ';']"
:items="places" :items="places"
:label="$t('common.places')") :label="$t('common.places')")
template(v-slot:selection="{ item, on, attrs, selected, parent}") template(v-slot:selection="{ item, on, attrs, selected, parent }")
v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)' v-chip(v-bind="attrs" close :close-icon='mdiCloseCircle' @click:close='parent.selectItem(item)'
:input-value="selected" label small) {{item.name}} :input-value="selected" label small) {{ item.name }}
//- template(v-slot:item="{ item, attrs, on }") //- template(v-slot:item="{ item, attrs, on }")
//- v-list-item(v-bind='attrs' v-on='on') //- v-list-item(v-bind='attrs' v-on='on')
//- v-list-item-content(two-line) //- v-list-item-content(two-line)
//- v-list-item-title(v-text='item.name') //- v-list-item-title(v-text='item.name')
//- v-list-item-subtitle(v-text='item.address') //- v-list-item-subtitle(v-text='item.address')
v-col(cols=2) v-col(cols=2)
v-btn(color='primary' text @click='addFilter' :disabled='!collection.id || !filterPlaces.length && !filterTags.length') add <v-icon v-text='mdiPlus'></v-icon> v-btn(color='primary' text @click='addFilter' :disabled='!collection.id || !filterPlaces.length && !filterTags.length') add <v-icon v-text='mdiPlus'></v-icon>
v-data-table( v-data-table(
:headers='filterHeaders' :headers='filterHeaders'
:items='filters' :items='filters'
:hide-default-footer='filters.length<5' :hide-default-footer='filters.length < 5'
:footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }') :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }')
template(v-slot:item.actions='{item}') template(v-slot:item.actions='{ item }')
v-btn(@click='removeFilter(item)' color='error' icon) v-btn(@click='removeFilter(item)' color='error' icon)
v-icon(v-text='mdiDeleteForever') v-icon(v-text='mdiDeleteForever')
template(v-slot:item.tags='{item}') template(v-slot:item.tags='{ item }')
v-chip.ma-1(small v-for='tag in item.tags' v-text='tag' :key='tag') v-chip.ma-1(small v-for='tag in item.tags' v-text='tag' :key='tag')
template(v-slot:item.places='{item}') template(v-slot:item.places='{ item }')
v-chip.ma-1(small v-for='place in item.places' v-text='place.name' :key='place.id' ) v-chip.ma-1(small v-for='place in item.places' v-text='place.name' :key='place.id' )
v-card-actions v-card-actions
v-spacer v-spacer
v-btn(text @click='dialog=false' color='warning') {{$t('common.close')}} v-btn(@click='dialog = false' outlined color='warning') {{ $t('common.close') }}
v-card-text v-card-text
v-data-table( v-data-table(
:headers='collectionHeaders' :headers='collectionHeaders'
:items='collections' :items='collections'
:hide-default-footer='collections.length<5' :hide-default-footer='collections.length < 5'
:footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }' :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
:search='search') :search='search')
template(v-slot:item.filters='{item}') template(v-slot:item.filters='{ item }')
span {{collectionFilters(item)}} span {{ collectionFilters(item) }}
template(v-slot:item.actions='{item}') template(v-slot:item.actions='{ item }')
v-btn(@click='editCollection(item)' color='primary' icon) v-btn(@click='editCollection(item)' color='primary' icon)
v-icon(v-text='mdiPencil') v-icon(v-text='mdiPencil')
v-btn(@click='removeCollection(item)' color='error' icon) v-btn(@click='removeCollection(item)' color='error' icon)
v-icon(v-text='mdiDeleteForever') v-icon(v-text='mdiDeleteForever')
</template> </template>
<script> <script>
@@ -111,7 +111,7 @@ import debounce from 'lodash/debounce'
import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiPlus, mdiTagMultiple, mdiMapMarker, mdiDeleteForever, mdiCloseCircle } from '@mdi/js' import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiPlus, mdiTagMultiple, mdiMapMarker, mdiDeleteForever, mdiCloseCircle } from '@mdi/js'
export default { export default {
data () { data() {
return { return {
mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiPlus, mdiTagMultiple, mdiMapMarker, mdiDeleteForever, mdiCloseCircle, mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiPlus, mdiTagMultiple, mdiMapMarker, mdiDeleteForever, mdiCloseCircle,
loading: false, loading: false,
@@ -139,7 +139,7 @@ export default {
] ]
} }
}, },
async fetch () { async fetch() {
this.collections = await this.$axios.$get('/collections?withFilters=true') this.collections = await this.$axios.$get('/collections?withFilters=true')
}, },
@@ -150,14 +150,14 @@ export default {
searchPlaces: debounce(async function (ev) { searchPlaces: debounce(async function (ev) {
this.places = await this.$axios.$get(`/place?search=${ev.target.value}`) this.places = await this.$axios.$get(`/place?search=${ev.target.value}`)
}, 100), }, 100),
collectionFilters (collection) { collectionFilters(collection) {
return collection.filters.map(f => { return collection.filters.map(f => {
const tags = f.tags?.join(', ') const tags = f.tags?.join(', ')
const places = f.places?.map(p => p.name).join(', ') const places = f.places?.map(p => p.name).join(', ')
return '(' + (tags && places ? tags + ' - ' + places : tags + places) + ')' return '(' + (tags && places ? tags + ' - ' + places : tags + places) + ')'
}).join(' - ') }).join(' - ')
}, },
async addFilter () { async addFilter() {
this.loading = true this.loading = true
const tags = this.filterTags const tags = this.filterTags
const places = this.filterPlaces.map(p => ({ id: p.id, name: p.name })) const places = this.filterPlaces.map(p => ({ id: p.id, name: p.name }))
@@ -168,17 +168,17 @@ export default {
this.filterPlaces = [] this.filterPlaces = []
this.loading = false this.loading = false
}, },
async editCollection (collection) { async editCollection(collection) {
this.collection = { ...collection } this.collection = { ...collection }
this.filters = await this.$axios.$get(`/filter/${collection.id}`) this.filters = await this.$axios.$get(`/filter/${collection.id}`)
this.dialog = true this.dialog = true
}, },
newCollection () { newCollection() {
this.collection = { name: '', id: null } this.collection = { name: '', id: null }
this.filters = [] this.filters = []
this.dialog = true this.dialog = true
}, },
async saveCollection () { async saveCollection() {
if (!this.$refs.form.validate()) return if (!this.$refs.form.validate()) return
this.loading = true this.loading = true
this.collection.name = this.collection.name.trim() this.collection.name = this.collection.name.trim()
@@ -197,7 +197,7 @@ export default {
this.loading = false this.loading = false
} }
}, },
async removeCollection (collection) { async removeCollection(collection) {
const ret = await this.$root.$confirm('admin.delete_collection_confirm', { collection: collection.name }) const ret = await this.$root.$confirm('admin.delete_collection_confirm', { collection: collection.name })
if (!ret) { return } if (!ret) { return }
try { try {
@@ -211,4 +211,4 @@ export default {
} }
} }
} }
</script> </script>

View File

@@ -1,6 +1,6 @@
<template lang='pug'> <template lang='pug'>
v-container v-container
v-card-title {{$t('common.places')}} v-card-title {{ $t('common.places') }}
v-spacer v-spacer
v-text-field(v-model='search' v-text-field(v-model='search'
:append-icon='mdiMagnify' outlined rounded :append-icon='mdiMagnify' outlined rounded
@@ -9,8 +9,8 @@ v-container
v-card-subtitle(v-html="$t('admin.place_description')") v-card-subtitle(v-html="$t('admin.place_description')")
v-dialog(v-model='dialog' width='600' :fullscreen='$vuetify.breakpoint.xsOnly') v-dialog(v-model='dialog' width='600' :fullscreen='$vuetify.breakpoint.xsOnly')
v-card(color='secondary') v-card
v-card-title {{$t('admin.edit_place')}} v-card-title {{ $t('admin.edit_place') }}
v-card-text v-card-text
v-form(v-model='valid' ref='form' lazy-validation) v-form(v-model='valid' ref='form' lazy-validation)
v-text-field( v-text-field(
@@ -26,19 +26,19 @@ v-container
:placeholder='$t("common.address")') :placeholder='$t("common.address")')
v-card-actions v-card-actions
v-spacer v-spacer
v-btn(@click='dialog=false' color='warning') {{$t('common.cancel')}} v-btn(@click='dialog = false' outlined color='warning') {{ $t('common.cancel') }}
v-btn(@click='savePlace' color='primary' :loading='loading' v-btn(@click='savePlace' color='primary' outlined :loading='loading'
:disable='!valid || loading') {{$t('common.save')}} :disable='!valid || loading') {{ $t('common.save') }}
v-card-text v-card-text
v-data-table( v-data-table(
:headers='headers' :headers='headers'
:items='places' :items='places'
:hide-default-footer='places.length<5' :hide-default-footer='places.length < 5'
:footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }' :footer-props='{ prevIcon: mdiChevronLeft, nextIcon: mdiChevronRight }'
:search='search') :search='search')
template(v-slot:item.actions='{item}') template(v-slot:item.actions='{ item }')
v-btn(@click='editPlace(item)' color='primary' icon) v-btn(@click='editPlace(item)' color='primary' icon)
v-icon(v-text='mdiPencil') v-icon(v-text='mdiPencil')
nuxt-link(:to='`/place/${item.name}`') nuxt-link(:to='`/place/${item.name}`')
@@ -49,7 +49,7 @@ v-container
import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye } from '@mdi/js' import { mdiPencil, mdiChevronLeft, mdiChevronRight, mdiMagnify, mdiEye } from '@mdi/js'
export default { export default {
data () { data() {
return { return {
mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiEye, mdiPencil, mdiChevronRight, mdiChevronLeft, mdiMagnify, mdiEye,
loading: false, loading: false,
@@ -65,17 +65,17 @@ export default {
] ]
} }
}, },
async fetch () { async fetch() {
this.places = await this.$axios.$get('/place/all') this.places = await this.$axios.$get('/place/all')
}, },
methods: { methods: {
editPlace (item) { editPlace(item) {
this.place.name = item.name this.place.name = item.name
this.place.address = item.address this.place.address = item.address
this.place.id = item.id this.place.id = item.id
this.dialog = true this.dialog = true
}, },
async savePlace () { async savePlace() {
if (!this.$refs.form.validate()) return if (!this.$refs.form.validate()) return
this.loading = true this.loading = true
await this.$axios.$put('/place', this.place) await this.$axios.$put('/place', this.place)