jsnbuchanan
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

Trent Larson 7 months ago
parent
bf2f23021f
commit
071792b97c
5 changed files with 69 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 153
      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

153
src/components/ActivityListItem.vue
View File

@ -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">
<div v-if="record.providerPlanName || record.giver.known">
<font-awesome <font-awesome
:icon="record.providerPlanName ? 'building' : 'user'" :icon="record.providerPlanName ? 'users' : 'user'"
class="fa-fw text-slate-400" 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">
<div v-if="record.recipientProjectName || record.receiver.known">
<font-awesome <font-awesome
:icon="record.recipientProjectName ? 'building' : 'user'" :icon="record.recipientProjectName ? 'users' : 'user'"
class="fa-fw text-slate-400" 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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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,

Write Preview
Loading…
Cancel
Save