footer links

This commit is contained in:
les
2020-10-07 10:06:49 +02:00
parent 63a717e4ff
commit 69b9ff42f5
4 changed files with 71 additions and 57 deletions

View File

@@ -8,7 +8,7 @@
:headers='headers') :headers='headers')
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.deactivate'):$t('common.activate')}} :color='item.visible?"warning":"success"') {{item.visible?$t('common.disable'):$t('common.enable')}}
v-btn(text small @click='edit(item)') {{$t('common.edit')}} v-btn(text small @click='edit(item)') {{$t('common.edit')}}
v-btn(text small @click='remove(item)' v-btn(text small @click='remove(item)'
color='error') {{$t('common.delete')}} color='error') {{$t('common.delete')}}

View File

@@ -55,9 +55,7 @@
v-btn(color='error' @click='dialogAddInstance=false') {{$t('common.cancel')}} v-btn(color='error' @click='dialogAddInstance=false') {{$t('common.cancel')}}
v-btn(color='primary' @click='createTrustedInstance') {{$t('common.ok')}} v-btn(color='primary' @click='createTrustedInstance') {{$t('common.ok')}}
v-card-actions v-btn.mt-4(@click='dialogAddInstance = true' color='primary' text) <v-icon>mdi-plus</v-icon> Add instance
v-spacer
v-btn.mt-4(@click='dialogAddInstance = true' color='primary' text) Add instance
v-data-table( v-data-table(
:headers='headers' :headers='headers'
:items='settings.trusted_instances') :items='settings.trusted_instances')

View File

@@ -3,42 +3,53 @@
v-card-title {{$t('common.places')}} v-card-title {{$t('common.places')}}
v-card-subtitle(v-html="$t('admin.place_description')") v-card-subtitle(v-html="$t('admin.place_description')")
v-dialog v-dialog(v-model='dialog' width='600')
v-form.mb-2 v-card
//- el-form-item(:label="$t('common.name')") v-card-title {{$t('admin.edit_place')}}
//- el-input.mr-1(:placeholder='$t("common.name")' v-model='place.name') v-card-text
v-text-field( v-form
:label="$t('common.name')" v-text-field(
v-model='place.name' :label="$t('common.name')"
:placeholder='$t("common.name")') v-model='place.name'
:placeholder='$t("common.name")')
v-text-field( v-text-field(
:label="$t('common.address')" :label="$t('common.address')"
v-model='place.address' v-model='place.address'
:placeholder='$t("common.address")') :placeholder='$t("common.address")')
v-btn(@click='savePlace') {{$t('common.save')}} v-card-actions
v-spacer
v-btn(@click='dialog=false' color='warning') {{$t('common.cancel')}}
v-btn(@click='savePlace' color='primary') {{$t('common.save')}}
v-card-text v-card-text
v-data-table( v-data-table(
@click:row='selectPlace' @click:row='selectPlace'
:headers='headers' :headers='headers'
:items='places') :items='places')
template(v-slot:item.actions='{item}')
v-btn(@click='editPlace(item)' color='primary' icon)
v-icon mdi-pencil
</template> </template>
<script> <script>
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
data () { data () {
return { return {
dialog: false,
place: { name: '', address: '', id: null }, place: { name: '', address: '', id: null },
headers: [ headers: [
{ value: 'name', text: 'Name' } { value: 'name', text: 'Name' },
{ value: 'address', text: 'Address' },
{ value: 'actions', text: 'Actions', align: 'right' }
] ]
} }
}, },
computed: mapState(['places']), computed: mapState(['places']),
methods: { methods: {
selectPlace (item) { editPlace (item) {
console.error(item)
// if (items.length === 0) { // if (items.length === 0) {
// this.place.name = this.place.address = '' // this.place.name = this.place.address = ''
// return // return
@@ -47,9 +58,11 @@ export default {
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
}, },
async savePlace () { async savePlace () {
await this.$axios.$put('/place', this.place) await this.$axios.$put('/place', this.place)
this.dialog = false
} }
} }
} }

View File

@@ -8,7 +8,7 @@
@change='uploadLogo' @change='uploadLogo'
accept='image/*') accept='image/*')
template(slot='append-outer') template(slot='append-outer')
v-btn(small text @click='resetLogo') Reset v-btn(color='warning' text @click='resetLogo') <v-icon>mdi-restore</v-icon> {{$t('common.reset')}}
v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`' v-img(:src='`${settings.baseurl}/favicon.ico?${logoKey}`'
max-width="100px" max-height="80px" contain) max-width="100px" max-height="80px" contain)
@@ -16,52 +16,52 @@
inset inset
:label="$t('admin.is_dark')") :label="$t('admin.is_dark')")
v-row //- TODO choose theme colors
v-col(v-for='(color, i) in colors' :key='i') //- v-row
v-menu(v-model='menu[i]' //- v-col(v-for='(color, i) in colors' :key='i')
:close-on-content-click="false" //- v-menu(v-model='menu[i]'
transition="slide-x-transition" //- :close-on-content-click="false"
offset-y //- transition="slide-x-transition"
absolute //- offset-y
bottom //- absolute
max-width="290px" //- bottom
min-width="290px") //- max-width="290px"
template(v-slot:activator='{ on }') //- min-width="290px")
v-text-field(:value='colors[i]' //- template(v-slot:activator='{ on }')
:label='i' //- v-btn(:color='i' small
v-on='on' clearable readonly) //- v-on='on') {{i}}
v-color-picker(light @update:color='c => updateColor(i, c)') //- v-color-picker(light @update:color='c => updateColor(i, c)')
v-dialog(v-model='linkModal' width='500') v-dialog(v-model='linkModal' width='500')
v-card v-card
v-card-title Add footer link v-card-title {{$t('admin.add_footer_link')}}
v-card-text v-card-text
v-form(v-model='valid' ref='linkModalForm') v-form(v-model='valid' ref='linkModalForm')
v-text-field(v-model='link.label' v-text-field(v-model='link.label'
:rules="[$validators.required('label')]" :rules="[$validators.required('common.label')]"
label='Label') label='Label')
v-text-field(v-model='link.href' v-text-field(v-model='link.href'
:rules="[$validators.required($t('common.url'))]" :rules="[$validators.required('common.url')]"
:label="$t('common.url')") :label="$t('common.url')")
v-card-actions v-card-actions
v-spacer v-spacer
v-btn(link @click='linkModal=false' color='error') {{$t('common.cancel')}} v-btn(link @click='linkModal=false' color='error') {{$t('common.cancel')}}
v-btn(link @click='addFooterLink' color='primary' :disabled='!valid') {{$t('common.add')}} v-btn(link @click='addFooterLink' color='primary' :disabled='!valid') {{$t('common.add')}}
label Footer links v-card-title {{$t('admin.footer_links')}}
v-card-text
v-btn(color='primary' text @click='openLinkModal') <v-icon>mdi-plus</v-icon> {{$t('admin.add_link')}}
v-btn(color='warning' text @click='reset') <v-icon>mdi-restore</v-icon> {{$t('common.reset')}}
v-list v-list
v-list-item(link @click='linkModal = true')
v-list-item-content
v-list-item-title Add
v-list-item-subtitle a new link
v-list-item(v-for='link in settings.footerLinks' v-list-item(v-for='link in settings.footerLinks'
:key='`${link.label}`' :key='`${link.label}`')
:to='link.href')
v-list-item-content v-list-item-content
v-list-item-title {{link.label}} v-list-item-title {{link.label}}
v-list-item-subtitle {{link.href}} v-list-item-subtitle {{link.href}}
v-list-item-action v-list-item-action
v-btn(icon color='error' @click.prevent='removeFooterLink(link)') v-btn.float-right(icon color='accent' @click='editFooterLink(link)')
v-icon mdi-pencil
v-btn(icon color='error' @click='removeFooterLink(link)')
v-icon mdi-delete-forever v-icon mdi-delete-forever
</template> </template>
@@ -77,7 +77,7 @@ export default {
link: { href: '', label: '' }, link: { href: '', label: '' },
linkModal: false, linkModal: false,
menu: [false, false, false, false], menu: [false, false, false, false],
colors: { primary: '', secondary: '', tertiary: '' } colors: { primary: '', secondary: '', accent: '', error: '', info: '', success: '', warning: '' }
// primary: {}, // primary: {},
// secondary: {} // secondary: {}
// } // }
@@ -113,15 +113,8 @@ export default {
}, },
methods: { methods: {
...mapActions(['setSetting']), ...mapActions(['setSetting']),
color (name) { reset () {
return { this.setSetting({ key: 'footerLinks', value: [{ href: '/about', label: 'about' }] })
get () {
console.error('get ', name)
},
set (value) {
console.error('set ', name, value)
}
}
}, },
forceLogoReload () { forceLogoReload () {
this.$refs.upload.reset() this.$refs.upload.reset()
@@ -136,11 +129,16 @@ export default {
this.colors[i] = v.hex this.colors[i] = v.hex
this.$vuetify.theme.themes.dark[i] = v.hex this.$vuetify.theme.themes.dark[i] = v.hex
}, },
openLinkModal () {
// this.link = { href: '', label: '' }
// console.error(this.$refs)
this.linkModal = true
this.$nextTick( () => this.$refs.linkModalForm.reset() )
},
addFooterLink () { addFooterLink () {
const link = Object.assign({}, this.link) const link = Object.assign({}, this.link)
this.setSetting({ key: 'footerLinks', value: this.settings.footerLinks.concat(link) }) this.setSetting({ key: 'footerLinks', value: this.settings.footerLinks.concat(link) })
// this.link = { href: '', label: '' } // this.link = { href: '', label: '' }
// this.$refs.linkModalForm.clear()
this.$refs.linkModalForm.reset() this.$refs.linkModalForm.reset()
this.linkModal = false this.linkModal = false
}, },
@@ -150,6 +148,11 @@ export default {
const footerLinks = this.settings.footerLinks.filter(l => l.label !== item.label) const footerLinks = this.settings.footerLinks.filter(l => l.label !== item.label)
this.setSetting({ key: 'footerLinks', value: footerLinks }) this.setSetting({ key: 'footerLinks', value: footerLinks })
}, },
editFooterLink (item) {
this.link = { href: item.href, label: item.label }
this.linkModal = true
},
async uploadLogo (file) { async uploadLogo (file) {
const formData = new FormData() const formData = new FormData()
formData.append('logo', file) formData.append('logo', file)