@ -17,20 +17,38 @@
<!-- Results List -- >
< ul class = "border-t border-slate-300" >
<!-- "You" entity -- >
< li v-if ="shouldShowYouEntity" class="border-b border-slate-300 py-3" >
< h2 class = "text-base flex gap-4 items-center" >
< span class = "grow flex gap-2 items-center font-medium" >
< font -awesome icon = "hand" class = "text-blue-500 text-4xl shrink-0" / >
< span class = "text-ellipsis overflow-hidden text-blue-500" > You < / span >
< / span >
< span class = "text-right" >
< button
type = "button"
class = "block w-full text-center text-sm uppercase 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-3 py-1.5 rounded-md"
@ click = "openDialog({ did: activeDid, name: 'You' })"
>
< font -awesome icon = "gift" class = "fa-fw" > < / f o n t - a w e s o m e >
< / button >
< / span >
< / h2 >
< / li >
< li class = "border-b border-slate-300 py-3" >
< h2 class = "text-base flex gap-4 items-center" >
< span class = "grow flex gap-2 items-center font-medium" >
< font -awesome
icon = "circle-question"
class = "text-slate-400 text-4xl"
class = "text-slate-400 text-4xl shrink-0 "
/ >
< span class = "italic text-slate-400" > ( Unnamed / Unknown ) < / span >
< span class = "text-ellipsis overflow-hidden italic text-slate-5 00" > ( Unnamed / Unknown ) < / span >
< / span >
< span class = "text-right" >
< button
type = "button"
class = "block w-full text-center text-sm uppercase 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-3 py-1.5 rounded-md"
@ click = "openDialog('Unnamed')"
@ click = "openDialog({ did: '', name: 'Unnamed' } )"
>
< font -awesome icon = "gift" class = "fa-fw" > < / f o n t - a w e s o m e >
< / button >
@ -43,14 +61,14 @@
class = "border-b border-slate-300 py-3"
>
< h2 class = "text-base flex gap-4 items-center" >
< span class = "grow flex gap-2 items-center font-medium" >
< span class = "grow flex gap-2 items-center font-medium overflow-hidden " >
< EntityIcon
: contact = "contact"
: icon - size = "34"
class = "inline-block align-middle border border-slate-300 rounded-full overflow-hidden"
class = "inline-block align-middle border border-slate-300 rounded-full overflow-hidden shrink-0 "
/ >
< span v-if ="contact.name" > {{ contact.name }} < / span >
< span v -else class = "italic text-slate-400" > ( No name ) < / span >
< span v-if ="contact.name" class="text-ellipsis overflow-hidden" > {{ contact.name }} < / span >
< span v -else class = "text-ellipsis overflow-hidden italic text-slate-500" > { { contact . did } } < / span >
< / span >
< span class = "text-right" >
< button
@ -72,6 +90,7 @@
: from - project - id = "fromProjectId"
: to - project - id = "toProjectId"
: is - from - project - view = "isFromProjectView"
: hide - show - all = "true"
/ >
< / section >
< / template >
@ -188,147 +207,143 @@ export default class ContactGiftingView extends Vue {
}
}
openDialog ( contact ? : GiverReceiverInputInfo | "Unnamed" ) {
if ( contact === "Unnamed" ) {
/ / S p e c i a l c a s e : H a n d l e " U n n a m e d " c o n t a c t s f o r b o t h g i v e r s a n d r e c i p i e n t s
let recipient : GiverReceiverInputInfo ;
let giver : GiverReceiverInputInfo | undefined ;
openDialog ( contact ? : GiverReceiverInputInfo ) {
/ / D e t e r m i n e t h e s e l e c t e d e n t i t y b a s e d o n c o n t a c t t y p e
const selectedEntity = this . createEntityFromContact ( contact ) ;
if ( this . stepType === "giver" ) {
/ / W e ' r e s e l e c t i n g a g i v e r , s o p r e s e r v e t h e e x i s t i n g r e c i p i e n t f r o m c o n t e x t
if ( this . recipientEntityType === "project" ) {
recipient = {
did : this . recipientProjectHandleId ,
name : this . recipientProjectName ,
image : this . recipientProjectImage ,
handleId : this . recipientProjectHandleId ,
} ;
} else {
/ / P r e s e r v e t h e e x i s t i n g r e c i p i e n t f r o m c o n t e x t
if ( this . recipientDid === this . activeDid ) {
/ / R e c i p i e n t w a s " Y o u "
recipient = { did : this . activeDid , name : "You" } ;
} else if ( this . recipientDid ) {
/ / R e c i p i e n t w a s a r e g u l a r c o n t a c t
recipient = {
did : this . recipientDid ,
name : this . recipientProjectName || "Someone" ,
} ;
} else {
/ / F a l l b a c k t o " Y o u " i f n o r e c i p i e n t w a s p r e v i o u s l y s e l e c t e d
recipient = { did : this . activeDid , name : "You" } ;
}
}
giver = undefined ; / / W i l l b e s e t t o " U n n a m e d " i n G i f t e d D i a l o g
} else {
/ / W e ' r e s e l e c t i n g a r e c i p i e n t , s o r e c i p i e n t i s " U n n a m e d " a n d g i v e r i s p r e s e r v e d f r o m c o n t e x t
recipient = { did : "" , name : "Unnamed" } ;
/ / C r e a t e g i v e r a n d r e c i p i e n t b a s e d o n s t e p t y p e a n d s e l e c t e d e n t i t y
const { giver , recipient } = this . createGiverAndRecipient ( selectedEntity ) ;
/ / P r e s e r v e t h e e x i s t i n g g i v e r f r o m t h e c o n t e x t
if ( this . giverEntityType === "project" ) {
giver = {
did : this . giverProjectHandleId ,
name : this . giverProjectName ,
image : this . giverProjectImage ,
handleId : this . giverProjectHandleId ,
} ;
} else if ( this . giverDid ) {
giver = {
did : this . giverDid ,
name : this . giverProjectName || "Someone" ,
} ;
} else {
giver = { did : this . activeDid , name : "You" } ;
}
}
/ / O p e n t h e d i a l o g
( this . $refs . giftedDialog as GiftedDialog ) . open (
giver ,
recipient ,
this . offerId ,
this . prompt ,
this . description ,
this . amountInput ,
this . unitCode ,
) ;
( this . $refs . giftedDialog as GiftedDialog ) . open (
giver ,
recipient ,
this . offerId ,
this . prompt ,
this . description ,
this . amountInput ,
this . unitCode ,
) ;
/ / M o v e t o S t e p 2 - e n t i t i e s a r e a l r e a d y s e t b y t h e o p e n ( ) c a l l
( this . $refs . giftedDialog as GiftedDialog ) . moveToStep2 ( ) ;
}
/ * *
* Creates an entity object from the contact parameter
* Uses DID - based logic to determine "You" and "Unnamed" entities
* /
private createEntityFromContact (
contact ? : GiverReceiverInputInfo ,
) : GiverReceiverInputInfo | undefined {
if ( ! contact ) {
return undefined ;
}
/ / M o v e t o S t e p 2 - e n t i t i e s a r e a l r e a d y s e t b y t h e o p e n ( ) c a l l
( this . $refs . giftedDialog as GiftedDialog ) . moveToStep2 ( ) ;
/ / H a n d l e G i v e r R e c e i v e r I n p u t I n f o o b j e c t
if ( contact . did === this . activeDid ) {
/ / I f D I D m a t c h e s a c t i v e D I D , c r e a t e " Y o u " e n t i t y
return { did : this . activeDid , name : "You" } ;
} else if ( ! contact . did || contact . did === "" ) {
/ / I f D I D i s e m p t y / n u l l , c r e a t e " U n n a m e d " e n t i t y
return { did : "" , name : "Unnamed" } ;
} else {
/ / R e g u l a r c a s e : c o n t a c t i s a G i v e r R e c e i v e r I n p u t I n f o
let giver : GiverReceiverInputInfo ;
let recipient : GiverReceiverInputInfo ;
/ / C r e a t e a c o p y o f t h e c o n t a c t t o a v o i d m o d i f y i n g t h e o r i g i n a l
return { ... contact } ;
}
}
if ( this . stepType === "giver" ) {
/ / W e ' r e s e l e c t i n g a g i v e r , s o t h e c o n t a c t b e c o m e s t h e g i v e r
giver = contact as GiverReceiverInputInfo ; / / S a f e b e c a u s e w e k n o w c o n t a c t i s n o t " U n n a m e d " o r u n d e f i n e d
/ * *
* Creates giver and recipient objects based on step type and selected entity
* /
private createGiverAndRecipient ( selectedEntity ? : GiverReceiverInputInfo ) : {
giver : GiverReceiverInputInfo | undefined ;
recipient : GiverReceiverInputInfo ;
} {
if ( this . stepType === "giver" ) {
/ / W e ' r e s e l e c t i n g a g i v e r , s o t h e s e l e c t e d e n t i t y b e c o m e s t h e g i v e r
const giver = selectedEntity ;
const recipient = this . createRecipientFromContext ( ) ;
return { giver , recipient } ;
} else {
/ / W e ' r e s e l e c t i n g a r e c i p i e n t , s o t h e s e l e c t e d e n t i t y b e c o m e s t h e r e c i p i e n t
const recipient = selectedEntity || { did : "" , name : "Unnamed" } ;
const giver = this . createGiverFromContext ( ) ;
return { giver , recipient } ;
}
}
/ / P r e s e r v e t h e e x i s t i n g r e c i p i e n t f r o m t h e c o n t e x t
if ( this . recipientEntityType === "project" ) {
recipient = {
did : this . recipientProjectHandleId ,
name : this . recipientProjectName ,
image : this . recipientProjectImage ,
handleId : this . recipientProjectHandleId ,
} ;
} else {
/ / C h e c k i f t h e p r e s e r v e d r e c i p i e n t w a s " Y o u " o r a r e g u l a r c o n t a c t
if ( this . recipientDid === this . activeDid ) {
/ / R e c i p i e n t w a s " Y o u "
recipient = { did : this . activeDid , name : "You" } ;
} else if ( this . recipientDid ) {
/ / R e c i p i e n t w a s a r e g u l a r c o n t a c t
recipient = {
did : this . recipientDid ,
name : this . recipientProjectName || "Someone" ,
} ;
} else {
/ / F a l l b a c k t o " U n n a m e d "
recipient = { did : "" , name : "Unnamed" } ;
}
}
/ * *
* Creates recipient object from context ( preserves existing recipient )
* /
private createRecipientFromContext ( ) : GiverReceiverInputInfo {
if ( this . recipientEntityType === "project" ) {
return {
did : this . recipientProjectHandleId ,
name : this . recipientProjectName ,
image : this . recipientProjectImage ,
handleId : this . recipientProjectHandleId ,
} ;
} else {
if ( this . recipientDid === this . activeDid ) {
return { did : this . activeDid , name : "You" } ;
} else if ( this . recipientDid ) {
return {
did : this . recipientDid ,
name : this . recipientProjectName ,
} ;
} else {
/ / W e ' r e s e l e c t i n g a r e c i p i e n t , s o t h e c o n t a c t b e c o m e s t h e r e c i p i e n t
recipient = contact as GiverReceiverInputInfo ; / / S a f e b e c a u s e w e k n o w c o n t a c t i s n o t " U n n a m e d " o r u n d e f i n e d
/ / P r e s e r v e t h e e x i s t i n g g i v e r f r o m t h e c o n t e x t
if ( this . giverEntityType === "project" ) {
giver = {
did : this . giverProjectHandleId ,
name : this . giverProjectName ,
image : this . giverProjectImage ,
handleId : this . giverProjectHandleId ,
} ;
} else {
/ / C h e c k i f t h e p r e s e r v e d g i v e r w a s " Y o u " o r a r e g u l a r c o n t a c t
if ( this . giverDid === this . activeDid ) {
/ / G i v e r w a s " Y o u "
giver = { did : this . activeDid , name : "You" } ;
} else if ( this . giverDid ) {
/ / G i v e r w a s a r e g u l a r c o n t a c t
giver = {
did : this . giverDid ,
name : this . giverProjectName || "Someone" ,
} ;
} else {
/ / F a l l b a c k t o " U n n a m e d "
giver = { did : "" , name : "Unnamed" } ;
}
}
return { did : "" , name : "Unnamed" } ;
}
}
}
( this . $refs . giftedDialog as GiftedDialog ) . open (
giver ,
recipient ,
this . offerId ,
this . prompt ,
this . description ,
this . amountInput ,
this . unitCode ,
) ;
/ * *
* Creates giver object from context ( preserves existing giver )
* /
private createGiverFromContext ( ) : GiverReceiverInputInfo {
if ( this . giverEntityType === "project" ) {
return {
did : this . giverProjectHandleId ,
name : this . giverProjectName ,
image : this . giverProjectImage ,
handleId : this . giverProjectHandleId ,
} ;
} else {
if ( this . giverDid === this . activeDid ) {
return { did : this . activeDid , name : "You" } ;
} else if ( this . giverDid ) {
return {
did : this . giverDid ,
name : this . giverProjectName ,
} ;
} else {
return { did : "" , name : "Unnamed" } ;
}
}
}
/ / M o v e t o S t e p 2 - e n t i t i e s a r e a l r e a d y s e t b y t h e o p e n ( ) c a l l
( this . $refs . giftedDialog as GiftedDialog ) . moveToStep2 ( ) ;
get shouldShowYouEntity ( ) : boolean {
if ( this . stepType === "giver" ) {
/ / W h e n s e l e c t i n g a g i v e r , s h o w " Y o u " i f t h e c u r r e n t r e c i p i e n t i s n o t " Y o u "
/ / T h i s p r e v e n t s s e l e c t i n g y o u r s e l f a s b o t h g i v e r a n d r e c i p i e n t
if ( this . recipientEntityType === "project" ) {
/ / I f r e c i p i e n t i s a p r o j e c t , w e c a n s e l e c t " Y o u " a s g i v e r
return true ;
} else {
/ / I f r e c i p i e n t i s a p e r s o n , c h e c k i f i t ' s n o t " Y o u "
return this . recipientDid !== this . activeDid ;
}
} else {
/ / W h e n s e l e c t i n g a r e c i p i e n t , s h o w " Y o u " i f t h e c u r r e n t g i v e r i s n o t " Y o u "
/ / T h i s p r e v e n t s s e l e c t i n g y o u r s e l f a s b o t h g i v e r a n d r e c i p i e n t
if ( this . giverEntityType === "project" ) {
/ / I f g i v e r i s a p r o j e c t , w e c a n s e l e c t " Y o u " a s r e c i p i e n t
return true ;
} else {
/ / I f g i v e r i s a p e r s o n , c h e c k i f i t ' s n o t " Y o u "
return this . giverDid !== this . activeDid ;
}
}
}
}
Let's change this logic a little bit, because there are redundant potential states:
The "contact" could be null/undefined. That is the case where "Unnamed" would be used, so we don't need a separate "Unnamed" value. (If we have both potential cases then we have to include similar logic to work with both cases, which makes it more complex.)
The contact could be the current user's activeDid, so that's what we should use in the openDialog instead of the word "You". (We should be checking here for the activeDid... and if we also have to check "You" then there is duplicate logic again... again adding to the complexity and difficulty of maintenance.)