allow changing of units being given

src/components/GiftedDialog.vue

@@ -13,18 +13,21 @@
       <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"
-          >Hours</span
+          @click="changeUnitCode()"
         >
+          {{ UNIT_SHORT[unitCode] }}
+        </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"
@@ -81,12 +84,31 @@ export default class GiftedDialog extends Vue {
   activeDid = "";
   apiServer = "";
 
+  amountInput = "0";
   giver?: GiverInputInfo; // undefined means no identified giver agent
   description = "";
   givenToUser = false;
-  hours = "0";
+  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": "BTC",
+    "ETH": "ETH",
+    "HUR": "hours",
+    "USD": "dollars",
+  };
+  /* eslint-enable prettier/prettier */
+
   async created() {
     try {
       await db.open();
@@ -115,7 +137,7 @@ export default class GiftedDialog extends Vue {
     this.giver = giver;
     // if we show "given to user" selection, default checkbox to true
     this.givenToUser = this.showGivenToUser;
-    this.hours = "0";
+    this.amountInput = "0";
 
     this.visible = true;
   }
@@ -125,12 +147,21 @@ export default class GiftedDialog extends Vue {
     this.visible = false;
   }
 
+  changeUnitCode() {
+    const units = Object.keys(this.UNIT_SHORT);
+    const index = units.indexOf(this.unitCode);
+    this.unitCode = 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() {
@@ -142,7 +173,7 @@ export default class GiftedDialog extends Vue {
     this.description = "";
     this.giver = undefined;
     this.givenToUser = this.showGivenToUser;
-    this.hours = "0";
+    this.amountInput = "0";
   }
 
   async confirm() {
@@ -160,7 +191,8 @@ export default class GiftedDialog extends Vue {
     await this.recordGive(
       this.giver?.did as string | undefined,
       this.description,
-      parseFloat(this.hours),
+      parseFloat(this.amountInput),
+      this.unitCode,
     ).then(() => {
       this.eraseValues();
     });
@@ -186,12 +218,13 @@ export default class GiftedDialog extends Vue {
    *
    * @param giverDid may be null
    * @param description may be an empty string
-   * @param hours may be 0
+   * @param amountInput may be 0
    */
   public async recordGive(
     giverDid?: string,
     description?: string,
-    hours?: number,
+    amountInput?: number,
+    unitCode?: string,
   ) {
     if (!this.activeDid) {
       this.$notify(
@@ -206,13 +239,15 @@ export default class GiftedDialog extends Vue {
       return;
     }
 
-    if (!description && !hours) {
+    if (!description && !amountInput) {
       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.UNIT_LONG[this.unitCode]
+          }.`,
         },
         -1,
       );
@@ -228,7 +263,8 @@ export default class GiftedDialog extends Vue {
         giverDid,
         this.givenToUser ? this.activeDid : undefined,
         description,
-        hours,
+        amountInput,
+        unitCode,
         this.projectId,
       );