for BVC shortcut: send attend & give actions, and list actions to confirm

src/views/QuickActionBvcEndView.vue

@@ -15,19 +15,26 @@
     </div>
 
     <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-4">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
       End of BVC Saturday Meeting
     </h1>
 
     <div>
-      <h2 class="text-2xl m-4">Confirm</h2>
-      <div v-if="claimsToConfirm.length === 0">
-        There are no claims today yet for you to confirm.
-        <span v-if="claimCountWithHidden">
-          (There are {{ claimCountWithHidden }} hidden claims.)
+      <h2 class="text-2xl m-2">Confirm</h2>
+      <div v-if="loadingConfirms" class="flex justify-center">
+        <fa icon="spinner" class="animate-spin" />
+      </div>
+      <div v-else-if="claimsToConfirm.length === 0">
+        There are no claims yet today for you to confirm.
+        <span v-if="claimCountWithHidden > 0">
+          {{
+            claimCountWithHidden === 1
+              ? "(There is 1 claim with hidden details.)"
+              : `(There are ${claimCountWithHidden} claims with hidden details.)`
+          }}
         </span>
       </div>
-      <ul class="border-t border-slate-300">
+      <ul class="border-t border-slate-300 m-2">
         <li
           class="border-b border-slate-300 py-2"
           v-for="record in claimsToConfirm"
@@ -36,7 +43,19 @@
           <div class="grid grid-cols-12">
             <span class="col-span-11 justify-self-start">
               <span>
-                <input type="checkbox" class="mr-2 h-6 w-6" />
+                <input
+                  type="checkbox"
+                  :checked="claimsToConfirmSelected.includes(record.id)"
+                  @click="
+                    claimsToConfirmSelected.includes(record.id)
+                      ? claimsToConfirmSelected.splice(
+                          claimsToConfirmSelected.indexOf(record.id),
+                          1,
+                        )
+                      : claimsToConfirmSelected.push(record.id)
+                  "
+                  class="mr-2 h-6 w-6"
+                />
               </span>
               {{
                 claimSpecialDescription(
@@ -59,10 +78,10 @@
     </div>
 
     <div>
-      <h2 class="text-2xl m-4">Anything else?</h2>
-      <div class="m-4 flex">
+      <h2 class="text-2xl m-2">Anything else?</h2>
+      <div class="m-2 flex">
         <input type="checkbox" v-model="someoneGave" class="h-6 w-6" />
-        <span class="pb-2 pl-2 pr-2">Someone gave</span>
+        <span class="pb-2 pl-2 pr-2">Someone else gave</span>
         <span v-if="someoneGave">
           <input
             type="text"
@@ -76,14 +95,24 @@
       </div>
     </div>
 
-    <div class="m-4" v-if="someoneGave && description">
+    <div
+      v-if="claimsToConfirmSelected.length || (someoneGave && description)"
+      class="flex justify-center mt-4"
+    >
       <button
         @click="record()"
-        class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md"
+        class="block text-center text-md font-bold bg-blue-500 text-white px-2 py-3 rounded-md w-56"
       >
         Sign & Send
       </button>
     </div>
+    <div v-else class="flex justify-center mt-4">
+      <button
+        class="block text-center text-md font-bold bg-slate-500 text-white px-2 py-3 rounded-md w-56"
+      >
+        Choose What To Confirm
+      </button>
+    </div>
   </section>
 </template>
 
@@ -123,7 +152,9 @@ export default class QuickActionBvcBeginView extends Vue {
   apiServer = "";
   claimCountWithHidden = 0;
   claimsToConfirm: GenericServerRecord[] = [];
-  description = "";
+  claimsToConfirmSelected: string[] = [];
+  description = "breakfast";
+  loadingConfirms = true;
   someoneGave = false;
 
   async created() {
@@ -135,6 +166,7 @@ export default class QuickActionBvcBeginView extends Vue {
   }
 
   async mounted() {
+    this.loadingConfirms = true;
     let currentOrPreviousSat = DateTime.now().setZone("America/Denver");
     if (currentOrPreviousSat.weekday < 6) {
       // it's not Saturday or Sunday,
@@ -165,15 +197,7 @@ export default class QuickActionBvcBeginView extends Vue {
     const headers = {
       Authorization: "Bearer " + (await accessToken(identity)),
     };
-    console.log("todayOrPreviousStartDate", todayOrPreviousStartDate);
     try {
-      console.log(
-        this.apiServer +
-          "/api/claim/?" +
-          "issuedAt_greaterThanOrEqualTo=" +
-          encodeURIComponent(todayOrPreviousStartDate) +
-          "&excludeConfirmations=true",
-      );
       const response = await fetch(
         this.apiServer +
           "/api/claim/?" +
@@ -187,7 +211,7 @@ export default class QuickActionBvcBeginView extends Vue {
         console.log("Bad response", response);
         throw new Error("Bad response when retrieving claims.");
       }
-      response.json().then((data) => {
+      await response.json().then((data) => {
         const dataByOthers = R.reject(
           (claim: GenericServerRecord) => claim.issuer === this.activeDid,
           data,
@@ -212,6 +236,7 @@ export default class QuickActionBvcBeginView extends Vue {
         -1,
       );
     }
+    this.loadingConfirms = false;
   }
 
   onClickLoadClaim(jwtId: string) {