deck editing

frontend/src/components/Deck.vue

@@ -35,6 +35,7 @@
       :id="deck.id"
       :value="deck_list"
       @close="editing = false"
+      @change="$emit('change')"
     />
   </v-expansion-panel-content>
 </template>

frontend/src/components/DeckList.vue

@@ -1,6 +1,11 @@
 <template>
   <v-expansion-panel v-if="linked_decks">
-    <Deck v-for="deck in linked_decks" :deck="deck" :key="deck.id" />
+    <Deck
+      v-for="deck in linked_decks"
+      :deck="deck"
+      :key="deck.id"
+      @change="refresh_decks"
+    />
   </v-expansion-panel>
 </template>
 
@@ -65,6 +70,12 @@ export default {
 
       return result
     }
+  },
+
+  methods: {
+    refresh_decks() {
+      this.$asyncComputed.decks.update()
+    }
   }
 }
 </script>

frontend/src/components/forms/DeckEditor.vue

@@ -1,22 +1,22 @@
 <template>
   <v-container v-if="visible">
     <v-card flat>
-      <v-alert :value="count !== 50" type="warning">
+      <v-alert :value="check.count !== 50" type="warning">
-        {{ count }} cards detected! (Decks should have exactly 50 cards)
+        {{ check.count }} cards detected! (Decks should have exactly 50 cards)
       </v-alert>
-      <v-alert :value="maximum > 3" type="warning">
+      <v-alert :value="check.maximum > 3" type="warning">
-        Card with {{ maximum }} copies detected! (Cards should not have more
+        Card with {{ check.maximum }} copies detected! (Cards should not have
-        than 3 copies)
+        more than 3 copies)
       </v-alert>
 
       <v-textarea
-        ref="textarea"
         label="Edit Deck"
         :value="value"
         rows="35"
         hint="Change card counts and/or serial numbers. Names will be updated accordingly!"
         style="font-family: monospace"
-        @input="checked = false"
+        @input="check.checked = false"
+        @change="new_decklist = $event"
       >
       </v-textarea>
 
@@ -28,12 +28,16 @@
 
         <v-spacer></v-spacer>
 
-        <v-btn color="info" @click.native="check">
+        <v-btn color="info" @click.native="check_deck">
           <v-icon>check</v-icon>
           validate
         </v-btn>
 
-        <v-btn color="success" @click.native="save" :disabled="!checked">
+        <v-btn
+          color="success"
+          @click.native="save_deck"
+          :disabled="!check.checked"
+        >
           <v-icon>save</v-icon>
           save
         </v-btn>
@@ -56,9 +60,12 @@ export default {
   },
 
   data: () => ({
-    count: 50,
+    check: {
-    maximum: 0,
+      count: 50,
-    checked: false
+      maximum: 0,
+      checked: false
+    },
+    new_decklist: null
   }),
 
   computed: {
@@ -66,7 +73,7 @@ export default {
 
     new_deck() {
       try {
-        return this.parse_deck(this.$refs.textarea)
+        return this.parse_deck(this.new_decklist)
       } catch (e) {
         return this.parse_deck(this.value)
       }
@@ -171,34 +178,38 @@ export default {
       this.$emit('close')
     },
 
-    check() {
+    update_deck(text) {
-      let new_deck = this.parse_deck(this.$refs.textarea.lazyValue)
+      try {
+        this.new_deck = this.parse_deck(text)
+      } catch (e) {
+        this.new_deck = this.parse_deck(this.value)
+      }
+    },
 
+    check_deck() {
       // count number of cards
-      this.count = new_deck.count
+      this.check.count = this.new_deck.count
 
       // find most frequent card
-      this.maximum = 0
+      this.check.maximum = 0
-      new_deck.cards.forEach(card => {
+      this.new_deck.cards.forEach(card => {
-        if (card.count > this.maximum) this.maximum = card.count
+        if (card.count > this.check.maximum) this.check.maximum = card.count
       })
 
       // deck has now been checked
-      this.checked = true
+      this.check.checked = true
     },
 
-    save() {
+    save_deck() {
-      let new_deck = this.parse_deck(this.$refs.textarea.lazyValue)
-
       axios
         .post('/decks/modify', {
           session: this.session,
           deckID: this.id,
-          deckCards: new_deck
+          deckCards: this.new_deck
         })
         .then(response => {
           if (response.data.success) {
-            this.$emit('change', new_deck)
+            this.$emit('change')
             this.close()
           }
         })