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/NewRelationForm.vue

143 lines
3.8 KiB

<script>
import {castId, keyBy, objCopy, isEmpty} from "../utils";
import forEach from "lodash-es/forEach";
import isEqual from "lodash-es/isEqual";
export default {
props: ['model_id', 'schema', 'objects'],
name: "NewRelationForm",
data() {
const model = this.schema.rel_models.find((m) => m.id === this.model_id);
if(!model) throw Error("Relation model not exist");
let properties = this.schema.prop_models.filter((m) => m.object === model.id);
let propertiesById = {};
if (!isEmpty(properties)) {
propertiesById = keyBy(properties, 'id');
}
let related_model = this.schema.obj_models.find((m) => m.id === model.related);
if(!related_model) throw Error("Related model not exist");
let choices = {};
this.objects.forEach((obj) => {
if (obj.model === model.related) {
choices[obj.id] = obj.name;
}
});
let instances = [];
if (!model.optional) {
// TODO avoid duplicated code
let values = {};
forEach(this.properties, (p) => {
if (p.optional) {
values[p.id] = [];
} else {
values[p.id] = [objCopy(p.default)];
}
});
instances.push({
related: '',
values
})
}
return {
model,
related_model,
properties,
propertiesById,
object_names: choices,
instances,
}
},
methods: {
collectData() {
let relations = [];
forEach(objCopy(this.instances), (instance) => {
if (isEmpty(instance.related)) {
if (!this.model.optional) {
throw new Error(`Relation "${this.model.name}" is required`)
}
return; // continue
}
let values = [];
forEach(instance.values, (vv, prop_model_id) => {
for (let v of vv) {
if (isEqual(v, {"String": ""}) && this.propertiesById[prop_model_id].optional) {
continue;
}
values.push({
model: castId(prop_model_id),
value: v
});
}
})
relations.push({
model: this.model.id,
related: castId(instance.related),
values
});
})
return relations;
},
addInstance() {
let values = {};
forEach(this.properties, (p) => {
if (p.optional) {
values[p.id] = [];
} else {
values[p.id] = [objCopy(p.default)];
}
});
this.instances.push({
model: this.model.id,
related: '',
values
})
},
removeInstance(ri) {
this.instances.splice(ri, 1)
}
}
}
</script>
<template>
<div class="form-horizontal panel mt-1 mb-1 p-2" v-for="(instance, ri) in instances" :key="ri">
<div class="form-group cols">
<div class="col-3 pl-2">
<label class="form-label text-bold">{{ model.name }}</label>
</div>
<div class="col-7">
<select class="form-select input-inline" v-model="instance.related">
<option v-for="(name, id) in object_names" :value="id">{{name}}</option>
</select>
</div>
<div class="col-2 text-right pr-2">
<button type="button" class="btn btn-delete" v-if="model.multiple || model.optional && instances.length > 0"
@click="removeInstance(ri)"><i class="icon-delete icon"></i>Delete</button>
</div>
</div>
<property v-for="property in properties"
:model="property"
:values="instance.values[property.id]" :key="property.id"></property>
</div>
<div class="mt-2 mb-2">
<button type="button" class="btn" v-if="model.multiple || model.optional && instances.length===0"
@click="addInstance">
<i class="icon icon-plus"></i>Add {{ model.name }}
</button>
</div>
</template>