@ -80,16 +80,29 @@
stepType === 'recipient' ||
( stepType === 'giver' && isFromProjectView )
"
class = "cursor-pointer"
: class = " {
'cursor-pointer' : ! wouldCreateConflict ( activeDid ) ,
'cursor-not-allowed opacity-50' : wouldCreateConflict ( activeDid )
} "
@ click = "
stepType === 'recipient'
! wouldCreateConflict ( activeDid ) &&
( stepType === 'recipient'
? selectRecipient ( { did : activeDid , name : 'You' } )
: selectGiver ( { did : activeDid , name : 'You' } )
: selectGiver ( { did : activeDid , name : 'You' } ) )
"
>
< font -awesome icon = "hand" class = "text-blue-500 text-5xl mb-1" / >
< font -awesome
: class = " {
'text-blue-500 text-5xl mb-1' : ! wouldCreateConflict ( activeDid ) ,
'text-slate-400 text-5xl mb-1' : wouldCreateConflict ( activeDid )
} "
icon = "hand"
/ >
< h3
class = "text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden"
: class = " {
'text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden' : ! wouldCreateConflict ( activeDid ) ,
'text-xs text-slate-400 font-medium text-ellipsis whitespace-nowrap overflow-hidden' : wouldCreateConflict ( activeDid )
} "
>
You
< / h3 >
@ -119,11 +132,15 @@
< li
v - for = "contact in allContacts.slice(0, 10)"
: key = "contact.did"
class = "cursor-pointer"
: class = " {
'cursor-pointer' : ! wouldCreateConflict ( contact . did ) ,
'cursor-not-allowed opacity-50' : wouldCreateConflict ( contact . did )
} "
@ click = "
stepType === 'recipient'
! wouldCreateConflict ( contact . did ) &&
( stepType === 'recipient'
? selectRecipient ( contact )
: selectGiver ( contact )
: selectGiver ( contact ) )
"
>
< div class = "relative w-fit mx-auto" >
@ -141,7 +158,10 @@
< / div >
< / div >
< h3
class = "text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
: class = " {
'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden' : ! wouldCreateConflict ( contact . did ) ,
'text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden text-slate-400' : wouldCreateConflict ( contact . did )
} "
>
{ { contact . name || contact . did } }
< / h3 >
@ -425,9 +445,22 @@
@ click = "explainData()"
/ >
< / p >
<!-- Conflict warning -- >
< div v-if ="hasPersonConflict" class="mb-4 p-3 bg-red-50 border border-red-200 rounded-md" >
< p class = "text-red-700 text-sm text-center" >
< font -awesome icon = "exclamation-triangle" class = "fa-fw mr-1" / >
Cannot record : Same person selected as both giver and recipient
< / p >
< / div >
< div class = "grid grid-cols-1 sm:grid-cols-2 gap-2" >
< button
class = "block w-full text-center text-md uppercase 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 px-1.5 py-2 rounded-lg"
: disabled = "hasPersonConflict"
: class = " {
'block w-full text-center text-md uppercase 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 px-1.5 py-2 rounded-lg' : ! hasPersonConflict ,
'block w-full text-center text-md uppercase font-bold bg-gradient-to-b from-slate-300 to-slate-500 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-400 px-1.5 py-2 rounded-lg cursor-not-allowed' : hasPersonConflict
} "
@ click = "confirm"
>
Sign & amp ; Send
@ -525,6 +558,39 @@ export default class GiftedDialog extends Vue {
return result ;
}
/ / C o m p u t e d p r o p e r t y t o c h e c k i f c u r r e n t s e l e c t i o n w o u l d c r e a t e a c o n f l i c t
get hasPersonConflict ( ) {
/ / O n l y c h e c k f o r c o n f l i c t s w h e n b o t h e n t i t i e s a r e p e r s o n s
if ( this . giverEntityType !== "person" || this . recipientEntityType !== "person" ) {
return false ;
}
/ / C h e c k i f g i v e r a n d r e c i p i e n t a r e t h e s a m e p e r s o n
if ( this . giver ? . did && this . receiver ? . did && this . giver . did === this . receiver . did ) {
return true ;
}
return false ;
}
/ / C o m p u t e d p r o p e r t y t o c h e c k i f a c o n t a c t w o u l d c r e a t e a c o n f l i c t w h e n s e l e c t e d
wouldCreateConflict ( contactDid : string ) {
/ / O n l y c h e c k f o r c o n f l i c t s w h e n b o t h e n t i t i e s a r e p e r s o n s
if ( this . giverEntityType !== "person" || this . recipientEntityType !== "person" ) {
return false ;
}
if ( this . stepType === "giver" ) {
/ / I f s e l e c t i n g a s g i v e r , c h e c k i f i t c o n f l i c t s w i t h c u r r e n t r e c i p i e n t
return this . receiver ? . did === contactDid ;
} else if ( this . stepType === "recipient" ) {
/ / I f s e l e c t i n g a s r e c i p i e n t , c h e c k i f i t c o n f l i c t s w i t h c u r r e n t g i v e r
return this . giver ? . did === contactDid ;
}
return false ;
}
stepType = "giver" ;
giverEntityType = "person" as "person" | "project" ;
recipientEntityType = "person" as "person" | "project" ;
@ -705,6 +771,20 @@ export default class GiftedDialog extends Vue {
) ;
return ;
}
/ / C h e c k f o r p e r s o n c o n f l i c t
if ( this . hasPersonConflict ) {
this . $notify (
{
group : "alert" ,
type : "danger" ,
title : "Error" ,
text : "You cannot select the same person as both giver and recipient." ,
} ,
3000 ,
) ;
return ;
}
this . close ( ) ;
this . $notify (