Skip to content

Commit

Permalink
misc fixes for template manager
Browse files Browse the repository at this point in the history
  • Loading branch information
@mah0001
mah0001 committed Mar 8, 2024
1 parent 999d059 commit 6069ba8
Show file tree
Hide file tree
Showing 7 changed files with 207 additions and 77 deletions.
16 changes: 8 additions & 8 deletions application/views/template_manager/edit_content.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
</div>
</div>

<div class="form-group mb-3" v-if="ActiveNode.key && ActiveNode.type!='section' && ActiveNode.type!='section_container'">
<div class="form-group mb-3" v-if="ActiveNode.key">
<label >{{$t("description")}}:</label>
<textarea style="height:200px;" class="form-control" v-model="ActiveNode.help_text"></textarea>
<div class="text-secondary p-1" style="font-size:small;">
Expand Down Expand Up @@ -93,7 +93,7 @@
<v-tab v-if="isControlField(ActiveNode.type)"><span v-if="ActiveNode.rules && Object.keys(ActiveNode.rules).length>0"><v-icon style="color:green;">mdi-circle-medium</v-icon></span>{{$t("validation_rules")}}</v-tab>
<v-tab>{{$t("json")}}</v-tab>

<v-tab-item class="p-3" v-if="ActiveNode.key && isControlField(ActiveNode.type) == true">
<v-tab-item class="p-3 tab-display" v-if="ActiveNode.key && isControlField(ActiveNode.type) == true">
<!--display-->
<div class="form-group" v-if="ActiveNode.type!='simple_array'">
<label >{{$t("data_type")}}:</label>
Expand All @@ -120,9 +120,9 @@ class="form-control form-field-dropdown" >
<!--end display -->
</v-tab-item>

<v-tab-item class="p-3">
<v-tab-item class="p-3 tab-cv" v-if="!ActiveArrayNodeIsNested">
<!-- controlled vocab -->
<template v-if="!ActiveArrayNodeIsNested">
<template >
<div class="form-group" >
<label for="controlled_vocab">{{$t("controlled_vocabulary")}}:</label>
<div class="border bg-white" style="max-height:300px;overflow:auto;">
Expand Down Expand Up @@ -156,9 +156,9 @@ class="border m-2 pb-2"
</template>
<!-- end controlled vocab -->
</v-tab-item>
<v-tab-item class="p-3">
<v-tab-item class="p-3 tab-default" v-if="!ActiveArrayNodeIsNested || isControlField(ActiveNode.type) == true">
<!-- default -->
<template v-if="!ActiveArrayNodeIsNested || isControlField(ActiveNode.type) == true">
<template >
<div class="form-group" >
<label for="controlled_vocab">{{$t("default")}}:</label>
<div class="bg-white" style="max-height:300px;overflow:auto;" v-if="ActiveNode.type=='array'">
Expand Down Expand Up @@ -200,7 +200,7 @@ class="border m-2 pb-2"
</template>
<!-- end default -->
</v-tab-item>
<v-tab-item class="p-3" v-if="isControlField(ActiveNode.type) ">
<v-tab-item class="p-3 tab-rules" v-if="isControlField(ActiveNode.type) ">
<div class="form-group" >
<label for="controlled_vocab">{{$t("validation_rules")}}:</label>
<div class="bg-white border">
Expand All @@ -209,7 +209,7 @@ class="border m-2 pb-2"
</div>
</v-tab-item>

<v-tab-item class="p-3">
<v-tab-item class="p-3 tab-json">
<div class="form-group" >
<label for="controlled_vocab">{{$t("json")}}:</label>
<div class="bg-white border">
Expand Down
55 changes: 51 additions & 4 deletions application/views/template_manager/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,14 @@
overflow: hidden;
text-overflow: ellipsis;
}

.additional-item {
color: #6f42c1!important;
}

.font-small{
font-size:small;
}
</style>


Expand Down Expand Up @@ -155,7 +163,13 @@ function get_template_part($items, $parent = null, &$output)
<div class="col-md-11" style="height:100vh;">
<div @click="isEditingDescription=true" style="padding:5px;padding-left:38px;cursor:pointer;" class="pb-2" :class="{isactive: isEditingDescription}"><v-icon>mdi-ballot-outline</v-icon>{{$t('description')}}</div>
<div @click="isEditingDescription=false">
<nada-treeview v-model="UserTreeItems" :cut_fields="cut_fields" :initially_open="initiallyOpen" :tree_active_items="tree_active_items"></nada-treeview>
<nada-treeview
v-model="UserTreeItems"
:cut_fields="cut_fields"
:initially_open="initiallyOpen"
:tree_active_items="tree_active_items"
@initially-open="updateInitiallyOpen"
></nada-treeview>
</div>
</div>
<div class="col-md-1 col-xs-2" style="position:relative;">
Expand Down Expand Up @@ -200,15 +214,20 @@ function get_template_part($items, $parent = null, &$output)

<!--additional -->
<div class="mt-5" v-if="ActiveNode.type=='section'">
<v-icon title="Add custom field" v-if="ActiveNode.type=='section_container' || ActiveNode.type=='section'" color="#dc3545" @click="addAdditionalField()">mdi-text-box-plus-outline</v-icon>
<v-icon title="Add custom field" v-if="ActiveNode.type=='section_container' || ActiveNode.type=='section'" class="additional-item" @click="addAdditionalField()">mdi-text-box-plus-outline</v-icon>
<v-icon title="Add custom field" v-else class="disabled-button-color">mdi-text-box-plus-outline</v-icon>
</div>

<div class="mt-1" v-if="ActiveNode.type=='section'">
<v-icon title="Add custom Array field" v-if="ActiveNode.type=='section_container' || ActiveNode.type=='section'" color="#dc3545" @click="addAdditionalFieldArray()">mdi-table-large-plus</v-icon>
<v-icon title="Add custom Array field" v-if="ActiveNode.type=='section_container' || ActiveNode.type=='section'" class="additional-item" @click="addAdditionalFieldArray()">mdi-table-large-plus</v-icon>
<v-icon title="Add custom Array field" v-else class="disabled-button-color">mdi-table-large-plus</v-icon>
</div>

<div class="mt-1" v-if="ActiveNode.type=='section'">
<v-icon title="Add custom NestedArray field" v-if="ActiveNode.type=='section_container' || ActiveNode.type=='section'" class="additional-item" @click="addAdditionalFieldNestedArray()">mdi-file-tree</v-icon>
<v-icon title="Add custom NestedArray field" v-else class="disabled-button-color">mdi-file-tree</v-icon>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -605,7 +624,9 @@ function getTreeKeys(tree_items, output) {
init_tree: function() {
this.$store.state.core_tree_items = this.$store.state.core_template.items;
this.$store.state.user_tree_items = this.$store.state.user_template.items;

},
updateInitiallyOpen: function (e){
this.initiallyOpen=e;
},
delete_tree_item: function(tree, item_key) {
tree.forEach((item, idx) => {
Expand Down Expand Up @@ -757,6 +778,7 @@ function getTreeKeys(tree_items, output) {
this.tree_active_items = new Array();
this.tree_active_items.push(new_node_key);
this.initiallyOpen.push(new_node_key);
this.initiallyOpen.push(parentNode.key);
},
addAdditionalField: function() {
/*if (this.ActiveNodeContainerKey != 'additional_container') {
Expand All @@ -777,6 +799,7 @@ function getTreeKeys(tree_items, output) {
this.tree_active_items = new Array();
this.tree_active_items.push(new_node_key);
this.initiallyOpen.push(new_node_key);
this.initiallyOpen.push(parentNode.key);
},
addAdditionalFieldArray: function() {
/*if (this.ActiveNodeContainerKey != 'additional_container') {
Expand All @@ -794,9 +817,33 @@ function getTreeKeys(tree_items, output) {
]
});

this.ActiveNode = parentNode.items[parentNode.items.length - 1];
this.tree_active_items = new Array();
this.tree_active_items.push(new_node_key);
this.initiallyOpen.push(new_node_key);
this.initiallyOpen.push(parentNode.key);

//this.ActiveNode.items.push(this.ActiveCoreNode);
//store.commit('activeCoreNode', {});
},
addAdditionalFieldNestedArray: function() {
parentNode = this.ActiveNode;
new_node_key = "additional." + Date.now();
parentNode.items.push({
"key": new_node_key,
"title": "Untitled",
"type": "nested_array",
"help_text": "",
"props": [
]
});

this.ActiveNode = parentNode.items[parentNode.items.length - 1];
this.tree_active_items = new Array();
this.tree_active_items.push(new_node_key);
this.initiallyOpen.push(new_node_key);
this.initiallyOpen.push(parentNode.key);
},
UpdateActiveNodeKey: function(e){
this.ActiveNode.key = e;
},
Expand Down
32 changes: 18 additions & 14 deletions application/views/template_manager/vue-prop-edit-component-template.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
<div class="prop-edit-component">
<div v-if="prop.key">
<div class="form-group" v-if="HasAdditionalPrefix(parent.key)">
<label for="name">{{$t('key')}}:</label>
<vue-prop-key-field
:parent="parent"
:value="prop.key"
@input="updatePropKey"
>
</vue-prop-key-field>
<div class="text-secondary font-small mb-3" >Unique name for the field</div>
</div>
<div class="form-group">
<label for="name">{{$t('type')}}:</label>
<input type="text" class="form-control" v-model="prop.type" disabled="disabled">
</div>
<div class="form-group">
<label for="name">{{$t('label')}}:</label>
<input type="text" class="form-control" v-model="prop.title">
Expand All @@ -14,20 +32,6 @@
<textarea class="form-control" v-model="prop.help_text"/>
</div>
<div class="form-group">
<label for="name">{{$t('type')}}:</label>
<input type="text" class="form-control" v-model="prop.type">
</div>
<div class="form-group" v-if="HasAdditionalPrefix(parent.key)">
<label for="name">{{$t('key')}}:</label>
<vue-prop-key-field
:parent="parent"
:value="prop.key"
@input="updatePropKey"
>
</vue-prop-key-field>
</div>
</div>
<template>
<v-tabs background-color="transparent" class="mb-5" :key="prop.prop_key">
Expand Down
32 changes: 7 additions & 25 deletions application/views/template_manager/vue-prop-key-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,31 +77,11 @@ Vue.component('vue-prop-key-field', {
this.validation_errors.push('Key cannot be empty');
}

//break key into parts using dot as separator
let parts=key.split('.');

//check if key has any empty parts
if (parts.indexOf('')!==-1){
this.validation_errors.push('Key must not contain empty parts');
//key can only contain letters, numbers, and underscores
if (key.match(/^[a-zA-Z0-9_-]+$/)==null){
this.validation_errors.push('Key can only contain letters, numbers, and underscores');
}

//check all parts only contain letters, numbers, dash, and underscores
for(let i=1;i<parts.length;i++){
if (parts[i].match(/^[a-zA-Z0-9_-]+$/)==null){
this.validation_errors.push('Key can only contain letters, numbers, and underscores');
break;
}
}

//check if key is unique
//check if key is unique for the current array element
for(let i=0;i<this.parent.props.length;i++){
if (this.parent.props[i].key==key && key!=this.value){
console.log("key found", this.parent.props[i].key, key)
this.validation_errors.push('Key already exists!');
}
}


return this.validation_errors.length==0;
}
},
Expand All @@ -112,7 +92,9 @@ Vue.component('vue-prop-key-field', {
<div class="text-secondary font-small" style="margin-top:4px;font-size:small">
<div v-for="error in validation_errors" class="text-danger">{{error}}</div>
</div>
</div>
<pre>{{parent}}</pre>
</div>
`
Expand Down
Loading

0 comments on commit 6069ba8

Please sign in to comment.