Skip to content
This repository has been archived by the owner on Jan 9, 2024. It is now read-only.

Commit

Permalink
fix: selected did on issuance page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikeplotean
mikeplotean committed Oct 13, 2023
1 parent b07029f commit 11f5d83
Showing 1 changed file with 41 additions and 74 deletions.
115 changes: 41 additions & 74 deletions web/src/pages/exchange/issuance.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>

Expand Down Expand Up @@ -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>
Expand All @@ -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;
Expand Down Expand Up @@ -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,
});
Expand Down

0 comments on commit 11f5d83

Please sign in to comment.