From 60ae1ef6043f8921e503fb198ff699c4eb7640e0 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Sun, 28 Mar 2021 13:56:45 +0200
Subject: [PATCH] Fixed bug where editing a field and immediately changing
 selected property would apply the change to the new property rather than the
 old one

---
 .../CreaturePropertyDialog.vue                | 31 ++++++++++++++-----
 app/imports/ui/library/LibraryNodeDialog.vue  | 27 ++++++++++++----
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index 1eecafb4..3eb954cc 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -19,6 +19,7 @@
         <component
           :is="model.type + 'Form'"
           v-if="editing"
+          :key="_id"
           class="creature-property-form"
           :model="model"
           @change="change"
@@ -28,6 +29,7 @@
         <component
           :is="model.type + 'Viewer'"
           v-else-if="!editing && $options.components[model.type + 'Viewer']"
+          :key="_id"
           class="creature-property-viewer"
           :model="model"
         />
@@ -108,10 +110,13 @@ export default {
   },
   data(){ return {
     editing: !!this.startInEditTab,
+    // CurrentId lags behind Id by one tick so that events fired by destroying
+    // forms keyed to the old ID are applied before the new ID overwrites it
+    currentId: undefined,
   }},
   meteor: {
     model(){
-      return CreatureProperties.findOne(this._id);
+      return CreatureProperties.findOne(this.currentId);
     },
     editPermission(){
       try {
@@ -136,6 +141,16 @@ export default {
       return this.creature && this.creature._id;
     },
   },
+  watch: {
+    _id: {
+      immediate: true,
+      handler(newId){
+        this.$nextTick(() => {
+          this.currentId = newId;
+        });
+      }
+    },
+  },
   reactiveProvide: {
     name: 'context',
     include: ['creatureId', 'editPermission'],
@@ -143,7 +158,7 @@ export default {
   methods: {
     getPropertyName,
     duplicate(){
-      duplicateProperty.call({_id: this._id}, (error) => {
+      duplicateProperty.call({_id: this.currentId}, (error) => {
         if (error) {
           console.error(error);
         }
@@ -156,25 +171,25 @@ export default {
     },
     change({path, value, ack}){
       if (path && path[0] === 'equipped'){
-        equipItem.call({_id: this._id, equipped: value}, (error) =>{
+        equipItem.call({_id: this.currentId, equipped: value}, (error) =>{
           if (error) console.warn(error);
           ack && ack(error && error.reason || error);
         });
         return;
       }
-      updateCreatureProperty.call({_id: this._id, path, value}, (error) =>{
+      updateCreatureProperty.call({_id: this.currentId, path, value}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
     },
     damage({operation, value, ack}){
-      damageProperty.call({_id: this._id, operation, value}, (error) =>{
+      damageProperty.call({_id: this.currentId, operation, value}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
     },
     push({path, value, ack}){
-      pushToProperty.call({_id: this._id, path, value}, (error) =>{
+      pushToProperty.call({_id: this.currentId, path, value}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
@@ -182,13 +197,13 @@ export default {
     pull({path, ack}){
       let itemId = get(this.model, path)._id;
       path.pop();
-      pullFromProperty.call({_id: this._id, path, itemId}, (error) =>{
+      pullFromProperty.call({_id: this.currentId, path, itemId}, (error) =>{
         if (error) console.warn(error);
         ack && ack(error && error.reason || error);
       });
     },
     remove(){
-      const _id = this._id;
+      const _id = this.currentId;
       softRemoveProperty.call({_id});
       if (this.embedded){
         this.$emit('removed');
diff --git a/app/imports/ui/library/LibraryNodeDialog.vue b/app/imports/ui/library/LibraryNodeDialog.vue
index 22908f96..b6d4f76a 100644
--- a/app/imports/ui/library/LibraryNodeDialog.vue
+++ b/app/imports/ui/library/LibraryNodeDialog.vue
@@ -19,6 +19,7 @@
         <component
           :is="model.type + 'Form'"
           v-if="editing"
+          :key="_id"
           class="library-node-form"
           :model="model"
           @change="change"
@@ -28,6 +29,7 @@
         <component
           :is="model.type + 'Viewer'"
           v-else-if="!editing && $options.components[model.type + 'Viewer']"
+          :key="_id"
           class="creature-property-viewer"
           :model="model"
         />
@@ -115,10 +117,23 @@
     },
     data(){return {
       editing: !!this.startInEditTab,
+      // CurrentId lags behind Id by one tick so that events fired by destroying
+      // forms keyed to the old ID are applied before the new ID overwrites it
+      currentId: undefined,
     }},
+    watch: {
+      _id: {
+        immediate: true,
+        handler(newId){
+          this.$nextTick(() => {
+            this.currentId = newId;
+          });
+        }
+      },
+    },
     meteor: {
       model(){
-        return LibraryNodes.findOne(this._id);
+        return LibraryNodes.findOne(this.currentId);
       },
       editPermission(){
         try {
@@ -132,7 +147,7 @@
     methods: {
       getPropertyName,
       duplicate(){
-        duplicateNode.call({_id: this._id}, (error) => {
+        duplicateNode.call({_id: this.currentId}, (error) => {
           console.error(error);
           if (this.embedded){
             this.$emit('duplicated');
@@ -165,7 +180,7 @@
         });
       },
       change({path, value, ack}){
-        updateLibraryNode.call({_id: this._id, path, value}, (error) =>{
+        updateLibraryNode.call({_id: this.currentId, path, value}, (error) =>{
           if (ack){
             ack(error && error.reason || error);
           } else if (error){
@@ -174,7 +189,7 @@
         });
       },
       push({path, value, ack}){
-        pushToLibraryNode.call({_id: this._id, path, value}, (error) =>{
+        pushToLibraryNode.call({_id: this.currentId, path, value}, (error) =>{
           if (ack){
             ack(error && error.reason || error);
           } else if (error){
@@ -185,7 +200,7 @@
       pull({path, ack}){
         let itemId = get(this.model, path)._id;
         path.pop();
-        pullFromLibraryNode.call({_id: this._id, path, itemId}, (error) =>{
+        pullFromLibraryNode.call({_id: this.currentId, path, itemId}, (error) =>{
           if (ack){
             ack(error && error.reason || error);
           } else if (error){
@@ -194,7 +209,7 @@
         });
       },
       remove(){
-        softRemoveLibraryNode.call({_id: this._id});
+        softRemoveLibraryNode.call({_id: this.currentId});
         if (this.embedded){
           this.$emit('removed');
         } else {