update offer dialog to allow other units

src/components/GiftedDialog.vue

@@ -12,10 +12,10 @@
       />
       <div class="flex flex-row">
         <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center px-2 py-2"
+          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center text-blue-500 px-2 py-2"
           @click="changeUnitCode()"
         >
-          {{ UNIT_SHORT[unitCode] }}
+          {{ libsUtil.UNIT_SHORT[unitCode] }}
         </span>
         <div
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
@@ -72,6 +72,7 @@ import {
   didInfo,
   GiverInputInfo,
 } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { Account } from "@/db/tables/accounts";
@@ -106,23 +107,7 @@ export default class GiftedDialog extends Vue {
   unitCode = "HUR";
   visible = false;
 
-  /* eslint-disable prettier/prettier */
-  UNIT_SHORT: Record<string, string> = {
-    "BTC": "BTC",
-    "ETH": "ETH",
-    "HUR": "Hours",
-    "USD": "US $",
-  };
-  /* eslint-enable prettier/prettier */
-
-  /* eslint-disable prettier/prettier */
-  UNIT_LONG: Record<string, string> = {
-    "BTC": "Bitcoin",
-    "ETH": "Ethereum",
-    "HUR": "hours",
-    "USD": "dollars",
-  };
-  /* eslint-enable prettier/prettier */
+  libsUtil = libsUtil;
 
   async created() {
     try {
@@ -177,7 +162,7 @@ export default class GiftedDialog extends Vue {
   }
 
   changeUnitCode() {
-    const units = Object.keys(this.UNIT_SHORT);
+    const units = Object.keys(this.libsUtil.UNIT_SHORT);
     const index = units.indexOf(this.unitCode);
     this.unitCode = units[(index + 1) % units.length];
   }
@@ -203,6 +188,7 @@ export default class GiftedDialog extends Vue {
     this.giver = undefined;
     this.givenToUser = this.showGivenToUser;
     this.amountInput = "0";
+    this.unitCode = "HUR";
   }
 
   async confirm() {
@@ -218,7 +204,7 @@ export default class GiftedDialog extends Vue {
     );
     // this is asynchronous, but we don't need to wait for it to complete
     await this.recordGive(
-      this.giver?.did as string | undefined,
+      (this.giver?.did as string) || null,
       this.description,
       parseFloat(this.amountInput),
       this.unitCode,
@@ -248,12 +234,13 @@ export default class GiftedDialog extends Vue {
    * @param giverDid may be null
    * @param description may be an empty string
    * @param amountInput may be 0
+   * @param unitCode may be omitted, defaults to "HUR"
    */
   public async recordGive(
-    giverDid?: string,
-    description?: string,
-    amountInput?: number,
-    unitCode?: string,
+    giverDid: string | null,
+    description: string,
+    amountInput: number,
+    unitCode: string = "HUR",
   ) {
     if (!this.activeDid) {
       this.$notify(
@@ -274,9 +261,7 @@ export default class GiftedDialog extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: `You must enter a description or some number of ${
-            this.UNIT_LONG[this.unitCode]
-          }.`,
+          text: `You must enter a description or some number of ${this.libsUtil.UNIT_LONG[unitCode]}.`,
         },
         -1,
       );

src/components/OfferDialog.vue

@@ -8,22 +8,24 @@
         placeholder="Description, prerequisites, terms, etc."
         v-model="description"
       />
-      <div class="flex flex-row mb-6">
+      <div class="flex flex-row mt-2">
         <span
-          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
+          class="rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center text-blue-500 px-2 py-2"
+          @click="changeUnitCode()"
         >
-          Hours
+          {{ libsUtil.UNIT_SHORT[amountUnitCode] }}
         </span>
         <div
           class="border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
           @click="decrement()"
+          v-if="amountInput !== '0'"
         >
           <fa icon="chevron-left" />
         </div>
         <input
           type="text"
           class="w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
-          v-model="hours"
+          v-model="amountInput"
         />
         <div
           class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
@@ -32,7 +34,7 @@
           <fa icon="chevron-right" />
         </div>
       </div>
-      <div class="flex flex-row mb-6">
+      <div class="flex flex-row mt-2">
         <span
           class="rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
         >
@@ -45,7 +47,9 @@
           v-model="expirationDateInput"
         />
       </div>
-      <p class="text-center mb-2 italic">Sign & Send to publish to the world</p>
+      <p class="text-center mt-6 mb-2 italic">
+        Sign & Send to publish to the world
+      </p>
       <button
         class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
         @click="confirm"
@@ -65,6 +69,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 import { createAndSubmitOffer } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { Account } from "@/db/tables/accounts";
@@ -86,11 +91,14 @@ export default class OfferDialog extends Vue {
   activeDid = "";
   apiServer = "";
 
+  amountInput = "0";
+  amountUnitCode = "HUR";
   description = "";
   expirationDateInput = "";
-  hours = "0";
   visible = false;
 
+  libsUtil = libsUtil;
+
   async created() {
     try {
       await db.open();
@@ -117,21 +125,36 @@ export default class OfferDialog extends Vue {
   }
 
   close() {
+    // close the dialog but don't change values (since it might be submitting info)
     this.visible = false;
   }
 
+  changeUnitCode() {
+    const units = Object.keys(this.libsUtil.UNIT_SHORT);
+    const index = units.indexOf(this.amountUnitCode);
+    this.amountUnitCode = units[(index + 1) % units.length];
+  }
+
   increment() {
-    this.hours = `${(parseFloat(this.hours) || 0) + 1}`;
+    this.amountInput = `${(parseFloat(this.amountInput) || 0) + 1}`;
   }
 
   decrement() {
-    this.hours = `${Math.max(0, (parseFloat(this.hours) || 1) - 1)}`;
+    this.amountInput = `${Math.max(
+      0,
+      (parseFloat(this.amountInput) || 1) - 1,
+    )}`;
   }
 
   cancel() {
     this.close();
+    this.eraseValues();
+  }
+
+  eraseValues() {
     this.description = "";
-    this.hours = "0";
+    this.amountInput = "0";
+    this.amountUnitCode = "HUR";
   }
 
   async confirm() {
@@ -148,11 +171,12 @@ export default class OfferDialog extends Vue {
     // this is asynchronous, but we don't need to wait for it to complete
     this.recordOffer(
       this.description,
-      parseFloat(this.hours),
+      parseFloat(this.amountInput),
+      this.amountUnitCode,
       this.expirationDateInput,
     ).then(() => {
       this.description = "";
-      this.hours = "0";
+      this.amountInput = "0";
     });
   }
 
@@ -176,10 +200,12 @@ export default class OfferDialog extends Vue {
    *
    * @param description may be an empty string
    * @param hours may be 0
+   * @param unitCode may be omitted, defaults to "HUR"
    */
   public async recordOffer(
-    description?: string,
-    hours?: number,
+    description: string,
+    amount: number,
+    unitCode: string = "HUR",
     expirationDateInput?: string,
   ) {
     if (!this.activeDid) {
@@ -195,13 +221,13 @@ export default class OfferDialog extends Vue {
       return;
     }
 
-    if (!description && !hours) {
+    if (!description && !amount) {
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "You must enter a description or some number of hours.",
+          text: `You must enter a description or some number of ${this.libsUtil.UNIT_LONG[unitCode]}.`,
         },
         -1,
       );
@@ -215,7 +241,8 @@ export default class OfferDialog extends Vue {
         this.apiServer,
         identity,
         description,
-        hours,
+        amount,
+        unitCode,
         expirationDateInput,
         this.projectId,
       );