|
|
@ -64,98 +64,105 @@ |
|
|
|
:to="{ name: 'quick-action-bvc' }" |
|
|
|
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
Bountiful Voluntaryist Community Actions</router-link |
|
|
|
> |
|
|
|
Bountiful Voluntaryist Community Actions |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- show the actions for recognizing a give --> |
|
|
|
<div class="mb-8"> |
|
|
|
<div v-if="isCreatingIdentifier"> |
|
|
|
<p class="text-slate-500 text-center italic mt-4 mb-4"> |
|
|
|
<fa icon="spinner" class="fa-spin-pulse" /> Loading… |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if="!activeDid && !isCreatingIdentifier" |
|
|
|
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" |
|
|
|
> |
|
|
|
<p class="text-lg mb-3"> |
|
|
|
Want to connect with your contacts, or share contributions or |
|
|
|
projects? |
|
|
|
</p> |
|
|
|
<router-link |
|
|
|
:to="{ name: 'start' }" |
|
|
|
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
Create An Identifier</router-link |
|
|
|
> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div |
|
|
|
v-else-if="!isRegistered" |
|
|
|
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" |
|
|
|
> |
|
|
|
Someone must register you before you can give or offer. |
|
|
|
<router-link |
|
|
|
:to="{ name: 'contact-qr' }" |
|
|
|
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
Show Them Your Identifier Info |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else> |
|
|
|
<!-- activeDid && isRegistered --> |
|
|
|
<div class="mb-4"> |
|
|
|
<h2 class="text-xl font-bold">Record Something Given By:</h2> |
|
|
|
</div> |
|
|
|
|
|
|
|
<ul |
|
|
|
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5" |
|
|
|
<!-- !isCreatingIdentifier --> |
|
|
|
<div |
|
|
|
v-if="!activeDid" |
|
|
|
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" |
|
|
|
> |
|
|
|
<li @click="openDialog()"> |
|
|
|
<img |
|
|
|
src="../assets/blank-square.svg" |
|
|
|
class="mx-auto border border-slate-300 rounded-md mb-1" |
|
|
|
/> |
|
|
|
<h3 |
|
|
|
class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden" |
|
|
|
> |
|
|
|
Unnamed/Unknown |
|
|
|
</h3> |
|
|
|
</li> |
|
|
|
<li |
|
|
|
v-for="contact in allContacts.slice(0, 7)" |
|
|
|
:key="contact.did" |
|
|
|
@click="openDialog(contact)" |
|
|
|
<p class="text-lg mb-3"> |
|
|
|
Want to connect with your contacts, or share contributions or |
|
|
|
projects? |
|
|
|
</p> |
|
|
|
<router-link |
|
|
|
:to="{ name: 'start' }" |
|
|
|
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
<EntityIcon |
|
|
|
:contact="contact" |
|
|
|
:iconSize="64" |
|
|
|
class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer" |
|
|
|
/> |
|
|
|
<h3 |
|
|
|
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden" |
|
|
|
> |
|
|
|
{{ contact.name || contact.did }} |
|
|
|
</h3> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
Create An Identifier |
|
|
|
</router-link> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="flex justify-between"> |
|
|
|
<div |
|
|
|
v-else-if="!isRegistered" |
|
|
|
class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4" |
|
|
|
> |
|
|
|
<!-- activeDid && !isRegistered --> |
|
|
|
Someone must register you before you can give kudos or make offers or |
|
|
|
create projects... basically before doing anything. |
|
|
|
<router-link |
|
|
|
v-if="allContacts.length >= 7" |
|
|
|
:to="{ name: 'contact-gift' }" |
|
|
|
class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md" |
|
|
|
:to="{ name: 'contact-qr' }" |
|
|
|
class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
Choose From All Contacts |
|
|
|
Show Them Your Identifier Info |
|
|
|
</router-link> |
|
|
|
<button |
|
|
|
@click="openGiftedPrompts()" |
|
|
|
class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md" |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-else> |
|
|
|
<!-- activeDid && isRegistered --> |
|
|
|
|
|
|
|
<!-- show the actions for recognizing a give --> |
|
|
|
<div class="mb-4"> |
|
|
|
<h2 class="text-xl font-bold">Record Something Given By:</h2> |
|
|
|
</div> |
|
|
|
|
|
|
|
<ul |
|
|
|
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5" |
|
|
|
> |
|
|
|
Ideas... |
|
|
|
</button> |
|
|
|
<li @click="openDialog()"> |
|
|
|
<img |
|
|
|
src="../assets/blank-square.svg" |
|
|
|
class="mx-auto border border-slate-300 rounded-md mb-1" |
|
|
|
/> |
|
|
|
<h3 |
|
|
|
class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden" |
|
|
|
> |
|
|
|
Unnamed/Unknown |
|
|
|
</h3> |
|
|
|
</li> |
|
|
|
<li |
|
|
|
v-for="contact in allContacts.slice(0, 7)" |
|
|
|
:key="contact.did" |
|
|
|
@click="openDialog(contact)" |
|
|
|
> |
|
|
|
<EntityIcon |
|
|
|
:contact="contact" |
|
|
|
:iconSize="64" |
|
|
|
class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer" |
|
|
|
/> |
|
|
|
<h3 |
|
|
|
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden" |
|
|
|
> |
|
|
|
{{ contact.name || contact.did }} |
|
|
|
</h3> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<div class="flex justify-between"> |
|
|
|
<router-link |
|
|
|
v-if="allContacts.length >= 7" |
|
|
|
:to="{ name: 'contact-gift' }" |
|
|
|
class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md" |
|
|
|
> |
|
|
|
Choose From All Contacts |
|
|
|
</router-link> |
|
|
|
<button |
|
|
|
@click="openGiftedPrompts()" |
|
|
|
class="block text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md" |
|
|
|
> |
|
|
|
Ideas... |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -200,14 +207,22 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="grid grid-cols-12"> |
|
|
|
<span class="col-span-1 justify-self-start"> |
|
|
|
<span class="pt-1 col-span-1 justify-self-start"> |
|
|
|
<span> |
|
|
|
<fa |
|
|
|
v-if="record.giver.known || record.receiver.known" |
|
|
|
icon="circle-user" |
|
|
|
class="pt-1 text-slate-500" |
|
|
|
:class=" |
|
|
|
computeKnownPersonIconStyleClassNames( |
|
|
|
record.giver.known || record.receiver.known, |
|
|
|
) |
|
|
|
" |
|
|
|
@click="toastUser('This involves your contacts.')" |
|
|
|
/> |
|
|
|
<fa |
|
|
|
icon="gift" |
|
|
|
class="pl-3 text-slate-500" |
|
|
|
@click="toastUser('This is a gift.')" |
|
|
|
/> |
|
|
|
<fa v-else icon="gift" class="pt-1 pl-3 text-slate-500" /> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<span class="col-span-10 justify-self-stretch"> |
|
|
@ -758,5 +773,21 @@ export default class HomeView extends Vue { |
|
|
|
openFeedFilters() { |
|
|
|
(this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange); |
|
|
|
} |
|
|
|
|
|
|
|
toastUser(message) { |
|
|
|
this.$notify( |
|
|
|
{ |
|
|
|
group: "alert", |
|
|
|
type: "toast", |
|
|
|
title: "FYI", |
|
|
|
text: message, |
|
|
|
}, |
|
|
|
2000, |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
computeKnownPersonIconStyleClassNames(known: boolean) { |
|
|
|
return known ? "text-slate-500" : "text-slate-100"; |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|