trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 6 Releases 5 Wiki Activity
Browse Source

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

master
Trent Larson 1 day 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
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="flex items-center gap-2 mb-6">
<img
src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg"
class="size-8 object-cover rounded-full"
/>
<div v-if="record.issuerDid">
<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>
<h3 class="font-semibold">
{{
record.giver.known ? record.giver.displayName : "Anonymous Giver"
record.issuer.known ? record.issuer.displayName : ""
}}
</h3>
<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"
>
<div class="relative w-fit mx-auto">
<template v-if="record.giver.profileImageUrl">
<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>
<div>
<!-- Project Icon -->
<template v-if="record.providerPlanName">
<div v-if="record.providerPlanName">
<ProjectIcon
:entity-id="record.providerPlanName"
:icon-size="48"
class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
/>
</template>
</div>
<!-- Identicon for DIDs -->
<template v-else-if="record.giver.did">
<img
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
class="rounded-full size-[3rem] sm:size-[4rem]"
alt="Identicon"
<div v-else-if="record.agentDid">
<EntityIcon
:entity-id="record.agentDid"
:profile-image-url="record.issuer.profileImageUrl"
class="rounded size-[3rem] sm:size-[4rem]"
/>
</template>
</div>
<!-- Unknown Person -->
<template v-else>
<div v-else>
<font-awesome
icon="person-circle-question"
class="text-slate-300 text-[3rem] sm:text-[4rem]"
/>
</template>
</template>
</div>
</div>
</div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<font-awesome
:icon="record.providerPlanName ? 'building' : 'user'"
class="fa-fw text-slate-400"
/>
{{ record.giver.displayName }}
<div v-if="record.providerPlanName || record.giver.known">
<font-awesome
:icon="record.providerPlanName ? 'users' : 'user'"
class="fa-fw text-slate-400"
/>
{{ record.providerPlanName || record.giver.displayName }}
</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"
>
<div class="relative w-fit mx-auto">
<template v-if="record.receiver.profileImageUrl">
<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>
<div>
<!-- Project Icon -->
<template v-if="record.recipientProjectName">
<div v-if="record.recipientProjectName">
<ProjectIcon
:entity-id="record.recipientProjectName"
:icon-size="48"
class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
/>
</template>
</div>
<!-- Identicon for DIDs -->
<template v-else-if="record.receiver.did">
<img
:src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
class="rounded-full size-[3rem] sm:size-[4rem]"
alt="Identicon"
<div v-else-if="record.recipientDid">
<EntityIcon
:entity-id="record.recipientDid"
:profile-image-url="record.receiver.profileImageUrl"
class="rounded size-[3rem] sm:size-[4rem]"
/>
</template>
</div>
<!-- Unknown Person -->
<template v-else>
<div v-else>
<font-awesome
icon="person-circle-question"
class="text-slate-300 text-[3rem] sm:text-[4rem]"
/>
</template>
</template>
</div>
</div>
</div>
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
<font-awesome
:icon="record.recipientProjectName ? 'building' : 'user'"
class="fa-fw text-slate-400"
/>
{{ record.receiver.displayName }}
<div v-if="record.recipientProjectName || record.receiver.known">
<font-awesome
:icon="record.recipientProjectName ? 'users' : 'user'"
class="fa-fw text-slate-400"
/>
{{ record.recipientProjectName || record.receiver.displayName }}
</div>
</div>
</div>
</div>
@ -175,7 +165,6 @@
{{ description }}
</a>
</p>
<p class="text-sm">{{ subDescription }}</p>
</div>
<div
@ -220,53 +209,6 @@ export default class ActivityListItem extends Vue {
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 {
const claim =
(this.record.fullClaim as unknown).claim || this.record.fullClaim;
@ -278,12 +220,6 @@ export default class ActivityListItem extends Vue {
return `${claim.description}`;
}
get subDescription(): string {
const participants = this.formatParticipantInfo();
return `${participants}`;
}
private displayAmount(code: string, amt: number) {
return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
}
@ -292,11 +228,6 @@ export default class ActivityListItem extends Vue {
return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
}
get formattedTimestamp() {
// Add your timestamp formatting logic here
return this.record.timestamp;
}
get canConfirm(): boolean {
if (!this.isRegistered) return false;
if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;

2
src/components/ImageViewer.vue
View File

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

2
src/main.ts
View File

@ -87,7 +87,6 @@ import {
faUser,
faUsers,
faXmark,
faBuilding,
} from "@fortawesome/free-solid-svg-icons";
library.add(
@ -168,7 +167,6 @@ library.add(
faUser,
faUsers,
faXmark,
faBuilding,
);
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;
fullClaim: unknown; // Replace with proper type
fullClaim: GiveVerifiableCredential;
giver: {
known: boolean;
displayName: string;
profileImageUrl?: string;
};
issuer: {
known: boolean;
displayName: string;
profileImageUrl?: string;
};
receiver: {
known: boolean;
displayName: string;
@ -13,8 +20,6 @@ export interface GiveRecordWithContactInfo {
};
providerPlanName?: string;
recipientProjectName?: string;
description?: string;
subDescription?: string;
description: string;
image?: string;
timestamp: string;
}

27
src/views/HomeView.vue
View File

@ -341,25 +341,10 @@ import {
} from "../libs/util";
import { GiveSummaryRecord } from "../interfaces";
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 { GiveRecordWithContactInfo } from "types";
/**
* HomeView - Main view component for the application's home page
*
@ -821,6 +806,12 @@ export default class HomeView extends Vue {
this.allMyDids,
),
image: claim.image,
issuer: didInfoForContact(
record.issuerDid,
this.activeDid,
contactForDid(record.issuerDid, this.allContacts),
this.allMyDids,
),
providerPlanHandleId: provider?.identifier as string,
providerPlanName: providedByPlan?.name as string,
recipientProjectName: fulfillsPlan?.name as string,

Write Preview
Loading…
Cancel
Save