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.
76 lines
2.2 KiB
76 lines
2.2 KiB
<script>
|
|
import {objCopy, uniqueId} from "../utils";
|
|
import * as Vue from 'vue';
|
|
|
|
export default {
|
|
name: "EditPropertyField",
|
|
props: ['model', 'values'],
|
|
data() {
|
|
return {
|
|
widget_id: uniqueId(),
|
|
fieldRefs: [],
|
|
}
|
|
},
|
|
methods: {
|
|
addValue(event) {
|
|
this.values.push({
|
|
model: this.model.id,
|
|
value: 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>
|
|
<div v-if="values.length===0" class="form-group">
|
|
<div class="col-3">
|
|
<label class="form-label" :for="widget_id">{{ model.name }}</label>
|
|
</div>
|
|
<div class="col-9">
|
|
<a class="btn" @click="addValue">
|
|
<i class="icon icon-plus"></i>
|
|
Add
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div v-if="values.length>0" class="form-group" v-for="(instance, vi) in values" :key="vi">
|
|
<div class="col-3">
|
|
<label class="form-label" :for="widget_id" v-if="vi===0">{{ model.name }}</label>
|
|
</div>
|
|
<div class="col-9">
|
|
<string-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='String'"></string-value>
|
|
<integer-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Integer'"></integer-value>
|
|
<decimal-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Decimal'"></decimal-value>
|
|
<boolean-value :ref="setFieldRef" :value="instance.value" :id="vi === 0 ? widget_id : null" v-if="model.data_type==='Boolean'"></boolean-value>
|
|
<a class="btn btn-delete ml-1" @click="removeValue(vi)" v-if="values.length > 1 || model.optional">
|
|
<i class="icon icon-cross"></i>
|
|
Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div v-if="values.length>0 && model.multiple" class="form-group">
|
|
<div class="col-3"></div>
|
|
<div class="col-9">
|
|
<a class="btn" @click="addValue">
|
|
<i class="icon icon-plus"></i>
|
|
Add
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|