Commit 7632d2eb authored by Anton Koch's avatar Anton Koch

Merge branch '301-annotation-table---shared' into 'release_1_3'

new component listing all annotations (#301)

See merge request !27
parents 777bef33 b376c78f
<template lang="pug">
q-item.q-pa-none
q-item-main(:class="[{'q-my-sm': edit}, {'opacity-0': loading}, {'fade-in': !loading}]")
q-item-tile
q-input(ref="input", @click="toggleMode(true)", @input="inputChange(true)",
type="textarea", v-model="model", dark, hide-underline)
// :class="{'active-input': edit}"
q-item-side.relative-position(:class="{'opacity-0': !changed }")
q-btn.bg-white.text-dark(@click="updateAnnotation()", flat, size="sm", :disabled="!changed", round)
q-icon(name="check")
q-btn.on-right(@click.native="toggleMode(false)", flat, size="sm", style="border: 1px solid #3f3f3f;", round)
q-icon(name="clear")
.absolute-top-left.fit(v-if="!changed")
</template>
<script>
import uuidValidate from 'uuid-validate'
import { Assert } from 'mbjs-utils'
export default {
name: 'editableTableData',
props: ['data'],
data () {
return {
loading: false,
buffer: undefined,
model: undefined,
edit: false,
changed: undefined
}
},
mounted () {
this.model = this.data.row.body.value
},
methods: {
async updateAnnotation () {
let annotation = this.data.row
annotation.body.value = this.model
try {
this.loading = true
Assert.isType(annotation, 'object')
Assert.ok(uuidValidate(annotation.uuid))
Assert.isType(annotation.body.value, 'string')
await this.$store.dispatch('annotations/patch', [annotation.uuid, annotation])
this.getAnnotation()
this.$store.commit('notifications/addMessage', {
body: 'messages.updated_annotation',
mode: 'alert',
type: 'success'
})
this.toggleMode(false)
this.inputChange(false)
}
catch (err) {
this.$handleError(this, err, 'errors.update_annotation_failed')
}
},
async getAnnotation () {
const
query = { 'uuid': this.data.row.uuid },
result = await this.$store.dispatch('annotations/find', query)
this.model = result.items[0].body.value
this.loading = false
},
inputChange (bool) {
this.changed = bool
},
toggleMode (bool) {
if (!this.edit) this.buffer = this.model
this.edit = bool
if (!bool) {
this.inputChange(false)
this.model = this.buffer
this.buffer = undefined
}
}
}
}
</script>
<style scoped lang="stylus">
.fade-in
animation fade-in ease 1s
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.opacity-0
opacity 0!important
cursor default
.active-input
border-bottom 1px solid #444
transition none
margin-top -1px
transform translateY(1px)
</style>
...@@ -9,11 +9,15 @@ ...@@ -9,11 +9,15 @@
.q-px-xl .q-px-xl
// slot(name="nav-button") // slot(name="nav-button")
.q-pt-xl q-item.q-pa-none
h5.caption.text-white.q-mt-none q-item-main
slot(name="form-title") h5.q-headline
slot(name="form-caption") slot(name="form-title")
slot q-item-side(v-if="$slots['header-buttons']")
slot(name="header-buttons")
slot(name="form-caption")
slot
.q-mt-xl(v-if="!isElectron") .q-mt-xl(v-if="!isElectron")
site-footer site-footer
......
...@@ -31,7 +31,10 @@ ...@@ -31,7 +31,10 @@
promise-span(:value="props.value") promise-span(:value="props.value")
q-td(slot="body-cell-start", slot-scope="props", :props="props") q-td(slot="body-cell-start", slot-scope="props", :props="props")
q-btn(@click="start(props.value)", flat, style="border: 1px solid #333;") {{ returnDatetime(props.value) }} .q-py-sm.text-grey-6(@click="start(props.value)", style="cursor: pointer;") {{ returnDatetime(props.value) }}
q-td(slot="body-cell-annotation", slot-scope="props", :props="props")
editable-table-data(:data="props", :key="props")
q-td(slot="body-cell-actions", slot-scope="props", :props="props") q-td(slot="body-cell-actions", slot-scope="props", :props="props")
q-btn(v-for="btn in props.value", :key="btn.icon", "flat", size="sm", :icon="btn.icon", q-btn(v-for="btn in props.value", :key="btn.icon", "flat", size="sm", :icon="btn.icon",
...@@ -41,6 +44,7 @@ ...@@ -41,6 +44,7 @@
<script> <script>
import PromiseSpan from './PromiseSpan' import PromiseSpan from './PromiseSpan'
import EditableTableData from '../forms/EditableTableData'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { userHasFeature } from 'mbjs-quasar/src/lib' import { userHasFeature } from 'mbjs-quasar/src/lib'
import { DateTime } from 'luxon' import { DateTime } from 'luxon'
...@@ -48,7 +52,8 @@ ...@@ -48,7 +52,8 @@
export default { export default {
props: ['config', 'path', 'query', 'title', 'basePath', 'hasShow', 'requestTransform'], props: ['config', 'path', 'query', 'title', 'basePath', 'hasShow', 'requestTransform'],
components: { components: {
PromiseSpan PromiseSpan,
EditableTableData
}, },
data () { data () {
return { return {
...@@ -113,15 +118,17 @@ ...@@ -113,15 +118,17 @@
} }
return column return column
}) })
cols.push({ if (this.config.actions) {
name: 'actions', cols.push({
align: 'right', name: 'actions',
type: 'string', align: 'right',
filter: false, type: 'string',
sortable: false, filter: false,
sort: false, sortable: false,
format: makeFormatter('actions') sort: false,
}) format: makeFormatter('actions')
})
}
this.cols = cols this.cols = cols
}, },
async defaultClick (btn, props) { async defaultClick (btn, props) {
......
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