Actions for current item

functions/package.json

@@ -10,7 +10,7 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "8"
+    "node": "10"
   },
   "main": "lib/index.js",
   "dependencies": {

functions/src/index.ts

@@ -108,9 +108,9 @@ function renameSubheaders(mainHeaders: string[], subheaders: string[]): any {
   return newHeaders;
 }
 
-async function getData(id: string[], category: string): Promise<string> {
+async function getData(id: string[], collection: string): Promise<string> {
   const inventory: any = [];
-  const furniture = admin.firestore().collection(category);
+  const furniture = admin.firestore().collection(collection);
   const wb = XLSX.utils.book_new();
 
   // converting each inventory entry to single-layer JSON object
@@ -178,14 +178,14 @@ async function getData(id: string[], category: string): Promise<string> {
   const date = `${today.getFullYear()}-${
     today.getMonth() + 1
   }-${today.getDate()}`;
-  const fileName = category.concat(`${date}.xlsx`);
+  const fileName = collection.concat(`${date}.xlsx`);
   const file = bucket.file(fileName);
   await file.save(buffer);
   return `/n2n-inventory/${fileName}`;
 }
 
 exports.getInventoryXLSX = functions.https.onCall(
-  (data: { id: string[]; category: string }) => {
-    return getData(data.id, data.category);
+  (data: { id: string[]; collection: string }) => {
+    return getData(data.id, data.collection);
   },
 );

src/components/EditCard.vue

@@ -1,5 +1,14 @@
 <template>
   <v-card>
+    <v-overlay absolute :value="loading" align="center" opacity="0.25">
+      <v-progress-circular
+        class="mr-3"
+        indeterminate
+        size="32"
+      ></v-progress-circular>
+      Saving edits...
+    </v-overlay>
+
     <v-card-title
       class="headline ease-transition pb-4"
       :class="{
@@ -17,6 +26,9 @@
         v-if="!isEdit"
         @close="$emit('close')"
         @edit="$emit('edit')"
+        @export="$emit('export')"
+        @archive="$emit('archive')"
+        @unarchive="$emit('unarchive')"
       />
     </v-card-title>
 
@@ -34,6 +46,7 @@
               <h2>Donor Info</h2>
 
               <!-- TODO: make these just normal text when in readonly -->
+              <!-- :value="donor ? donor.name : ''" -->
               <v-text-field
                 :value="donor.name"
                 @input="updateDonor('name', $event)"
@@ -90,7 +103,7 @@
 
               <v-text-field
                 v-if="!isEdit"
-                :value="statusOptions[status].text"
+                :value="statusOptions[status] ? statusOptions[status].text : ''"
                 label="Furniture Status"
                 readonly
                 :prepend-icon="statusIcons[status]"
@@ -273,6 +286,15 @@ export default class EditCard extends Vue {
   @Prop({ default: true })
   readonly isStaff!: boolean;
 
+  @Prop({ default: [] })
+  readonly menuActions!: ViewAction[];
+
+  @Prop({ default: false })
+  readonly menuLoading!: boolean;
+
+  @Prop({ default: false })
+  readonly loading!: boolean;
+
   /**
    * Sets the offset when user scrolls
    */
@@ -294,23 +316,19 @@ export default class EditCard extends Vue {
     (v: any): boolean | string => /.+@.+/.test(v) || "E-mail must be valid",
   ];
 
-  readonly ACTIONS: ViewAction[] = [
-    { icon: "edit", desc: "Edit Item", emit: "edit" },
-    {
-      icon: "more_vert",
-      desc: "More Actions",
-      emit: "menu",
-      menu: [
-        { icon: "archive", desc: "Archive", emit: "archive" },
-        {
-          icon: "cloud_download",
-          desc: "Export",
-          emit: "export",
-        },
-      ],
-    },
-    { icon: "close", desc: "Close", emit: "close" },
-  ];
+  get ACTIONS(): ViewAction[] {
+    return [
+      { icon: "edit", desc: "Edit Item", emit: "edit" },
+      {
+        icon: "more_vert",
+        desc: "More Actions",
+        emit: "menu",
+        menu: this.menuActions,
+        loading: (): boolean => this.menuLoading,
+      },
+      { icon: "close", desc: "Close", emit: "close" },
+    ];
+  }
 
   /* Getters and setters for form fields */
 
@@ -319,7 +337,7 @@ export default class EditCard extends Vue {
   }
 
   get donor(): Donor {
-    return this.current.donor;
+    return this.current.donor || new Donor();
   }
 
   updateDonor(key: string, value: string): void {
@@ -353,7 +371,7 @@ export default class EditCard extends Vue {
   ];
 
   get fclass(): FClass {
-    return this.current.physical.class;
+    return this.current.physical ? this.current.physical.class : FClass.Bed;
   }
 
   set fclass(value: FClass) {
@@ -367,7 +385,7 @@ export default class EditCard extends Vue {
   readonly classOptions = Object.keys(FClass);
 
   get physical(): Physical {
-    return this.current.physical;
+    return this.current.physical || new Physical();
   }
 
   set physical(value: Physical) {
@@ -376,7 +394,7 @@ export default class EditCard extends Vue {
   }
 
   get timing(): Timing {
-    return this.current.timing;
+    return this.current.timing || new Timing();
   }
 
   set timing(value: Timing) {
@@ -396,7 +414,7 @@ export default class EditCard extends Vue {
   }
 
   get attributes(): Attributes {
-    return this.current.attributes;
+    return this.current.attributes || new Attributes();
   }
 
   set attributes(value: Attributes) {

src/components/FurnitureCardDialog.vue

@@ -1,58 +1,136 @@
 <template>
-  <v-dialog
-    v-model="dialog"
-    width="750"
-    persistent
-    scrollable
-    @click:outside="closeDialog()"
-    @keydown.escape="closeDialog()"
-  >
-    <edit-card
-      :namespace="namespace"
-      :is-edit="isEdit"
-      :is-add="isAdd"
-      @edit="$emit('edit')"
-      @close="closeDialog()"
-      @save="saveChanges()"
+  <div>
+    <v-dialog
+      v-model="dialog"
+      width="750"
+      persistent
+      scrollable
+      @click:outside="closeDialog()"
+      @keydown.escape="closeDialog()"
+    >
+      <edit-card
+        :namespace="namespace"
+        :is-edit="isEdit"
+        :is-add="isAdd"
+        :menu-actions="menuActions"
+        :menu-loading="menuLoading"
+        :loading="updatesLoading"
+        @edit="toggleEdit()"
+        @close="closeDialog()"
+        @save="saveChanges()"
+        @export="$emit('export')"
+        @archive="$emit('archive')"
+        @unarchive="$emit('unarchive')"
+      />
+    </v-dialog>
+
+    <unsaved-dialog
+      :dialog="unsavedDialog"
+      @cancel="unsavedDialog = false"
+      @discard="closeDialog(true)"
     />
-  </v-dialog>
+  </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
+import { mapActions, mapState } from "vuex";
+import ViewAction from "@/data/ViewAction";
+import collections from "@/network/collections";
 import EditCard from "@/components/EditCard.vue";
+import UnsavedDialog from "@/components/FurnitureCardUnsavedDialog.vue";
 
-@Component({ components: { EditCard } })
+@Component({
+  components: { EditCard, 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`);
+    },
+  }),
+})
 export default class FurnitureCardDialog extends Vue {
   @Prop({ default: false })
   readonly dialog!: boolean;
 
-  @Prop({ default: false })
-  readonly isEdit!: boolean;
+  @Prop({})
+  readonly collection!: collections;
 
   @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>;
+
+  updatesLoading = false;
+
+  unsavedDialog = false;
+
+  isEdit = false;
+
   /**
-   * Emits `close` event
+   * Exits dialog and clears the current item
    */
-  closeDialog(): void {
-    this.$emit("close");
+  closeDialog(forceClose = false): void {
+    if (this.updatesLoading) {
+      return;
+    }
+    if (this.updatesLength === 0 || forceClose) {
+      this.unsavedDialog = false;
+      this.isEdit = false;
+      this.clearCurrent();
+    } else {
+      this.unsavedDialog = true;
+    }
+  }
+
+  /**
+   * Toggles edit state `isEdit` and clears update if setting `isEdit`
+   * to false
+   */
+  toggleEdit(): void {
+    if (this.isEdit) {
+      this.clearUpdates();
+    }
+    this.isEdit = !this.isEdit;
   }
 
   /**
-   * Emits `add` when dialog is used to add new items and `save`,
-   * otherwise
+   * Commits updates to Firestore
    */
-  saveChanges(): void {
+  async saveChanges(): Promise<void> {
     if (this.isAdd) {
       this.$emit("add");
     } else {
-      this.$emit("save");
+      this.updatesLoading = true;
+      await this.commitUpdates();
+      this.isEdit = false;
+      this.updatesLoading = false;
     }
   }
 }

src/components/ViewActionGroup.vue

@@ -6,8 +6,15 @@
           <template v-slot:activator="{ on: menu }">
             <v-tooltip bottom :disabled="disabled">
               <template v-slot:activator="{ on: tooltip }">
-                <v-btn icon v-on="{ ...tooltip, ...menu }" v-if="action.menu">
-                  <v-icon>{{ action.icon }}</v-icon>
+                <v-btn
+                  icon
+                  v-on="{ ...tooltip, ...menu }"
+                  v-if="action.menu"
+                  :loading="action.loading && action.loading()"
+                >
+                  <v-icon>
+                    {{ action.icon }}
+                  </v-icon>
                 </v-btn>
                 <v-btn
                   v-else

src/network/archive-service.ts

@@ -1,7 +1,7 @@
 import { Furniture } from "@/data/Furniture";
 import collections from "./collections";
 import FirestoreService from "./firestore-service";
-import db from "./db";
+import { db } from "./firebase";
 
 class ArchiveService extends FirestoreService {
   unarchiveItem = async (id: string): Promise<void> => {

src/network/firebase.ts

@@ -0,0 +1,15 @@
+import firebase from "firebase/app";
+import "firebase/firestore";
+import "firebase/functions";
+import "firebase/storage";
+import config from "./config";
+
+firebase.initializeApp(config);
+
+export const db = firebase.firestore();
+
+export const functions = firebase.functions();
+
+export const storage = firebase.storage();
+
+export default db;