refactor(catalog): clean up internals, particularly around vuex

components/app.vue

@@ -109,7 +109,7 @@
       ...mapGetters({
         loggedIn: 'account/loggedIn',
         username: 'account/username',
-        catalogCount: 'pokemon/count'
+        catalogCount: 'catalog/totalCount'
       }),
 
       loading() {

components/catalog/add.vue

@@ -2,33 +2,29 @@
   <loading-panel>
     <b-container fluid class="p-3">
       <h1>Add Pokémon to Catalog</h1>
-      <b-form v-on:submit.stop.prevent="save">
-        <form-pokemon v-model="pokemon" />
+      <form-pokemon v-bind:caught-at="today" v-on:submit="save">
         <b-button type="submit" variant="primary">Save</b-button>
-      </b-form>
+      </form-pokemon>
     </b-container>
   </loading-panel>
 </template>
 
 <script>
   import moment from 'moment'
+
   import FormPokemon from './form-pokemon.vue'
 
   export default {
-    data() {
-      return {
-        pokemon: {
-          quickMove: null,
-          chargeMove: null,
-          caughtAt: moment().format('YYYY-MM-DD')
-        }
+    computed: {
+      today() {
+        return moment().format('YYYY-MM-DD')
       }
     },
 
     methods: {
-      async save() {
-        await this.$store.dispatch('pokemon/add', {
-          pokemon: this.pokemon,
+      async save(pokemon) {
+        await this.$store.dispatch('catalog/add', {
+          pokemon: pokemon,
           trigger: 'add-form'
         })
 

components/catalog/edit.vue

@@ -2,34 +2,33 @@
   <loading-panel>
     <b-container fluid class="p-3">
       <h1>Edit Pokémon in Catalog</h1>
-      <b-form v-on:submit.stop.prevent="update">
-        <form-pokemon v-if="pokemon" v-model="pokemon" />
+      <form-pokemon v-if="catalog" v-bind="catalog" v-on:submit="update">
         <b-button type="submit" variant="primary">Save</b-button>
-      </b-form>
+      </form-pokemon>
     </b-container>
   </loading-panel>
 </template>
 
 <script>
-  import clone from 'clone'
+  import { mapGetters } from 'vuex'
+
   import FormPokemon from './form-pokemon.vue'
 
   export default {
-    data(vm) {
-      const doc = vm.$store.getters['pokemon/byID'](vm.$route.params.pokemon)
-      return { pokemon: doc ? clone(doc) : {} }
-    },
-
     computed: {
-      loading() {
-        return this.$store.state.metadata.loading
+      ...mapGetters({
+        catalogByID: 'catalog/rawByID'
+      }),
+
+      catalog() {
+        const { pokemon } = this.$route.params
+        return this.catalogByID(pokemon)
       }
     },
 
     methods: {
-      async update() {
-        const { pokemon } = this
-        await this.$store.dispatch('pokemon/update', {
+      async update(pokemon) {
+        await this.$store.dispatch('catalog/update', {
           pokemon: pokemon,
           trigger: 'edit-form'
         })
@@ -40,18 +39,6 @@
       }
     },
 
-    watch: {
-      loading() {
-        const { pokemon } = this.$route.params
-        const doc = this.$store.getters['pokemon/byID'](pokemon)
-        if (doc) {
-          for (const key in doc) {
-            this.$set(this.pokemon, key, doc[key])
-          }
-        }
-      }
-    },
-
     components: { FormPokemon }
   }
 </script>

components/catalog/filters.vue

@@ -1,19 +1,20 @@
 <template>
   <b-form>
     <b-form-group label="Keywords">
-      <b-form-input v-model="value.name" type="text" placeholder="Name" />
+      <b-form-input v-model="name" type="text" placeholder="Name" />
     </b-form-group>
-    <filter-family v-model="value.family" />
-    <filter-ivs v-model="value.minIV" />
-    <filter-level v-model="value.minLevel" />
-    <filter-generation v-model="value.generation" />
-    <filter-rarity v-model="value.rarity" />
-    <filter-evolves v-model="value.evolves" />
-    <filter-types v-model="value.types" />
+    <filter-family v-model="family" />
+    <filter-ivs v-model="minIV" />
+    <filter-level v-model="minLevel" />
+    <filter-generation v-model="generation" />
+    <filter-rarity v-model="rarity" />
+    <filter-evolves v-model="evolves" />
+    <filter-types v-model="types" />
   </b-form>
 </template>
 
 <script>
+  import clone from 'clone'
   import debounce from 'debounce'
 
   import FilterEvolves from '../filters/evolves.vue'
@@ -25,26 +26,25 @@
   import FilterRarity from '../filters/rarity.vue'
 
   export default {
+    props: ['value'],
+
     data() {
-      return {
-        value: {
-          evolves: null,
-          family: null,
-          generation: null,
-          minIV: 0,
-          minLevel: 1,
-          name: '',
-          rarity: null,
-          types: []
-        }
+      const { name, family, minIV, minLevel, generation, rarity, evolves, types } = this.value
+      return { name, family, minIV, minLevel, generation, rarity, evolves, types }
+    },
+
+    computed: {
+      newValue() {
+        const { name, family, minIV, minLevel, generation, rarity, evolves, types } = this
+        return { name, family, minIV, minLevel, generation, rarity, evolves, types }
       }
     },
 
     watch: {
-      value: {
+      newValue: {
         deep: true,
         handler: debounce(function () {
-          this.$emit('input', this.value)
+          this.$emit('input', this.newValue)
         }, 250)
       }
     },