parent
780ad36696
commit
b5a4900209
GPG Key ID:
2C5FD5035250423D
@ -0,0 +1 @@ |
|||||||
|
node_modules/ |
||||||
@ -1,64 +0,0 @@ |
|||||||
{% extends "_layout" %} |
|
||||||
|
|
||||||
{% block title -%} |
|
||||||
Index |
|
||||||
{%- endblock %} |
|
||||||
|
|
||||||
{% block nav -%} |
|
||||||
<a href="/">Home</a> |
|
||||||
{%- endblock %} |
|
||||||
|
|
||||||
{% block content -%} |
|
||||||
|
|
||||||
<h1>Welcome to tera on actix</h1> |
|
||||||
|
|
||||||
<a href="/model/object/create">New model</a> |
|
||||||
|
|
||||||
<h2>Defined models:</h2> |
|
||||||
|
|
||||||
<ul> |
|
||||||
{% for model in models %} |
|
||||||
<li> |
|
||||||
<b>{{model.name}}</b><br> |
|
||||||
|
|
||||||
{# |
|
||||||
|
|
||||||
{% if !model.properties.is_empty() %} |
|
||||||
Properties: |
|
||||||
<ul> |
|
||||||
{% for prop in model.properties %} |
|
||||||
<li>{{prop.name}}, {{prop.data_type}}, def: {{prop.default}}, opt: {{prop.optional}}, mult: {{prop.multiple}}</li> |
|
||||||
{% endfor %} |
|
||||||
</ul> |
|
||||||
{% endif %} |
|
||||||
|
|
||||||
<a href="/model/property/create/{{model.id}}">New property</a> |
|
||||||
|
|
||||||
{% if !model.relations.is_empty() %} |
|
||||||
Relations: |
|
||||||
<ul> |
|
||||||
{% for rel in model.relations %} |
|
||||||
<li> |
|
||||||
{{rel.name}} -> {{rel.related_name}} |
|
||||||
|
|
||||||
{% if !rel.properties.is_empty() %} |
|
||||||
Properties: |
|
||||||
<ul> |
|
||||||
{% for prop in rel.properties %} |
|
||||||
<li>{{prop.name}}, {{prop.data_type}}, def: {{prop.default}}, opt: {{prop.optional}}, mult: {{prop.multiple}}</li> |
|
||||||
{% endfor %} |
|
||||||
</ul> |
|
||||||
{% endif %} |
|
||||||
</li> |
|
||||||
{% endfor %} |
|
||||||
</ul> |
|
||||||
{% endif %} |
|
||||||
|
|
||||||
<a href="/model/relation/create/{{model.id}}">New relation</a> |
|
||||||
|
|
||||||
#} |
|
||||||
</li> |
|
||||||
{% endfor %} |
|
||||||
</ul> |
|
||||||
|
|
||||||
{%- endblock %} |
|
||||||
@ -0,0 +1,31 @@ |
|||||||
|
{ |
||||||
|
"name": "rollup-test", |
||||||
|
"version": "1.0.0", |
||||||
|
"main": "index.js", |
||||||
|
"license": "proprietary", |
||||||
|
"devDependencies": { |
||||||
|
"@rollup/plugin-alias": "^2.2.0", |
||||||
|
"@rollup/plugin-commonjs": "^17.0.0", |
||||||
|
"@rollup/plugin-node-resolve": "^11.1.0", |
||||||
|
"@rollup/plugin-replace": "^2.2.0", |
||||||
|
"@vue/compiler-sfc": "^3.0.5", |
||||||
|
"npm-run-all": "^4.1.5", |
||||||
|
"rollup": "^2.36.2", |
||||||
|
"rollup-plugin-terser": "^7.0.2", |
||||||
|
"rollup-plugin-vue": "^6.0.0-beta.10", |
||||||
|
"@rollup/plugin-json": "4.1", |
||||||
|
"serve": "^11.3.2" |
||||||
|
}, |
||||||
|
"scripts": { |
||||||
|
"build": "rollup -c", |
||||||
|
"watch": "rollup -c -w", |
||||||
|
"dev": "npm-run-all --parallel start watch", |
||||||
|
"start": "serve public" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"axios": "^0.21.1", |
||||||
|
"lodash-es": "^4.17.20", |
||||||
|
"rollup-plugin-scss": "^2.6.1", |
||||||
|
"vue": "^3.0.5" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import pluginNodeResolve from '@rollup/plugin-node-resolve'; |
||||||
|
import pluginCommonJs from '@rollup/plugin-commonjs'; |
||||||
|
import { terser } from 'rollup-plugin-terser'; |
||||||
|
import rollupReplace from '@rollup/plugin-replace'; |
||||||
|
import pluginAlias from '@rollup/plugin-alias'; |
||||||
|
import pluginJson from '@rollup/plugin-json'; |
||||||
|
import pluginVue from 'rollup-plugin-vue'; |
||||||
|
import pluginScss from 'rollup-plugin-scss'; |
||||||
|
|
||||||
|
// `npm run build` -> `production` is true
|
||||||
|
// `npm run dev` -> `production` is false
|
||||||
|
const production = !process.env.ROLLUP_WATCH; |
||||||
|
|
||||||
|
export default { |
||||||
|
input: 'src/main.js', |
||||||
|
output: { |
||||||
|
file: 'static/bundle.js', |
||||||
|
format: 'iife', // immediately-invoked function expression — suitable for <script> tags
|
||||||
|
sourcemap: true |
||||||
|
}, |
||||||
|
plugins: [ |
||||||
|
pluginAlias({ |
||||||
|
entries: { |
||||||
|
//'vue': __dirname + "/node_modules/vue/dist/vue.esm-bundler.js"
|
||||||
|
} |
||||||
|
}), |
||||||
|
pluginVue({ |
||||||
|
target: 'browser', |
||||||
|
}), |
||||||
|
pluginScss({ |
||||||
|
output: 'static/style.css', |
||||||
|
}), |
||||||
|
pluginJson(), |
||||||
|
pluginNodeResolve({ |
||||||
|
jsnext: true, |
||||||
|
main: true, |
||||||
|
module: true, |
||||||
|
browser: true, |
||||||
|
preferBuiltins: false, |
||||||
|
}), |
||||||
|
pluginCommonJs({ |
||||||
|
include: 'node_modules/**', |
||||||
|
browser: true, |
||||||
|
preferBuiltins: false, |
||||||
|
// ignoreGlobal: false,
|
||||||
|
sourceMap: !production |
||||||
|
}), |
||||||
|
rollupReplace({ |
||||||
|
'process.env.NODE_ENV': production ? '"development"': '"production"', |
||||||
|
'__VUE_OPTIONS_API__': 'true', |
||||||
|
'__VUE_PROD_DEVTOOLS__': 'false', |
||||||
|
}), |
||||||
|
production && terser(), |
||||||
|
] |
||||||
|
}; |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "BooleanValue", |
||||||
|
props: { |
||||||
|
id: { |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
}, |
||||||
|
value: Object |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
focus() { |
||||||
|
this.$refs.input.focus(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
inputValue: { |
||||||
|
set(value) { |
||||||
|
this.value.Boolean = !!value; |
||||||
|
}, |
||||||
|
get() { |
||||||
|
return this.value.Boolean; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<input ref="input" type="checkbox" :id="id" value="true" v-model="inputValue"> |
||||||
|
</template> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "DecimalValue", |
||||||
|
props: { |
||||||
|
id: { |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
}, |
||||||
|
value: Object |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
focus() { |
||||||
|
this.$refs.input.focus(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
inputValue: { |
||||||
|
set(value) { |
||||||
|
this.value.Decimal = parseFloat(value); |
||||||
|
}, |
||||||
|
get() { |
||||||
|
return this.value.Decimal; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<input ref="input" type="number" :id="id" step="any" v-model="inputValue"> |
||||||
|
</template> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "IntegerValue", |
||||||
|
props: { |
||||||
|
id: { |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
}, |
||||||
|
value: Object |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
focus() { |
||||||
|
this.$refs.input.focus(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
inputValue: { |
||||||
|
set(value) { |
||||||
|
this.value.Integer = parseInt(value); |
||||||
|
}, |
||||||
|
get() { |
||||||
|
return this.value.Integer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<input ref="input" type="number" :id="id" step="1" v-model="inputValue"> |
||||||
|
</template> |
||||||
@ -0,0 +1,141 @@ |
|||||||
|
<script> |
||||||
|
import {castId, keyBy, objCopy} from "../utils"; |
||||||
|
import forEach from "lodash-es/forEach"; |
||||||
|
import isEmpty from "lodash-es/isEmpty"; |
||||||
|
import axios from "axios"; |
||||||
|
|
||||||
|
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); |
||||||
|
|
||||||
|
properties.sort((a, b) => a.name.localeCompare(b.name)); |
||||||
|
relations.sort((a, b) => a.name.localeCompare(b.name)); |
||||||
|
|
||||||
|
let values = {}; |
||||||
|
properties.forEach((p) => { |
||||||
|
if (p.optional) { |
||||||
|
values[p.id] = []; |
||||||
|
} else { |
||||||
|
values[p.id] = [objCopy(p.default)]; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
properties = keyBy(properties, 'id'); |
||||||
|
relations = keyBy(relations, 'id'); |
||||||
|
|
||||||
|
let model_names = {}; |
||||||
|
this.schema.obj_models.forEach((m) => { |
||||||
|
model_names[m.id] = m.name; |
||||||
|
}); |
||||||
|
|
||||||
|
return { |
||||||
|
model, |
||||||
|
properties, |
||||||
|
relations, |
||||||
|
model_names, |
||||||
|
values, |
||||||
|
name: '', |
||||||
|
relationRefs: [], |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** Get values in the raw format without grouping */ |
||||||
|
collectData() { |
||||||
|
if (isEmpty(this.name)) { |
||||||
|
throw new Error("Name is required"); |
||||||
|
} |
||||||
|
|
||||||
|
let values = []; |
||||||
|
forEach(objCopy(this.values), (vv, k) => { |
||||||
|
for (let v of vv) { |
||||||
|
values.push({ |
||||||
|
model_id: castId(k), |
||||||
|
value: v |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
let relations = []; |
||||||
|
for (let rref of this.relationRefs) { |
||||||
|
for (let r of rref.collectData()) { |
||||||
|
relations.push(r); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
model_id: this.model_id, // string is fine |
||||||
|
name: this.name, |
||||||
|
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) { |
||||||
|
console.log('Response', response); |
||||||
|
}) |
||||||
|
.catch(function (error) { |
||||||
|
console.log('Error', error); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
setRelationRef(el) { |
||||||
|
if (el) { |
||||||
|
this.relationRefs.push(el) |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
beforeUpdate() { |
||||||
|
this.relationRefs = [] |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$el.parentNode |
||||||
|
.classList.add('EditForm'); |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<h2>New {{ model.name }}</h2> |
||||||
|
|
||||||
|
<p><input type="button" value="Save" @click="trySave"></p> |
||||||
|
|
||||||
|
<table> |
||||||
|
<tr> |
||||||
|
<th><label for="field-name">Name</label></th> |
||||||
|
<td> |
||||||
|
<input type="text" id="field-name" v-model="name"> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
|
||||||
|
<property v-for="(property, pi) in properties" :model="property" :values="values[property.id]" :key="pi"></property> |
||||||
|
</table> |
||||||
|
|
||||||
|
<h3>Relations</h3> |
||||||
|
|
||||||
|
<new-relation |
||||||
|
v-for="relation in relations" |
||||||
|
:ref="setRelationRef" |
||||||
|
:model_id="relation.id" |
||||||
|
:objects="objects" |
||||||
|
:schema="schema" |
||||||
|
></new-relation> |
||||||
|
</template> |
||||||
@ -0,0 +1,141 @@ |
|||||||
|
<script> |
||||||
|
import {castId, keyBy, objCopy} from "../utils"; |
||||||
|
import forEach from "lodash-es/forEach"; |
||||||
|
import isEmpty from "lodash-es/isEmpty"; |
||||||
|
|
||||||
|
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); |
||||||
|
|
||||||
|
properties.sort((a, b) => a.name.localeCompare(b.name)); |
||||||
|
|
||||||
|
if (isEmpty(properties)) { |
||||||
|
properties = null; |
||||||
|
} else { |
||||||
|
properties = 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, |
||||||
|
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) { |
||||||
|
values.push({ |
||||||
|
model_id: castId(prop_model_id), |
||||||
|
value: v |
||||||
|
}); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
relations.push({ |
||||||
|
model_id: this.model.id, |
||||||
|
related_id: 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({ |
||||||
|
related: '', |
||||||
|
values |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
removeInstance(ri) { |
||||||
|
this.instances.splice(ri, 1) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.new-relation { |
||||||
|
border: 1px dashed gray; |
||||||
|
margin: 10px 0; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="new-relation" v-for="(instance, ri) in instances" :key="ri"> |
||||||
|
<b>{{ model.name }} -> {{ related_model.name }} |
||||||
|
<select v-model="instance.related"> |
||||||
|
<option v-for="(name, id) in object_names" :value="id">{{name}}</option> |
||||||
|
</select> |
||||||
|
</b> |
||||||
|
|
||||||
|
<a href="#" v-if="model.multiple || model.optional && instances.length > 0" |
||||||
|
style="margin-left: 5px" |
||||||
|
@click="removeInstance(ri)">X</a> |
||||||
|
|
||||||
|
<table v-if="properties"> |
||||||
|
<property v-for="(property, id) in properties" :model="property" :values="instance.values[id]" :key="id"></property> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
|
||||||
|
<a href="#" v-if="model.multiple || model.optional && instances.length==0" |
||||||
|
@click="addInstance">Add {{ model.name }} -> {{ related_model.name }}</a> |
||||||
|
</div> |
||||||
|
</template> |
||||||
@ -0,0 +1,59 @@ |
|||||||
|
<script> |
||||||
|
import {objCopy, uniqueId} from "../utils"; |
||||||
|
import * as Vue from 'vue'; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "PropertyField", |
||||||
|
props: ['model', 'values'], |
||||||
|
data() { |
||||||
|
return { |
||||||
|
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="id">{{model.name}}</label></th> |
||||||
|
<td> |
||||||
|
<string-value :ref="setFieldRef" :value="value" :id="vi===0?id:null" v-if="model.data_type==='String'"></string-value> |
||||||
|
<integer-value :ref="setFieldRef" :value="value" :id="vi===0?id:null" v-if="model.data_type==='Integer'"></integer-value> |
||||||
|
<decimal-value :ref="setFieldRef" :value="value" :id="vi===0?id:null" v-if="model.data_type==='Decimal'"></decimal-value> |
||||||
|
<boolean-value :ref="setFieldRef" :value="value" :id="vi===0?id:null" v-if="model.data_type==='Boolean'"></boolean-value> |
||||||
|
<a href="#" @click="removeValue(vi)" v-if="vi > 0 || model.optional" style="margin-left:5px">X</a> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr v-if="values.length > 0 && model.multiple"> |
||||||
|
<td> |
||||||
|
<a href="#" @click="addValue">Add</a> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</template> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: "StringValue", |
||||||
|
props: { |
||||||
|
id: { |
||||||
|
type: String, |
||||||
|
default: '', |
||||||
|
}, |
||||||
|
value: Object |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
focus() { |
||||||
|
this.$refs.input.focus(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
inputValue: { |
||||||
|
set(value) { |
||||||
|
this.value.String = value |
||||||
|
}, |
||||||
|
get() { |
||||||
|
return this.value.String; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<input ref="input" type="text" :id="id" v-model="inputValue"> |
||||||
|
</template> |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
import * as Vue from "vue"; |
||||||
|
|
||||||
|
import './style/app.scss'; |
||||||
|
|
||||||
|
import StringValue from "./components/StringValue.vue"; |
||||||
|
import DecimalValue from "./components/DecimalValue.vue"; |
||||||
|
import BooleanValue from "./components/BooleanValue.vue"; |
||||||
|
import IntegerValue from "./components/IntegerValue.vue"; |
||||||
|
import PropertyField from "./components/PropertyField.vue"; |
||||||
|
import NewObjectForm from "./components/NewObjectForm.vue"; |
||||||
|
import NewRelationForm from "./components/NewRelationForm.vue"; |
||||||
|
|
||||||
|
function registerComponents(app) { |
||||||
|
app.component('string-value', StringValue); |
||||||
|
app.component('integer-value', IntegerValue); |
||||||
|
app.component('decimal-value', DecimalValue); |
||||||
|
app.component('boolean-value', BooleanValue); |
||||||
|
app.component('property', PropertyField); |
||||||
|
app.component('new-relation', NewRelationForm); |
||||||
|
} |
||||||
|
|
||||||
|
window.onLoad = function (callback) { |
||||||
|
document.addEventListener('DOMContentLoaded', callback); |
||||||
|
} |
||||||
|
|
||||||
|
window.Yopa = { |
||||||
|
newObjectForm(opts) { |
||||||
|
// Opts: model_id, schema, objects (named objects for relations)
|
||||||
|
let app = window.app = Vue.createApp(NewObjectForm, opts); |
||||||
|
registerComponents(app); |
||||||
|
let instance = app.mount('#new-object-form'); |
||||||
|
|
||||||
|
// ...
|
||||||
|
return instance; |
||||||
|
} |
||||||
|
}; |
||||||
@ -0,0 +1,222 @@ |
|||||||
|
*, *::before, *::after { |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
html, textarea, select { |
||||||
|
font-family: "IBM Plex", "DejaVu Sans", "Helvetica", sans-serif; |
||||||
|
} |
||||||
|
|
||||||
|
.Form { |
||||||
|
display: block; |
||||||
|
width: 900px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
nav.top-nav { |
||||||
|
margin-bottom: .5rem; |
||||||
|
border-bottom: 1px solid silver; |
||||||
|
} |
||||||
|
|
||||||
|
nav.top-nav, .content { |
||||||
|
margin: 0 auto; |
||||||
|
width: 900px; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: gray; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
a:hover { |
||||||
|
color: black; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
nav.top-nav a { |
||||||
|
display: inline-block; |
||||||
|
padding: .75rem; |
||||||
|
|
||||||
|
color: gray; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
nav.top-nav a:hover { |
||||||
|
color: black; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
.Form .Row { |
||||||
|
display: flex; |
||||||
|
padding: .25rem; |
||||||
|
} |
||||||
|
|
||||||
|
.Form .Row.indented { |
||||||
|
padding-left: 10.25rem; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="text"], |
||||||
|
input[type="number"], |
||||||
|
textarea, |
||||||
|
.tag-input { |
||||||
|
border: 1px solid silver; |
||||||
|
padding: 0.5rem; |
||||||
|
border-radius: 5px; |
||||||
|
font-size: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
input[type="text"]:focus, |
||||||
|
input[type="number"]:focus, |
||||||
|
textarea:focus, |
||||||
|
.tag-input.active { |
||||||
|
box-shadow: inset 0 0 0 1px #3c97ff; |
||||||
|
border-color: #3c97ff; |
||||||
|
outline: 0 none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.Form label { |
||||||
|
flex-shrink: 0; |
||||||
|
width: 10rem; |
||||||
|
height: 2.1rem; |
||||||
|
line-height: 2.1rem; |
||||||
|
vertical-align: middle; |
||||||
|
text-align: right; |
||||||
|
display: inline-block; |
||||||
|
padding-right: .5rem; |
||||||
|
align-self: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
.Form input[type="text"], |
||||||
|
.Form input[type="number"], |
||||||
|
.Form select { |
||||||
|
height: 2.1rem; |
||||||
|
width: 15rem; |
||||||
|
} |
||||||
|
|
||||||
|
.Form textarea { |
||||||
|
flex-shrink: 1; |
||||||
|
width: 30rem; |
||||||
|
height: 6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.Form label.checkbox-wrap { |
||||||
|
width: 15rem; |
||||||
|
padding-right: 1rem; |
||||||
|
text-align: left !important; |
||||||
|
} |
||||||
|
|
||||||
|
.tag-input { |
||||||
|
position: relative; |
||||||
|
width: 30rem; |
||||||
|
padding-bottom: 0rem !important; |
||||||
|
} |
||||||
|
|
||||||
|
.tag-input input, |
||||||
|
.tag-input input:focus { |
||||||
|
border: 0 transparent; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
box-shadow: none; |
||||||
|
outline: 0 none !important; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
|
||||||
|
.cards-table { |
||||||
|
border-collapse: collapse; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.cards-table .actions { |
||||||
|
font-size: 90%; |
||||||
|
} |
||||||
|
|
||||||
|
.cards-table td, |
||||||
|
.cards-table th { |
||||||
|
padding: .5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.cards-table thead th { |
||||||
|
border-bottom: 2px solid silver; |
||||||
|
} |
||||||
|
|
||||||
|
.cards-table tbody td { |
||||||
|
border-bottom: 1px solid silver; |
||||||
|
} |
||||||
|
|
||||||
|
.cards-table tbody tr:last-child td { |
||||||
|
border-bottom: 2px solid silver; |
||||||
|
} |
||||||
|
|
||||||
|
.cards-table td.tags { |
||||||
|
padding: .25rem; |
||||||
|
} |
||||||
|
|
||||||
|
.cards-table .tag { |
||||||
|
background: #E2E1DF; |
||||||
|
font-size: 90%; |
||||||
|
padding: 0.25rem .45rem; |
||||||
|
border-radius: 3px; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.paginate { |
||||||
|
margin: 1rem auto; |
||||||
|
width: 300px; |
||||||
|
text-align: center; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.paginate span, |
||||||
|
.paginate a { |
||||||
|
padding: .5rem 1rem; |
||||||
|
border-radius: .5rem; |
||||||
|
border: 1px solid silver; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.paginate span.num { |
||||||
|
border: 1px solid #ccc; |
||||||
|
color: gray; |
||||||
|
} |
||||||
|
|
||||||
|
.paginate a { |
||||||
|
cursor: pointer; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
.paginate a:hover { |
||||||
|
background: #ccc; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.paginate .disabled { |
||||||
|
opacity: .5; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.paginate .disabled:hover { |
||||||
|
color: gray; |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
li { |
||||||
|
padding-bottom: .5rem; |
||||||
|
} |
||||||
|
|
||||||
|
.toast { |
||||||
|
border: 1px solid black; |
||||||
|
border-radius: 5px; |
||||||
|
padding: .5rem; |
||||||
|
margin: .5rem 0; |
||||||
|
} |
||||||
|
|
||||||
|
.toast.error { |
||||||
|
border-color: #dc143c; |
||||||
|
} |
||||||
|
|
||||||
|
.toast.success { |
||||||
|
border-color: #32cd32; |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
@import "common"; |
||||||
|
|
||||||
|
.EditForm th { |
||||||
|
text-align: left; |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
|
||||||
|
label { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
export function uniqueId() { |
||||||
|
return 'f' |
||||||
|
+ Math.random().toString(16).replace('.', '') |
||||||
|
+ (+new Date()).toString(16); |
||||||
|
} |
||||||
|
|
||||||
|
export function keyBy(array, keyfunc) { |
||||||
|
let result = {}; |
||||||
|
for(let item of array) { |
||||||
|
if (typeof keyfunc == 'string') { |
||||||
|
result[item[keyfunc]] = item; |
||||||
|
} else { |
||||||
|
result[keyfunc(item)] = item; |
||||||
|
} |
||||||
|
} |
||||||
|
return result; |
||||||
|
} |
||||||
|
|
||||||
|
export function objCopy(object) { |
||||||
|
return JSON.parse(JSON.stringify(object)); |
||||||
|
} |
||||||
|
|
||||||
|
export function castId(id) { |
||||||
|
// TODO no-op after switching to UUIDs
|
||||||
|
return +id; |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,22 @@ |
|||||||
|
{% extends "_layout" %} |
||||||
|
|
||||||
|
{% block title -%} |
||||||
|
Create {{model.name}} |
||||||
|
{%- endblock %} |
||||||
|
|
||||||
|
{% block nav -%} |
||||||
|
<a href="/">Home</a> |
||||||
|
{%- endblock %} |
||||||
|
|
||||||
|
{% block content -%} |
||||||
|
|
||||||
|
<div id="new-object-form"></div> |
||||||
|
|
||||||
|
<script> |
||||||
|
onLoad(() => { |
||||||
|
// TODO populate dynamically from the database |
||||||
|
window.app = Yopa.newObjectForm({{ form_data | json_encode | safe }}) |
||||||
|
}); |
||||||
|
</script> |
||||||
|
|
||||||
|
{%- endblock %} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,102 @@ |
|||||||
|
use actix_session::Session; |
||||||
|
use actix_web::{Responder, web, HttpResponse}; |
||||||
|
use crate::session_ext::SessionExt; |
||||||
|
use crate::routes::object_model::ObjectModelForm; |
||||||
|
use crate::TERA; |
||||||
|
use crate::tera_ext::TeraExt; |
||||||
|
use yopa::{ID, model}; |
||||||
|
use yopa::data::Object; |
||||||
|
use serde::{Serialize,Deserialize}; |
||||||
|
use yopa::insert::InsertObj; |
||||||
|
use crate::utils::redirect; |
||||||
|
use actix_web::web::Json; |
||||||
|
use serde_json::Value; |
||||||
|
|
||||||
|
// we only need references here, Context serializes everything to Value.
|
||||||
|
// cloning would be a waste of cycles
|
||||||
|
|
||||||
|
#[derive(Debug, Default, Serialize, Clone)] |
||||||
|
pub struct Schema<'a> { |
||||||
|
pub obj_models: Vec<&'a model::ObjectModel>, |
||||||
|
pub rel_models: Vec<&'a model::RelationModel>, |
||||||
|
pub prop_models: Vec<&'a model::PropertyModel>, |
||||||
|
} |
||||||
|
|
||||||
|
#[derive(Serialize,Debug,Clone)] |
||||||
|
pub struct ObjectCreateData<'a> { |
||||||
|
pub model_id: ID, |
||||||
|
pub schema: Schema<'a>, |
||||||
|
pub objects: Vec<&'a Object>, |
||||||
|
} |
||||||
|
|
||||||
|
#[get("/object/create/{model_id}")] |
||||||
|
pub(crate) async fn create_form( |
||||||
|
model_id: web::Path<ID>, |
||||||
|
store: crate::YopaStoreWrapper, |
||||||
|
session: Session |
||||||
|
) -> actix_web::Result<impl Responder> { |
||||||
|
let mut context = tera::Context::new(); |
||||||
|
session.render_flash(&mut context); |
||||||
|
|
||||||
|
let rg = store.read().await; |
||||||
|
|
||||||
|
let model = rg.get_object_model(*model_id) |
||||||
|
.ok_or_else(|| actix_web::error::ErrorNotFound("No such model"))?; |
||||||
|
|
||||||
|
context.insert("model", model); |
||||||
|
|
||||||
|
let relations : Vec<_> = rg.get_relation_models_for_object(model.id).collect(); |
||||||
|
|
||||||
|
let mut prop_object_ids : Vec<ID> = relations.iter().map(|r| r.id).collect(); |
||||||
|
prop_object_ids.push(model.id); |
||||||
|
|
||||||
|
prop_object_ids.sort(); |
||||||
|
prop_object_ids.dedup(); |
||||||
|
|
||||||
|
let mut related_ids : Vec<_> = relations.iter().map(|r| r.related).collect(); |
||||||
|
|
||||||
|
related_ids.sort(); |
||||||
|
related_ids.dedup(); |
||||||
|
|
||||||
|
let form_data = ObjectCreateData { |
||||||
|
model_id: model.id, |
||||||
|
schema: Schema { |
||||||
|
obj_models: rg.get_object_models().collect(), // TODO get only the ones that matter here
|
||||||
|
rel_models: relations, |
||||||
|
prop_models: rg.get_property_models_for_parents(&prop_object_ids).collect() |
||||||
|
}, |
||||||
|
objects: rg.get_objects_of_type(&related_ids).collect() |
||||||
|
}; |
||||||
|
|
||||||
|
context.insert("form_data", &form_data); |
||||||
|
|
||||||
|
TERA.build_response("objects/object_create", &context) |
||||||
|
} |
||||||
|
|
||||||
|
#[post("/object/create")] |
||||||
|
pub(crate) async fn create( |
||||||
|
form: web::Json<InsertObj>, |
||||||
|
store: crate::YopaStoreWrapper, |
||||||
|
session: Session, |
||||||
|
) -> actix_web::Result<impl Responder> { |
||||||
|
warn!("{:?}", form); |
||||||
|
|
||||||
|
// let des : InsertObj = serde_json::from_value(form.into_inner()).unwrap();
|
||||||
|
//
|
||||||
|
// Ok(HttpResponse::Ok().finish())
|
||||||
|
//
|
||||||
|
let mut wg = store.write().await; |
||||||
|
let form = form.into_inner(); |
||||||
|
let name = form.name.clone(); |
||||||
|
match wg.insert_object(form) { |
||||||
|
Ok(_id) => { |
||||||
|
debug!("Object created, redirecting to root"); |
||||||
|
session.flash_success(format!("Object \"{}\" created.", name)); |
||||||
|
Ok(HttpResponse::Ok().finish()) |
||||||
|
} |
||||||
|
Err(e) => { |
||||||
|
warn!("Error creating model: {}", e); |
||||||
|
Ok(HttpResponse::BadRequest().body(e.to_string())) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue