Browse Source

on home page: fix images for all persons, remove excessive verbiage, fix project icon, allow click on image to close

app_id_fix
Trent Larson 4 days ago
parent
commit
071792b97c
  1. 167
      src/components/ActivityListItem.vue
  2. 2
      src/components/ImageViewer.vue
  3. 2
      src/main.ts
  4. 15
      src/types/index.ts
  5. 27
      src/views/HomeView.vue

167
src/components/ActivityListItem.vue

@ -12,15 +12,21 @@
<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4"> <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
<div class="flex items-center gap-2 mb-6"> <div class="flex items-center gap-2 mb-6">
<img
src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg" <div v-if="record.issuerDid">
class="size-8 object-cover rounded-full" <EntityIcon
/> :entity-id="record.issuerDid"
class="rounded size-[3rem] sm:size-[4rem] object-cover"
/>
</div>
<div v-else>
<font-awesome icon="person-circle-question" class="text-slate-300 text-[3rem] sm:text-[4rem]" />
</div>
<div> <div>
<h3 class="font-semibold"> <h3 class="font-semibold">
{{ {{
record.giver.known ? record.giver.displayName : "Anonymous Giver" record.issuer.known ? record.issuer.displayName : ""
}} }}
</h3> </h3>
<p class="ms-auto text-xs text-slate-500 italic"> <p class="ms-auto text-xs text-slate-500 italic">
@ -54,48 +60,40 @@
class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3" class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
> >
<div class="relative w-fit mx-auto"> <div class="relative w-fit mx-auto">
<template v-if="record.giver.profileImageUrl"> <div>
<EntityIcon
:profile-image-url="record.giver.profileImageUrl"
:class="[
!record.providerPlanName
? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
: 'rounded size-[3rem] sm:size-[4rem] object-cover',
]"
/>
</template>
<template v-else>
<!-- Project Icon --> <!-- Project Icon -->
<template v-if="record.providerPlanName"> <div v-if="record.providerPlanName">
<ProjectIcon <ProjectIcon
:entity-id="record.providerPlanName" :entity-id="record.providerPlanName"
:icon-size="48" :icon-size="48"
class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full" class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
/> />
</template> </div>
<!-- Identicon for DIDs --> <!-- Identicon for DIDs -->
<template v-else-if="record.giver.did"> <div v-else-if="record.agentDid">
<img <EntityIcon
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`" :entity-id="record.agentDid"
class="rounded-full size-[3rem] sm:size-[4rem]" :profile-image-url="record.issuer.profileImageUrl"
alt="Identicon" class="rounded size-[3rem] sm:size-[4rem]"
/> />
</template> </div>
<!-- Unknown Person --> <!-- Unknown Person -->
<template v-else> <div v-else>
<font-awesome <font-awesome
icon="person-circle-question" icon="person-circle-question"
class="text-slate-300 text-[3rem] sm:text-[4rem]" class="text-slate-300 text-[3rem] sm:text-[4rem]"
/> />
</template> </div>
</template> </div>
</div> </div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"> <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<font-awesome <div v-if="record.providerPlanName || record.giver.known">
:icon="record.providerPlanName ? 'building' : 'user'" <font-awesome
class="fa-fw text-slate-400" :icon="record.providerPlanName ? 'users' : 'user'"
/> class="fa-fw text-slate-400"
{{ record.giver.displayName }} />
{{ record.providerPlanName || record.giver.displayName }}
</div>
</div> </div>
</div> </div>
@ -123,48 +121,40 @@
class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3" class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
> >
<div class="relative w-fit mx-auto"> <div class="relative w-fit mx-auto">
<template v-if="record.receiver.profileImageUrl"> <div>
<EntityIcon
:profile-image-url="record.receiver.profileImageUrl"
:class="[
!record.recipientProjectName
? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
: 'rounded size-[3rem] sm:size-[4rem] object-cover',
]"
/>
</template>
<template v-else>
<!-- Project Icon --> <!-- Project Icon -->
<template v-if="record.recipientProjectName"> <div v-if="record.recipientProjectName">
<ProjectIcon <ProjectIcon
:entity-id="record.recipientProjectName" :entity-id="record.recipientProjectName"
:icon-size="48" :icon-size="48"
class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full" class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
/> />
</template> </div>
<!-- Identicon for DIDs --> <!-- Identicon for DIDs -->
<template v-else-if="record.receiver.did"> <div v-else-if="record.recipientDid">
<img <EntityIcon
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`" :entity-id="record.recipientDid"
class="rounded-full size-[3rem] sm:size-[4rem]" :profile-image-url="record.receiver.profileImageUrl"
alt="Identicon" class="rounded size-[3rem] sm:size-[4rem]"
/> />
</template> </div>
<!-- Unknown Person --> <!-- Unknown Person -->
<template v-else> <div v-else>
<font-awesome <font-awesome
icon="person-circle-question" icon="person-circle-question"
class="text-slate-300 text-[3rem] sm:text-[4rem]" class="text-slate-300 text-[3rem] sm:text-[4rem]"
/> />
</template> </div>
</template> </div>
</div> </div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"> <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<font-awesome <div v-if="record.recipientProjectName || record.receiver.known">
:icon="record.recipientProjectName ? 'building' : 'user'" <font-awesome
class="fa-fw text-slate-400" :icon="record.recipientProjectName ? 'users' : 'user'"
/> class="fa-fw text-slate-400"
{{ record.receiver.displayName }} />
{{ record.recipientProjectName || record.receiver.displayName }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -175,7 +165,6 @@
{{ description }} {{ description }}
</a> </a>
</p> </p>
<p class="text-sm">{{ subDescription }}</p>
</div> </div>
<div <div
@ -220,53 +209,6 @@ export default class ActivityListItem extends Vue {
return amount; return amount;
} }
private formatParticipantInfo(): string {
const { giver, receiver } = this.record;
// Both participants are known contacts
if (giver.known && receiver.known) {
return `${giver.displayName} gave to ${receiver.displayName}`;
}
// Only giver is known
if (giver.known) {
const recipient = this.record.recipientProjectName
? `the project "${this.record.recipientProjectName}"`
: receiver.displayName;
return `${giver.displayName} gave to ${recipient}`;
}
// Only receiver is known
if (receiver.known) {
const provider = this.record.providerPlanName
? `the project "${this.record.providerPlanName}"`
: giver.displayName;
return `${receiver.displayName} received from ${provider}`;
}
// Neither is known
return this.formatUnknownParticipants();
}
private formatUnknownParticipants(): string {
const { giver, receiver, providerPlanName, recipientProjectName } =
this.record;
if (providerPlanName || recipientProjectName) {
const from = providerPlanName
? `the project "${providerPlanName}"`
: giver.displayName;
const to = recipientProjectName
? `the project "${recipientProjectName}"`
: receiver.displayName;
return `from ${from} to ${to}`;
}
return giver.displayName === receiver.displayName
? `between two who are ${giver.displayName}`
: `from ${giver.displayName} to ${receiver.displayName}`;
}
get description(): string { get description(): string {
const claim = const claim =
(this.record.fullClaim as unknown).claim || this.record.fullClaim; (this.record.fullClaim as unknown).claim || this.record.fullClaim;
@ -278,12 +220,6 @@ export default class ActivityListItem extends Vue {
return `${claim.description}`; return `${claim.description}`;
} }
get subDescription(): string {
const participants = this.formatParticipantInfo();
return `${participants}`;
}
private displayAmount(code: string, amt: number) { private displayAmount(code: string, amt: number) {
return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`; return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
} }
@ -292,11 +228,6 @@ export default class ActivityListItem extends Vue {
return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode; return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
} }
get formattedTimestamp() {
// Add your timestamp formatting logic here
return this.record.timestamp;
}
get canConfirm(): boolean { get canConfirm(): boolean {
if (!this.isRegistered) return false; if (!this.isRegistered) return false;
if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false; if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;

2
src/components/ImageViewer.vue

@ -28,7 +28,7 @@
:src="imageUrl" :src="imageUrl"
class="max-h-[calc(100vh-5rem)] w-full h-full object-contain" class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
alt="expanded shared content" alt="expanded shared content"
@click.stop @click="close"
/> />
</div> </div>
</div> </div>

2
src/main.ts

@ -87,7 +87,6 @@ import {
faUser, faUser,
faUsers, faUsers,
faXmark, faXmark,
faBuilding,
} from "@fortawesome/free-solid-svg-icons"; } from "@fortawesome/free-solid-svg-icons";
library.add( library.add(
@ -168,7 +167,6 @@ library.add(
faUser, faUser,
faUsers, faUsers,
faXmark, faXmark,
faBuilding,
); );
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

15
src/types/index.ts

@ -1,11 +1,18 @@
export interface GiveRecordWithContactInfo { import { GiveSummaryRecord, GiveVerifiableCredential } from "interfaces";
export interface GiveRecordWithContactInfo extends GiveSummaryRecord {
jwtId: string; jwtId: string;
fullClaim: unknown; // Replace with proper type fullClaim: GiveVerifiableCredential;
giver: { giver: {
known: boolean; known: boolean;
displayName: string; displayName: string;
profileImageUrl?: string; profileImageUrl?: string;
}; };
issuer: {
known: boolean;
displayName: string;
profileImageUrl?: string;
};
receiver: { receiver: {
known: boolean; known: boolean;
displayName: string; displayName: string;
@ -13,8 +20,6 @@ export interface GiveRecordWithContactInfo {
}; };
providerPlanName?: string; providerPlanName?: string;
recipientProjectName?: string; recipientProjectName?: string;
description?: string; description: string;
subDescription?: string;
image?: string; image?: string;
timestamp: string;
} }

27
src/views/HomeView.vue

@ -341,25 +341,10 @@ import {
} from "../libs/util"; } from "../libs/util";
import { GiveSummaryRecord } from "../interfaces"; import { GiveSummaryRecord } from "../interfaces";
import * as serverUtil from "../libs/endorserServer"; import * as serverUtil from "../libs/endorserServer";
// import { fa0 } from "@fortawesome/free-solid-svg-icons";
interface GiveRecordWithContactInfo extends GiveSummaryRecord {
jwtId: string;
giver: {
displayName: string;
known: boolean;
profileImageUrl?: string;
};
image?: string;
providerPlanName?: string;
recipientProjectName?: string;
receiver: {
displayName: string;
known: boolean;
profileImageUrl?: string;
};
}
import { logger } from "../utils/logger"; import { logger } from "../utils/logger";
import { GiveRecordWithContactInfo } from "types";
/** /**
* HomeView - Main view component for the application's home page * HomeView - Main view component for the application's home page
* *
@ -821,6 +806,12 @@ export default class HomeView extends Vue {
this.allMyDids, this.allMyDids,
), ),
image: claim.image, image: claim.image,
issuer: didInfoForContact(
record.issuerDid,
this.activeDid,
contactForDid(record.issuerDid, this.allContacts),
this.allMyDids,
),
providerPlanHandleId: provider?.identifier as string, providerPlanHandleId: provider?.identifier as string,
providerPlanName: providedByPlan?.name as string, providerPlanName: providedByPlan?.name as string,
recipientProjectName: fulfillsPlan?.name as string, recipientProjectName: fulfillsPlan?.name as string,

Loading…
Cancel
Save