a small relational database with user-editable schema for manual data entry
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
yopa/yopa-web/resources/src/components/PropertyField.vue

59 lines
1.8 KiB

<script>
import {objCopy, uniqueId} from "../utils";
import * as Vue from 'vue';
export default {
name: "PropertyField",
props: ['model', 'values'],
data() {
return {
widget_id: uniqueId(),
fieldRefs: [],
}
},
methods: {
addValue(event) {
this.values.push(objCopy(this.model.default));
Vue.nextTick(() => {
this.fieldRefs[this.values.length-1].focus();
})
},
removeValue(vi) {
this.values.splice(vi, 1);
},
setFieldRef(el) {
if (el) {
this.fieldRefs.push(el)
}
},
},
beforeUpdate() {
this.fieldRefs = []
}
}
</script>
<template>
<tr v-if="values.length===0">
<th @click="addValue">{{model.name}}</th>
<td>
<a href="#" @click="addValue">Add</a>
</td>
</tr>
<tr v-else v-for="(value, vi) in values" :key="vi">
<th :rowspan="values.length + model.multiple" v-if="vi == 0"><label :for="widget_id">{{model.name}}</label></th>
<td>
<string-value :ref="setFieldRef" :value="value" :id="vi===0?widget_id:null" v-if="model.data_type==='String'"></string-value>
<integer-value :ref="setFieldRef" :value="value" :id="vi===0?widget_id:null" v-if="model.data_type==='Integer'"></integer-value>
<decimal-value :ref="setFieldRef" :value="value" :id="vi===0?widget_id:null" v-if="model.data_type==='Decimal'"></decimal-value>
<boolean-value :ref="setFieldRef" :value="value" :id="vi===0?widget_id:null" v-if="model.data_type==='Boolean'"></boolean-value>
<a class="button ml-2" @click="removeValue(vi)" v-if="vi > 0 || model.optional" style="margin-left:5px">Remove</a>
</td>
</tr>
<tr v-if="values.length > 0 && model.multiple">
<td>
<a class="button" @click="addValue">Add</a>
</td>
</tr>
</template>