add ability to edit a GiveAction

src/views/ClaimView.vue

@@ -22,6 +22,16 @@
         <div class="overflow-hidden">
           <h2 class="text-md font-bold">
             {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}
+            <button
+              v-if="
+                veriClaim.claimType === 'GiveAction' &&
+                veriClaim.issuer === activeDid
+              "
+              @click="onClickEditClaim"
+              title="Edit"
+            >
+              <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1"></fa>
+            </button>
           </h2>
           <div class="text-sm">
             <div>
@@ -368,6 +378,9 @@
           </div>
         </div>
       </div>
+      <span v-if="isEditedGlobalId" class="mt-2">
+        This record is an edited version. The latest version is being shown.
+      </span>
       <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
       <pre
         class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
@@ -411,6 +424,7 @@ import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
@@ -422,7 +436,11 @@ import * as serverUtil from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import { Account } from "@/db/tables/accounts";
-import { GiverReceiverInputInfo } from "@/libs/endorserServer";
+import {
+  GenericCredWrapper,
+  GiverReceiverInputInfo,
+  OfferVerifiableCredential,
+} from "@/libs/endorserServer";
 
 @Component({
   components: { GiftedDialog, QuickNav },
@@ -444,6 +462,7 @@ export default class ClaimView extends Vue {
   fullClaim = null;
   fullClaimDump = "";
   fullClaimMessage = "";
+  isEditedGlobalId = false;
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   showDidCopy = false;
   showIdCopy = false;
@@ -466,6 +485,7 @@ export default class ClaimView extends Vue {
     this.fullClaim = null;
     this.fullClaimDump = "";
     this.fullClaimMessage = "";
+    this.isEditedGlobalId = false;
     this.numConfsNotVisible = 0;
     this.veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
     this.veriClaimDump = "";
@@ -562,6 +582,8 @@ export default class ClaimView extends Vue {
         return;
       }
 
+      this.isEditedGlobalId = !this.veriClaim.handleId.endsWith(claimId);
+
       // retrieve more details on Give, Offer, or Plan
       if (this.veriClaim.claimType === "GiveAction") {
         const giveUrl =
@@ -753,7 +775,7 @@ export default class ClaimView extends Vue {
     const route = {
       path: "/claim/" + encodeURIComponent(claimId),
     };
-    this.$router.push(route).then(async () => {
+    (this.$router as Router).push(route).then(async () => {
       this.resetThisValues();
       await this.loadClaim(claimId, this.activeDid);
     });
@@ -761,7 +783,9 @@ export default class ClaimView extends Vue {
 
   openFulfillGiftDialog() {
     const giver: GiverReceiverInputInfo = {
-      did: libsUtil.offerGiverDid(this.veriClaim),
+      did: libsUtil.offerGiverDid(
+        this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
+      ),
     };
     (this.$refs.customGiveDialog as GiftedDialog).open(
       giver,
@@ -794,5 +818,17 @@ export default class ClaimView extends Vue {
       url: this.windowLocation,
     });
   }
+
+  onClickEditClaim() {
+    const route = {
+      name: "gifted-details",
+      query: {
+        prevCredToEdit: JSON.stringify(this.veriClaim),
+        destinationPathAfter:
+          "/claim/" + encodeURIComponent(this.veriClaim.handleId),
+      },
+    };
+    (this.$router as Router).push(route);
+  }
 }
 </script>