finish contact selection for gives

src/components/GiftedDialog.vue

@@ -2,13 +2,12 @@
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
       <h1 class="text-lg text-center">
-        Received from {{ contact?.name || "nobody in particular" }}
+        {{ message }} {{ giver?.name || "somebody not specified" }}
       </h1>
-      <p class="py-2">{{ message }}</p>
       <input
         type="text"
         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-        placeholder="What you received"
+        placeholder="What was received"
         v-model="description"
       />
       <div class="flex flex-row">
@@ -27,9 +26,10 @@
           </div>
         </div>
       </div>
+      <p class="text-right">Sign & Send to publish to the world</p>
       <div class="text-right">
         <button class="rounded border border-slate-400" @click="confirm">
-          <span class="m-2">Confirm</span>
+          <span class="m-2">Sign & Send</span>
         </button>
         &nbsp;
         <button class="rounded border border-slate-400" @click="cancel">
@@ -45,15 +45,16 @@ export default {
   props: ["message"],
   data() {
     return {
-      contact: null,
+      giver: null,
       description: "",
       hours: "0",
       visible: false,
     };
   },
   methods: {
-    open(contact) {
+    open(giver) {
-      this.contact = contact;
+      // giver: GiverInputInfo
+      this.giver = giver;
       this.visible = true;
     },
     close() {
@@ -69,10 +70,13 @@ export default {
       this.close();
       this.$emit("dialog-result", {
         action: "confirm",
-        contact: this.contact,
+        giver: this.giver,
         hours: parseFloat(this.hours),
         description: this.description,
       });
+      this.description = "";
+      this.giver = null;
+      this.hours = "0";
     },
     cancel() {
       this.close();

src/libs/endorserServer.ts

@@ -15,6 +15,11 @@ export interface AgreeVerifiableCredential {
   object: Record<any, any>;
 }
 
+export interface GiverInputInfo {
+  did?: string;
+  name?: string;
+}
+
 export interface ClaimResult {
   success: { claimId: string; handleId: string };
   error: { code: string; message: string };
@@ -111,7 +116,7 @@ export async function createAndSubmitGive(
   toDid: string,
   description: string,
   hours: number,
-  fulfillsProjectHandleId: string
+  fulfillsProjectHandleId?: string
 ): Promise<AxiosResponse<ClaimResult> | InternalError> {
   // Make a claim
   const vcClaim: GiveVerifiableCredential = {

src/views/HomeView.vue

@@ -52,6 +52,7 @@
     <div>
       <h1 class="text-2xl">Quick Action</h1>
       <p>Choose a contact to whom to show appreciation:</p>
+      <!-- similar contact selection code is in multiple places -->
       <div class="px-4">
         <button
           v-for="contact in allContacts"
@@ -63,7 +64,7 @@
         </button>
         <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
         <button @click="openDialog()" class="text-blue-500">
-          nobody in particular
+          someone not specified
         </button>
       </div>
     </div>
@@ -71,7 +72,7 @@
     <GiftedDialog
       ref="customDialog"
       @dialog-result="handleDialogResult"
-      message="Confirm to publish to the world."
+      message="Received from"
     >
     </GiftedDialog>
 
@@ -268,13 +269,13 @@ export default class HomeView extends Vue {
     return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
   }
 
-  openDialog(contact) {
+  openDialog(giver) {
-    this.$refs.customDialog.open(contact);
+    this.$refs.customDialog.open(giver);
   }
   handleDialogResult(result) {
     if (result.action === "confirm") {
       return new Promise((resolve) => {
-        this.recordGive(result.contact, result.description, result.hours);
+        this.recordGive(result.contact?.did, result.description, result.hours);
         resolve();
       });
     } else {
@@ -284,11 +285,11 @@ export default class HomeView extends Vue {
 
   /**
    *
-   * @param contact may be null
+   * @param giverDid may be null
    * @param description may be an empty string
    * @param hours may be 0
    */
-  recordGive(contact, description, hours) {
+  recordGive(giverDid, description, hours) {
     if (this.activeDid == null) {
       this.alertTitle = "Error";
       this.alertMessage =
@@ -308,7 +309,7 @@ export default class HomeView extends Vue {
       this.axios,
       this.apiServer,
       identity,
-      contact?.did,
+      giverDid,
       this.activeDid,
       description,
       hours

src/views/ProjectViewView.vue

@@ -109,16 +109,35 @@
     </div>
 
     <button
-      @click="openDialog()"
+      @click="openDialog({ name: 'you', did: activeDid })"
       class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
     >
-      Given
+      I gave...
     </button>
 
+    <div>
+      <p>... or choose a contact who gave:</p>
+      <!-- similar contact selection code is in multiple places -->
+      <div class="px-4">
+        <button
+          v-for="contact in allContacts"
+          :key="contact.did"
+          @click="openDialog(contact)"
+          class="text-blue-500"
+        >
+          &nbsp;{{ contact.name }},
+        </button>
+        <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
+        <button @click="openDialog()" class="text-blue-500">
+          someone not specified
+        </button>
+      </div>
+    </div>
+
     <GiftedDialog
       ref="customDialog"
       @dialog-result="handleDialogResult"
-      message="Confirm to publish to the world."
+      message="Received from"
     >
     </GiftedDialog>
 
@@ -171,6 +190,7 @@ import { Options, Vue } from "vue-class-component";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import { accountsDB, db } from "@/db";
+import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { createAndSubmitGive } from "@/libs/endorserServer";
 import { accessToken } from "@/libs/crypto";
@@ -181,6 +201,7 @@ import { IIdentifier } from "@veramo/core";
 })
 export default class ProjectViewView extends Vue {
   activeDid = "";
+  allContacts: Array<Contact> = [];
   apiServer = "";
   expanded = false;
   name = "";
@@ -253,6 +274,7 @@ export default class ProjectViewView extends Vue {
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
     this.activeDid = settings?.activeDid || "";
     this.apiServer = settings?.apiServer || "";
+    this.allContacts = await db.contacts.toArray();
 
     await accountsDB.open();
     const num_accounts = await accountsDB.accounts.count();
@@ -275,21 +297,21 @@ export default class ProjectViewView extends Vue {
   handleDialogResult(result) {
     if (result.action === "confirm") {
       return new Promise((resolve) => {
-        this.recordGive(result.contact, result.description, result.hours);
+        this.recordGive(result.contact?.did, result.description, result.hours);
         resolve();
       });
     } else {
-      // action was "cancel" so do nothing
+      // action was not "confirm" so do nothing
     }
   }
 
   /**
    *
-   * @param contact may be null
+   * @param giverDid may be null
    * @param description may be an empty string
    * @param hours may be 0
    */
-  async recordGive(contact, description, hours) {
+  async recordGive(giverDid, description, hours) {
     if (this.activeDid == null) {
       this.alertTitle = "Error";
       this.alertMessage =
@@ -306,7 +328,7 @@ export default class ProjectViewView extends Vue {
       this.axios,
       this.apiServer,
       identity,
-      contact?.did,
+      giverDid,
       this.activeDid,
       description,
       hours,