add button to record an offer on a project

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,15 @@
     </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>
+      -->
+
       <div class="bg-slate-100 px-4 py-3 rounded-md">
         <h3 class="text-sm uppercase font-semibold mb-3">
           Given To This Project
@@ -199,11 +218,13 @@
     </div>
 
     <GiftedDialog
-      ref="customDialog"
+      ref="customGiveDialog"
       message="Received from"
       :projectId="this.projectId"
     >
     </GiftedDialog>
+    <OfferDialog ref="customOfferDialog" :projectId="this.projectId">
+    </OfferDialog>
   </section>
 </template>
 
@@ -214,6 +235,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";
@@ -236,7 +258,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;
@@ -533,8 +555,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 OfferDialog).open();
   }
 }
 </script>