forked from trent_larson/crowd-funder-for-time-pwa
refactor: extract ActivityListItem into separate component
- 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.
This commit is contained in:
Matthew Raymer
@@ -250,221 +250,15 @@
|
||||
|
||||
<InfiniteScroll @reached-bottom="loadMoreGives">
|
||||
<ul id="listLatestActivity" class="space-y-4">
|
||||
<li v-for="record in feedData" :key="record.jwtId">
|
||||
<div
|
||||
class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
|
||||
v-if="record.jwtId == feedLastViewedClaimId"
|
||||
>
|
||||
<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">
|
||||
<!-- If source is unknown/anonymous… -->
|
||||
<fa
|
||||
icon="circle-question"
|
||||
class="text-slate-300 text-5xl sm:text-8xl"
|
||||
/>
|
||||
<!-- Otherwise… -->
|
||||
<!-- If user, add class="rounded-full". Otherwise, add class="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"
|
||||
>
|
||||
<!-- If user, icon="user"; if project, icon="hammer" -->
|
||||
<fa icon="user" class="fa-fw text-white" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-2">[SOURCE_NAME]</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">
|
||||
<!-- If user, add class="rounded-full". Otherwise, add class="rounded" -->
|
||||
<img
|
||||
src="https://placehold.co/600x400?text=(Project Image)"
|
||||
class="size-12 sm:size-24 object-cover 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"
|
||||
>
|
||||
<!-- If user, icon="user"; if project, icon="hammer" -->
|
||||
<fa icon="hammer" class="fa-fw text-white" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-2">
|
||||
[DESTINATION_NAME]
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="font-medium">
|
||||
<a
|
||||
@click="onClickLoadClaim(record.jwtId)"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
{{ giveDescription(record) }}
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-sm">[SUB_DESCRIPTION]</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="openImageViewer(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="cacheImageData($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"
|
||||
>
|
||||
<!-- Claim Details Link -->
|
||||
<a @click="onClickLoadClaim(record.jwtId)" class="cursor-pointer">
|
||||
<fa icon="circle-info" class="fa-fw text-slate-500" />
|
||||
</a>
|
||||
|
||||
<!-- Timestamp -->
|
||||
<span
|
||||
class="ms-auto text-xs text-slate-500 italic"
|
||||
title="8888-88-88 88:88:88"
|
||||
>[TIMESTAMP]</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="grid grid-cols-12">
|
||||
<span class="pt-1 col-span-1 justify-self-start">
|
||||
<span>
|
||||
<fa
|
||||
icon="circle-user"
|
||||
:class="
|
||||
computeKnownPersonIconStyleClassNames(
|
||||
record.giver.known || record.receiver.known,
|
||||
)
|
||||
"
|
||||
@click="toastUser('This involves your contacts.')"
|
||||
/>
|
||||
<fa
|
||||
icon="gift"
|
||||
class="pl-3 text-slate-500"
|
||||
@click="toastUser('This is a gift.')"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
<span class="col-span-10 justify-self-stretch overflow-hidden">
|
||||
<span
|
||||
v-if="
|
||||
record.giver.profileImageUrl ||
|
||||
record.receiver.profileImageUrl
|
||||
"
|
||||
>
|
||||
<EntityIcon
|
||||
v-if="record.agentDid !== activeDid"
|
||||
:icon-size="32"
|
||||
:profile-image-url="record.giver.profileImageUrl"
|
||||
class="inline-block align-middle border border-slate-300 rounded-md mr-1"
|
||||
/>
|
||||
<fa
|
||||
v-if="
|
||||
record.agentDid !== activeDid &&
|
||||
record.recipientDid !== activeDid &&
|
||||
!record.fulfillsPlanHandleId
|
||||
"
|
||||
icon="ellipsis"
|
||||
class="text-slate"
|
||||
/>
|
||||
<EntityIcon
|
||||
v-if="
|
||||
record.recipientDid !== activeDid &&
|
||||
!record.fulfillsPlanHandleId
|
||||
"
|
||||
:iconSize="32"
|
||||
:profile-image-url="record.receiver.profileImageUrl"
|
||||
class="inline-block align-middle border border-slate-300 rounded-md ml-1"
|
||||
/>
|
||||
</span>
|
||||
<span class="pl-2 block break-words">
|
||||
{{ giveDescription(record) }}
|
||||
</span>
|
||||
<a @click="onClickLoadClaim(record.jwtId)">
|
||||
<fa
|
||||
icon="file-lines"
|
||||
class="pl-2 text-slate-500 cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span class="col-span-1 justify-self-end">
|
||||
<router-link
|
||||
v-if="record.fulfillsPlanHandleId"
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(record.fulfillsPlanHandleId)
|
||||
"
|
||||
>
|
||||
<fa icon="hammer" class="text-blue-500" />
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="record.providerPlanHandleId"
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(record.providerPlanHandleId)
|
||||
"
|
||||
>
|
||||
<fa icon="hammer" class="text-blue-500" />
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="record.image" class="w-full">
|
||||
<div
|
||||
class="cursor-pointer"
|
||||
@click="openImageViewer(record.image)"
|
||||
>
|
||||
<img
|
||||
:src="record.image"
|
||||
class="w-full aspect-[3/2] object-cover rounded-xl mt-2"
|
||||
alt="shared content"
|
||||
@load="cacheImageData($event, record.image)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</li>
|
||||
<ActivityListItem
|
||||
v-for="record in feedData"
|
||||
:key="record.jwtId"
|
||||
:record="record"
|
||||
:lastViewedClaimId="feedLastViewedClaimId"
|
||||
@loadClaim="onClickLoadClaim"
|
||||
@viewImage="openImageViewer"
|
||||
@cacheImage="cacheImageData"
|
||||
/>
|
||||
</ul>
|
||||
</InfiniteScroll>
|
||||
<div v-if="isFeedLoading">
|
||||
@@ -506,6 +300,7 @@ import TopMessage from "../components/TopMessage.vue";
|
||||
import UserNameDialog from "../components/UserNameDialog.vue";
|
||||
import ChoiceButtonDialog from "../components/ChoiceButtonDialog.vue";
|
||||
import ImageViewer from "../components/ImageViewer.vue";
|
||||
import ActivityListItem from "../components/ActivityListItem.vue";
|
||||
import {
|
||||
AppString,
|
||||
NotificationIface,
|
||||
@@ -572,6 +367,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
|
||||
TopMessage,
|
||||
UserNameDialog,
|
||||
ImageViewer,
|
||||
ActivityListItem,
|
||||
},
|
||||
})
|
||||
export default class HomeView extends Vue {
|
||||
|
||||
Reference in New Issue
Block a user