Browse Source
- Move activity list item markup from HomeView to new component - Improve code organization and reusability - Pass required props for claim handling and image viewing - Maintain existing functionality while reducing component complexity - Clean up unused commented code in HomeView This refactor improves code maintainability by extracting the activity feed item logic into its own component.homeview-refresh-2025-02
Matthew Raymer
4 weeks ago
3 changed files with 216 additions and 215 deletions
@ -0,0 +1,185 @@ |
|||
<template> |
|||
<li> |
|||
<!-- Last viewed separator --> |
|||
<div |
|||
class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm" |
|||
v-if="record.jwtId == lastViewedClaimId" |
|||
> |
|||
<span class="block w-fit mx-auto -mb-2.5 bg-white px-2"> |
|||
You've already seen all the following |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4"> |
|||
<div class="relative flex justify-between gap-4 mb-3"> |
|||
<!-- Source --> |
|||
<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"> |
|||
<div class="relative w-fit mx-auto"> |
|||
<fa |
|||
v-if="!record.giver.profileImageUrl" |
|||
icon="circle-question" |
|||
class="text-slate-300 text-5xl sm:text-8xl" |
|||
/> |
|||
<EntityIcon |
|||
v-else |
|||
:icon-size="record.giver.known ? 64 : 32" |
|||
:profile-image-url="record.giver.profileImageUrl" |
|||
:class="record.giver.known ? 'rounded-full' : 'rounded'" |
|||
/> |
|||
<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"> |
|||
<fa :icon="record.giver.known ? 'user' : 'hammer'" class="fa-fw text-white" /> |
|||
</span> |
|||
</div> |
|||
<div class="text-xs mt-2 line-clamp-2">{{ record.giver.displayName }}</div> |
|||
</a> |
|||
|
|||
<!-- Arrow --> |
|||
<div class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center"> |
|||
<hr class="grow border-t-[25px] border-slate-300" /> |
|||
<div class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"></div> |
|||
</div> |
|||
|
|||
<!-- Destination --> |
|||
<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"> |
|||
<div class="relative w-fit mx-auto"> |
|||
<EntityIcon |
|||
:icon-size="record.receiver.known ? 64 : 32" |
|||
:profile-image-url="record.receiver.profileImageUrl" |
|||
:class="record.receiver.known ? 'rounded-full' : 'rounded'" |
|||
/> |
|||
<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"> |
|||
<fa :icon="record.receiver.known ? 'user' : 'hammer'" class="fa-fw text-white" /> |
|||
</span> |
|||
</div> |
|||
<div class="text-xs mt-2 line-clamp-2">{{ record.receiver.displayName }}</div> |
|||
</a> |
|||
</div> |
|||
|
|||
<!-- Description --> |
|||
<p class="font-medium"> |
|||
<a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer"> |
|||
{{ description }} |
|||
</a> |
|||
</p> |
|||
<p class="text-sm">{{ record.subDescription }}</p> |
|||
</div> |
|||
|
|||
<!-- Record Image --> |
|||
<div v-if="record.image" class="bg-cover" :style="`background-image: url(${record.image});`"> |
|||
<a class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer" @click="$emit('viewImage', record.image)"> |
|||
<img |
|||
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md" |
|||
:src="record.image" |
|||
@load="$emit('cacheImage', $event, record.image)" |
|||
/> |
|||
</a> |
|||
</div> |
|||
|
|||
<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"> |
|||
<a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer"> |
|||
<fa icon="circle-info" class="fa-fw text-slate-500" /> |
|||
</a> |
|||
<span class="ms-auto text-xs text-slate-500 italic" :title="record.timestamp"> |
|||
{{ formattedTimestamp }} |
|||
</span> |
|||
</div> |
|||
</li> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Prop, Vue } from 'vue-facing-decorator'; |
|||
import { GiveRecordWithContactInfo } from '../types'; |
|||
import EntityIcon from './EntityIcon.vue'; |
|||
|
|||
@Component({ |
|||
components: { |
|||
EntityIcon |
|||
} |
|||
}) |
|||
export default class ActivityListItem extends Vue { |
|||
@Prop() record!: GiveRecordWithContactInfo; |
|||
@Prop() lastViewedClaimId?: string; |
|||
|
|||
private formatAmount(claim: any): string { |
|||
const amount = claim.object?.amountOfThisGood |
|||
? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood) |
|||
: ""; |
|||
|
|||
if (!claim.description && !amount) { |
|||
return "something not described"; |
|||
} |
|||
|
|||
if (!amount) return claim.description; |
|||
if (!claim.description) return amount; |
|||
|
|||
return `${claim.description} (and ${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 any).claim || this.record.fullClaim; |
|||
const amount = this.formatAmount(claim); |
|||
const participants = this.formatParticipantInfo(); |
|||
|
|||
return `${participants}: ${amount}`; |
|||
} |
|||
|
|||
private displayAmount(code: string, amt: number) { |
|||
return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`; |
|||
} |
|||
|
|||
private currencyShortWordForCode(unitCode: string, single: boolean) { |
|||
return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode; |
|||
} |
|||
|
|||
get formattedTimestamp() { |
|||
// Add your timestamp formatting logic here |
|||
return this.record.timestamp; |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,20 @@ |
|||
export interface GiveRecordWithContactInfo { |
|||
jwtId: string; |
|||
fullClaim: any; // Replace with proper type
|
|||
giver: { |
|||
known: boolean; |
|||
displayName: string; |
|||
profileImageUrl?: string; |
|||
}; |
|||
receiver: { |
|||
known: boolean; |
|||
displayName: string; |
|||
profileImageUrl?: string; |
|||
}; |
|||
providerPlanName?: string; |
|||
recipientProjectName?: string; |
|||
description?: string; |
|||
subDescription?: string; |
|||
image?: string; |
|||
timestamp: string; |
|||
} |
|||
Loading…
Reference in new issue