Browse Source

Clickable person & project icons

- Known entities get routed to their corresponding detail views
- Unknown entities pop up a notification
home-icon-enhancements
Jose Olarte III 5 days ago
parent
commit
92b9c9334c
  1. 122
      src/components/ActivityListItem.vue

122
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) {

Loading…
Cancel
Save