node-fftcg/frontend/src/components/Deck.vue

<template>
  <v-expansion-panel-content>
    <template v-slot:header>
      <v-layout align-center row>
        <v-flex text-xs-center xs2>
          <Crystal
            v-for="element in deck.elements()"
            :key="element.name"
            :element="element.name"
          />
        </v-flex>
        <v-flex class="subheading">
          {{ deck.name }}
        </v-flex>
      </v-layout>
    </template>

    <template v-if="!editing">
      <v-alert :value="deck.note" type="info">
        {{ deck.note }}
      </v-alert>

      <v-container 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>
              <v-list dense subheader>
                <Card
                  v-for="card in part.cards"
                  :key="card.serial"
                  :count="card.count"
                  :serial="card.serial"
                  :dbentry="card.dbentry"
                ></Card>
              </v-list>
            </v-card>
          </v-flex>

          <v-btn fab absolute bottom right @click.native="editing = true">
            <v-icon>edit</v-icon>
          </v-btn>

          <v-dialog v-model="deleting" persistent>
            <template v-slot:activator="{ on }">
              <v-btn fab absolute bottom left v-on="on">
                <v-icon>delete</v-icon>
              </v-btn>
            </template>

            <v-card>
              <v-card-title class="headline">
                Really delete this deck?
              </v-card-title>

              <v-card-text>
                Are you sure you want to delete this deck? This cannot be
                undone.
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>

                <v-btn color="error" @click.native="deleting = false">
                  Cancel
                </v-btn>

                <v-btn
                  color="success"
                  @click.native="
                    deleting = false
                    delete_deck()
                  "
                >
                  Confirm
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-layout>
      </v-container>
    </template>

    <DeckEditor v-if="editing" :deck="deck" @save="save_deck">
      <v-btn color="error" @click.native="editing = false">
        <v-icon>cancel</v-icon>
        cancel
      </v-btn>
    </DeckEditor>
  </v-expansion-panel-content>
</template>

<script>
import * as Cookies from 'js-cookie'
import axios from '@/plugins/axios'

import Card from './Card.vue'
import Crystal from './Crystal.vue'
import DeckEditor from './forms/DeckEditor.vue'

export default {
  name: 'Deck',

  props: {
    deck: Object
  },

  components: {
    Card,
    Crystal,
    DeckEditor
  },

  data: () => ({
    editing: false,
    deleting: false
  }),

  computed: {
    session: () => Cookies.get('session')
  },

  methods: {
    save_deck(new_deck) {
      axios
        .post('/decks/modify', {
          session: this.session,
          deckID: this.deck.id,
          deckCards: new_deck.plainObject()
        })
        .then(response => {
          if (response.data.success) {
            this.editing = false
            this.$emit('change')
          }
        })
    },

    delete_deck() {
      axios
        .post('/decks/delete', {
          session: this.session,
          deckID: this.deck.id
        })
        .then(response => {
          if (response.data.success) {
            this.$emit('change')
          }
        })
    }
  }
}
</script>