Merge branch 'master' into set-push-server

src/views/ProjectViewView.vue

@@ -80,10 +80,21 @@
       </button>
     </div>
 
+    <div class="mb-4">
+      <div v-if="activeDid" class="text-center">
+        <button
+          @click="openOfferDialog({ name: 'you', did: activeDid })"
+          class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
+        >
+          I offer&hellip;
+        </button>
+      </div>
+    </div>
+
     <div>
       <div v-if="activeDid" class="text-center">
         <button
-          @click="openDialog({ name: 'you', did: activeDid })"
+          @click="openGiftDialog({ name: 'you', did: activeDid })"
           class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
         >
           I gave&hellip;
@@ -93,7 +104,7 @@
       <p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p>
 
       <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
-        <li @click="openDialog()">
+        <li @click="openGiftDialog()">
           <EntityIcon
             :entityId="null"
             :iconSize="64"
@@ -108,7 +119,7 @@
         <li
           v-for="contact in allContacts"
           :key="contact.did"
-          @click="openDialog(contact)"
+          @click="openGiftDialog(contact)"
         >
           <EntityIcon
             :entityId="contact.did"
@@ -134,7 +145,40 @@
     </div>
 
     <!-- Gifts to & from this -->
-    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4">
+    <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4">
+      <div class="bg-slate-100 px-4 py-3 rounded-md">
+        <h3 class="text-sm uppercase font-semibold mb-3">
+          Offered To This Project
+        </h3>
+
+        <div v-if="offersToThis.length === 0">
+          (None yet. Record one above.)
+        </div>
+
+        <ul v-else class="text-sm border-t border-slate-300">
+          <li
+            v-for="offer in offersToThis"
+            :key="offer.id"
+            class="py-1.5 border-b border-slate-300"
+          >
+            <div class="flex justify-between gap-4">
+              <span>
+                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                {{ didInfo(offer.agentDid, activeDid, allMyDids, allContacts) }}
+              </span>
+              <span v-if="offer.amount">
+                <fa icon="coins" class="fa-fw text-slate-400"></fa>
+                {{ offer.amount }}
+              </span>
+            </div>
+            <div v-if="offer.objectDescription" class="text-slate-500">
+              <fa icon="comment" class="fa-fw text-slate-400"></fa>
+              {{ offer.objectDescription }}
+            </div>
+          </li>
+        </ul>
+      </div>
+
       <div class="bg-slate-100 px-4 py-3 rounded-md">
         <h3 class="text-sm uppercase font-semibold mb-3">
           Given To This Project
@@ -166,44 +210,48 @@
         </ul>
       </div>
 
-      <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
-        <h3 class="text-sm uppercase font-semibold mb-3">
-          Contributions By This Project
-        </h3>
-        <button
-          @click="onClickLoadProject(fulfilledByThis.handleId)"
-          class="text-blue-500"
+      <div class="grid items-start grid-cols-1 gap-4">
+        <div
+          v-if="fulfillersToThis.length > 0"
+          class="bg-slate-100 px-4 py-3 rounded-md"
         >
-          {{ fulfilledByThis.name }}
-        </button>
-      </div>
+          <h3 class="text-sm uppercase font-semibold mb-3">
+            Contributions To This Project
+          </h3>
+          <ul>
+            <li v-for="plan in fulfillersToThis" :key="plan.handleId">
+              <button
+                @click="onClickLoadProject(plan.handleId)"
+                class="text-blue-500"
+              >
+                {{ plan.name }}
+              </button>
+            </li>
+          </ul>
+        </div>
 
-      <div
-        v-if="fulfillersToThis.length > 0"
-        class="bg-slate-100 px-4 py-3 rounded-md"
-      >
-        <h3 class="text-sm uppercase font-semibold mb-3">
-          Contributions To This Project
-        </h3>
-        <ul>
-          <li v-for="plan in fulfillersToThis" :key="plan.handleId">
-            <button
-              @click="onClickLoadProject(plan.handleId)"
-              class="text-blue-500"
-            >
-              {{ plan.name }}
-            </button>
-          </li>
-        </ul>
+        <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
+          <h3 class="text-sm uppercase font-semibold mb-3">
+            Contributions By This Project
+          </h3>
+          <button
+            @click="onClickLoadProject(fulfilledByThis.handleId)"
+            class="text-blue-500"
+          >
+            {{ fulfilledByThis.name }}
+          </button>
+        </div>
       </div>
     </div>
 
     <GiftedDialog
-      ref="customDialog"
+      ref="customGiveDialog"
       message="Received from"
       :projectId="this.projectId"
     >
     </GiftedDialog>
+    <OfferDialog ref="customOfferDialog" :projectId="this.projectId">
+    </OfferDialog>
   </section>
 </template>
 
@@ -214,6 +262,7 @@ import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
+import OfferDialog from "@/components/OfferDialog.vue";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
@@ -222,6 +271,7 @@ import {
   didInfo,
   GiverInputInfo,
   GiveServerRecord,
+  OfferServerRecord,
   PlanServerRecord,
 } from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
@@ -236,7 +286,7 @@ interface Notification {
 }
 
 @Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
+  components: { EntityIcon, GiftedDialog, OfferDialog, QuickNav },
 })
 export default class ProjectViewView extends Vue {
   $notify!: (notification: Notification, timeout?: number) => void;
@@ -250,10 +300,11 @@ export default class ProjectViewView extends Vue {
   fulfilledByThis: PlanServerRecord | null = null;
   fulfillersToThis: Array<PlanServerRecord> = [];
   givesToThis: Array<GiveServerRecord> = [];
+  issuer = "";
   latitude = 0;
   longitude = 0;
   name = "";
-  issuer = "";
+  offersToThis: Array<OfferServerRecord> = [];
   projectId = localStorage.getItem("projectId") || ""; // handle ID
   timeSince = "";
   truncatedDesc = "";
@@ -433,6 +484,42 @@ export default class ProjectViewView extends Vue {
       );
     }
 
+    const offersToUrl =
+      this.apiServer +
+      "/api/v2/report/offersToPlans?planIds=" +
+      encodeURIComponent(JSON.stringify([projectId]));
+    try {
+      const resp = await this.axios.get(offersToUrl, { headers });
+      if (resp.status === 200 && resp.data.data) {
+        this.offersToThis = resp.data.data;
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve offers to this project.",
+          },
+          -1,
+        );
+      }
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving offers to this project.",
+        },
+        -1,
+      );
+      console.error(
+        "Error retrieving offers to this project:",
+        serverError.message,
+      );
+    }
+
     const fulfilledByUrl =
       this.apiServer +
       "/api/v2/report/planFulfilledByPlan?planHandleId=" +
@@ -533,8 +620,12 @@ export default class ProjectViewView extends Vue {
     );
   }
 
-  openDialog(contact: GiverInputInfo) {
-    (this.$refs.customDialog as GiftedDialog).open(contact);
+  openGiftDialog(contact: GiverInputInfo) {
+    (this.$refs.customGiveDialog as GiftedDialog).open(contact);
+  }
+
+  openOfferDialog() {
+    (this.$refs.customOfferDialog as typeof OfferDialog).open();
   }
 }
 </script>