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')
template(v-slot:item.actions='{ 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='remove(item)'
color='error') {{$t('common.delete')}}

View File

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

View File

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

View File

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