added use multiple inventory

src/app/portal/edit-inventory/edit-inventory.component.css

@@ -1,41 +1,44 @@
-.inventoryContainer{
-    width: 100%;
-    display: inline-block;
-}
-.inventoryControls{
-    top:0px;
-    float: left;
-    width: 15%;
-    min-width: 175px;
-    padding: 1em;
-}
-.defaultActions *{
-    margin-bottom: 5px;
-    max-width: 90%;
-}
-.inventoryList{
-    float: left;
-    height: 95%;
-    width: 85%;
-    min-width: 500px;
-    padding: 1em;
-    overflow: scroll;
-}
-.itemControlModal{
-    display: none;
-    position: fixed;
-    top:0px;
-    width: 100%;
-    height: 100%;
-    padding: 2em;
-    z-index: 10000;
-    background: white;
-    overflow: scroll;
-
-}
-.imageResultsPreview{
-    height: 50px;
-}
-.imagePreview{
-    height: 100px;
-}
+.inventoryContainer {
+  width: 100%;
+  display: inline-block;
+}
+.inventoryControls {
+  top: 0px;
+  float: left;
+  width: 15%;
+  min-width: 175px;
+  padding: 1em;
+}
+.defaultActions * {
+  margin-bottom: 5px;
+  max-width: 90%;
+}
+.inventoryList {
+  float: left;
+  height: 95%;
+  width: 85%;
+  min-width: 500px;
+  padding: 1em;
+  overflow: scroll;
+}
+.itemControlModal {
+  display: none;
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  padding: 2em;
+  z-index: 10000;
+  background: white;
+  overflow: scroll;
+}
+.imageResultsPreview {
+  height: 50px;
+}
+.imagePreview {
+  height: 100px;
+}
+::backdrop {
+  background-color: slategray;
+  opacity: 0.75;
+}

src/app/portal/edit-inventory/edit-inventory.component.html

@@ -63,13 +63,24 @@ <h1 class="tableHeading">Team Inventory</h1>
           >
             Return
           </button>
-          <button
-            *ngIf="item.isBorrowable !== true"
-            (click)="useItemModal(item)"
-            class="btn btn-warning actionButton"
-          >
-            Use 1
-          </button>
+          <div class="buttonContainer">
+            <button
+              *ngIf="item.isBorrowable !== true"
+              (click)="useItemModal(item)"
+              class="btn btn-warning actionButton"
+              style="margin-right: 1rem"
+            >
+              Use 1
+            </button>
+
+            <button
+              *ngIf="item.isBorrowable !== true"
+              (click)="openMultipleItemModal(item)"
+              class="btn btn-warning actionButton"
+            >
+              Use Multiple
+            </button>
+          </div>
         </td>
         <td><img class="imageResultsPreview" src="{{ item.imageUrl }}" /></td>
         <td>
@@ -84,7 +95,25 @@ <h1 class="tableHeading">Team Inventory</h1>
     </table>
     <p>--- End of Items ---</p>
   </div>
-
+  <dialog id="multipleItemModal">
+    <button
+      style="color: red; font-size: larger"
+      (click)="closeMultipleItemModal()"
+    >
+      &times;
+    </button>
+    <h2>Use Multiple Items</h2>
+    <p id="modalContent">Modal content goes here.</p>
+    <input
+      id="multipleItemInput"
+      type="number"
+      placeholder="0"
+      min="0"
+      (input)="setItemAmount($event.target.value)"
+      [(ngModel)]="useItemAmount"
+    />
+    <button style="color: red" (click)="useMultipleItemModal()">Submit</button>
+  </dialog>
   <div class="itemControlModal">
     <form [formGroup]="addItemForm" (ngSubmit)="manageItemForm()" novalidate>
       <h3>{{ submitButtonText }}</h3>

src/app/portal/edit-inventory/edit-inventory.component.ts

@@ -23,6 +23,9 @@ let nextCallOptions = {};
   styleUrls: ["./edit-inventory.component.css"],
 })
 export class EditInventoryComponent implements OnInit {
+  useItemAmount: number = 0;
+  itemToBeEdited: Item;
+  // useItemForm: UntypedFormGroup;
   addItemForm: UntypedFormGroup;
   updateItemId: string;
   items: Item[];
@@ -41,8 +44,27 @@ export class EditInventoryComponent implements OnInit {
   previewImgUrl: string;
   imageChangedEvent: any = "";
   borrowFilter: boolean;
+<<<<<<< HEAD
+
+  setItemAmount(amount: number) {
+    this.useItemAmount = amount;
+  }
+  openMultipleItemModal(modalItem: Item) {
+    this.itemToBeEdited = modalItem;
+    const modal = document.getElementById("myModal") as HTMLDialogElement;
+    const modalContent = document.getElementById("modalContent") as HTMLElement;
+
+    modalContent.innerHTML = `${modalItem.name} available: ${modalItem.amount}`;
+    modal.showModal();
+  }
+  closeMultipleItemModal() {
+    const modal = document.getElementById("myModal") as HTMLDialogElement;
+    modal.close();
+  }
+=======
   locationList: string[];
 
+>>>>>>> 3cbdf6a45364f7a5a2eecc0514542a7fda090ad2
   fileChangeEvent(event: any): void {
     this.imageChangedEvent = event;
     this.image = event.target.files[0];
@@ -95,10 +117,17 @@ export class EditInventoryComponent implements OnInit {
   useItemNotification(promise: Promise<any>) {
     notifier.async(
       promise,
-      "Item has been used",
+      "1 item has been used",
       "Item was not used. Check there are more than 1 or contact tech support"
     );
   }
+  useMultipleItemNotification(promise: Promise<any>, amount: number) {
+    notifier.async(
+      promise,
+      `${amount} items have been used`,
+      "Item was not used. Check there are enough or contact tech support."
+    );
+  }
   async useConfirmationNotification(): Promise<boolean> {
     return new Promise<boolean>((resolve) => {
       const onOk = () => {
@@ -209,6 +238,9 @@ export class EditInventoryComponent implements OnInit {
       isBorrowable: false,
       image: [""],
     });
+    // this.useItemForm = this.formBuilder.group({
+    //   amount: 0,
+    // });
     this.elecLocals = ["Cabinet - Bin 1", "Cabinet - Bin 2", "Cabinet - Bin 3"];
     this.mechLocals = ["Cabinet - Bin 1", "Cabinet - Bin 2", "Cabinet - Bin 3"];
     this.lockerLocals = [
@@ -519,7 +551,25 @@ export class EditInventoryComponent implements OnInit {
       this.useItemNotification(promise);
     }
   }
-
+  async useMultipleItemModal() {
+    let item = this.itemToBeEdited;
+    if (item.amount >= this.useItemAmount && this.useItemAmount > 0) {
+      let promise = this.inventoryService.useMultipleItem(
+        item,
+        this.useItemAmount
+      );
+      this.useMultipleItemNotification(promise, this.useItemAmount);
+      this.closeMultipleItemModal();
+      this.useItemAmount = 0;
+    } else {
+      let promise = Promise.reject(
+        new Error(
+          `No items left to use. Maximum items to use is ${item.amount.toString()}`
+        )
+      );
+      this.useMultipleItemNotification(promise, this.useItemAmount);
+    }
+  }
   returnItemFilter() {
     if (this.borrowFilter) {
       this.runSearch(2); // Clears Filter

src/app/services/inventory.service.ts

@@ -137,4 +137,30 @@ export class InventoryService {
         throw err;
       });
   }
+
+  // Instead of -1, change it to the amount of items used
+  // @Parameters: Item, amount of items used
+  // @Return: Promise
+  useMultipleItem(item: Item, amount: number) {
+    const user = JSON.parse(window.sessionStorage.getItem("User"));
+    const itemRef = this.firestore
+      .collection("inventory-collection")
+      .doc(item.id);
+    this.userActionService.addUserAction({
+      uid: user.id,
+      uName: user.displayName,
+      eid: item.id,
+      eName: "Item: " + item.name,
+      action: Action.USED,
+      dateTime: new Date().toLocaleString(),
+    });
+    item.amount = item.amount - amount;
+    return itemRef
+      .update({
+        amount: item.amount,
+      })
+      .catch((err) => {
+        throw err;
+      });
+  }
 }