feat: load totals immediately, and prompt to verify giving amount

src/views/ContactsView.vue

@@ -67,22 +67,8 @@
       </button>
     </div>
 
-    <!-- eslint-disable-next-line -->
-    <div
-      class="flex justify-between"
-    >
-      <!-- eslint-disable-next-line -->
-      <div class="w-1/2 text-left">
-        <button
-          href=""
-          class="left text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-          v-if="showGiveTotals"
-          @click="loadGives()"
-        >
-          Load Totals
-        </button>
-      </div>
-      <div class="w-1/2 text-right">
+    <div class="flex justify-between" v-if="showGiveTotals">
+      <div class="w-full text-right">
         Hours to Add:
         <input
           class="border border rounded border-slate-400 w-24 text-right"
@@ -133,6 +119,7 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import * as didJwt from "did-jwt";
+import * as R from "ramda";
 import { Options, Vue } from "vue-class-component";
 
 import { AppString } from "@/constants/app";
@@ -153,7 +140,7 @@ export interface GiveVerifiableCredential {
   components: {},
 })
 export default class ContactsView extends Vue {
-  contacts: Contact[] = [];
+  contacts: Array<Contact> = [];
   contactInput = "";
   // { "did:...": amount } entry for each contact
   givenByMeTotals = {};
@@ -167,13 +154,15 @@ export default class ContactsView extends Vue {
   // 'created' hook runs when the Vue instance is first created
   async created() {
     await db.open();
+    const accounts = await db.accounts.toArray();
+    this.identity = JSON.parse(accounts[0].identity);
     this.contacts = await db.contacts.toArray();
 
     const params = new URLSearchParams(window.location.search);
     this.showGiveTotals = params.get("showGiveTotals") == "true";
-
-    const accounts = await db.accounts.toArray();
-    this.identity = JSON.parse(accounts[0].identity);
+    if (this.showGiveTotals) {
+      this.loadGives();
+    }
   }
 
   async onClickNewContact(): void {
@@ -259,6 +248,10 @@ export default class ContactsView extends Vue {
     return !isNaN(str) && !isNaN(parseFloat(str));
   }
 
+  private contactForDid(contacts: Array<Contact>, did: string): Contact {
+    return R.find((con) => con.did == did, contacts);
+  }
+
   async onClickAddGive(fromDid: string, toDid: string): void {
     if (!this.hourInput) {
       this.errorMessage = "Giving 0 hours does nothing.";
@@ -267,9 +260,25 @@ export default class ContactsView extends Vue {
         "This is not a valid number of hours: " + this.hourInput;
     } else {
       this.errorMessage = "";
+      let toFrom;
+      if (fromDid == this.identity.did) {
+        toFrom = "to " + this.contactForDid(this.contacts, toDid).name;
+      } else {
+        toFrom = "from " + this.contactForDid(this.contacts, fromDid).name;
+      }
+      if (
+        confirm(
+          "Are you sure you want to record " +
+            this.hourInput +
+            " hours " +
+            toFrom +
+            "?"
+        )
+      ) {
         this.createAndSubmitGive(fromDid, toDid, parseFloat(this.hourInput));
       }
     }
+  }
 
   private async createAndSubmitGive(
     fromDid: string,