From 6069ba836d1f27faa8621be088324425cd116ee1 Mon Sep 17 00:00:00 2001
From: Mehmood Asghar <mah0001@gmail.com>
Date: Fri, 8 Mar 2024 10:19:18 -0500
Subject: [PATCH] misc fixes for template manager

---
 .../views/template_manager/edit_content.php   |  16 +--
 application/views/template_manager/index.php  |  55 ++++++++-
 .../vue-prop-edit-component-template.php      |  32 +++---
 .../vue-prop-key-component.js                 |  32 ++----
 .../vue-props-tree-component.js               | 104 ++++++++++++++++--
 .../template_manager/vue-tree-component.js    |  40 ++++---
 .../vue-tree-field-component.js               |   5 +-
 7 files changed, 207 insertions(+), 77 deletions(-)

diff --git a/application/views/template_manager/edit_content.php b/application/views/template_manager/edit_content.php
index 4cb7007a..82511aae 100644
--- a/application/views/template_manager/edit_content.php
+++ b/application/views/template_manager/edit_content.php
@@ -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;">
@@ -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>
@@ -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;">
@@ -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'">
@@ -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">
@@ -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">
diff --git a/application/views/template_manager/index.php b/application/views/template_manager/index.php
index c1b6bf87..57afabfc 100644
--- a/application/views/template_manager/index.php
+++ b/application/views/template_manager/index.php
@@ -56,6 +56,14 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    .additional-item {
+      color: #6f42c1!important;
+    }
+
+    .font-small{
+      font-size:small;
+    }
   </style>
 
 
@@ -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;">
@@ -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>
@@ -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) => {
@@ -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') {
@@ -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') {
@@ -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;
         },
diff --git a/application/views/template_manager/vue-prop-edit-component-template.php b/application/views/template_manager/vue-prop-edit-component-template.php
index f7e660d6..67720690 100644
--- a/application/views/template_manager/vue-prop-edit-component-template.php
+++ b/application/views/template_manager/vue-prop-edit-component-template.php
@@ -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">
@@ -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">
diff --git a/application/views/template_manager/vue-prop-key-component.js b/application/views/template_manager/vue-prop-key-component.js
index 18f3f469..475fa7a1 100644
--- a/application/views/template_manager/vue-prop-key-component.js
+++ b/application/views/template_manager/vue-prop-key-component.js
@@ -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;
         }
     },
@@ -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>          
             `    
diff --git a/application/views/template_manager/vue-props-tree-component.js b/application/views/template_manager/vue-props-tree-component.js
index b7ef8217..6fac5a1e 100644
--- a/application/views/template_manager/vue-props-tree-component.js
+++ b/application/views/template_manager/vue-props-tree-component.js
@@ -254,8 +254,6 @@ Vue.component('props-treeview', {
       },
       addAdditionalField: function()
       {        
-        //add new prop to parentNode
-
         new_node_key = 'prop' + Date.now();
         new_node_prop_key = this.parent_key + '.' + new_node_key;
 
@@ -267,16 +265,87 @@ Vue.component('props-treeview', {
           "help_text": ""
         };
 
-        //check if ParentNode has props
-        if (!this.ParentNode.props){
-          Vue.set(this.ParentNode,"props",[new_prop]);
+        let target_parent= this.ParentNode;
+
+        //for sub-sections or array types, select as parent
+        if (this.active_prop && (this.active_prop.type=='section' || this.active_prop.type=='array' || this.active_prop.type=='nested_array') ){
+          target_parent=this.active_prop;
+        }        
+        
+        if (!target_parent.props){
+          Vue.set(target_parent,"props",[new_prop]);
         }else{
-          Vue.set(this.ParentNode.props,this.ParentNode.props.length,new_prop);
+          Vue.set(target_parent.props,target_parent.props.length,new_prop);
         }
+        this.active_prop=new_prop;
+        this.tree_active_items = new Array();
+        this.tree_active_items.push(new_node_prop_key);
+      },
+      addAdditionalFieldArray: function()
+      {        
+        new_node_key = 'prop' + Date.now();
+        new_node_prop_key = this.parent_key + '.' + new_node_key;
+
+        new_prop={
+          "key": new_node_key,
+          "prop_key": new_node_prop_key,
+          "title": "Untitled",
+          "type": "array",            
+            "help_text": "",
+            "props": [                           
+            ],          
+          "help_text": ""
+        };
 
+        let target_parent= this.ParentNode;
+
+        //for sub-sections, add to selected section
+        if (this.active_prop && this.active_prop.type=='section' || this.active_prop.type=='nested_array'){
+          target_parent=this.active_prop;
+        }        
+        
+        if (!target_parent.props){
+          Vue.set(target_parent,"props",[new_prop]);
+        }else{
+          Vue.set(target_parent.props,target_parent.props.length,new_prop);
+        }
         this.active_prop=new_prop;
+        this.tree_active_items = new Array();
+        this.tree_active_items.push(new_node_prop_key);
+      },
+      addAdditionalFieldNestedArray: function()
+      {        
+        new_node_key = 'prop' + Date.now();
+        new_node_prop_key = this.parent_key + '.' + new_node_key;
+
+        new_prop={
+          "key": new_node_key,
+          "prop_key": new_node_prop_key,
+          "title": "Untitled",
+          "type": "nested_array",            
+            "help_text": "",
+            "props": [
+            ],          
+          "help_text": ""
+        };
 
+        let target_parent= this.ParentNode;
+
+        //for sub-sections, add to selected section
+        if (this.active_prop && this.active_prop.type=='section' || this.active_prop.type=='nested_array'){
+          target_parent=this.active_prop;
+        }        
+        
+        if (!target_parent.props){
+          Vue.set(target_parent,"props",[new_prop]);
+        }else{
+          Vue.set(target_parent.props,target_parent.props.length,new_prop);
+        }
+        this.active_prop=new_prop;
+        this.tree_active_items = new Array();
+        this.tree_active_items.push(new_node_prop_key);
       },
+
       moveUp: function()
         {
           parentNode = this.getNodeParent(this.UserProps, this.active_prop.prop_key);
@@ -408,6 +477,19 @@ Vue.component('props-treeview', {
           }
           return false;
         },
+        isPropAdditional: function(prop){
+          return prop.key.startsWith('additional.');
+        },
+        getPropClasses: function(prop){
+          let classes=[];
+          if (this.isPropCut(prop)){
+            classes.push('iscut');
+          }
+          if (this.isPropAdditional(prop)){
+            classes.push('additional-item');
+          }        
+          return classes;
+        }
       
     },
     template: `
@@ -436,7 +518,7 @@ Vue.component('props-treeview', {
                       >
 
                         <template #label="{ item }" >
-                            <span @click="treeClick(item)" :title="item.title" class="tree-item-label" :class="{iscut: isPropCut(item)}">
+                            <span @click="treeClick(item)" :title="item.title" class="tree-item-label" :class="getPropClasses(item)">
                                 <span v-if="!item.title">untitled</span>
                                 <span v-else>{{item.title}}</span>
                                 <span v-if="isPropCut(item)">*</span>
@@ -497,8 +579,9 @@ Vue.component('props-treeview', {
 
                     <!--additional -->
                     <div class="mt-5" v-if="IsAdditonalField">
-                      <v-icon title="Add custom field" color="#dc3545" @click="addAdditionalField()">mdi-text-box-plus-outline</v-icon>
-                      
+                      <v-icon title="Add custom field" class="additional-item" @click="addAdditionalField()">mdi-text-box-plus-outline</v-icon>
+                      <v-icon title="Add custom field" class="additional-item" @click="addAdditionalFieldArray()">mdi-table-large-plus</v-icon>
+                      <v-icon title="Add custom NestedArray field" class="additional-item" @click="addAdditionalFieldNestedArray()">mdi-file-tree</v-icon>
                     </div>
 
                   </div>
@@ -523,8 +606,7 @@ Vue.component('props-treeview', {
             
             </div>
             
-            <div class="col-md-8 border">
-
+            <div class="col-md-8 border">                
               <div v-if="active_prop.key">               
                 <prop-edit :key="active_prop.prop_key" :parent="parent_node" v-model="active_prop"></prop-edit>
               </div>
diff --git a/application/views/template_manager/vue-tree-component.js b/application/views/template_manager/vue-tree-component.js
index d7318e6f..7ff81a85 100644
--- a/application/views/template_manager/vue-tree-component.js
+++ b/application/views/template_manager/vue-tree-component.js
@@ -19,9 +19,13 @@ Vue.component('nada-treeview', {
         }
     },
     created: function(){
-      
+      this.initiallyOpen=this.initially_open;
+    },
+    watch:{
+      initiallyOpen: function(val) {
+        this.$emit('initially-open',this.initiallyOpen);
+      }
     },
-    
     computed: {
         TreeActiveItems: {
           get: function() {
@@ -48,17 +52,11 @@ Vue.component('nada-treeview', {
     },
     methods:{
       treeClick: function (node){
-        //store.commit('tree_active_node',node.key);
-        console.log("treeClick",node);
-
-        //expand tree node          
         this.initiallyOpen.push(node.key);
         store.commit('activeNode',node);        
       },
       onTreeOpen: function (node){
-        console.log("tree node open");
-        
-      },
+      },      
       getNodePath: function(arr,name)
       {
           if (!arr){
@@ -92,10 +90,24 @@ Vue.component('nada-treeview', {
         }
         return false;
       },
+      isItemAdditional: function(item){
+        //check if item key has additional. prefix
+        return item.key.startsWith('additional.');
+      },
+      getItemClasses: function(item){
+        let classes=[];
+        if (this.isItemCut(item)){
+          classes.push('iscut');
+        }
+        if (this.isItemAdditional(item)){
+          classes.push('additional-item');
+        }        
+        return classes;
+      }
     },
     template: `
             <div class="nada-treeview-component">
-            <template>
+            <template>            
               <v-treeview                   
                   color="warning"
                   v-model="value"                   
@@ -114,14 +126,14 @@ Vue.component('nada-treeview', {
               >
 
                 <template #label="{ item }" >
-                    <span @click="treeClick(item)" :title="item.title" class="tree-item-label" :class="{iscut: isItemCut(item)}">
+                    <span @click="treeClick(item)" :title="item.title" class="tree-item-label" :class="getItemClasses(item)" >
                         <span v-if="item.type=='resource'" >{{item.title | truncate(23, '...') }}</span>
                         <span v-else>{{item.title}} <template v-if="item.title==''">Untitled</template></span>
                         <span v-if="isItemCut(item)">*</span>                        
                     </span>
                 </template>
 
-                <template v-slot:prepend="{ item, open }">
+                <template v-slot:prepend="{ item, open }" >
                   <v-icon v-if="item.type=='section_container'">
                     {{ open ? 'mdi-dresser' : 'mdi-dresser' }}
                   </v-icon> 
@@ -129,10 +141,10 @@ Vue.component('nada-treeview', {
                     {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
                   </v-icon>
                   
-                  <v-icon v-else-if="item.type=='nested_array'">
+                  <v-icon v-else-if="item.type=='nested_array'" >
                     {{ open ? 'mdi-file-tree-outline' : 'mdi-file-tree' }}
                   </v-icon> 
-                  <v-icon v-else-if="item.type=='array'">
+                  <v-icon v-else-if="item.type=='array'" >
                     {{ open ? 'mdi-folder-table-outline' : 'mdi-folder-table' }}
                   </v-icon> 
 
diff --git a/application/views/template_manager/vue-tree-field-component.js b/application/views/template_manager/vue-tree-field-component.js
index 17bd92c4..6d511a40 100644
--- a/application/views/template_manager/vue-tree-field-component.js
+++ b/application/views/template_manager/vue-tree-field-component.js
@@ -29,7 +29,10 @@ Vue.component('nada-treeview-field', {
         Items(){
           if (this.TemplateActiveNode){
             parent=this.findNodeParent(this.UserTemplate,this.TemplateActiveNode.key);
-            return this.coreTemplateParts[parent.key].items;
+            if (this.coreTemplateParts[parent.key]){
+              return this.coreTemplateParts[parent.key].items;
+            }
+            return []
           }
         },
         filteredItems()