From 11f5d834a0db40bc4d02c0f86059e460a258e0ab Mon Sep 17 00:00:00 2001
From: mikeplotean <mike@walt.id>
Date: Fri, 13 Oct 2023 15:16:19 +0300
Subject: [PATCH] fix: selected did on issuance page

---
 web/src/pages/exchange/issuance.vue | 115 ++++++++++------------------
 1 file changed, 41 insertions(+), 74 deletions(-)

diff --git a/web/src/pages/exchange/issuance.vue b/web/src/pages/exchange/issuance.vue
index c397d8b..421fecc 100644
--- a/web/src/pages/exchange/issuance.vue
+++ b/web/src/pages/exchange/issuance.vue
@@ -31,7 +31,7 @@
               : 'bg-green-600 hover:scale-105 hover:animate-pulse hover:bg-green-700 focus:animate-none focus:outline-green-700',
           ]"
           :failed="failed"
-          :disabled = "!selected.startsWith('did')"
+          :disabled="selectedDid == null || selectedDid == undefined"
           class="inline-flex items-center rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus:outline focus:outline-offset-2"
           display-text="Accept"
           icon="heroicons:check"
@@ -47,67 +47,40 @@
       <LoadingIndicator v-if="immediateAccept" class="my-6 mb-12 w-full">
         Receiving {{ credentialCount }} credential(s)...
       </LoadingIndicator>
-
-      <Listbox as="div" v-model="selected">
-        <ListboxLabel class="block top-0 z-10 border-y border-b-gray-200 border-t-gray-100 bg-gray-50 px-3 py-1.5 text-sm font-semibold leading-6 text-gray-900">
-            <h3>Subject:</h3>
-         </ListboxLabel>
-        <div class="relative mt-2">
-          <ListboxButton class=" overflow-y-auto shadow-xl relative w-full cursor-default bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 ring-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-600 sm:text-sm sm:leading-6">
-            <span class="block truncate">{{ selected }}</span>
-            <span
-              class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
-            >
-              <ChevronUpDownIcon
-                class="h-5 w-5 text-gray-400"
-                aria-hidden="true"
-              />
-            </span>
-          </ListboxButton>
-
-          <transition
-            leave-active-class="transition ease-in duration-100"
-            leave-from-class="opacity-100"
-            leave-to-class="opacity-0"
-          >
-            <ListboxOptions
-              class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-            >
-              <ListboxOption
-                as="template"
-                v-for="did in dids.value"
-                :value="did"
-                v-slot="{ active, selected }"
-              >
-                <li
-                  :class="[
-                    active ? 'bg-blue-600 text-white' : 'text-gray-900',
-                    'relative cursor-default select-none py-2 pl-8 pr-4',
-                  ]"
-                >
-                  <span
-                    :class="[
-                      selected ? 'font-semibold' : 'font-normal',
-                      'block truncate',
-                    ]"
-                    >{{ did }}</span
-                  >
-
-                  <span
-                    v-if="selected"
-                    :class="[
-                      active ? 'text-white' : 'text-indigo-600',
-                      'absolute inset-y-0 left-0 flex items-center pl-1.5',
-                    ]"
-                  >
-                    <CheckIcon class="h-5 w-5" aria-hidden="true" />
-                  </span>
-                </li>
-              </ListboxOption>
-            </ListboxOptions>
-          </transition>
+      <div class="flex col-2">
+        <div class="relative w-full">
+          <Listbox as="div" v-model="selectedDid" aria-multiselectable="true">
+            <ListboxLabel class="block text-sm font-medium leading-6 text-gray-900">Select Did</ListboxLabel>
+            <div class="relative mt-2">
+                <ListboxButton v-if="selectedDid != null" aria-placeholder="bla-bla" class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm sm:leading-6">
+                    <span class="flex items-center">
+                        <p class="truncate font-bold">{{ selectedDid.alias }}</p>
+                        <span class="ml-3 block truncate">{{ selectedDid.did }}</span>
+                    </span>
+                    <span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+                        <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+                    </span>
+                </ListboxButton>
+
+                <transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
+                    <ListboxOptions class="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                        <ListboxOption as="template" v-for="did in dids" :key="did.did" :value="did" v-slot="{ active, selectedDid }">
+                            <li :class="[active ? 'bg-indigo-600 text-white' : 'text-gray-900', 'relative cursor-default select-none py-2 pl-3 pr-9']">
+                            <div class="flex items-center">
+                                <p class="italic">{{ did.alias }}</p>
+                                <span :class="[selectedDid ? 'font-semibold' : 'font-normal', 'ml-3 block truncate']">{{ did.did }}</span>
+                            </div>
+                            <span v-if="selectedDid" :class="[active ? 'text-white' : 'text-indigo-600', 'absolute inset-y-0 right-0 flex items-center pr-4']">
+                                <CheckIcon class="h-5 w-5" aria-hidden="true" />
+                            </span>
+                            </li>
+                        </ListboxOption>
+                    </ListboxOptions>
+                </transition>
+            </div>
+          </Listbox>
         </div>
-      </Listbox>
+      </div>
       <br>
       <p class="mb-1">The following credentials will be issued:</p>
 
@@ -151,7 +124,7 @@
       <br />
       <p class="mb-1">Subject:</p>
       <!-- <div class="h-full overflow-y-auto shadow-xl">
-        <select v-model="selected">
+        <select v-model="selectedDid">
           <option v-for="did in dids.value" :value="did">
             {{ did }}
           </option>
@@ -177,16 +150,10 @@ import {
 import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
 import { useTitle } from "@vueuse/core";
 
-// const selected = ref('')
-const dids = ref();
-
-async function loadDids() {
-  dids.value = await useLazyFetch("/r/wallet/dids").data;
-  refreshNuxtData();
-  
-}
-loadDids();
-const selected = ref('Please select a did')
+const { data: dids, pending: pendingDids } = await useLazyAsyncData(
+    () => $fetch("/r/wallet/dids")
+)
+const selectedDid = ref({})
 
 const query = useRoute().query;
 
@@ -246,9 +213,9 @@ const groupedCredentialTypes = groupBy(
 const failed = ref(false);
 
 async function acceptCredential() {
-  console.log(selected.value);
+  console.log(selectedDid.value.did);
   try {
-    await $fetch(`/r/wallet/exchange/useOfferRequest?did=${selected.value}`, {
+    await $fetch(`/r/wallet/exchange/useOfferRequest?did=${selectedDid.value.did}`, {
       method: "POST",
       body: request,
     });