Merge branch 'homeview-refresh-2025-02'
refactor: Extract ActivityListItem component and add claim confirmation - Move activity list item from HomeView to dedicated component - Add claim confirmation functionality with AgreeAction schema - Update feed data handling for confirmation status - Improve error handling with structured logging - Add user confirmation dialog for claim verification The changes improve code organization by: 1. Separating activity item UI into reusable component 2. Adding proper type definitions for activity records 3. Implementing structured claim confirmation flow 4. Adding user feedback for confirmation actions 5. Improving error handling with logger utility Technical details: - Added ActivityListItem.vue component - Added confirmClaim method with schema.org AgreeAction - Updated feed refresh after confirmation - Added proper TypeScript interfaces - Improved notification handling
This commit is contained in:
Matthew Raymer
334
src/components/ActivityListItem.vue
Normal file
334
src/components/ActivityListItem.vue
Normal file
@@ -0,0 +1,334 @@
|
||||
<template>
|
||||
<li>
|
||||
<!-- Last viewed separator -->
|
||||
<div
|
||||
v-if="record.jwtId == lastViewedClaimId"
|
||||
class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
|
||||
>
|
||||
<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="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>
|
||||
<h3 class="font-semibold">
|
||||
{{
|
||||
record.giver.known ? record.giver.displayName : "Anonymous Giver"
|
||||
}}
|
||||
</h3>
|
||||
<p class="ms-auto text-xs text-slate-500 italic">
|
||||
{{ friendlyDate }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Record Image -->
|
||||
<div
|
||||
v-if="record.image"
|
||||
class="bg-cover mb-6 -mx-3 sm:-mx-4"
|
||||
: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"
|
||||
alt="Activity image"
|
||||
@load="$emit('cacheImage', record.image)"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
|
||||
<!-- Source -->
|
||||
<div
|
||||
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>
|
||||
<!-- Project Icon -->
|
||||
<template v-if="record.providerPlanName">
|
||||
<ProjectIcon
|
||||
:entity-id="record.providerPlanName"
|
||||
:icon-size="48"
|
||||
class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
|
||||
/>
|
||||
</template>
|
||||
<!-- 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"
|
||||
/>
|
||||
</template>
|
||||
<!-- Unknown Person -->
|
||||
<template v-else>
|
||||
<fa
|
||||
icon="person-circle-question"
|
||||
class="text-slate-300 text-[3rem] sm:text-[4rem]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
|
||||
<fa
|
||||
:icon="record.providerPlanName ? 'building' : 'user'"
|
||||
class="fa-fw text-slate-400"
|
||||
/>
|
||||
{{ record.giver.displayName }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div
|
||||
class="absolute inset-x-28 sm:inset-x-40 mx-2 top-1/2 -translate-y-1/2"
|
||||
>
|
||||
<div class="text-sm text-center leading-none font-semibold">
|
||||
{{ fetchAmount }}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<hr
|
||||
class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[25px] border-t-transparent border-b-[20px] sm:border-b-[25px] border-b-transparent border-s-[27px] sm:border-s-[34px] border-e-0"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Destination -->
|
||||
<div
|
||||
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>
|
||||
<!-- Project Icon -->
|
||||
<template v-if="record.recipientProjectName">
|
||||
<ProjectIcon
|
||||
:entity-id="record.recipientProjectName"
|
||||
:icon-size="48"
|
||||
class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
|
||||
/>
|
||||
</template>
|
||||
<!-- 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"
|
||||
/>
|
||||
</template>
|
||||
<!-- Unknown Person -->
|
||||
<template v-else>
|
||||
<fa
|
||||
icon="person-circle-question"
|
||||
class="text-slate-300 text-[3rem] sm:text-[4rem]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
|
||||
<fa
|
||||
:icon="record.recipientProjectName ? 'building' : 'user'"
|
||||
class="fa-fw text-slate-400"
|
||||
/>
|
||||
{{ record.receiver.displayName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="font-medium">
|
||||
<a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
|
||||
{{ description }}
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-sm">{{ subDescription }}</p>
|
||||
</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 class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
|
||||
<fa icon="circle-info" class="fa-fw text-slate-500" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-facing-decorator";
|
||||
import { GiveRecordWithContactInfo } from "../types";
|
||||
import EntityIcon from "./EntityIcon.vue";
|
||||
import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
|
||||
import { containsHiddenDid } from "../libs/endorserServer";
|
||||
import ProjectIcon from "./ProjectIcon.vue";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
EntityIcon,
|
||||
ProjectIcon,
|
||||
},
|
||||
})
|
||||
export default class ActivityListItem extends Vue {
|
||||
@Prop() record!: GiveRecordWithContactInfo;
|
||||
@Prop() lastViewedClaimId?: string;
|
||||
@Prop() isRegistered!: boolean;
|
||||
@Prop() activeDid!: string;
|
||||
@Prop() confirmerIdList?: string[];
|
||||
|
||||
get fetchAmount(): string {
|
||||
const claim =
|
||||
(this.record.fullClaim as unknown).claim || this.record.fullClaim;
|
||||
|
||||
const amount = claim.object?.amountOfThisGood
|
||||
? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
|
||||
: "";
|
||||
|
||||
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;
|
||||
|
||||
if (!claim.description) {
|
||||
return "something not described";
|
||||
}
|
||||
|
||||
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)}`;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
get canConfirm(): boolean {
|
||||
if (!this.isRegistered) return false;
|
||||
if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;
|
||||
if (this.confirmerIdList?.includes(this.activeDid)) return false;
|
||||
if (this.record.issuerDid === this.activeDid) return false;
|
||||
if (containsHiddenDid(this.record.fullClaim)) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
handleConfirmClick() {
|
||||
if (!this.canConfirm) {
|
||||
notifyWhyCannotConfirm(
|
||||
this.$notify,
|
||||
this.isRegistered,
|
||||
this.record.fullClaim?.["@type"],
|
||||
this.record,
|
||||
this.activeDid,
|
||||
this.confirmerIdList,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.$emit("confirmClaim", this.record);
|
||||
}
|
||||
|
||||
get friendlyDate(): string {
|
||||
const date = new Date(this.record.issuedAt);
|
||||
return date.toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
166
src/main.ts
166
src/main.ts
@@ -7,7 +7,171 @@ import axios from "axios";
|
||||
import VueAxios from "vue-axios";
|
||||
import Notifications from "notiwind";
|
||||
import "./assets/styles/tailwind.css";
|
||||
import { FontAwesomeIcon } from "./lib/fontawesome";
|
||||
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import {
|
||||
faArrowDown,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faArrowRotateBackward,
|
||||
faArrowUpRightFromSquare,
|
||||
faArrowUp,
|
||||
faBan,
|
||||
faBitcoinSign,
|
||||
faBurst,
|
||||
faCalendar,
|
||||
faCamera,
|
||||
faCaretDown,
|
||||
faChair,
|
||||
faCheck,
|
||||
faChevronDown,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faChevronUp,
|
||||
faCircle,
|
||||
faCircleCheck,
|
||||
faCircleInfo,
|
||||
faCircleQuestion,
|
||||
faCircleUser,
|
||||
faClock,
|
||||
faCoins,
|
||||
faComment,
|
||||
faCopy,
|
||||
faDollar,
|
||||
faEllipsis,
|
||||
faEllipsisVertical,
|
||||
faEnvelopeOpenText,
|
||||
faEraser,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
faFileContract,
|
||||
faFileLines,
|
||||
faFilter,
|
||||
faFloppyDisk,
|
||||
faFolderOpen,
|
||||
faForward,
|
||||
faGift,
|
||||
faGlobe,
|
||||
faHammer,
|
||||
faHand,
|
||||
faHandHoldingDollar,
|
||||
faHandHoldingHeart,
|
||||
faHouseChimney,
|
||||
faImage,
|
||||
faImagePortrait,
|
||||
faLeftRight,
|
||||
faLightbulb,
|
||||
faLink,
|
||||
faLocationDot,
|
||||
faLongArrowAltLeft,
|
||||
faLongArrowAltRight,
|
||||
faMagnifyingGlass,
|
||||
faMessage,
|
||||
faMinus,
|
||||
faPen,
|
||||
faPersonCircleCheck,
|
||||
faPersonCircleQuestion,
|
||||
faPlus,
|
||||
faQuestion,
|
||||
faQrcode,
|
||||
faRightFromBracket,
|
||||
faRotate,
|
||||
faShareNodes,
|
||||
faSpinner,
|
||||
faSquare,
|
||||
faSquareCaretDown,
|
||||
faSquareCaretUp,
|
||||
faSquarePlus,
|
||||
faTrashCan,
|
||||
faTriangleExclamation,
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark,
|
||||
faBuilding,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
faArrowDown,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faArrowRotateBackward,
|
||||
faArrowUpRightFromSquare,
|
||||
faArrowUp,
|
||||
faBan,
|
||||
faBitcoinSign,
|
||||
faBurst,
|
||||
faCalendar,
|
||||
faCamera,
|
||||
faCaretDown,
|
||||
faChair,
|
||||
faCheck,
|
||||
faChevronDown,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faChevronUp,
|
||||
faCircle,
|
||||
faCircleCheck,
|
||||
faCircleInfo,
|
||||
faCircleQuestion,
|
||||
faCircleUser,
|
||||
faClock,
|
||||
faCoins,
|
||||
faComment,
|
||||
faCopy,
|
||||
faDollar,
|
||||
faEllipsis,
|
||||
faEllipsisVertical,
|
||||
faEnvelopeOpenText,
|
||||
faEraser,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
faFileContract,
|
||||
faFileLines,
|
||||
faFilter,
|
||||
faFloppyDisk,
|
||||
faFolderOpen,
|
||||
faForward,
|
||||
faGift,
|
||||
faGlobe,
|
||||
faHammer,
|
||||
faHand,
|
||||
faHandHoldingDollar,
|
||||
faHandHoldingHeart,
|
||||
faHouseChimney,
|
||||
faImage,
|
||||
faImagePortrait,
|
||||
faLeftRight,
|
||||
faLightbulb,
|
||||
faLink,
|
||||
faLocationDot,
|
||||
faLongArrowAltLeft,
|
||||
faLongArrowAltRight,
|
||||
faMagnifyingGlass,
|
||||
faMessage,
|
||||
faMinus,
|
||||
faPen,
|
||||
faPersonCircleCheck,
|
||||
faPersonCircleQuestion,
|
||||
faPlus,
|
||||
faQrcode,
|
||||
faQuestion,
|
||||
faRotate,
|
||||
faRightFromBracket,
|
||||
faShareNodes,
|
||||
faSpinner,
|
||||
faSquare,
|
||||
faSquareCaretDown,
|
||||
faSquareCaretUp,
|
||||
faSquarePlus,
|
||||
faTrashCan,
|
||||
faTriangleExclamation,
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark,
|
||||
faBuilding,
|
||||
);
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import Camera from "simple-vue-camera";
|
||||
import { logger } from "./utils/logger";
|
||||
|
||||
|
||||
20
src/types/index.ts
Normal file
20
src/types/index.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
export interface GiveRecordWithContactInfo {
|
||||
jwtId: string;
|
||||
fullClaim: unknown; // 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;
|
||||
}
|
||||
@@ -187,23 +187,23 @@
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
|
||||
<div class="mt-4 mb-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<h2 class="text-xl font-bold">
|
||||
<h2 class="text-xl font-bold flex items-center gap-4">
|
||||
Latest Activity
|
||||
<button @click="openFeedFilters()">
|
||||
<span class="text-xs text-white">
|
||||
<font-awesome
|
||||
v-if="resultsAreFiltered()"
|
||||
icon="filter"
|
||||
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
|
||||
/>
|
||||
<font-awesome
|
||||
v-else
|
||||
icon="filter"
|
||||
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
|
||||
/>
|
||||
</span>
|
||||
<button
|
||||
v-if="resultsAreFiltered()"
|
||||
class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
|
||||
@click="openFeedFilters()"
|
||||
>
|
||||
<fa icon="filter" class="fa-fw" />
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
|
||||
@click="openFeedFilters()"
|
||||
>
|
||||
<fa icon="filter" class="fa-fw" />
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
@@ -250,84 +250,20 @@
|
||||
</div>
|
||||
|
||||
<InfiniteScroll @reached-bottom="loadMoreGives">
|
||||
<ul id="listLatestActivity" class="border-t border-slate-300">
|
||||
<li
|
||||
<ul id="listLatestActivity" class="space-y-4">
|
||||
<ActivityListItem
|
||||
v-for="record in feedData"
|
||||
:key="record.jwtId"
|
||||
class="border-b border-slate-300 py-2"
|
||||
>
|
||||
<div
|
||||
v-if="record.jwtId == feedLastViewedClaimId"
|
||||
class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
|
||||
>
|
||||
You've already seen all the following
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-12">
|
||||
<span class="pt-1 col-span-1 justify-self-start">
|
||||
<span>
|
||||
<font-awesome
|
||||
icon="circle-user"
|
||||
:class="
|
||||
computeKnownPersonIconStyleClassNames(
|
||||
record.giver.known || record.receiver.known,
|
||||
)
|
||||
"
|
||||
@click="toastUser('This involves your contacts.')"
|
||||
/>
|
||||
<font-awesome
|
||||
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 class="pl-2 block break-words">
|
||||
{{ giveDescription(record) }}
|
||||
</span>
|
||||
<a @click="onClickLoadClaim(record.jwtId)">
|
||||
<font-awesome
|
||||
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)
|
||||
"
|
||||
>
|
||||
<font-awesome icon="hammer" class="text-blue-500" />
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="record.providerPlanHandleId"
|
||||
:to="
|
||||
'/project/' +
|
||||
encodeURIComponent(record.providerPlanHandleId)
|
||||
"
|
||||
>
|
||||
<font-awesome 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>
|
||||
:record="record"
|
||||
:last-viewed-claim-id="feedLastViewedClaimId"
|
||||
:is-registered="isRegistered"
|
||||
:active-did="activeDid"
|
||||
:confirmer-id-list="record.confirmerIdList"
|
||||
@load-claim="onClickLoadClaim"
|
||||
@view-image="openImageViewer"
|
||||
@cache-image="cacheImageData"
|
||||
@confirm-claim="confirmClaim"
|
||||
/>
|
||||
</ul>
|
||||
</InfiniteScroll>
|
||||
<div v-if="isFeedLoading">
|
||||
@@ -369,6 +305,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,
|
||||
@@ -403,6 +340,9 @@ import {
|
||||
OnboardPage,
|
||||
} 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: {
|
||||
@@ -442,6 +382,7 @@ import { logger } from "../utils/logger";
|
||||
TopMessage,
|
||||
UserNameDialog,
|
||||
ImageViewer,
|
||||
ActivityListItem,
|
||||
},
|
||||
})
|
||||
export default class HomeView extends Vue {
|
||||
@@ -522,10 +463,88 @@ export default class HomeView extends Vue {
|
||||
this.isCreatingIdentifier = false;
|
||||
this.allMyDids = [newDid];
|
||||
}
|
||||
} catch (error) {
|
||||
logConsoleAndDb(
|
||||
"Error retrieving all account DIDs on home page:" + error,
|
||||
true,
|
||||
|
||||
const settings = await retrieveSettingsForActiveAccount();
|
||||
this.apiServer = settings.apiServer || "";
|
||||
this.activeDid = settings.activeDid || "";
|
||||
this.allContacts = await db.contacts.toArray();
|
||||
this.feedLastViewedClaimId = settings.lastViewedClaimId;
|
||||
this.givenName = settings.firstName || "";
|
||||
this.isFeedFilteredByVisible = !!settings.filterFeedByVisible;
|
||||
this.isFeedFilteredByNearby = !!settings.filterFeedByNearby;
|
||||
this.isRegistered = !!settings.isRegistered;
|
||||
this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
|
||||
this.lastAckedOfferToUserProjectsJwtId =
|
||||
settings.lastAckedOfferToUserProjectsJwtId;
|
||||
this.searchBoxes = settings.searchBoxes || [];
|
||||
this.showShortcutBvc = !!settings.showShortcutBvc;
|
||||
|
||||
this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);
|
||||
|
||||
if (!settings.finishedOnboarding) {
|
||||
(this.$refs.onboardingDialog as OnboardingDialog).open(
|
||||
OnboardPage.Home,
|
||||
);
|
||||
}
|
||||
|
||||
// someone may have have registered after sharing contact info, so recheck
|
||||
if (!this.isRegistered && this.activeDid) {
|
||||
try {
|
||||
const resp = await fetchEndorserRateLimits(
|
||||
this.apiServer,
|
||||
this.axios,
|
||||
this.activeDid,
|
||||
);
|
||||
if (resp.status === 200) {
|
||||
await updateAccountSettings(this.activeDid, {
|
||||
isRegistered: true,
|
||||
...(await retrieveSettingsForActiveAccount()),
|
||||
});
|
||||
this.isRegistered = true;
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore the error... just keep us unregistered
|
||||
}
|
||||
}
|
||||
|
||||
// this returns a Promise but we don't need to wait for it
|
||||
this.updateAllFeed();
|
||||
|
||||
if (this.activeDid) {
|
||||
const offersToUserData = await getNewOffersToUser(
|
||||
this.axios,
|
||||
this.apiServer,
|
||||
this.activeDid,
|
||||
this.lastAckedOfferToUserJwtId,
|
||||
);
|
||||
this.numNewOffersToUser = offersToUserData.data.length;
|
||||
this.newOffersToUserHitLimit = offersToUserData.hitLimit;
|
||||
}
|
||||
|
||||
if (this.activeDid) {
|
||||
const offersToUserProjects = await getNewOffersToUserProjects(
|
||||
this.axios,
|
||||
this.apiServer,
|
||||
this.activeDid,
|
||||
this.lastAckedOfferToUserProjectsJwtId,
|
||||
);
|
||||
this.numNewOffersToUserProjects = offersToUserProjects.data.length;
|
||||
this.newOffersToUserProjectsHitLimit = offersToUserProjects.hitLimit;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
} catch (err: any) {
|
||||
logConsoleAndDb("Error retrieving settings or feed: " + err, true);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text:
|
||||
err.userMessage ||
|
||||
"There was an error retrieving your settings or the latest activity.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1079,5 +1098,67 @@ export default class HomeView extends Vue {
|
||||
this.selectedImage = imageUrl;
|
||||
this.isImageViewerOpen = true;
|
||||
}
|
||||
|
||||
async confirmClaim(record: GiveRecordWithContactInfo) {
|
||||
this.$notify(
|
||||
{
|
||||
group: "modal",
|
||||
type: "confirm",
|
||||
title: "Confirm",
|
||||
text: "Do you personally confirm that this is true?",
|
||||
onYes: async () => {
|
||||
const goodClaim = serverUtil.removeSchemaContext(
|
||||
serverUtil.removeVisibleToDids(
|
||||
serverUtil.addLastClaimOrHandleAsIdIfMissing(
|
||||
record.fullClaim,
|
||||
record.jwtId,
|
||||
record.handleId,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
const confirmationClaim = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "AgreeAction",
|
||||
object: goodClaim,
|
||||
};
|
||||
|
||||
const result = await serverUtil.createAndSubmitClaim(
|
||||
confirmationClaim,
|
||||
this.activeDid,
|
||||
this.apiServer,
|
||||
this.axios,
|
||||
);
|
||||
|
||||
if (result.type === "success") {
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "success",
|
||||
title: "Success",
|
||||
text: "Confirmation submitted.",
|
||||
},
|
||||
3000,
|
||||
);
|
||||
|
||||
// Refresh the feed to show updated confirmation status
|
||||
await this.updateAllFeed();
|
||||
} else {
|
||||
logger.error("Error submitting confirmation:", result);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text: "There was a problem submitting the confirmation.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
-1,
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user