Commit 3cca0cb2 authored by christianrhansen's avatar christianrhansen

highlighting selected position

parent 1fd95781
Pipeline #59499 passed with stage
in 7 minutes and 46 seconds
<template lang="pug"> <template lang="pug">
.q-mt-md div
.bg-grey-9.q-pa-md .bg-grey-9.q-pa-md
.q-caption.text-grey-6.q-mb-sm Image position .q-caption.text-grey-6.q-mb-sm Image position
.text-center .text-center
template(v-for="(position, index) in css.positions") template(v-for="(position, index) in css.backgroundPositions")
q-btn.q-ma-xs.bg-grey-8(@click="setStyle(position)", round, size="sm", flat) q-btn.q-ma-xs(@click="setStyle(position)", round, size="sm", flat,
:class="[updatedCell && position === updatedCell.stylesheet.value ? 'bg-blue' : 'bg-grey-8']")
br(v-if="index === 2 || index === 5") br(v-if="index === 2 || index === 5")
</template> </template>
...@@ -14,23 +15,26 @@ ...@@ -14,23 +15,26 @@
props: ['cell'], props: ['cell'],
data () { data () {
return { return {
updatedCell: {stylesheet: {value: undefined}},
model: { model: {
backgroundPosition: undefined backgroundPosition: undefined
}, },
css: { css: {
positions: ['bg-top-left', 'bg-top', 'bg-top-right', 'bg-left', 'bg-center', 'bg-right', 'bg-bottom-left', 'bg-bottom', 'bg-bottom-right'] backgroundPositions: ['bg-top-left', 'bg-top', 'bg-top-right', 'bg-left', 'bg-center', 'bg-right', 'bg-bottom-left', 'bg-bottom', 'bg-bottom-right']
} }
} }
}, },
mounted () {
if (!this.cell.stylesheet.value) this.setStyle('bg-center')
},
methods: { methods: {
async setStyle (position) { async setStyle (position) {
console.log(position)
let _cell = this.cell let _cell = this.cell
if (_cell.id) { if (_cell.id) {
try { try {
let _c = await this.$store.dispatch('cells/patch', [_cell.id, { stylesheet: {value: position} }]) this.updatedCell = await this.$store.dispatch('cells/patch', [_cell.id, { stylesheet: {value: position} }])
// console.log('worked', this.cell) // console.log('worked', this.cell)
this.$store.commit('mosys/setUpdatedCell', _c) this.$store.commit('mosys/setUpdatedCell', this.updatedCell)
} }
catch (err) { catch (err) {
console.log('error: ', err) console.log('error: ', err)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment