Fixes collapses unstable behaviour in ItemEditionPage when updating metadata.

src/admin/components/edition/item-edition-form.vue

@@ -268,7 +268,8 @@
                             v-for="(field, index) of fieldList"
                             :key="index"
                             :field="field"
-                            :is-collapsed="!fieldCollapses[index]" />
+                            :is-collapsed="fieldCollapses[index]" 
+                            @changeCollapse="onChangeCollapse($event, index)"/>
 
                 </div>
             </div>
@@ -404,7 +405,7 @@ export default {
             this.fetchFields(this.itemId).then((fields) => {
                 this.isLoading = false;
                 for (let field of fields) {
-                    this.fieldCollapses.push(false);
+                    this.fieldCollapses.push(field.field.required == 'yes');
                 }
             });
         },
@@ -560,6 +561,9 @@ export default {
             for (let i = 0; i < this.fieldCollapses.length; i++)
                 this.fieldCollapses[i] = this.collapseAll;
 
+        },
+        onChangeCollapse(event, index) {
+            this.fieldCollapses.splice(index, 1, event);
         }
     },
     computed: {

src/admin/scss/tainacan-admin.scss

@@ -402,6 +402,7 @@ html {
     input[type="checkbox"]:checked + .check {
         background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
         background-color: white;
+        border-color: $gray-light !important;
     }
 }
 

src/classes/field-types/tainacan-form-item.vue

@@ -5,10 +5,10 @@
             :type="fieldTypeMessage">
         <span   
                 class="collapse-handle"
-                @click="isCollapsed = !isCollapsed">
+                @click="$emit('changeCollapse', !isCollapsed)">
             <b-icon 
                     type="is-secondary"
-                    :icon="!isCollapsed ? 'menu-down' : 'menu-right'" />
+                    :icon="isCollapsed ? 'menu-down' : 'menu-right'" />
             <label class="label">{{ field.field.name }}</label>
             <span
                     v-if="field.field.required == 'yes'" 
@@ -20,7 +20,7 @@
                 :title="field.field.name" 
                 :message="field.field.description"/>
         <div   
-                v-show="!isCollapsed" 
+                v-show="isCollapsed" 
                 v-if="isTextInputComponent( field.field.field_type_object.component )">
             <component 
                     :id="field.field.field_type_object.component + '-' + field.field.slug" 
@@ -50,7 +50,7 @@
             </div>
         </div>
         <div 
-                v-show="!isCollapsed"
+                v-show="isCollapsed"
                 v-else>
             <component
                     :id="field.field.field_type_object.component + '-' + field.field.slug"
@@ -71,7 +71,7 @@
             field: {
                 type: Object
             },
-            isCollapsed: true
+            isCollapsed: true // Field Collapses
         },
         data(){
             return {
@@ -133,8 +133,8 @@
             },
             setFieldTypeMessage( message ){
                 this.fieldTypeMessage = message;
-                //if (message != '')
-                    //this.isCollapsed = false;
+                if (message != '')
+                    this.$emit('changeCollapse', true);
             }
         }
     }