From fccffa14aa864c4e8f3f0c00534833e10e847c26 Mon Sep 17 00:00:00 2001 From: Akiff Manji Date: Thu, 24 Oct 2024 16:54:05 +0000 Subject: [PATCH] feat: add credential link an raw data for w3c credential items Signed-off-by: Akiff Manji --- src/components/entity/CredentialItem.vue | 165 ++++++++++-------- src/components/entity/EntityResult.vue | 2 +- .../credentialDetail/CredentialDetail.vue | 163 +++++++++-------- src/interfaces/api/v4/credential.interface.ts | 3 + src/utils/entity.ts | 1 + 5 files changed, 186 insertions(+), 148 deletions(-) diff --git a/src/components/entity/CredentialItem.vue b/src/components/entity/CredentialItem.vue index f9b6b8e..4016165 100644 --- a/src/components/entity/CredentialItem.vue +++ b/src/components/entity/CredentialItem.vue @@ -14,13 +14,13 @@

{{ topicName }}

 - +

- {{ credTitle["key"] }}: + {{ getCredentialTitle["key"] }}: {{ translateValue( - credTitle["accessor"], - credTitle["value"], + getCredentialTitle["accessor"], + getCredentialTitle["value"], entityType ) }} @@ -36,10 +36,10 @@ }" >

-
+
Authority
- + {{ getAuthority }} {{ mdiOpenInNew }} @@ -50,7 +50,7 @@
- {{ + {{ mdiShieldCheckOutline }} Credential verified claims + >Credential verified claims + +
+
+ {{ mdiOpenInNew }} + + Credential link +
Effective:  @@ -111,14 +121,15 @@ import { isExpired, toTranslationFormat } from "@/utils/entity"; }, }) export default class CredentialItem extends Vue { - @Prop({}) cred!: ICredentialDisplayType; + @Prop({}) credential!: ICredentialDisplayType; @Prop({ default: "" }) entityType!: string; @Prop({ default: "" }) authority!: string; @Prop({ default: "" }) authorityLink!: string; @Prop({ default: "" }) effectiveDate!: string; + @Prop({ default: "" }) credentialId!: number; @Prop({ default: false }) expired!: boolean; - @Prop({ default: "" }) credId!: number; + @Prop({ default: false }) revoked!: boolean; @Prop({ default: false }) disableDefaultHeader!: boolean; @Prop({ default: false }) timeline!: boolean; @@ -131,25 +142,15 @@ export default class CredentialItem extends Vue { toTranslationFormate = toTranslationFormat; $translate = $translate; - get getAuthorityLink(): string | URL { - return this.cred ? this.cred.authorityLink : this.authorityLink; - } - get getAuthority(): string { - return this.cred ? this.cred.authority : this.authority; + return this.credential ? this.credential.authority : this.authority; } - get getCredRevoked(): boolean { - return this.cred - ? this.cred.revoked || !!this.isExpired(this.cred.attributes) - : this.expired; - } - - get getCredId(): number { - return this.cred ? this.cred.id : this.credId; + get getAuthorityLink(): string | URL { + return this.credential ? this.credential.authorityLink : this.authorityLink; } - get sourceId(): string { + get topicSourceId(): string { const { sourceId } = this.$route.params; return sourceId; } @@ -160,67 +161,46 @@ export default class CredentialItem extends Vue { } get topicName(): string | undefined { - if (!this.cred) { + if (!this.credential) { return undefined; } - let ret = this.cred.value as string | undefined; - if (this.cred.type !== "entity_name") { + let ret = this.credential.value as string | undefined; + if (this.credential.type !== "entity_name") { ret = this.selectedTopic.names[0]?.text; } return ret; } - getClaimLabel( - id: number, - claimLabel: string | undefined - ): string | undefined { - const credentialType = selectFirstAttrItem( - { key: "id", value: id }, - this.credentialTypes - ); - // TODO: Eventually this should be a translation from OCA - if (credentialType?.format === "vc_di") { - return claimLabel; - } else if (credentialType && claimLabel) { - return credentialType?.claim_labels?.[claimLabel]?.[i18n.locale]; - } + get getCredentialId(): number { + return this.credential ? this.credential.id : this.credentialId; } - translateValue( - accessor: string, - val: string, - entityType: string - ): string | TranslateResult { - // need entity type to properly translate due to LEAR entries - const res = $translate( - toTranslationFormat(accessor + "." + val, entityType) - ); - if (res != toTranslationFormat(accessor + "." + val, entityType)) { - return res; - } - return val; + get getCredentialRevoked(): boolean { + return this.credential + ? this.credential.revoked || !!this.isExpired(this.credential.attributes) + : this.expired; } - get credTitle(): Record | undefined { - if (!this.cred) { + get getCredentialTitle(): Record | undefined { + if (!this.credential) { return undefined; } let retval: { [index: string]: string | undefined } = {}; - const claimLabel = this.getClaimLabel( - this.cred.credential_type_id, - this.cred.credential_title + const claimLabel = this.claimLabelFromId( + this.credential.credential_type_id, + this.credential.credential_title ); - const default_title = this.cred.rel_id - ? { "Relationship description": this.cred.rel_id as string } - : { "Registration number": this.sourceId }; + const default_title = this.credential.rel_id + ? { "Relationship description": this.credential.rel_id as string } + : { "Registration number": this.topicSourceId }; if (claimLabel === undefined) { retval = default_title; } else { let value = selectFirstAttrItem( - { key: "type", value: this.cred.credential_title }, - this.cred.attributes + { key: "type", value: this.credential.credential_title }, + this.credential.attributes ); if (value?.format === "datetime") { value.value = value.value as string; @@ -232,7 +212,9 @@ export default class CredentialItem extends Vue { retval = default_title; } } - let accessor = this.cred.credential_title ? this.cred.credential_title : ""; + let accessor = this.credential.credential_title + ? this.credential.credential_title + : ""; return { key: Object.keys(retval)[0], value: retval[Object.keys(retval)[0]] as string, @@ -240,22 +222,22 @@ export default class CredentialItem extends Vue { }; } - get highlightedAttr(): Record[] | undefined { - if (!this.cred) { + get highlightedAttributes(): Record[] | undefined { + if (!this.credential) { return undefined; } let retval: Record[] = []; - if (this.cred.highlighted_attributes) { - this.cred.highlighted_attributes.forEach((accessor) => { - const attrLabel = this.getClaimLabel( - this.cred.credential_type_id, + if (this.credential.highlighted_attributes) { + this.credential.highlighted_attributes.forEach((accessor) => { + const attrLabel = this.claimLabelFromId( + this.credential.credential_type_id, accessor ); let attrValue = ""; if (attrLabel) { const match = selectFirstAttrItem( { key: "type", value: accessor }, - this.cred.attributes + this.credential.attributes ); if (match?.format === "datetime") { attrValue = dateFilter(match.value as string) as string; @@ -275,6 +257,37 @@ export default class CredentialItem extends Vue { } return retval; } + + claimLabelFromId( + id: number, + claimLabel: string | undefined + ): string | undefined { + const credentialType = selectFirstAttrItem( + { key: "id", value: id }, + this.credentialTypes + ); + // TODO: Eventually this should be a translation from OCA + if (credentialType?.format === "vc_di") { + return claimLabel; + } else if (credentialType && claimLabel) { + return credentialType?.claim_labels?.[claimLabel]?.[i18n.locale]; + } + } + + translateValue( + accessor: string, + val: string, + entityType: string + ): string | TranslateResult { + // need entity type to properly translate due to LEAR entries + const res = $translate( + toTranslationFormat(accessor + "." + val, entityType) + ); + if (res != toTranslationFormat(accessor + "." + val, entityType)) { + return res; + } + return val; + } } diff --git a/src/components/entity/EntityResult.vue b/src/components/entity/EntityResult.vue index f384ced..9e4fafa 100644 --- a/src/components/entity/EntityResult.vue +++ b/src/components/entity/EntityResult.vue @@ -389,7 +389,7 @@ >