From c0c1bcae2c1e686a0c0578c424be28a338d451dd Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Tue, 28 Aug 2018 17:56:46 -0300
Subject: [PATCH] Joins html arrays in form hook. First tests with updating
 form hook from API.

---
 src/admin/class-tainacan-admin.php            | 43 ++++++++++---------
 .../edition/collection-edition-form.vue       | 24 +++++++----
 .../edition/filter-edition-form.vue           |  4 +-
 .../components/edition/item-edition-form.vue  |  8 ++--
 .../edition/metadatum-edition-form.vue        |  4 +-
 .../edition/taxonomy-edition-form.vue         |  4 +-
 .../components/edition/term-edition-form.vue  |  4 +-
 src/admin/js/mixins.js                        | 25 ++++++++++-
 src/admin/pages/singles/item-page.vue         |  8 ++--
 9 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/src/admin/class-tainacan-admin.php b/src/admin/class-tainacan-admin.php
index 2b1e09a89..116083cf8 100644
--- a/src/admin/class-tainacan-admin.php
+++ b/src/admin/class-tainacan-admin.php
@@ -207,38 +207,41 @@ class Admin {
 		
 		$settings['form_hooks'] = [
 			'form-collection' => [
-				'begin-left' => '<input type="text" name="collection-background-color" value="blue" />',
-				'end-left' => '<input type="text" name="collection-color" value="red" />',
-				'begin-right' => '<input type="text" name="collection-border-color" value="black" />',
-				'end-right' => '<input type="text" name="collection-highlight-color" value="green" />'
+				'begin-left' => [
+					'<input type="text" name="collection-background-color" value="blue" /><input type="text" name="collection-background-color1" value="blue" />',
+					'<input type="text" name="collection-background-color2" value="blue" />'
+				],
+				'end-left' => ['<input type="text" name="collection-color" value="red" />'],
+				'begin-right' => ['<input type="text" name="collection-border-color" value="black" />'],
+				'end-right' => ['<input type="text" name="collection-highlight-color" value="green" />']
 			],
 			'form-item' => [
-				'begin-left' => '<input type="text" name="item-background-color" value="blue" />',
-				'end-left' => '<input type="text" name="item-color" value="red" />',
-				'begin-right' => '<input type="text" name="item-border-color" value="black" />',
-				'end-right' => '<input type="text" name="item-highlight-color" value="green" />'
+				'begin-left' => ['<input type="text" name="item-background-color" value="blue" />'],
+				'end-left' => ['<input type="text" name="item-color" value="red" />'],
+				'begin-right' => ['<input type="text" name="item-border-color" value="black" />'],
+				'end-right' => ['<input type="text" name="item-highlight-color" value="green" />']
 			],
 			'view-item' => [
-				'begin-left' => '<p>blue</p>',
-				'end-left' => '<p>black</p>',
-				'begin-right' => '<p>red</p>',
-				'end-right' => '<p>green</p>',
+				'begin-left' => ['<p>blue</p>'],
+				'end-left' => ['<p>black</p>'],
+				'begin-right' => ['<p>red</p>'],
+				'end-right' => ['<p>green</p>'],
 			],
 			'form-taxonomy' => [
-				'begin' => '<input type="text" name="taxonomy-background-color" value="blue" />',
-				'end' => '<input type="text" name="taxonomy-color" value="red" />'
+				'begin' => ['<input type="text" name="taxonomy-background-color" value="blue" />'],
+				'end' => ['<input type="text" name="taxonomy-color" value="red" />']
 			],
 			'form-term' => [
-				'begin' => '<input type="text" name="term-background-color" value="blue" />',
-				'end' => '<input type="text" name="term-color" value="red" />'
+				'begin' => ['<input type="text" name="term-background-color" value="blue" />'],
+				'end' => ['<input type="text" name="term-color" value="red" />']
 			],
 			'form-metadatum' => [
-				'begin' => '<input type="text" name="metadatum-background-color" value="blue" />',
-				'end' => '<input type="text" name="metadatum-color" value="red" />'
+				'begin' => ['<input type="text" name="metadatum-background-color" value="blue" />'],
+				'end' => ['<input type="text" name="metadatum-color" value="red" />']
 			],
 			'form-filter' => [
-				'begin' => '<input type="text" name="filter-background-color" value="blue" />',
-				'end' => '<input type="text" name="filter-color" value="red" />'
+				'begin' => ['<input type="text" name="filter-background-color" value="blue" />'],
+				'end' => ['<input type="text" name="filter-color" value="red" />']
 			]
 		];
 		
diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index 5ec545acb..78023429d 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -34,7 +34,7 @@
                                 formHooks['form-collection']['begin-left'] != undefined">  
                         <form 
                             id="form-collection-begin-left"
-                            v-html="formHooks['form-collection']['begin-left']"/>
+                            v-html="this.formHooks['form-collection']['begin-left'].join('')"/>
                     </template>
 
                     <!-- Thumbnail -------------------------------- --> 
@@ -238,7 +238,7 @@
                                 formHooks['form-collection']['end-left'] != undefined">  
                         <form 
                             id="form-collection-end-left"
-                            v-html="formHooks['form-collection']['end-left'] "/>
+                            v-html="formHooks['form-collection']['end-left'].join('')"/>
                     </template>
 
                 </div>
@@ -252,7 +252,7 @@
                                 formHooks['form-collection']['begin-right'] != undefined">  
                         <form 
                             id="form-collection-begin-right"
-                            v-html="formHooks['form-collection']['begin-right']"/>
+                            v-html="formHooks['form-collection']['begin-right'].join('')"/>
                     </template>
 
                     <!-- Status -------------------------------- --> 
@@ -423,7 +423,7 @@
                                 formHooks['form-collection']['end-right'] != undefined">  
                         <form 
                             id="form-collection-end-right"
-                            v-html="formHooks['form-collection']['end-right']"/>
+                            v-html="formHooks['form-collection']['end-right'].join('')"/>
                     </template>
                 </div>
 
@@ -593,6 +593,9 @@ export default {
                 
                 this.collection = updatedCollection;
 
+                // Fills hook forms with it's real values 
+                this.updateExtraFormData('collection', this.collection);
+                
                 // Fill this.form data with current data.
                 this.form.name = this.collection.name;
                 this.form.slug = this.collection.slug;
@@ -608,10 +611,10 @@ export default {
                 this.formErrorMessage = '';
                 this.editFormErrors = {};
 
-                if (this.fromImporter)
-                    this.$router.go(-1);
-                else
-                    this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
+                // if (this.fromImporter)
+                //     this.$router.go(-1);
+                // else
+                //     this.$router.push(this.$routerHelper.getCollectionPath(this.collectionId));
             })
             .catch((errors) => {
                 for (let error of errors.errors) {     
@@ -638,7 +641,7 @@ export default {
 
                 // Initializes Media Frames now that collectonId exists
                 this.initializeMediaFrames();
-
+        
                 // Fill this.form data with current data.
                 this.form.name = this.collection.name;
                 this.form.description = this.collection.description;
@@ -825,6 +828,9 @@ export default {
                 // Initializes Media Frames now that collectonId exists
                 this.initializeMediaFrames();
 
+                // Fills hook forms with it's real values 
+                this.updateExtraFormData('collection', this.collection);
+  
                 // Fill this.form data with current data.
                 this.form.name = this.collection.name;
                 this.form.description = this.collection.description;
diff --git a/src/admin/components/edition/filter-edition-form.vue b/src/admin/components/edition/filter-edition-form.vue
index 83be68971..73dfb2626 100644
--- a/src/admin/components/edition/filter-edition-form.vue
+++ b/src/admin/components/edition/filter-edition-form.vue
@@ -11,7 +11,7 @@
                     formHooks['form-filter']['begin'] != undefined">  
             <form 
                 id="form-filter-begin"
-                v-html="formHooks['form-filter']['begin']"/>
+                v-html="formHooks['form-filter']['begin'].join('')"/>
         </template>
 
         <b-field 
@@ -154,7 +154,7 @@
                     formHooks['form-filter']['end'] != undefined">  
             <form 
                 id="form-filter-end"
-                v-html="formHooks['form-filter']['end']"/>
+                v-html="formHooks['form-filter']['end'].join('')"/>
         </template>
 
         <div class="field is-grouped form-submit">
diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index 0686cbe74..739f55cd9 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -23,7 +23,7 @@
                                 formHooks['form-item']['begin-left'] != undefined">  
                         <form 
                             id="form-item-begin-left"
-                            v-html="formHooks['form-item']['begin-left']"/>
+                            v-html="formHooks['form-item']['begin-left'].join('')"/>
                     </template>
 
                     <!-- Document -------------------------------- -->
@@ -309,7 +309,7 @@
                                 formHooks['form-item']['end-left'] != undefined">  
                         <form 
                             id="form-item-end-left"
-                            v-html="formHooks['form-item']['end-left'] "/>
+                            v-html="formHooks['form-item']['end-left'].join('')"/>
                     </template>
 
                 </div>
@@ -324,7 +324,7 @@
                                 formHooks['form-item']['begin-right'] != undefined">  
                         <form 
                             id="form-item-begin-right"
-                            v-html="formHooks['form-item']['begin-right']"/>
+                            v-html="formHooks['form-item']['begin-right'].join('')"/>
                     </template>
 
                     
@@ -394,7 +394,7 @@
                                 formHooks['form-item']['end-right'] != undefined">  
                         <form 
                             id="form-item-end-right"
-                            v-html="formHooks['form-item']['end-right']"/>
+                            v-html="formHooks['form-item']['end-right'].join('')"/>
                     </template>
                 </div>
             </div>
diff --git a/src/admin/components/edition/metadatum-edition-form.vue b/src/admin/components/edition/metadatum-edition-form.vue
index e16a18edb..4b58eeada 100644
--- a/src/admin/components/edition/metadatum-edition-form.vue
+++ b/src/admin/components/edition/metadatum-edition-form.vue
@@ -12,7 +12,7 @@
                     formHooks['form-metadatum']['begin'] != undefined">  
             <form 
                 id="form-metadatum-begin"
-                v-html="formHooks['form-metadatum']['begin']"/>
+                v-html="formHooks['form-metadatum']['begin'].join('')"/>
         </template>
 
         <b-field
@@ -223,7 +223,7 @@
                     formHooks['form-metadatum']['end'] != undefined">  
             <form 
                 id="form-metadatum-end"
-                v-html="formHooks['form-metadatum']['end']"/>
+                v-html="formHooks['form-metadatum']['end'].join('')"/>
         </template>
 
         <div class="field is-grouped form-submit">
diff --git a/src/admin/components/edition/taxonomy-edition-form.vue b/src/admin/components/edition/taxonomy-edition-form.vue
index 611b5d8c6..a8706d993 100644
--- a/src/admin/components/edition/taxonomy-edition-form.vue
+++ b/src/admin/components/edition/taxonomy-edition-form.vue
@@ -16,7 +16,7 @@
                                     formHooks['form-taxonomy']['begin'] != undefined">  
                             <form 
                                 id="form-taxonomy-begin"
-                                v-html="formHooks['form-taxonomy']['begin']"/>
+                                v-html="formHooks['form-taxonomy']['begin'].join('')"/>
                         </template>
 
                         <!-- Name -------------------------------- -->
@@ -116,7 +116,7 @@
                                     formHooks['form-taxonomy']['end'] != undefined">  
                             <form 
                                 id="form-taxonomy-end"
-                                v-html="formHooks['form-taxonomy']['end']"/>
+                                v-html="formHooks['form-taxonomy']['end'].join('')"/>
                         </template>
 
                         <!-- Submit -->
diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue
index db00c511a..adc19d1e4 100644
--- a/src/admin/components/edition/term-edition-form.vue
+++ b/src/admin/components/edition/term-edition-form.vue
@@ -15,7 +15,7 @@
                     formHooks['form-term']['begin'] != undefined">  
             <form 
                 id="form-term-begin"
-                v-html="formHooks['form-term']['begin']"/>
+                v-html="formHooks['form-term']['begin'].join('')"/>
         </template>
 
         <!-- Header Image -------------------------------- -->
@@ -139,7 +139,7 @@
                     formHooks['form-term']['end'] != undefined">  
             <form 
                 id="form-term-end"
-                v-html="formHooks['form-term']['end']"/>
+                v-html="formHooks['form-term']['end'].join('')"/>
         </template>
 
         <!-- Submit buttons -------------- -->
diff --git a/src/admin/js/mixins.js b/src/admin/js/mixins.js
index 2e3de00e0..b75e977ef 100644
--- a/src/admin/js/mixins.js
+++ b/src/admin/js/mixins.js
@@ -52,7 +52,7 @@ export const dateInter = {
 export const formHooks = {
     data() {
         return { 
-            formHooks: tainacan_plugin['form_hooks'] 
+            formHooks: JSON.parse(JSON.stringify(tainacan_plugin['form_hooks'])) 
         }
     },
     methods: {
@@ -77,6 +77,29 @@ export const formHooks = {
                     }
                 }
             }
+        },
+        updateExtraFormData(entity, entityObject) {
+            let positions  =  [
+                'begin-left', 
+                'begin-right',
+                'begin',
+                'end-left',
+                'end-right',
+                'end'
+            ];
+            // Gets data from existing extra form hooks
+            for (let position of positions) {
+                if (this.formHooks['form-' + entity][position] && this.formHooks['form-' + entity][position] != undefined) {
+                    let formElement = document.getElementById('form-' + entity + '-' + position);
+                    if (formElement) {
+                        let formData = new FormData(formElement);   
+                        for (let [key, value] of formData.entries()) {
+                            if (entityObject[key] != undefined && entityObject[key] != null)
+                                value = entityObject[key];
+                        }
+                    }
+                }
+            }
         }
     }
 };
\ No newline at end of file
diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue
index 7e4696d09..b025811d2 100644
--- a/src/admin/pages/singles/item-page.vue
+++ b/src/admin/pages/singles/item-page.vue
@@ -20,7 +20,7 @@
                                 formHooks['view-item']['begin-left'] != undefined">  
                         <div 
                             id="view-item-begin-left"
-                            v-html="formHooks['view-item']['begin-left']"/>
+                            v-html="formHooks['view-item']['begin-left'].join('')"/>
                     </template>
 
                     <!-- Document -------------------------------- -->
@@ -174,7 +174,7 @@
                                 formHooks['view-item']['end-left'] != undefined">  
                         <div 
                             id="view-item-end-left"
-                            v-html="formHooks['view-item']['end-left']"/>
+                            v-html="formHooks['view-item']['end-left'].join('')"/>
                     </template>
 
                 </div>
@@ -189,7 +189,7 @@
                                 formHooks['view-item']['begin-right'] != undefined">  
                         <div 
                             id="view-item-begin-right"
-                            v-html="formHooks['view-item']['begin-right']"/>
+                            v-html="formHooks['view-item']['begin-right'].join('')"/>
                     </template>
 
                     <!-- Visibility (status public or private) -------------------------------- -->
@@ -274,7 +274,7 @@
                                 formHooks['view-item']['end-right'] != undefined">  
                         <div 
                             id="view-item-end-right"
-                            v-html="formHooks['view-item']['end-right']"/>
+                            v-html="formHooks['view-item']['end-right'].join('')"/>
                     </template>
                 </div>
             </div>