fix: resolve issues with objects and arrays

It was possible to change property name on object and arrays.

Author: Simon Eldevig

src/components/RecursiveCollapse.vue

@@ -7,7 +7,7 @@
  <div class="d-flex align-items-center justify-content-between" :class="{'mb-3' : !isSubChild}">
  <div v-if="isSubChild">
  <h1 v-show="!editPropertyName" class="h3">{{ propertyName }}</h1>
- <MazInput v-show="editPropertyName" ref="propertyName" v-model="newPropertyName" placeholder="Property name" size="sm" @change="updateModel" @blur="editPropertyName = false" />
+ <MazInput v-show="editPropertyName" ref="propertyName" v-model="newPropertyName" placeholder="Property name" size="sm" @change="updateModel" @blur="closePropEditor" />
  </div>
  <div v-else class="d-flex justify-content-between w-100">
  <h1 class="h3">{{ id }}</h1>
@@ -143,8 +143,10 @@ export default class RecursiveCollapse extends Vue {
  }
 
  setCollapseState () {
- this.isOpen = !this.isOpen;
- localStorage.setItem(this.data.id, this.isOpen.toString());
+ if (!this.editPropertyName) {
+ this.isOpen = !this.isOpen;
+ localStorage.setItem(this.data.id, this.isOpen.toString());
+ }
  }
 
  editPropName (): void {
@@ -211,6 +213,12 @@ export default class RecursiveCollapse extends Vue {
  });
  }
 
+ closePropEditor (): void {
+ setTimeout(() => {
+ this.editPropertyName = false;
+ }, 100);
+ }
+
  deleteProp (): void {
  this.$store.dispatch('deleteModelProperty', {
  id: this.dataModel.id

src/utils/index.ts

@@ -9,7 +9,7 @@ const renameObjectKey = (oldObject: BaseDTO, oldKey: string, newKey: string): Ba
  acc[val] = oldObject[val];
  }
 
- if (oldObject[val] && (oldObject[val].type === 'array' || oldObject[val].type === 'object')) {
+ if (oldObject[val] && acc[val] && (oldObject[val].type === 'array' || oldObject[val].type === 'object')) {
  const clonedObject = Vue.prototype.$lodash.cloneDeep(acc[val].value);
  acc[val].value = renameObjectKey(clonedObject, oldKey, newKey);
  }