diff --git a/src/components/ActivityListItem.vue b/src/components/ActivityListItem.vue index 177c6ee0..84711194 100644 --- a/src/components/ActivityListItem.vue +++ b/src/components/ActivityListItem.vue @@ -14,19 +14,29 @@ class="flex items-center justify-between gap-2 text-lg bg-slate-200 border border-slate-300 border-b-0 rounded-t-md px-3 sm:px-4 py-1 sm:py-2" > <div class="flex items-center gap-2"> - <EntityIcon + <router-link v-if="record.issuerDid && !isHiddenDid(record.issuerDid)" - :entity-id="record.issuerDid" - class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover" - /> + :to="{ + path: '/did/' + encodeURIComponent(record.issuerDid), + }" + title="More details about this person" + > + <EntityIcon + :entity-id="record.issuerDid" + class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover" + /> + </router-link> <font-awesome v-else-if="isHiddenDid(record.issuerDid)" icon="eye-slash" - class="text-slate-400 !size-[2rem]" + class="text-slate-400 !size-[2rem] cursor-pointer" + @click="notifyHiddenPerson" /> - <font-awesome v-else + <font-awesome + v-else icon="person-circle-question" - class="text-slate-400 !size-[2rem]" + class="text-slate-400 !size-[2rem] cursor-pointer" + @click="notifyUnknownPerson" /> <div> @@ -78,22 +88,37 @@ <div> <!-- Project Icon --> <div v-if="record.providerPlanName"> - <ProjectIcon - :entity-id="record.providerPlanName" - :icon-size="48" - class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full" - /> + <router-link + :to="{ + path: '/project/' + encodeURIComponent(record.providerPlanHandleId || ''), + }" + title="View project details" + > + <ProjectIcon + :entity-id="record.providerPlanHandleId || ''" + :icon-size="48" + class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full" + /> + </router-link> </div> <!-- Identicon for DIDs --> <div v-else-if="record.agentDid"> - <EntityIcon + <router-link v-if="!isHiddenDid(record.agentDid)" - :entity-id="record.agentDid" - :profile-image-url="record.issuer.profileImageUrl" - class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]" - /> + :to="{ + path: '/did/' + encodeURIComponent(record.agentDid), + }" + title="More details about this person" + > + <EntityIcon + :entity-id="record.agentDid" + :profile-image-url="record.issuer.profileImageUrl" + class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]" + /> + </router-link> <font-awesome v-else + @click="notifyHiddenPerson" icon="eye-slash" class="text-slate-300 !size-[3rem] sm:!size-[4rem]" /> @@ -101,6 +126,7 @@ <!-- Unknown Person --> <div v-else> <font-awesome + @click="notifyUnknownPerson" icon="person-circle-question" class="text-slate-300 text-[3rem] sm:text-[4rem]" /> @@ -146,22 +172,37 @@ <div> <!-- Project Icon --> <div v-if="record.recipientProjectName"> - <ProjectIcon - :entity-id="record.recipientProjectName" - :icon-size="48" - class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full" - /> + <router-link + :to="{ + path: '/project/' + encodeURIComponent(record.fulfillsPlanHandleId || ''), + }" + title="View project details" + > + <ProjectIcon + :entity-id="record.fulfillsPlanHandleId || ''" + :icon-size="48" + class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full" + /> + </router-link> </div> <!-- Identicon for DIDs --> <div v-else-if="record.recipientDid"> - <EntityIcon + <router-link v-if="!isHiddenDid(record.recipientDid)" - :entity-id="record.recipientDid" - :profile-image-url="record.receiver.profileImageUrl" - class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]" - /> + :to="{ + path: '/did/' + encodeURIComponent(record.recipientDid), + }" + title="More details about this person" + > + <EntityIcon + :entity-id="record.recipientDid" + :profile-image-url="record.receiver.profileImageUrl" + class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]" + /> + </router-link> <font-awesome v-else + @click="notifyHiddenPerson" icon="eye-slash" class="text-slate-300 !size-[3rem] sm:!size-[4rem]" /> @@ -169,6 +210,7 @@ <!-- Unknown Person --> <div v-else> <font-awesome + @click="notifyUnknownPerson" icon="person-circle-question" class="text-slate-300 text-[3rem] sm:text-[4rem]" /> @@ -205,6 +247,7 @@ import EntityIcon from "./EntityIcon.vue"; import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util"; import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer"; import ProjectIcon from "./ProjectIcon.vue"; +import { NotificationIface } from "../constants/app"; @Component({ components: { @@ -220,6 +263,31 @@ export default class ActivityListItem extends Vue { @Prop() confirmerIdList?: string[]; isHiddenDid = isHiddenDid; + $notify!: (notification: NotificationIface, timeout?: number) => void; + + notifyHiddenPerson() { + this.$notify( + { + group: "alert", + type: "warning", + title: "Hidden Person", + text: "This person is not visible to you.", + }, + 3000 + ); + } + + notifyUnknownPerson() { + this.$notify( + { + group: "alert", + type: "warning", + title: "Unknown Person", + text: "This person is not known.", + }, + 3000 + ); + } @Emit() cacheImage(image: string) {