MightyPork/yopa
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add sort keys to things, add options object for "multiline"

Browse Source
This commit is contained in:
MightyPork
2021-03-04 02:37:16 +01:00
parent 17328393aa
commit f240e85c20
27 changed files with 273 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
yopa-web/resources/src/components/EditObjectForm.vue
+6 -7
View File
@@ -14,9 +14,6 @@ export default {
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) => {
let existing = object.values[p.id] || [];
@@ -38,8 +35,8 @@ export default {
}
});
properties = keyBy(properties, 'id');
relations = keyBy(relations, 'id');
let propertiesById = keyBy(properties, 'id');
let relationsById = keyBy(relations, 'id');
let model_names = {};
this.schema.obj_models.forEach((m) => {
@@ -49,7 +46,9 @@ export default {
return {
model,
properties,
propertiesById,
relations,
relationsById,
haveRelations: !isEmpty(relations),
model_names,
values,
@@ -67,7 +66,7 @@ export default {
let values = [];
forEach(objCopy(this.values), (vv, prop_model_id) => {
for (let v of vv) {
if (isEqual(v.value, {"String": ""}) && this.properties[prop_model_id].optional) {
if (isEqual(v.value, {"String": ""}) && this.propertiesById[prop_model_id].optional) {
continue;
}
@@ -148,7 +147,7 @@ export default {
</div>
<div class="form-horizontal container">
<edit-property v-for="(property, pi) in properties" :model="property" :values="values[property.id]" :key="pi"></edit-property>
<edit-property v-for="property in properties" :model="property" :values="values[property.id]" :key="property.id"></edit-property>
</div>
<div v-if="haveRelations">
yopa-web/resources/src/components/EditRelationForm.vue
+7 -10
View File
@@ -12,12 +12,9 @@ export default {
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 = [];
} else {
properties = keyBy(properties, 'id');
let propertiesById = {};
if (!isEmpty(properties)) {
propertiesById = keyBy(properties, 'id');
}
let related_model = this.schema.obj_models.find((m) => m.id === model.related);
@@ -35,6 +32,7 @@ export default {
model,
related_model,
properties,
propertiesById,
object_names: choices,
instances: objCopy(this.initialInstances),
}
@@ -56,7 +54,7 @@ export default {
let values = [];
forEach(instance.values, (vv, prop_model_id) => {
for (let v of vv) {
if (isEqual(v.value, {"String": ""}) && this.properties[prop_model_id].optional) {
if (isEqual(v.value, {"String": ""}) && this.propertiesById[prop_model_id].optional) {
continue;
}
v.model = castId(prop_model_id);
@@ -68,7 +66,6 @@ export default {
instance.values = values;
relations.push(instance);
})
console.log('collected', relations);
return relations;
},
@@ -112,9 +109,9 @@ export default {
</div>
</div>
<edit-property v-for="(property, id) in properties"
<edit-property v-for="property in properties"
:model="property"
:values="instance.values[id]" :key="id"></edit-property>
:values="instance.values[property.id]" :key="property.id"></edit-property>
</div>
<div class="mt-2 mb-2">
yopa-web/resources/src/components/NewObjectForm.vue
+4 -5
View File
@@ -12,9 +12,6 @@ export default {
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) {
@@ -24,8 +21,8 @@ export default {
}
});
properties = keyBy(properties, 'id');
relations = keyBy(relations, 'id');
let propertiesById = keyBy(properties, 'id');
let relationsById = keyBy(relations, 'id');
let model_names = {};
this.schema.obj_models.forEach((m) => {
@@ -36,6 +33,8 @@ export default {
model,
properties,
relations,
propertiesById,
relationsById,
haveRelations: !isEmpty(relations),
model_names,
values,
yopa-web/resources/src/components/NewRelationForm.vue
+7 -9
View File
@@ -12,12 +12,9 @@ export default {
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 = [];
} else {
properties = keyBy(properties, 'id');
let propertiesById = {};
if (!isEmpty(properties)) {
propertiesById = keyBy(properties, 'id');
}
let related_model = this.schema.obj_models.find((m) => m.id === model.related);
@@ -52,6 +49,7 @@ export default {
model,
related_model,
properties,
propertiesById,
object_names: choices,
instances,
}
@@ -71,7 +69,7 @@ export default {
forEach(instance.values, (vv, prop_model_id) => {
for (let v of vv) {
if (isEqual(v, {"String": ""}) && this.properties[prop_model_id].optional) {
if (isEqual(v, {"String": ""}) && this.propertiesById[prop_model_id].optional) {
continue;
}
@@ -131,9 +129,9 @@ export default {
</div>
</div>
<property v-for="(property, id) in properties"
<property v-for="property in properties"
:model="property"
:values="instance.values[id]" :key="id"></property>
:values="instance.values[property.id]" :key="property.id"></property>
</div>
<div class="mt-2 mb-2">
yopa-web/resources/src/main.js
+24
View File
@@ -6,6 +6,7 @@ import StringValue from "./components/value/StringValue.vue";
import DecimalValue from "./components/value/DecimalValue.vue";
import BooleanValue from "./components/value/BooleanValue.vue";
import IntegerValue from "./components/value/IntegerValue.vue";
import TextValue from "./components/value/TextValue.vue";
import PropertyField from "./components/PropertyField.vue";
import NewObjectForm from "./components/NewObjectForm.vue";
@@ -14,9 +15,11 @@ import NewRelationForm from "./components/NewRelationForm.vue"
import EditObjectForm from "./components/EditObjectForm.vue";
import EditRelationForm from "./components/EditRelationForm.vue";
import EditPropertyField from "./components/EditPropertyField.vue";
import {qs} from "./utils";
function registerComponents(app) {
app.component('string-value', StringValue);
app.component('text-value', StringValue);
app.component('integer-value', IntegerValue);
app.component('decimal-value', DecimalValue);
app.component('boolean-value', BooleanValue);
@@ -48,6 +51,27 @@ window.Yopa = {
// ...
return instance;
},
propertyEditForm() {
// multiple and unique are XORed. This is also enforced server-side
let multiple = qs('#multiple');
let unique = qs('#unique');
let type = qs('#data_type');
unique.addEventListener('input', function () {
multiple.checked &= !unique.checked;
})
multiple.addEventListener('input', function () {
unique.checked &= !multiple.checked;
})
type.addEventListener('input', function () {
console.log(type.value);
toggleOptionalBoxes();
})
function toggleOptionalBoxes() {
qs('#string-options').classList.toggle('hidden', type.value !== 'String');
}
toggleOptionalBoxes();
}
};
yopa-web/resources/src/style/app.scss
+4
View File
@@ -17,3 +17,7 @@ table.object-display {
width: 225px;
}
}
.hidden {
display: none !important;
}
yopa-web/resources/src/utils.js
+3
View File
@@ -43,3 +43,6 @@ export function isEmpty(object) {
return lodash_isEmpty(object)
}
export function qs(s) { return document.querySelector(s); }
export function qss(s) { return document.querySelectorAll(s); }
yopa-web/resources/static/bundle.js
+1 -1
View File
File diff suppressed because one or more lines are too long
yopa-web/resources/static/bundle.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
yopa-web/resources/static/style.css
+3
View File
@@ -4129,3 +4129,6 @@ table.object-display {
margin-bottom: 0.6rem; }
table.object-display tbody th {
width: 225px; }
.hidden {
display: none !important; }
yopa-web/resources/templates/_form_macros.html.tera
+11
View File
@@ -24,6 +24,17 @@
</div>
{% endmacro input %}
{% macro integer(name, label, value) %}
<div class="form-group cols">
<div class="col-3 pl-2">
<label class="form-label" for="{{name}}">{{label}}</label>
</div>
<div class="col-9 pr-2">
<input type="number" step="1" class="form-input input-inline" id="{{name}}" name="{{name}}" value="{{value}}" autocomplete="off">
</div>
</div>
{% endmacro input %}
{% macro checkbox(name, label, checked) %}
<div class="form-group cols">
<div class="col-3 pl-2">
yopa-web/resources/templates/models/model_create.html.tera
+2
View File
@@ -16,6 +16,8 @@ Define object
<div class="form-horizontal container">
{{ form::text(name="name", label="Name", value=old.name) }}
{{ form::integer(name="sort_key", label="Sort order", value=old.sort_key) }}
</div>
</form>
yopa-web/resources/templates/models/model_update.html.tera
+2
View File
@@ -17,6 +17,8 @@ Edit object model
<div class="form-horizontal container">
{{ form::text(name="name", label="Name", value=model.name) }}
{{ form::integer(name="sort_key", label="Sort order", value=model.sort_key) }}
<div class="form-group cols">
<div class="col-3 pl-2">
<label class="form-label" for="name_property">Name property</label>
yopa-web/resources/templates/models/property_create.html.tera
+7 -9
View File
@@ -38,20 +38,18 @@ Define property
</div>
{{ form::text(name="default", label="Default", value=old.default) }}
{{ form::integer(name="sort_key", label="Sort order", value=old.sort_key) }}
<div class="hidden" id="string-options">
{{ form::checkbox(name="opt_multiline", label="Multi-line", checked=old.opt_multiline) }}
</div>
</div>
</form>
<script>
(function () {
// multiple and unique are XORed. This is also enforced server-side
let multiple = document.getElementById('multiple');
let unique = document.getElementById('unique');
unique.addEventListener('input', function () {
multiple.checked &= !unique.checked;
})
multiple.addEventListener('input', function () {
unique.checked &= !multiple.checked;
})
Yopa.propertyEditForm()
})();
</script>
yopa-web/resources/templates/models/property_update.html.tera
+7 -9
View File
@@ -36,20 +36,18 @@ Edit property
</div>
{{ form::text(name="default", label="Default", value=model.default|print_typed_value) }}
{{ form::integer(name="sort_key", label="Sort order", value=model.sort_key) }}
<div id="string-options">
{{ form::checkbox(name="opt_multiline", label="Multi-line", checked=model.options.multiline) }}
</div>
</div>
</form>
<script>
(function () {
// multiple and unique are XORed. This is also enforced server-side
let multiple = document.getElementById('multiple');
let unique = document.getElementById('unique');
unique.addEventListener('input', function () {
multiple.checked &= !unique.checked;
})
multiple.addEventListener('input', function () {
unique.checked &= !multiple.checked;
})
Yopa.propertyEditForm()
})();
</script>
yopa-web/resources/templates/models/relation_create.html.tera
+1
View File
@@ -21,6 +21,7 @@ Define relation
{{ form::text(name="reciprocal_name", label="Reciprocal name", value=old.reciprocal_name) }}
{{ form::checkbox(name="optional", label="Optional", checked=old.optional) }}
{{ form::checkbox(name="multiple", label="Multiple", checked=old.multiple) }}
{{ form::integer(name="sort_key", label="Sort order", value=old.sort_key) }}
<div class="form-group cols">
<div class="col-3 pl-2">
yopa-web/resources/templates/models/relation_update.html.tera
+1
View File
@@ -19,6 +19,7 @@ Edit relation
{{ form::text(name="reciprocal_name", label="Reciprocal name", value=model.reciprocal_name) }}
{{ form::checkbox(name="optional", label="Optional", checked=model.optional) }}
{{ form::checkbox(name="multiple", label="Multiple", checked=model.multiple) }}
{{ form::integer(name="sort_key", label="Sort order", value=model.sort_key) }}
</div>
<p>The related object cannot be changed. Create a new relation if needed.</p>