fix: resolve issue with nested property names

Author: Simon Eldevig

src/components/PropertyEditor.vue

@@ -14,7 +14,7 @@
  <div :class="{'property__actions d-flex align-items-center': !editPropertyName}">
  <div v-if="model.type === 'object' || model.type === 'model'" class="mr-2 d-flex align-items-center">
  <small class="mr-2">Remove key</small>
- <MazSwitch v-model="localModel.removeKey" />
+ <MazSwitch v-if="localModel.removeKey" v-model="localModel.removeKey" />
  </div>
  <MazBtn v-if="!hideEdit" title="Rename" fab outline size="mini" class="property__actions--btn mr-2" color="primary" @click="editPropName">
  <span class="material-icons">edit</span>
@@ -42,7 +42,6 @@ export default class PropertyEditor extends Vue {
  newPropertyName = '';
  $eventBus: any;
  localModel = new BaseDTO();
- removeKey = false;
 
  editPropName () {
  this.editPropertyName = !this.editPropertyName;

src/components/RecursiveCollapse.vue

@@ -21,7 +21,7 @@
  <div v-if="isSubChild" class="property__actions d-flex align-items-center">
  <div v-if="dataModel.type === 'object' || dataModel.type === 'model'" class="mr-2 d-flex align-items-center">
  <small class="mr-2">Remove key</small>
- <MazSwitch v-model="dataModel.removeKey" />
+ <MazSwitch v-if="dataModel.removeKey" v-model="dataModel.removeKey" />
  </div>
  <MazBtn title="Rename" fab outline size="mini" class="mr-2 property__actions--btn" color="primary" @click.stop="editPropName">
  <span class="material-icons">edit</span>

src/store/actions.ts

@@ -38,7 +38,7 @@ export default {
  updateModelProperty (context: any, props: any) {
  let clonedObject = Vue.prototype.$lodash.cloneDeep(context.state.currentModel);
  if (props.propertyName !== props.oldPropertyName) {
- clonedObject.value = renameObjectKey(clonedObject.value, props.oldPropertyName, props.propertyName);
+ clonedObject.value = renameObjectKey(clonedObject.value, props.oldPropertyName, props.propertyName, props.value);
  }
  clonedObject = setObjectValue(clonedObject, props.value);
  context.commit('setCurrentModel', clonedObject);

src/utils/index.ts

@@ -2,17 +2,17 @@ import Vue from 'vue';
 import { BaseDTO } from '@/types';
 import store from '../store';
 
-const renameObjectKey = (oldObject: BaseDTO, oldKey: string, newKey: string): BaseDTO => {
+const renameObjectKey = (oldObject: BaseDTO, oldKey: string, newKey: string, value: BaseDTO): BaseDTO => {
  const newObject = Object.keys(oldObject).reduce((acc: { [key: string]: BaseDTO }, val) => {
- if (val === oldKey) {
+ if (val === oldKey && value.id === oldObject[oldKey]?.id) {
  acc[newKey] = oldObject[oldKey];
  } else {
  acc[val] = oldObject[val];
  }
 
  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);
+ acc[val].value = renameObjectKey(clonedObject, oldKey, newKey, value);
  }
 
  return acc;