var components = function () { Vue.component('show-entity-name', { props: ['name', 'item', 'methods', 'changed'], template: ` <form class="form-inline"> <div class="form-group"> <button v-on:click="methods.removeProp(item, name)" v-bind:data="changed" class="btn btn-outline-primary" type="button">-</button> <label>{{ name }}</label> </div> </form> ` }); Vue.component('paginate-values', { props: ['name', 'item', 'methods', 'changed', 'context', 'values', 'schema', 'page'], template: ` <div> <template v-if="values.length > 20 && values.length > (page) * 20" > <details> <summary> {{context.entities[values[page * 20].id].properties.name[0].value}} ... </summary> <show-value class="show-value" v-for="i_index in 20" v-if="i_index + page * 20 < values.length" v-bind:name="name" v-bind:item="item" v-bind:methods="methods" v-bind:changed="changed" v-bind:context="context" v-bind:values="values" v-bind:schema="schema" v-bind:val="values[i_index + page * 20]" v-bind:i_index="i_index" :key="i_index" > </show-value> </details> <paginate-values v-bind:name="name" v-bind:item="item" v-bind:methods="methods" v-bind:changed="changed" v-bind:context="context" v-bind:values="values" v-bind:schema="schema" v-bind:page="page + 1"> </paginate-values> </template> <template v-else-if="page === 0"> <show-value class="show-value" v-for="(val, i_index) in values" v-bind:name="name" v-bind:item="item" v-bind:methods="methods" v-bind:changed="changed" v-bind:context="context" v-bind:values="values" v-bind:schema="schema" v-bind:val="val" v-bind:i_index="i_index" :key="i_index" > </show-value> </template> </div> ` }); Vue.component('show-value', { props: ['name', 'item', 'methods', 'changed', 'context', 'values', 'schema', 'i_index', 'val'], template: ` <div class="form-inline"> <div class="form-group"> <button type="button" title="Delete this property" class="btn btn-outline-primary" v-on:click="methods.removeValue(values, i_index)">- </button> </div> <!-- Input form --> <template v-if="schema.properties[name] && schema.properties[name].input === 'text'"> <div class="form-group flex-grow"> <input class="form-control flex-grow" v-model="val.value" type="text" v-on:keyup="methods.trigger_change_on_enter"/> </div> </template> <!-- UNLINK button for linked props --> <template v-else-if="val && val.id && context.entities[val.id] && context.entities[val.id].properties.name"> <div class="form-group"> <a class="btn btn-outline-success" v-on:click="methods.show_entity(val.id)" v-bind:href="'#' + val.id">{{ context.entities[val.id].properties.name[0].value }} </a> <form class="form-inline" v-on:submit.prevent="methods.unlinkProp(val)"> <button class="btn btn-outline-secondary" type="submit" text="Unlink"> <i class="fa fa-unlink"></i> </button> </form> </div> </template> <!-- FALLBACK - DISPLAY --> <template v-else> <div class="form-group flex-grow"> <input class="form-control flex-grow" v-model="val.value" type="text" v-on:keyup="methods.trigger_change_on_enter"/> </div> </template> <template v-if="schema.properties[name] && schema.properties[name].input === 'link' " > <div class="form-group"> <form class="form-inline" v-on:submit.prevent="methods.linkProp(val)" v-if="!val.id"> <button class="btn btn-outline-primary" type="submit"> <i class="fa fa-link"></i> </button> <select class="custom-select" v-model="val.selection"> <option value="" :selected="true">Select or create new property</option> <template v-for="(link_item, link_id) in context.entities"> {{link_id}} <option v-for="other_name in link_item.properties.name" v-if="(!val.id || link_id != val.id) && schema.properties[name] && link_item.properties.type && schema.properties[name].type.includes(link_item.properties.type[0].value)" v-bind:value="link_id">{{ other_name.value }}</option> </template> </select> </form> <form class="form-inline" v-on:submit.prevent="methods.linkToNew(val)" v-if="!val.id && schema.properties[name] && schema.properties[name].type && schema.properties[name].type.filter(t => {return (schema.types[t] && schema.types[t].create)}).length > 0"> <div class="form-group"> <button class="btn btn-outline-primary" type="submit" text="Link to a new contextual item">New</button> <select class="custom-select" v-model="val.new_type"> <option v-for="type in schema.properties[name].type.filter(type => {return (schema.types[type] && schema.types[type].create)})">{{ type }}</option> </select> </div> </form> </div> </template> </div> ` }); Vue.component('show-props', { props: ['item', 'schema', 'context', 'type', 'methods', 'changed'], template: ` <div class="table-responsive"> <table class="table "> <tr v-for="(values, name) in item.properties" v-bind:data="changed"> <td style="width: 15%" class="show-props-table-def"> <show-entity-name v-bind:name="name" v-bind:item="item" v-bind:methods="methods" v-bind:changed="changed"></show-entity-name> </td> <td style="width: 5%"> <form class="form-inline" v-on:submit.prevent="methods.addProp(item, name)" style='display:inline;'> <button class="btn btn-outline-primary" type="submit">+</button> </form> </td> <td style="width: 80%"> <!-- Put in summary here / Paginate--> <paginate-values v-bind:name="name" v-bind:item="item" v-bind:methods="methods" v-bind:changed="changed" v-bind:context="context" v-bind:values="values" v-bind:schema="schema" v-bind:page="0"> </paginate-values> </td> </tr> </table> </div> ` }); }