Merge pull request #86 from n2n-milstein/kungpaogao/reformat-stores

Remove some Vuex store logic from components

src/components/FurnitureCardDialog.vue

@@ -9,13 +9,15 @@
       @keydown.escape="closeDialog()"
     >
       <furniture-edit-card
+        :current="current"
         :readonly="readonly"
-        :namespace="namespace"
         :is-edit="isEdit"
         :is-add="isAdd"
         :menu-actions="menuActions"
         :menu-loading="menuLoading"
         :loading="updatesLoading"
+        :updates="updates"
+        @update="addUpdates($event)"
         @edit="toggleEdit()"
         @close="closeDialog()"
         @save="saveChanges()"
@@ -36,32 +38,17 @@
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop, Watch } from "vue-property-decorator";
-import { mapActions, mapState } from "vuex";
 import ViewAction from "@/data/ViewAction";
 import collections from "@/network/collections";
 import FurnitureEditCard from "@/components/FurnitureEditCard.vue";
 import UnsavedDialog from "@/components/FurnitureCardUnsavedDialog.vue";
+import { Furniture } from "@/data/Furniture";
 
-@Component({
-  components: { FurnitureEditCard, UnsavedDialog },
-  computed: mapState({
-    updatesLength(state, getters) {
-      return getters[`${this.namespace}/getUpdatesLength`];
-    },
-  }),
-  methods: mapActions({
-    clearCurrent(dispatch) {
-      return dispatch(`${this.namespace}/clearCurrent`);
-    },
-    clearUpdates(dispatch) {
-      return dispatch(`${this.namespace}/clearUpdates`);
-    },
-    async commitUpdates(dispatch) {
-      return dispatch(`${this.namespace}/commitUpdates`);
-    },
-  }),
-})
+@Component({ components: { FurnitureEditCard, UnsavedDialog } })
 export default class FurnitureCardDialog extends Vue {
+  @Prop({})
+  readonly current!: Furniture;
+
   @Prop({ default: false })
   readonly dialog!: boolean;
 
@@ -74,29 +61,24 @@ export default class FurnitureCardDialog extends Vue {
   @Prop({ default: false })
   readonly isAdd!: boolean;
 
-  @Prop({})
-  readonly namespace!: string;
-
   @Prop({})
   readonly menuActions!: ViewAction[];
 
   @Prop({ default: false })
   readonly menuLoading!: boolean;
 
-  readonly updatesLength!: number;
-
-  readonly clearCurrent!: () => void;
-
-  readonly clearUpdates!: () => void;
-
-  readonly commitUpdates!: () => Promise<void>;
+  updates: Partial<Furniture> = {};
 
   updatesLoading = false;
 
   unsavedDialog = false;
 
   isEdit = false;
 
+  get updatesLength(): number {
+    return Object.keys(this.updates).length;
+  }
+
   /**
    * Watch for change in dialog; if it opens, set isEdit to isAdd
    */
@@ -105,6 +87,20 @@ export default class FurnitureCardDialog extends Vue {
     if (val) this.isEdit = this.isAdd;
   }
 
+  /**
+   * Add updates
+   */
+  addUpdates(updates: Partial<Furniture>): void {
+    this.updates = { ...this.updates, ...updates };
+  }
+
+  /**
+   * Clears updates object
+   */
+  clearUpdates(): void {
+    this.updates = {};
+  }
+
   /**
    * Exits dialog and clears the current item
    */
@@ -115,8 +111,8 @@ export default class FurnitureCardDialog extends Vue {
     if (this.updatesLength === 0 || forceClose) {
       this.unsavedDialog = false;
       this.isEdit = false;
-      this.$emit("close"); // used to set isAdd to false
-      this.clearCurrent();
+      this.clearUpdates();
+      this.$emit("close");
     } else {
       this.unsavedDialog = true;
     }
@@ -136,15 +132,10 @@ export default class FurnitureCardDialog extends Vue {
   /**
    * Commits updates to Firestore
    */
-  async saveChanges(): Promise<void> {
-    if (this.isAdd) {
-      this.$emit("add");
-    } else {
-      this.updatesLoading = true;
-      await this.commitUpdates();
-      this.isEdit = false;
-      this.updatesLoading = false;
-    }
+  saveChanges(): void {
+    this.$emit("save-changes", this.updates);
+    this.clearUpdates();
+    this.isEdit = false;
   }
 }
 </script>

src/components/FurnitureCardUnsavedDialog.vue

@@ -7,9 +7,7 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer />
-        <v-btn color="primary" text @click="$emit('cancel')">
-          Cancel
-        </v-btn>
+        <v-btn color="primary" text @click="$emit('cancel')">Cancel</v-btn>
         <v-btn color="primary" text @click="$emit('discard')">Discard</v-btn>
       </v-card-actions>
     </v-card>

src/components/FurnitureEditCard.vue

@@ -133,9 +133,7 @@
               <!-- Physical Attributes -->
               <h2>Physical Attributes</h2>
 
-              <h3 v-if="!fclass">
-                Select a furniture class
-              </h3>
+              <h3 v-if="!fclass">Select a furniture class</h3>
 
               <v-text-field
                 v-if="!isEdit"
@@ -218,8 +216,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Prop, Component } from "vue-property-decorator";
-import { mapActions, mapState } from "vuex";
+import { Prop, Component, Emit } from "vue-property-decorator";
 // data
 import { Furniture, Status } from "@/data/Furniture";
 import Physical, { FClass } from "@/data/furniture/Physical";
@@ -244,36 +241,15 @@ import ViewActionGroup from "./ViewActionGroup.vue";
     TimingDates,
     ViewActionGroup,
   },
-  computed: mapState({
-    getCurrent(state, getters) {
-      return getters[`${this.namespace}/getCurrent`];
-    },
-    updatesLength(state, getters) {
-      return getters[`${this.namespace}/getUpdatesLength`];
-    },
-    updates(state, getters) {
-      return getters[`${this.namespace}/getCurrentUpdates`];
-    },
-  }),
-  methods: mapActions({
-    updateCurrent(dispatch, payload) {
-      return dispatch(`${this.namespace}/updateCurrent`, payload);
-    },
-  }),
 })
 export default class FurnitureEditCard extends Vue {
-  /* Properties for Vuex mapGetters and mapActions */
-
-  updates!: Partial<Furniture>;
-
-  getCurrent!: Furniture;
-
-  updateCurrent!: ({ updates }: { updates: Partial<Furniture> }) => void;
-
   /* Props */
 
-  @Prop({ default: "inventory" })
-  readonly namespace!: string;
+  @Prop({})
+  readonly current!: Furniture;
+
+  @Prop({})
+  readonly updates!: Partial<Furniture>;
 
   @Prop({ default: false })
   readonly readonly!: boolean;
@@ -335,26 +311,47 @@ export default class FurnitureEditCard extends Vue {
     ];
   }
 
-  /* Getters and setters for form fields */
+  /** Variables for updates */
 
-  get current(): Furniture {
-    return { ...this.getCurrent, ...this.updates };
+  get updatesLength(): number {
+    return Object.keys(this.updates).length;
   }
 
+  get currentWithUpdates(): Furniture {
+    return { ...this.current, ...this.updates };
+  }
+
+  /**
+   * Written like this to maintain compatibility with stores
+   */
+  @Emit("update")
+  /* eslint-disable object-curly-newline */
+  // eslint-disable-next-line class-methods-use-this
+  updateCurrent({
+    updates,
+  }: {
+    updates: Partial<Furniture>;
+  }): Partial<Furniture> {
+    return updates;
+  }
+  /* eslint-enable object-curly-newline */
+
+  /* Getters and setters for form fields */
+
   get donor(): Donor {
-    return this.current.donor || new Donor();
+    return this.currentWithUpdates.donor || new Donor();
   }
 
   updateDonor(key: string, value: string): void {
     /* eslint-disable object-curly-newline */
     this.updateCurrent({
-      updates: { donor: { ...this.current.donor, [key]: value } },
+      updates: { donor: { ...this.currentWithUpdates.donor, [key]: value } },
     });
     /* eslint-enable */
   }
 
   get status(): Status {
-    return this.current.status;
+    return this.currentWithUpdates.status;
   }
 
   set status(value: Status) {
@@ -376,21 +373,25 @@ export default class FurnitureEditCard extends Vue {
   ];
 
   get fclass(): FClass {
-    return this.current.physical ? this.current.physical.class : FClass.Bed;
+    return this.currentWithUpdates.physical
+      ? this.currentWithUpdates.physical.class
+      : FClass.Bed;
   }
 
   set fclass(value: FClass) {
     /* eslint-disable object-curly-newline */
     this.updateCurrent({
-      updates: { physical: { ...this.current.physical, class: value } },
+      updates: {
+        physical: { ...this.currentWithUpdates.physical, class: value },
+      },
     });
     /* eslint-enable */
   }
 
   readonly classOptions = Object.keys(FClass);
 
   get physical(): Physical {
-    return this.current.physical || new Physical();
+    return this.currentWithUpdates.physical || new Physical();
   }
 
   set physical(value: Physical) {
@@ -399,27 +400,27 @@ export default class FurnitureEditCard extends Vue {
   }
 
   get timing(): Timing {
-    return this.current.timing || new Timing();
+    return this.currentWithUpdates.timing || new Timing();
   }
 
   set timing(value: Timing) {
     this.updateCurrent({ updates: { timing: value } });
   }
 
   get comments(): string {
-    return this.current.comments;
+    return this.currentWithUpdates.comments;
   }
 
   get staffNotes(): string {
-    return this.current.staffNotes;
+    return this.currentWithUpdates.staffNotes;
   }
 
   set staffNotes(value: string) {
     this.updateCurrent({ updates: { staffNotes: value } });
   }
 
   get attributes(): Attributes {
-    return this.current.attributes || new Attributes();
+    return this.currentWithUpdates.attributes || new Attributes();
   }
 
   set attributes(value: Attributes) {