decklist editor form layout

frontend/src/components/Deck.vue

@@ -8,8 +8,8 @@
       {{ deck.note }}
     </v-alert>
 
-    <v-container style="position: relative" grid-list-md fluid>
-      <v-layout v-if="!editing" row wrap>
+    <v-container v-if="!editing" style="position: relative" grid-list-md fluid>
+      <v-layout row wrap>
         <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm6 md4>
           <v-card>
             <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
@@ -29,8 +29,8 @@
           <v-icon>edit</v-icon>
         </v-btn>
       </v-layout>
-      <DeckEditor v-if="editing" :deck_list="deck_list" />
     </v-container>
+    <DeckEditor v-model="editing" :id="deck.id" :list="deck_list" />
   </v-expansion-panel-content>
 </template>
 

frontend/src/components/forms/DeckEditor.vue

@@ -1,27 +1,44 @@
 <template>
-  <v-form lazy-validation>
-    <v-alert v-model="deck.count !== 50" type="warning">
-      {{ deck.count }} cards detected! (Decks should have 50)
-    </v-alert>
-    <v-alert v-model="deck.maximum > 3" type="warning">
-      Card with {{ deck.maximum }} copies detected! (Cards should not have more than 3 copies)
-    </v-alert>
+  <v-container v-if="value">
+    <v-card flat>
+      <v-alert :value="count !== 50" type="warning">
+        {{ count }} cards detected! (Decks should have exactly 50 cards)
+      </v-alert>
+      <v-alert :value="maximum > 3" type="warning">
+        Card with {{ maximum }} copies detected! (Cards should not have more
+        than 3 copies)
+      </v-alert>
 
-    <v-textarea
-      ref="textarea"
-      label="Edit Deck"
-      :value="deck_list"
-      rows="35"
-      hint="Change card counts and/or serial numbers. Names will be updated automatically."
-      style="font-family: monospace"
-    >
-    </v-textarea>
+      <v-textarea
+        ref="textarea"
+        label="Edit Deck"
+        :value="list"
+        rows="35"
+        hint="Change card counts and/or serial numbers. Names will be updated automatically."
+        style="font-family: monospace"
+      >
+      </v-textarea>
 
-    <v-spacer></v-spacer>
-    <v-btn color="success" @click.native="check">
-      Check Deck
-    </v-btn>
-  </v-form>
+      <v-card-actions>
+        <v-btn color="error" @click.native="$emit('input', false)">
+          <v-icon>cancel</v-icon>
+          cancel
+        </v-btn>
+
+        <v-spacer></v-spacer>
+
+        <v-btn color="info" @click.native="check">
+          <v-icon>check</v-icon>
+          validate
+        </v-btn>
+
+        <v-btn color="success" @click.native="save" :disabled="!checked">
+          <v-icon>save</v-icon>
+          save
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
 </template>
 
 <script>
@@ -29,14 +46,15 @@ export default {
   name: 'DeckEditor',
 
   props: {
-    deck_list: String
+    id: Number,
+    list: String,
+    value: Boolean
   },
 
   data: () => ({
-    deck: {
-      count: 50,
-      maximum: 0
-    }
+    count: 50,
+    maximum: 0,
+    checked: false
   }),
 
   methods: {
@@ -136,15 +154,21 @@ export default {
       let new_deck = this.parse_deck(this.$refs.textarea.lazyValue)
 
       // count number of cards
-      this.deck.count = new_deck.count
+      this.count = new_deck.count
 
       // find most frequent card
-      this.deck.maximum = 0
+      this.maximum = 0
       new_deck.cards.forEach(card => {
-        if(card.count > this.deck.maximum)
-          this.deck.maximum = card.count
+        if (card.count > this.maximum) this.maximum = card.count
       })
+
+      // deck has now been checked
+      this.checked = true
     }
+  },
+
+  activated() {
+    console.log('Frosch')
   }
 }
 </script>