adds print form that doesnt print

src/assets/app.css

@@ -133,6 +133,39 @@ button.action-close {
   cursor: pointer;
 }
 
+.options-form {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-evenly;
+}
+
+.deck-form-fields {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  max-width: 25rem;
+  width: 50%;
+  margin-right: -15%;
+  z-index: 1;
+}
+
+.deck-form-fields label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.deck-form-fields label,
+.deck-form-fields select,
+.deck-form-fields input,
+.deck-form-fields button {
+  margin: .5em 0;
+}
+.deck-form-fields input[type=color] {
+  margin-left: .5em;
+  padding: 0;
+  vertical-align: middle;
+}
 .codex-editor--narrow .codex-editor__redactor {
   margin-right: 0;
 }

src/components/deck-form.vue

@@ -1,5 +1,5 @@
 <template>
-  <form @submit.prevent="saveDeck">
+  <form class="options-form" @submit.prevent="saveDeck">
     <div class="deck-form-fields">
       <select v-model="icon">
         <option :key="iconName" :value="iconName" v-for="iconName in icons">{{ iconName }}</option>
@@ -78,32 +78,3 @@ export default class DeckForm extends Vue {
   }
 }
 </script>
-
-<style scoped>
-form {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-evenly;
-}
-
-.deck-form-fields {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  max-width: 25rem;
-  width: 50%;
-  margin-right: -15%;
-  z-index: 1;
-}
-
-.deck-form-fields select,
-.deck-form-fields input,
-.deck-form-fields button {
-  margin: .5em 0;
-}
-.deck-form-fields input[type=color] {
-  margin-left: .5em;
-  padding: 0;
-  vertical-align: middle;
-}
-</style>

src/components/print-deck-form.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="print-options-form">
+    <header>Print Deck</header>
+
+    <form @submit.prevent="printDeck">
+    <div class="deck-form-fields">
+      <label for="print-option-page-size">
+        Page Size
+        <select class="print-option-select" id="print-option-page-size" v-model="pageSize">
+          <option :key="size" :value="size.value" v-for="size in pageSizes">{{ size.title }}</option>
+        </select>
+      </label>
+
+      <label for="print-option-card-size">
+        Card Size
+        <select class="print-option-select" id="print-option-card-size" v-model="cardSize">
+          <option :key="size" :value="size.value" v-for="size in cardSizes">{{ size.title }}</option>
+        </select>
+      </label>
+
+      <label for="print-option-arrangement">
+        Arrangement
+        <select class="print-option-select" id="print-option-arrangement" v-model="arrangement">
+          <option :key="arrangement" :value="arrangement.value" v-for="arrangement in arrangements">{{ arrangement.title }}</option>
+        </select>
+      </label>
+
+      <button type="submit">Print deck</button>
+      <button class="cancel" @click.prevent="$emit('close')">cancel</button>
+    </div>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Emit, Vue } from 'vue-property-decorator'
+import { cardSizeFromWH } from '../lib'
+
+@Component
+export default class EditDeckForm extends Vue {
+  @Prop() public readonly deck!: Deck
+
+  private pageSizes = [
+    { title: 'A4', value: 'a4' }, // 210mm × 297mm
+    { title: 'US Letter', value: 'usletter' }, // 8.5in × 11in
+    { title: 'JIS-B4', value: 'jisb4' }, // 182mm × 257mm
+    { title: 'A3', value: 'a3' }, // 297mm × 420mm
+    { title: 'A5', value: 'a5' }, // 148mm × 210mm
+    { title: 'US Legal', value: 'uslegal' }, // 8.5in × 14in
+    { title: 'US Ledger', value: 'usledger' }, // 11in × 17in
+    { title: 'JIS-B5', value: 'jisb5' } // 257mm × 364mm
+  ]
+
+  private cardSizes = [
+    { title: '88x62 (Poker)', value: '88x62' },
+    { title: '88x56 (Bridge)', value: '88x56' }
+  ]
+
+  private arrangements = [
+    { title: 'Doublesided', value: 'doublesided' },
+    { title: 'Only Front Sides', value: 'frontonly' },
+    { title: 'Side by Side', value: 'sidebyside' }
+  ]
+
+  private pageSize = 'a4'
+  private cardSize = '88x62'
+  private arrangement = 'doublesided'
+
+  private mounted () {
+    this.cardSize = cardSizeFromWH(this.deck.cardWidth, this.deck.cardHeight)
+  }
+}
+</script>
+
+<style scoped>
+.print-option-select {
+  width: 55%;
+}
+.deck-form-fields {
+  width: 100%;
+  max-width: 20em;
+  margin: auto;
+}
+</style>

src/views/Deck.vue

@@ -16,7 +16,8 @@
 
     <header>
       <span>{{ deck.name }}</span>
-      <button class="edit-button" @click="popup = true">edit</button>
+      <button class="edit-button" @click="popup = 'edit'">edit</button>
+      <button class="print-button" @click="popup = 'print'">print</button>
 
       <p>{{ deck.description }}</p>
     </header>
@@ -35,7 +36,7 @@
       <deck-cover @click="newCard" />
     </section>
 
-    <div id="popup" v-show="popup">
+    <div id="popup" v-if="popup === 'edit'">
       <div class="popup-content">
         <EditDeckForm
           :deck="deck"
@@ -44,6 +45,16 @@
         />
       </div>
     </div>
+
+    <div id="popup" v-else-if="popup === 'print'">
+      <div class="popup-content">
+        <PrintDeckForm
+          :deck="deck"
+          @save="closeAndReload"
+          @close="popup = false"
+        />
+      </div>
+    </div>
   </main>
 </template>
 
@@ -52,10 +63,11 @@ import { Component, Vue } from 'vue-property-decorator'
 import DeckCover from '@/components/deck-cover.vue'
 import DeckCard from '@/components/deck-card.vue'
 import EditDeckForm from '@/components/edit-deck-form.vue'
+import PrintDeckForm from '@/components/print-deck-form.vue'
 import { iconPath, defaultCard } from '@/lib'
 
 @Component({
-  components: { DeckCover, DeckCard, EditDeckForm }
+  components: { DeckCover, DeckCard, EditDeckForm, PrintDeckForm }
 })
 export default class DeckView extends Vue {
   private popup = false
@@ -137,11 +149,13 @@ export default class DeckView extends Vue {
 </script>
 
 <style scoped>
-.edit-button {
+.edit-button, .print-button {
   vertical-align: middle;
-  margin-left: 1em;
   margin-top: -2px;
 }
+.edit-button {
+  margin-left: 1em;
+}
 .deck-bg {
   position: fixed;
   top: 0;