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.
85 lines
2.7 KiB
85 lines
2.7 KiB
import * as Vue from "vue";
|
|
|
|
import './style/app.scss';
|
|
|
|
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";
|
|
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);
|
|
}
|
|
|
|
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);
|
|
app.component('new-relation', NewRelationForm);
|
|
app.component('property', PropertyField);
|
|
let instance = app.mount('#new-object-form');
|
|
|
|
// ...
|
|
return instance;
|
|
},
|
|
editObjectForm(opts) {
|
|
// Opts: model_id, schema, objects (named objects for relations)
|
|
let app = window.app = Vue.createApp(EditObjectForm, opts);
|
|
registerComponents(app);
|
|
app.component('edit-relation', EditRelationForm);
|
|
app.component('edit-property', EditPropertyField);
|
|
let instance = app.mount('#edit-object-form');
|
|
|
|
// ...
|
|
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();
|
|
}
|
|
};
|
|
|
|
onLoad(() => {
|
|
setTimeout(() => {
|
|
let toasts = document.getElementsByClassName('toast');
|
|
if (toasts.length) {
|
|
toasts[0].style.display = 'none';
|
|
}
|
|
}, 3000)
|
|
})
|
|
|