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.
146 lines
3.3 KiB
146 lines
3.3 KiB
<script>
|
|
import {castId, keyBy, objCopy, isEmpty} from "../utils";
|
|
import forEach from "lodash-es/forEach";
|
|
import axios from "axios";
|
|
import isEqual from "lodash-es/isEqual";
|
|
|
|
export default {
|
|
props: ['model_id', 'schema', 'objects'],
|
|
name: "NewObjectForm",
|
|
data() {
|
|
const model = this.schema.obj_models.find((m) => m.id === this.model_id);
|
|
let properties = this.schema.prop_models.filter((m) => m.object === model.id);
|
|
let relations = this.schema.rel_models.filter((m) => m.object === model.id);
|
|
|
|
let values = {};
|
|
properties.forEach((p) => {
|
|
if (p.optional) {
|
|
values[p.id] = [];
|
|
} else {
|
|
values[p.id] = [objCopy(p.default)];
|
|
}
|
|
});
|
|
|
|
let propertiesById = keyBy(properties, 'id');
|
|
let relationsById = keyBy(relations, 'id');
|
|
|
|
let model_names = {};
|
|
this.schema.obj_models.forEach((m) => {
|
|
model_names[m.id] = m.name;
|
|
});
|
|
|
|
return {
|
|
model,
|
|
properties,
|
|
relations,
|
|
propertiesById,
|
|
relationsById,
|
|
haveRelations: !isEmpty(relations),
|
|
model_names,
|
|
values,
|
|
relationRefs: [],
|
|
}
|
|
},
|
|
methods: {
|
|
/** Get values in the raw format without grouping */
|
|
collectData() {
|
|
let values = [];
|
|
forEach(objCopy(this.values), (vv, prop_model_id) => {
|
|
for (let v of vv) {
|
|
if (isEqual(v, {"String": ""}) && this.properties[prop_model_id].optional) {
|
|
continue;
|
|
}
|
|
|
|
values.push({
|
|
model: castId(prop_model_id),
|
|
value: v
|
|
})
|
|
}
|
|
})
|
|
|
|
let relations = [];
|
|
for (let rref of this.relationRefs) {
|
|
for (let r of rref.collectData()) {
|
|
relations.push(r);
|
|
}
|
|
}
|
|
|
|
return {
|
|
model: this.model.id,
|
|
values,
|
|
relations,
|
|
};
|
|
},
|
|
|
|
trySave() {
|
|
let data;
|
|
try {
|
|
data = this.collectData();
|
|
} catch (e) {
|
|
alert(e.message);
|
|
return;
|
|
}
|
|
console.log('Try save', data);
|
|
|
|
axios({
|
|
method: 'post',
|
|
url: '/object/create',
|
|
data: data
|
|
})
|
|
.then(function (response) {
|
|
location.href = '/objects';
|
|
})
|
|
.catch(function (error) {
|
|
// TODO show error toast instead
|
|
alert(error.response ?
|
|
error.response.data :
|
|
error)
|
|
});
|
|
},
|
|
|
|
setRelationRef(el) {
|
|
if (el) {
|
|
this.relationRefs.push(el)
|
|
}
|
|
},
|
|
},
|
|
beforeUpdate() {
|
|
this.relationRefs = []
|
|
},
|
|
mounted() {
|
|
this.$el.parentNode
|
|
.classList.add('EditForm');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="cols">
|
|
<div class="col col-9">
|
|
<h1>New {{ model.name }}</h1>
|
|
</div>
|
|
<div class="col col-3 text-right">
|
|
<button @click="trySave" class="btn btn-primary">
|
|
<i class="icon icon-check"></i>Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-horizontal container">
|
|
<property v-for="(property, pi) in properties" :model="property" :values="values[property.id]" :key="pi"></property>
|
|
</div>
|
|
|
|
<div v-if="haveRelations">
|
|
<h3>Relations</h3>
|
|
|
|
<new-relation
|
|
v-for="relation in relations"
|
|
:ref="setRelationRef"
|
|
:model_id="relation.id"
|
|
:objects="objects"
|
|
:schema="schema"
|
|
></new-relation>
|
|
</div>
|
|
</template>
|
|
|