trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 8 Releases 5 Wiki Activity
Browse Source

rework contacts screen to show activity buttons always but totals on request

pull/132/head
Trent Larson 3 weeks ago
parent
4905334ed4
commit
ba9bb8a26e
1 changed files with 106 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 211
      src/views/ContactsView.vue

211
src/views/ContactsView.vue
View File

@ -92,7 +92,7 @@
<div v-if="contacts.length > 0" class="flex justify-between"> <div v-if="contacts.length > 0" class="flex justify-between">
<div class="w-full text-left"> <div class="w-full text-left">
<div v-if="!showGiveNumbers"> <div>
<input <input
type="checkbox" type="checkbox"
:checked="contactsSelected.length === contacts.length" :checked="contactsSelected.length === contacts.length"
@ -105,7 +105,6 @@
" "
/> />
<button <button
v-if="!showGiveNumbers"
href="" href=""
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md" class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
:style=" :style="
@ -127,43 +126,43 @@
</div> </div>
</div> </div>
<div class="w-full text-right"> <div v-if="!showGiveNumbers" class="w-full text-right">
<button <button
href="" href=""
class="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-3 py-1.5 rounded-md" class="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-3 py-1.5 rounded-md"
@click="toggleShowContactAmounts()" @click="toggleShowContactAmounts()"
> >
{{ See Hours, Offer, etc
showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
}}
</button> </button>
</div> </div>
</div> <div v-else class="w-full text-right">
<div v-if="showGiveNumbers" class="flex justify-between mt-1"> <span class="text-sm">
<div class="w-full text-right"> Only the most recent From/To hours show in buttons. To see more,
In the following, only the most recent hours are included. To see more, click
click <span
<span class="text-sm uppercase 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-1 py-1 rounded-md"
class="text-sm uppercase 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-1 py-1 rounded-md" >
> <font-awesome icon="file-lines" class="fa-fw" />
<font-awesome icon="file-lines" class="fa-fw" /> </span>
</span> </span>
<br /> <br />
<button <span>
href="" <button
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1" href=""
:class="showGiveAmountsClassNames()" class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
@click="toggleShowGiveTotals()" :class="showGiveAmountsClassNames()"
> @click="toggleShowGiveTotals()"
{{ >
showGiveTotals {{
? "Totals" showGiveTotals
: showGiveConfirmed ? "Totals"
? "Confirmed Amounts" : showGiveConfirmed
: "Unconfirmed Amounts" ? "Confirmed Amounts"
}} : "Unconfirmed Amounts"
<font-awesome icon="left-right" class="fa-fw" /> }}
</button> <font-awesome icon="left-right" class="fa-fw" />
</button>
</span>
</div> </div>
</div> </div>
@ -179,79 +178,82 @@
class="border-b border-slate-300 pt-1 pb-1" class="border-b border-slate-300 pt-1 pb-1"
data-testId="contactListItem" data-testId="contactListItem"
> >
<div class="grow overflow-hidden"> <div class="flex justify-between items-start">
<div class="flex items-center gap-3"> <span class="grow overflow-hidden">
<input <span class="flex items-center gap-3">
v-if="!showGiveNumbers" <input
type="checkbox" type="checkbox"
:checked="contactsSelected.includes(contact.did)" :checked="contactsSelected.includes(contact.did)"
class="ml-2 h-6 w-6 flex-shrink-0" class="ml-2 h-6 w-6 flex-shrink-0"
data-testId="contactCheckOne" data-testId="contactCheckOne"
@click=" @click="
contactsSelected.includes(contact.did) contactsSelected.includes(contact.did)
? contactsSelected.splice( ? contactsSelected.splice(
contactsSelected.indexOf(contact.did), contactsSelected.indexOf(contact.did),
1, 1,
) )
: contactsSelected.push(contact.did) : contactsSelected.push(contact.did)
" "
/> />
<EntityIcon <EntityIcon
:contact="contact" :contact="contact"
:icon-size="48" :icon-size="48"
class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden" class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
@click="showLargeIdenticon = contact" @click="showLargeIdenticon = contact"
/> />
<h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0"> <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
{{ contactNameNonBreakingSpace(contact.name) }} {{ contactNameNonBreakingSpace(contact.name) }}
</h2> </h2>
<span> <span>
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<router-link <router-link
:to="{ :to="{
path: '/did/' + encodeURIComponent(contact.did), path: '/did/' + encodeURIComponent(contact.did),
}" }"
title="See more about this person" title="See more about this person"
> >
<font-awesome <font-awesome
icon="circle-info" icon="circle-info"
class="text-xl text-blue-500" class="text-xl text-blue-500"
/> />
</router-link> </router-link>
<span class="text-sm overflow-hidden">{{ <span class="text-sm overflow-hidden">{{
libsUtil.shortDid(contact.did) libsUtil.shortDid(contact.did)
}}</span> }}</span>
</div> </div>
<div class="text-sm"> <div class="text-sm">
{{ contact.notes }} {{ contact.notes }}
</div> </div>
</span>
</span> </span>
</div> </span>
<div <span
v-if="showGiveNumbers && contact.did != activeDid" v-if="contact.did != activeDid"
class="ml-auto flex gap-1.5 mt-2" class="flex gap-1.5 ml-2"
> >
<button <button
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md" class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
:title="givenToMeDescriptions[contact.did] || ''" :title="givenToMeDescriptions[contact.did] || ''"
@click="confirmShowGiftedDialog(contact.did, activeDid)" @click="confirmShowGiftedDialog(contact.did, activeDid)"
> >
From: From&hellip;
<br /> <br />
{{ <span v-if="showGiveNumbers">
/* eslint-disable prettier/prettier */ {{
showGiveTotals /* eslint-disable prettier/prettier */
? ((givenToMeConfirmed[contact.did] || 0) showGiveTotals
+ (givenToMeUnconfirmed[contact.did] || 0)) ? ((givenToMeConfirmed[contact.did] || 0)
: showGiveConfirmed + (givenToMeUnconfirmed[contact.did] || 0))
? (givenToMeConfirmed[contact.did] || 0) : showGiveConfirmed
: (givenToMeUnconfirmed[contact.did] || 0) ? (givenToMeConfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ : (givenToMeUnconfirmed[contact.did] || 0)
}} /* eslint-enable prettier/prettier */
}}
</span>
</button> </button>
<button <button
@ -259,18 +261,20 @@
:title="givenByMeDescriptions[contact.did] || ''" :title="givenByMeDescriptions[contact.did] || ''"
@click="confirmShowGiftedDialog(activeDid, contact.did)" @click="confirmShowGiftedDialog(activeDid, contact.did)"
> >
To: To&hellip;
<br /> <br />
{{ <span v-if="showGiveNumbers">
/* eslint-disable prettier/prettier */ {{
showGiveTotals /* eslint-disable prettier/prettier */
showGiveTotals
? ((givenByMeConfirmed[contact.did] || 0) ? ((givenByMeConfirmed[contact.did] || 0)
+ (givenByMeUnconfirmed[contact.did] || 0)) + (givenByMeUnconfirmed[contact.did] || 0))
: showGiveConfirmed : showGiveConfirmed
? (givenByMeConfirmed[contact.did] || 0) ? (givenByMeConfirmed[contact.did] || 0)
: (givenByMeUnconfirmed[contact.did] || 0) : (givenByMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ /* eslint-enable prettier/prettier */
}} }}
</span>
</button> </button>
<button <button
@ -291,7 +295,7 @@
> >
<font-awesome icon="file-lines" class="fa-fw" /> <font-awesome icon="file-lines" class="fa-fw" />
</router-link> </router-link>
</div> </span>
</div> </div>
</li> </li>
</ul> </ul>
@ -299,7 +303,6 @@
<div v-if="contacts.length > 0" class="mt-2 w-full text-left"> <div v-if="contacts.length > 0" class="mt-2 w-full text-left">
<input <input
v-if="!showGiveNumbers"
type="checkbox" type="checkbox"
:checked="contactsSelected.length === contacts.length" :checked="contactsSelected.length === contacts.length"
class="align-middle ml-2 h-6 w-6" class="align-middle ml-2 h-6 w-6"
@ -311,7 +314,6 @@
" "
/> />
<button <button
v-if="!showGiveNumbers"
href="" href=""
class="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 ml-3 px-3 py-1.5 rounded-md" class="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 ml-3 px-3 py-1.5 rounded-md"
:style=" :style="
@ -448,7 +450,6 @@ export default class ContactsView extends Vue {
await this.processContactJwt(); await this.processContactJwt();
await this.processInviteJwt(); await this.processInviteJwt();
this.showGiveNumbers = !!settings.showContactGivesInline;
this.hideRegisterPromptOnNewContact = this.hideRegisterPromptOnNewContact =
!!settings.hideRegisterPromptOnNewContact; !!settings.hideRegisterPromptOnNewContact;

Write Preview
Loading…
Cancel
Save