@ -17,34 +17,55 @@
< / div > < / div >
<!-- Details -- > <!-- Details -- >
< div class = "bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4" > < div class = "h-32 bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4" >
< div > < div class = "block flex gap-4 overflow-hidden" >
< div class = "block flex gap-4 overflow-hidden" > < div class = "overflow-hidden" >
< div class = "overflow-hidden" > < h2 class = "text-md font-bold" > { { veriClaim . id } } < / h2 >
< h2 class = "text-md font-bold" > { { veriClaim . id } } < / h2 > < div class = "text-sm" >
< div class = "text-sm" > < div >
< div > { { capitalizeAndInsertSpacesBeforeCaps ( veriClaim . claimType ) } }
{ { veriClaim . claimType } } < / div >
< / div > < div >
< div > < fa icon = "message" class = "fa-fw text-slate-400" > < / fa >
< fa icon = "message" class = "fa-fw text-slate-400" > < / fa > { { veriClaim . claim ? . description } }
{ { veriClaim . claim ? . description } } < / div >
< / div > < div >
< div > < fa icon = "user" class = "fa-fw text-slate-400" > < / fa >
< fa icon = "user" class = "fa-fw text-slate-400" > < / fa > { { veriClaim . issuer } }
{ { veriClaim . issuer } } < / div >
< / div > < div >
< div > < fa icon = "calendar" class = "fa-fw text-slate-400" > < / fa >
< fa icon = "calendar" class = "fa-fw text-slate-400" > < / fa > { { veriClaim . issuedAt ? . replace ( /T/ , " " ) . replace ( /Z/ , " UTC" ) } }
{ { veriClaim . issuedAt ? . replace ( /T/ , " " ) . replace ( /Z/ , " UTC" ) } }
< / div >
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / div > < / div >
< / div > < / div >
< div > < div class = "h-6 columns-3" >
< button
class = "col-span-1 bg-blue-600 text-white px-4 py-2 rounded-md"
v - if = "userCanConfirm()"
@ click = "confirmClaim(veriClaim.id)"
>
Confirm
< / button >
< button
v - if = "canFulfillOffer()"
@ click = "openGiftDialog()"
class = "col-span-1 block w-fit text-center text-md bg-blue-600 text-white px-1.5 py-2 rounded-md"
>
Record Some Delivered
< / button >
< / div >
< GiftedDialog
ref = "customGiveDialog"
message = "Offer fulfilled by"
: offerId = "veriClaim.handleId"
/ >
< div v-if ="isConfirmable()" >
< h2 class = "font-bold uppercase text-xl mt-8 mb-2" > Confirmations < / h2 > < h2 class = "font-bold uppercase text-xl mt-8 mb-2" > Confirmations < / h2 >
< span v-if ="totalConfirmers() === 0" > Nobody has confirmed this. < / span > < span v-if ="totalConfirmers() === 0" > Nobody has confirmed this. < / span >
@ -71,7 +92,7 @@
< / div > < / div >
< div v-if ="confirmerIdList.length > 0" > < div v-if ="confirmerIdList.length > 0" >
The following people have issued or confirmed this claim . The following people have issued or confirmed this claim .
< ul > < ul class = "ml-4" >
< li < li
v - for = "confirmerId in confirmerIdList" v - for = "confirmerId in confirmerIdList"
: key = "confirmerId" : key = "confirmerId"
@ -98,7 +119,7 @@
< div v-if ="confsVisibleToIdList.length > 0" > < div v-if ="confsVisibleToIdList.length > 0" >
The following people can connect you with people who have issued or The following people can connect you with people who have issued or
confirmed this claim . confirmed this claim .
< ul > < ul class = "ml-4" >
< li < li
v - for = "confsVisibleTo in confsVisibleToIdList" v - for = "confsVisibleTo in confsVisibleToIdList"
: key = "confsVisibleTo" : key = "confsVisibleTo"
@ -116,27 +137,22 @@
< / div > < / div >
< / div > < / div >
< div class = "mt-4" > <!-- explain if user cannot confirm -- >
< div v-if ="confirmerIdList.includes(activeDid)" > <!-- Note that these conditions are mirrored in userCanConfirm ( ) . -- >
You have confirmed this claim . < div v-if ="confirmerIdList.includes(activeDid)" >
< / div > You have confirmed this claim .
< div v -else -if = " containsHiddenDid ( veriClaim.claim ) " > < / div >
You cannot confirm this claim because it contains data that is hidden < div v -else -if = " veriClaim.issuer = = activeDid " >
from you . You cannot confirm this because you issued this claim , so you already
< / div > count as confirming it .
< div v-else > < / div >
< button < div v -else -if = " containsHiddenDid ( veriClaim.claim ) " >
class = "bg-blue-600 text-white mt-4 px-4 py-2 rounded-md mb-4" You cannot confirm this because it contains hidden identifiers .
@ click = "confirmClaim(veriClaim.id)"
>
Confirm Claim
< / button >
< / div >
< / div > < / div >
< / div > < / div >
< div > < div >
< h2 class = "font-bold uppercase text-xl mt-8 mb-2" > Claim < / h2 > < h2 class = "font-bold uppercase text-xl mt-8 mb-2" > Visible Details < / h2 >
< pre < pre
class = "text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md" class = "text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
> { { veriClaimDump } } < / p r e > { { veriClaimDump } } < / p r e
@ -192,6 +208,7 @@ import * as serverUtil from "@/libs/endorserServer";
import QuickNav from "@/components/QuickNav.vue" ; import QuickNav from "@/components/QuickNav.vue" ;
import EntityIcon from "@/components/EntityIcon.vue" ; import EntityIcon from "@/components/EntityIcon.vue" ;
import { Account } from "@/db/tables/accounts" ; import { Account } from "@/db/tables/accounts" ;
import { GiverInputInfo } from "@/libs/endorserServer" ;
interface Notification { interface Notification {
group : string ; group : string ;
@ -210,9 +227,9 @@ export default class ClaimView extends Vue {
allMyDids : Array < string > = [ ] ; allMyDids : Array < string > = [ ] ;
allContacts : Array < Contact > = [ ] ; allContacts : Array < Contact > = [ ] ;
apiServer = "" ; apiServer = "" ;
confirmerIdList = [ ] ; / / l i s t o f D I D s t h a t h a v e c o n f i r m e d t h i s c l a i m e x c l u d i n g t h e i s s u e r confirmerIdList : string [ ] = [ ] ; / / l i s t o f D I D s t h a t h a v e c o n f i r m e d t h i s c l a i m e x c l u d i n g t h e i s s u e r
confsVisibleErrorMessage = "" ; confsVisibleErrorMessage = "" ;
confsVisibleToIdList = [ ] ; / / l i s t o f D I D s t h a t c a n s e e a n y c o n f i r m e r confsVisibleToIdList : string [ ] = [ ] ; / / l i s t o f D I D s t h a t c a n s e e a n y c o n f i r m e r
fullClaim = null ; fullClaim = null ;
fullClaimDump = "" ; fullClaimDump = "" ;
fullClaimMessage = "" ; fullClaimMessage = "" ;
@ -242,7 +259,7 @@ export default class ClaimView extends Vue {
let claimId ; let claimId ;
if ( pathParam ) { if ( pathParam ) {
claimId = decodeURIComponent ( pathParam ) ; claimId = decodeURIComponent ( pathParam ) ;
this . loadClaim ( claimId , identity ) ; await this . loadClaim ( claimId , identity ) ;
} else { } else {
this . $notify ( this . $notify (
{ {
@ -256,6 +273,50 @@ export default class ClaimView extends Vue {
} }
} }
/ / i n s e r t a s p a c e b e f o r e a n y c a p i t a l l e t t e r s e x c e p t t h e i n i t i a l l e t t e r
/ / ( a n d c a p i t a l i z e i n i t i a l l e t t e r , j u s t i n c a s e )
capitalizeAndInsertSpacesBeforeCaps ( text : string ) {
return ! text
? ""
: text [ 0 ] . toUpperCase ( ) + text . substr ( 1 ) . replace ( /([A-Z])/g , " $1" ) ;
}
isConfirmable ( ) {
return this . veriClaim . claimType === "GiveAction" ;
}
userCanConfirm ( ) {
/ / N o t e t h a t t h i s l o g i c i s m i r r o r e d i n t h e t e m p l a t e . L o o k f o r " u s e r C a n C o n f i r m "
return (
this . isConfirmable ( ) &&
! this . confirmerIdList . includes ( this . activeDid ) &&
this . veriClaim . issuer !== this . activeDid &&
! this . containsHiddenDid ( this . veriClaim . claim )
) ;
}
offerGiverDid ( ) : string | undefined {
let giver ;
if (
this . veriClaim . claim . offeredBy ? . identifier &&
! serverUtil . isHiddenDid (
this . veriClaim . claim . offeredBy . identifier as string ,
)
) {
giver = this . veriClaim . claim . offeredBy . identifier ;
} else if (
this . veriClaim . issuer &&
! serverUtil . isHiddenDid ( this . veriClaim . issuer )
) {
giver = this . veriClaim . issuer ;
}
return giver ;
}
canFulfillOffer ( ) {
return this . veriClaim . claimType === "Offer" && this . offerGiverDid ( ) ;
}
totalConfirmers ( ) { totalConfirmers ( ) {
return ( return (
this . numConfsNotVisible + this . numConfsNotVisible +
@ -313,7 +374,7 @@ export default class ClaimView extends Vue {
this . veriClaimDump = yaml . dump ( this . veriClaim ) ; this . veriClaimDump = yaml . dump ( this . veriClaim ) ;
} else { } else {
/ / a c t u a l l y , a x i o s t y p i c a l l y t h r o w s a n e r r o r s o w e n e v e r g e t h e r e / / a c t u a l l y , a x i o s t y p i c a l l y t h r o w s a n e r r o r s o w e n e v e r g e t h e r e
console . log ( "Error getting claim:" , resp ) ; console . error ( "Error getting claim:" , resp ) ;
this . $notify ( this . $notify (
{ {
group : "alert" , group : "alert" ,
@ -393,7 +454,7 @@ export default class ClaimView extends Vue {
this . fullClaimDump = yaml . dump ( this . fullClaim ) ; this . fullClaimDump = yaml . dump ( this . fullClaim ) ;
} else { } else {
/ / a c t u a l l y , a x i o s t y p i c a l l y t h r o w s a n e r r o r s o w e n e v e r g e t h e r e / / a c t u a l l y , a x i o s t y p i c a l l y t h r o w s a n e r r o r s o w e n e v e r g e t h e r e
console . log ( "Error getting full claim:" , resp ) ; console . error ( "Error getting full claim:" , resp ) ;
this . $notify ( this . $notify (
{ {
group : "alert" , group : "alert" ,
@ -466,7 +527,7 @@ export default class ClaimView extends Vue {
5000 , 5000 ,
) ; ) ;
} else { } else {
console . log ( "Got error submitting the confirmation:" , result ) ; console . error ( "Got error submitting the confirmation:" , result ) ;
this . $notify ( this . $notify (
{ {
group : "alert" , group : "alert" ,
@ -479,5 +540,12 @@ export default class ClaimView extends Vue {
} }
} }
} }
openGiftDialog ( ) {
const giver : GiverInputInfo = {
did : this . offerGiverDid ( ) ,
} ;
( this . $refs . customGiveDialog as GiftedDialog ) . open ( giver ) ;
}
} }
< / script > < / script >
