add rollup/vue for frontend assets, add wip new object form (needs success/error handling)
This commit is contained in:
@@ -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
@@ -1,123 +1,103 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
box-sizing: border-box; }
|
||||
|
||||
html, textarea, select {
|
||||
font-family: "IBM Plex", "DejaVu Sans", "Helvetica", sans-serif;
|
||||
}
|
||||
font-family: "IBM Plex", "DejaVu Sans", "Helvetica", sans-serif; }
|
||||
|
||||
.Form {
|
||||
display: block;
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
display: block;
|
||||
width: 900px;
|
||||
margin: 0 auto; }
|
||||
|
||||
nav.top-nav {
|
||||
margin-bottom: .5rem;
|
||||
border-bottom: 1px solid silver;
|
||||
}
|
||||
margin-bottom: .5rem;
|
||||
border-bottom: 1px solid silver; }
|
||||
|
||||
nav.top-nav, .content {
|
||||
margin: 0 auto;
|
||||
width: 900px;
|
||||
}
|
||||
margin: 0 auto;
|
||||
width: 900px; }
|
||||
|
||||
a {
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
color: gray;
|
||||
text-decoration: none; }
|
||||
|
||||
a:hover {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
color: black;
|
||||
text-decoration: underline; }
|
||||
|
||||
nav.top-nav a {
|
||||
display: inline-block;
|
||||
padding: .75rem;
|
||||
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
}
|
||||
display: inline-block;
|
||||
padding: .75rem;
|
||||
color: gray;
|
||||
text-decoration: none; }
|
||||
|
||||
nav.top-nav a:hover {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
color: black;
|
||||
text-decoration: underline; }
|
||||
|
||||
.Form .Row {
|
||||
display: flex;
|
||||
padding: .25rem;
|
||||
}
|
||||
display: flex;
|
||||
padding: .25rem; }
|
||||
|
||||
.Form .Row.indented {
|
||||
padding-left: 10.25rem;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
height: 2.1rem;
|
||||
width: 15rem; }
|
||||
|
||||
.Form textarea {
|
||||
flex-shrink: 1;
|
||||
width: 30rem;
|
||||
height: 6rem;
|
||||
}
|
||||
flex-shrink: 1;
|
||||
width: 30rem;
|
||||
height: 6rem; }
|
||||
|
||||
.Form label.checkbox-wrap {
|
||||
width: 15rem;
|
||||
padding-right: 1rem;
|
||||
text-align: left !important;
|
||||
}
|
||||
width: 15rem;
|
||||
padding-right: 1rem;
|
||||
text-align: left !important; }
|
||||
|
||||
.tag-input {
|
||||
position: relative;
|
||||
width: 30rem;
|
||||
padding-bottom: 0rem !important;
|
||||
}
|
||||
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;
|
||||
}
|
||||
border: 0 transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
outline: 0 none !important; }
|
||||
|
||||
/*
|
||||
|
||||
@@ -201,22 +181,29 @@ textarea:focus,
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
li {
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
padding-bottom: .5rem; }
|
||||
|
||||
.toast {
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
padding: .5rem;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
border: 1px solid black;
|
||||
border-radius: 5px;
|
||||
padding: .5rem;
|
||||
margin: .5rem 0; }
|
||||
|
||||
.toast.error {
|
||||
border-color: #dc143c;
|
||||
}
|
||||
border-color: #dc143c; }
|
||||
|
||||
.toast.success {
|
||||
border-color: #32cd32;
|
||||
}
|
||||
border-color: #32cd32; }
|
||||
|
||||
.EditForm th {
|
||||
text-align: left;
|
||||
vertical-align: top; }
|
||||
|
||||
label {
|
||||
cursor: pointer; }
|
||||
|
||||
.new-relation[data-v-0f98a4a0] {
|
||||
border: 1px dashed gray;
|
||||
margin: 10px 0;
|
||||
padding: 10px; }
|
||||
|
||||
@@ -3,9 +3,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title -%}{%- endblock title %} • YOPA</title>
|
||||
<script src="/static/bundle.js"></script>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="stylesheet" href="/static/taggle.css">
|
||||
<script src="/static/taggle.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="top-nav">
|
||||
|
||||
+8
-2
@@ -1,12 +1,12 @@
|
||||
{% extends "_layout" %}
|
||||
{% import "_macros" as macros %}
|
||||
{% import "models/_schema_macros" as macros %}
|
||||
|
||||
{% block title -%}
|
||||
Index
|
||||
{%- endblock %}
|
||||
|
||||
{% block nav -%}
|
||||
<a href="/">Home</a>
|
||||
<a href="/takeout">Takeout</a>
|
||||
{%- endblock %}
|
||||
|
||||
{% block content -%}
|
||||
@@ -23,6 +23,12 @@
|
||||
<li>
|
||||
<b title="{{model.id}}">{{model.name}}</b><br>
|
||||
|
||||
<!--
|
||||
|
||||
{{ model | json_encode(pretty=true) | safe }}
|
||||
|
||||
-->
|
||||
|
||||
<a href="/model/object/delete/{{model.id}}" onclick="return confirm('Delete model?')">Delete model</a> ·
|
||||
<a href="/model/object/update/{{model.id}}">Edit model</a> ·
|
||||
<a href="/model/relation/create/{{model.id}}">New relation</a> ·
|
||||
@@ -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
Reference in New Issue
Block a user