DeckEditor v-model untangling

frontend/src/classes/Deck.js

@@ -3,30 +3,55 @@
 import CardsDB from '@/plugins/ffdecks'
 
 export default class {
-  constructor() {
+  constructor(id) {
-    this.id = null
+    this.id = id
     this.name = ''
     this.note = ''
     this.cards = []
   }
 
-  from_plainObject(obj) {
+  populate() {
-    this.id = obj.id
+    for (let card of this.cards) {
-    this.name = obj.content.name
+      card.dbentry = CardsDB[card.serial]
-    this.note = obj.content.note
+    }
-    this.cards = obj.content.cards
+  }
+
+  from_object(obj) {
+    if (obj) {
+      this.name = obj.name
+      this.note = obj.note
+      this.cards = obj.cards
+    }
+  }
+
+  plainObject() {
+    let plainCards = []
+    for (let card of this.cards) {
+      plainCards.push({
+        serial: card.serial,
+        count: card.count
+      })
+    }
+
+    return {
+      name: this.name,
+      note: this.note,
+      cards: plainCards
+    }
   }
 
   from_deckList(str) {
     // select all lines containing card serial numbers
-    let cardLinesRE = /^.*\b\d-\d{3}[A-Z]?\b.*$/gm
+    let cardLinesRE = /^.*\b\d+-0*\d{1,3}[A-Z]?\b.*$/gm
     let cardLines = str.match(cardLinesRE)
     let cardCounts = {}
 
     cardLines.forEach(cardLine => {
       // extract serial (guaranteed to be in here!)
-      let serialRE = /\b(\d-\d{3})[A-Z]?\b/i
+      let serialRE = /\b(\d+)-0*(\d{1,3})[A-Z]?\b/i
-      let serial = serialRE.exec(cardLine)[1]
+      let serial = serialRE.exec(cardLine)
+      // force format 'x-xxx'
+      serial = `${serial[1]}-${serial[2].padStart(3, '0')}`
 
       // strip out serial number
       cardLine = cardLine.replace(serialRE, '')
@@ -63,7 +88,7 @@ export default class {
 
     // push card data into deck
     this.cards = []
-    for(let serial in cardCounts) {
+    for (let serial in cardCounts) {
       this.cards.push({
         serial: serial,
         count: cardCounts[serial]
@@ -98,14 +123,6 @@ export default class {
     }
   }
 
-  plainObject() {
-    return {
-      name: this.name,
-      note: this.note,
-      cards: this.cards
-    }
-  }
-
   parts() {
     let retval = ['Forwards', 'Backups', 'Summons, Monsters & more'].map(
       item => ({
@@ -150,10 +167,10 @@ export default class {
     lines.push('')
 
     // list each deck part
-    for(let part of this.parts()) {
+    for (let part of this.parts()) {
       lines.push(`${part.heading} (${part.count}):`)
 
-      for(let card of part.cards)
+      for (let card of part.cards)
         lines.push(`${card.count}x ${card.serial} "${card.dbentry.name}"`)
 
       lines.push('')
@@ -165,10 +182,4 @@ export default class {
   count() {
     return this.cards.reduce((total, card) => total + card.count, 0)
   }
-
-  populate() {
-    for (let card of this.cards) {
-      card.dbentry = CardsDB[card.serial]
-    }
-  }
 }

frontend/src/components/Deck.vue

@@ -31,12 +31,12 @@
       </v-layout>
     </v-container>
 
-    <DeckEditor
+    <DeckEditor v-if="editing" :deck="deck" @save="save_deck">
-      :visible="editing"
+      <v-btn color="error" @click.native="editing = false">
-      :deck="deck"
+        <v-icon>cancel</v-icon>
-      @close="editing = false"
+        cancel
-      @change="change_deck"
+      </v-btn>
-    />
+    </DeckEditor>
   </v-expansion-panel-content>
 </template>
 
@@ -68,18 +68,17 @@ export default {
   },
 
   methods: {
-    change_deck(new_deck) {
+    save_deck(new_deck) {
       axios
         .post('/decks/modify', {
           session: this.session,
           deckID: this.deck.id,
-          deckCards: new_deck
+          deckCards: new_deck.plainObject()
         })
         .then(response => {
           if (response.data.success) {
+            this.editing = false
             this.$emit('change')
-          } else {
-            this.editing = true
           }
         })
     }

frontend/src/components/DeckList.vue

@@ -50,8 +50,9 @@ export default {
       let result = []
 
       for (let plainDeck of this.decks) {
-        let deck = new DeckJS()
+        let deck = new DeckJS(plainDeck.id)
-        deck.from_plainObject(plainDeck)
+
+        deck.from_object(plainDeck.content)
         deck.populate()
 
         result.push(deck)

frontend/src/components/NewDeck.vue

@@ -6,7 +6,7 @@
 
     <v-container>
       <v-card flat>
-        <!-- <DeckEditor :visible="true" value="" @close="" @change="" /> -->
+        <DeckEditor />
       </v-card>
     </v-container>
   </v-expansion-panel-content>

frontend/src/components/forms/DeckEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container v-if="visible">
+  <v-container>
     <v-card flat>
       <v-alert :value="check.count !== 50" type="warning">
         {{ check.count }} cards detected! (Decks should have exactly 50 cards)
@@ -10,33 +10,26 @@
       </v-alert>
 
       <v-textarea
+        ref="deckList"
         label="Edit Deck"
-        v-model="new_decklist"
         rows="35"
         hint="Change card counts and/or serial numbers. Names will be updated accordingly!"
         style="font-family: monospace"
+        :value="new_deck.deckList()"
         @input="check.checked = false"
       >
       </v-textarea>
 
       <v-card-actions>
-        <v-btn color="error" @click.native="close">
+        <slot></slot>
-          <v-icon>cancel</v-icon>
-          cancel
-        </v-btn>
-
         <v-spacer></v-spacer>
 
-        <v-btn color="info" @click.native="check_deck">
+        <v-btn color="info" @click.native="validate" :disabled="check.checked">
           <v-icon>check</v-icon>
           validate
         </v-btn>
 
-        <v-btn
+        <v-btn color="success" @click.native="save" :disabled="!check.checked">
-          color="success"
-          @click.native="save_deck"
-          :disabled="!check.checked"
-        >
           <v-icon>save</v-icon>
           save
         </v-btn>
@@ -52,8 +45,7 @@ export default {
   name: 'DeckEditor',
 
   props: {
-    deck: Object,
+    deck: Object
-    visible: Boolean
   },
 
   data: () => ({
@@ -62,31 +54,22 @@ export default {
       maximum: 0,
       checked: false
     },
-    new_decklist: null
+    new_deck: {}
   }),
 
   created() {
-    this.new_decklist = this.deck.deckList()
+    this.new_deck = new Deck(0)
-  },
 
-  computed: {
+    if (this.deck)
-    new_deck() {
+      // this.deck should already be populated!
-      let deck = new Deck()
+      this.new_deck.from_object(this.deck)
-      deck.from_deckList(this.new_decklist)
-      deck.populate()
-
-      this.new_decklist = deck.deckList()
-      return deck
-    }
   },
 
   methods: {
-    close() {
+    validate() {
-      this.check.checked = false
+      this.new_deck.from_deckList(this.$refs.deckList.lazyValue)
-      this.$emit('close')
+      this.new_deck.populate()
-    },
 
-    check_deck() {
       // count number of cards
       this.check.count = this.new_deck.count()
 
@@ -100,9 +83,8 @@ export default {
       this.check.checked = true
     },
 
-    save_deck() {
+    save() {
-      this.$emit('change', this.new_deck.plainObject())
+      this.$emit('save', this.new_deck)
-      this.close()
     }
   }
 }