Compare commits
10 Commits
homeview-r
...
ui-fixes-2
| Author | SHA1 | Date | |
|---|---|---|---|
|
5dbd66e51b | ||
|
|
312b4aaaa3 | ||
|
|
3a6a24d923 | ||
|
|
d7afb80a07 | ||
|
|
751df09fe5 | ||
|
|
8858495f73 | ||
|
|
ecb088bee2 | ||
| e96617ca0f | |||
| b91f2a5df7 | |||
| f6871e139d |
@@ -1,334 +0,0 @@
|
||||
<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="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"
|
||||
@load="$emit('cacheImage', record.image)"
|
||||
alt="Activity 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
|
||||
:entityId="record.providerPlanName"
|
||||
:iconSize="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
|
||||
:entityId="record.recipientProjectName"
|
||||
:iconSize="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 @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
|
||||
{{ 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 @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
|
||||
<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>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<ul class="flex text-2xl p-2 gap-2 max-w-3xl mx-auto">
|
||||
<ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
|
||||
<!-- Home Feed -->
|
||||
<li
|
||||
:class="{
|
||||
|
||||
@@ -20,7 +20,7 @@ export type Settings = {
|
||||
// active Decentralized ID
|
||||
activeDid?: string; // only used in the MASTER_SETTINGS_KEY entry
|
||||
|
||||
apiServer?: string; // API server URL
|
||||
apiServer: string; // API server URL
|
||||
|
||||
filterFeedByNearby?: boolean; // filter by nearby
|
||||
filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden
|
||||
|
||||
@@ -58,7 +58,6 @@ import {
|
||||
faHandHoldingDollar,
|
||||
faHandHoldingHeart,
|
||||
faHouseChimney,
|
||||
faImage,
|
||||
faImagePortrait,
|
||||
faLeftRight,
|
||||
faLightbulb,
|
||||
@@ -88,7 +87,6 @@ import {
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark,
|
||||
faBuilding,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
@@ -139,7 +137,6 @@ library.add(
|
||||
faHandHoldingDollar,
|
||||
faHandHoldingHeart,
|
||||
faHouseChimney,
|
||||
faImage,
|
||||
faImagePortrait,
|
||||
faLeftRight,
|
||||
faLightbulb,
|
||||
@@ -169,7 +166,6 @@ library.add(
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark,
|
||||
faBuilding,
|
||||
);
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -256,7 +256,7 @@
|
||||
<span class="mb-2 font-bold">Location for Searches</span>
|
||||
<router-link
|
||||
:to="{ name: 'search-area' }"
|
||||
class="text-m bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2"
|
||||
class="text-m bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mb-2"
|
||||
>
|
||||
{{ isSearchAreasSet ? "Change" : "Set" }} Search Area…
|
||||
</router-link>
|
||||
|
||||
@@ -204,7 +204,7 @@
|
||||
<div v-if="libsUtil.isGiveAction(veriClaim)">
|
||||
<div class="flex columns-3">
|
||||
<button
|
||||
class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-4 py-2 rounded-md"
|
||||
class="col-span-1 bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-4 py-2 rounded-md"
|
||||
v-if="
|
||||
libsUtil.isGiveRecordTheUserCanConfirm(
|
||||
isRegistered,
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
/>
|
||||
<button
|
||||
href=""
|
||||
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
|
||||
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
|
||||
:style="
|
||||
contactsSelected.length > 0
|
||||
? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
|
||||
@@ -127,7 +127,7 @@
|
||||
<div class="w-full text-right">
|
||||
<button
|
||||
href=""
|
||||
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-1 rounded-md"
|
||||
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
|
||||
@click="toggleShowContactAmounts()"
|
||||
>
|
||||
{{
|
||||
@@ -177,14 +177,7 @@
|
||||
data-testId="contactListItem"
|
||||
>
|
||||
<div class="grow overflow-hidden">
|
||||
<div class="flex items-center">
|
||||
<EntityIcon
|
||||
:contact="contact"
|
||||
:iconSize="24"
|
||||
class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer"
|
||||
@click="showLargeIdenticon = contact"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-if="!showGiveNumbers"
|
||||
@@ -201,94 +194,97 @@
|
||||
data-testId="contactCheckOne"
|
||||
/>
|
||||
|
||||
<h2
|
||||
class="text-base font-semibold ml-2 w-1/3 truncate flex-shrink-0"
|
||||
>
|
||||
<EntityIcon
|
||||
:contact="contact"
|
||||
:iconSize="48"
|
||||
class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
|
||||
@click="showLargeIdenticon = contact"
|
||||
/>
|
||||
|
||||
<h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
|
||||
{{ contactNameNonBreakingSpace(contact.name) }}
|
||||
</h2>
|
||||
|
||||
<span>
|
||||
<div class="flex items-center">
|
||||
<div class="flex gap-2 items-center">
|
||||
<router-link
|
||||
:to="{
|
||||
path: '/did/' + encodeURIComponent(contact.did),
|
||||
}"
|
||||
title="See more about this person"
|
||||
>
|
||||
<fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
|
||||
<fa icon="circle-info" class="text-xl text-blue-500" />
|
||||
</router-link>
|
||||
|
||||
<span class="ml-4 text-sm overflow-hidden">{{
|
||||
<span class="text-sm overflow-hidden">{{
|
||||
libsUtil.shortDid(contact.did)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="ml-4 text-sm">
|
||||
<div class="text-sm">
|
||||
{{ contact.notes }}
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div id="ContactActions" class="flex gap-1.5 mt-2">
|
||||
<div
|
||||
v-if="showGiveNumbers && contact.did != activeDid"
|
||||
class="ml-auto flex gap-1.5"
|
||||
<div
|
||||
v-if="showGiveNumbers && contact.did != activeDid"
|
||||
class="ml-auto flex gap-1.5 mt-2"
|
||||
>
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
|
||||
@click="confirmShowGiftedDialog(contact.did, activeDid)"
|
||||
:title="givenToMeDescriptions[contact.did] || ''"
|
||||
>
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
|
||||
@click="confirmShowGiftedDialog(contact.did, activeDid)"
|
||||
:title="givenToMeDescriptions[contact.did] || ''"
|
||||
>
|
||||
From:
|
||||
<br />
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
? ((givenToMeConfirmed[contact.did] || 0)
|
||||
+ (givenToMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
? (givenToMeConfirmed[contact.did] || 0)
|
||||
: (givenToMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
}}
|
||||
</button>
|
||||
From:
|
||||
<br />
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
? ((givenToMeConfirmed[contact.did] || 0)
|
||||
+ (givenToMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
? (givenToMeConfirmed[contact.did] || 0)
|
||||
: (givenToMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
|
||||
@click="confirmShowGiftedDialog(activeDid, contact.did)"
|
||||
:title="givenByMeDescriptions[contact.did] || ''"
|
||||
>
|
||||
To:
|
||||
<br />
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
? ((givenByMeConfirmed[contact.did] || 0)
|
||||
+ (givenByMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
? (givenByMeConfirmed[contact.did] || 0)
|
||||
: (givenByMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
}}
|
||||
</button>
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
|
||||
@click="confirmShowGiftedDialog(activeDid, contact.did)"
|
||||
:title="givenByMeDescriptions[contact.did] || ''"
|
||||
>
|
||||
To:
|
||||
<br />
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
? ((givenByMeConfirmed[contact.did] || 0)
|
||||
+ (givenByMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
? (givenByMeConfirmed[contact.did] || 0)
|
||||
: (givenByMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
|
||||
@click="openOfferDialog(contact.did, contact.name)"
|
||||
data-testId="offerButton"
|
||||
>
|
||||
Offer
|
||||
</button>
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
|
||||
@click="openOfferDialog(contact.did, contact.name)"
|
||||
data-testId="offerButton"
|
||||
>
|
||||
Offer
|
||||
</button>
|
||||
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'contact-amounts',
|
||||
query: { contactDid: contact.did },
|
||||
}"
|
||||
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-slate-400"
|
||||
title="See more given activity"
|
||||
>
|
||||
<fa icon="file-lines" class="fa-fw" />
|
||||
</router-link>
|
||||
</div>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'contact-amounts',
|
||||
query: { contactDid: contact.did },
|
||||
}"
|
||||
class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-slate-400"
|
||||
title="See more given activity"
|
||||
>
|
||||
<fa icon="file-lines" class="fa-fw" />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -310,7 +306,7 @@
|
||||
/>
|
||||
<button
|
||||
href=""
|
||||
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
|
||||
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
|
||||
:style="
|
||||
contactsSelected.length > 0
|
||||
? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<TopMessage />
|
||||
|
||||
<!-- CONTENT -->
|
||||
<section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
|
||||
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
|
||||
<h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
|
||||
{{ AppString.APP_NAME }}
|
||||
</h1>
|
||||
@@ -186,23 +186,23 @@
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<div class="mt-4 mb-4">
|
||||
<div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
|
||||
<div class="flex items-center mb-4">
|
||||
<h2 class="text-xl font-bold flex items-center gap-4">
|
||||
<h2 class="text-xl font-bold">
|
||||
Latest Activity
|
||||
<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 @click="openFeedFilters()">
|
||||
<span class="text-xs text-white">
|
||||
<fa
|
||||
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"
|
||||
/>
|
||||
<fa
|
||||
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>
|
||||
</h2>
|
||||
</div>
|
||||
@@ -249,20 +249,117 @@
|
||||
</div>
|
||||
|
||||
<InfiniteScroll @reached-bottom="loadMoreGives">
|
||||
<ul id="listLatestActivity" class="space-y-4">
|
||||
<ActivityListItem
|
||||
<ul id="listLatestActivity" class="border-t border-slate-300">
|
||||
<li
|
||||
class="border-b border-slate-300 py-2"
|
||||
v-for="record in feedData"
|
||||
:key="record.jwtId"
|
||||
:record="record"
|
||||
:lastViewedClaimId="feedLastViewedClaimId"
|
||||
:isRegistered="isRegistered"
|
||||
:activeDid="activeDid"
|
||||
:confirmerIdList="record.confirmerIdList"
|
||||
@loadClaim="onClickLoadClaim"
|
||||
@viewImage="openImageViewer"
|
||||
@cacheImage="cacheImageData"
|
||||
@confirmClaim="confirmClaim"
|
||||
/>
|
||||
>
|
||||
<div
|
||||
class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
|
||||
v-if="record.jwtId == feedLastViewedClaimId"
|
||||
>
|
||||
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>
|
||||
<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">
|
||||
<!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
|
||||
<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>
|
||||
</ul>
|
||||
</InfiniteScroll>
|
||||
<div v-if="isFeedLoading">
|
||||
@@ -304,7 +401,6 @@ 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,
|
||||
@@ -340,8 +436,6 @@ import {
|
||||
OnboardPage,
|
||||
registerSaveAndActivatePasskey,
|
||||
} from "../libs/util";
|
||||
import * as serverUtil from "../libs/endorserServer";
|
||||
// import { fa0 } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
interface GiveRecordWithContactInfo extends GiveSummaryRecord {
|
||||
giver: {
|
||||
@@ -372,7 +466,6 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
|
||||
TopMessage,
|
||||
UserNameDialog,
|
||||
ImageViewer,
|
||||
ActivityListItem,
|
||||
},
|
||||
})
|
||||
export default class HomeView extends Vue {
|
||||
@@ -466,7 +559,6 @@ export default class HomeView extends Vue {
|
||||
if (resp.status === 200) {
|
||||
await updateAccountSettings(this.activeDid, {
|
||||
isRegistered: true,
|
||||
...(await retrieveSettingsForActiveAccount()),
|
||||
});
|
||||
this.isRegistered = true;
|
||||
}
|
||||
@@ -910,67 +1002,5 @@ 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 {
|
||||
console.error("Error submitting confirmation:", result);
|
||||
this.$notify(
|
||||
{
|
||||
group: "alert",
|
||||
type: "danger",
|
||||
title: "Error",
|
||||
text: "There was a problem submitting the confirmation.",
|
||||
},
|
||||
5000,
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
-1,
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -237,7 +237,7 @@
|
||||
<button
|
||||
data-testId="offerButton"
|
||||
@click="openOfferDialog()"
|
||||
class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
|
||||
class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 text-sm leading-tight rounded-md"
|
||||
>
|
||||
Offer to this (maybe with conditions)...
|
||||
</button>
|
||||
@@ -318,7 +318,7 @@
|
||||
<div class="text-center">
|
||||
<button
|
||||
@click="openGiftDialogToProject()"
|
||||
class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1rounded-md"
|
||||
class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 text-sm leading-tight rounded-md"
|
||||
>
|
||||
Given To This...
|
||||
</button>
|
||||
@@ -470,7 +470,7 @@
|
||||
<div class="text-center">
|
||||
<button
|
||||
@click="openGiftDialogFromProject()"
|
||||
class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 rounded-md"
|
||||
class="block w-full bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 text-sm leading-tight rounded-md"
|
||||
>
|
||||
Given By This...
|
||||
</button>
|
||||
|
||||
@@ -233,7 +233,7 @@
|
||||
>
|
||||
<a
|
||||
@click="onClickLoadProject(project.handleId)"
|
||||
class="block py-4 flex gap-4"
|
||||
class="block py-4 flex gap-4 cursor-pointer"
|
||||
>
|
||||
<div class="flex-none">
|
||||
<ProjectIcon
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
*/
|
||||
import path from 'path';
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { importUser } from './testUtils';
|
||||
import { importUserAndCloseOnboarding } from './testUtils';
|
||||
|
||||
/**
|
||||
* Note: by default, this test uses the test image API server.
|
||||
@@ -65,7 +65,7 @@ test('Record item given from image-share', async ({ page }) => {
|
||||
// Combine title prefix with the random string
|
||||
const finalTitle = `Gift ${randomString} from image-share`;
|
||||
|
||||
await importUser(page, '00');
|
||||
await importUserAndCloseOnboarding(page, '00');
|
||||
|
||||
// Record something given
|
||||
await page.goto('./test');
|
||||
@@ -84,10 +84,8 @@ test('Record item given from image-share', async ({ page }) => {
|
||||
await page.getByRole('spinbutton').fill('2');
|
||||
await page.getByRole('button', { name: 'Sign & Send' }).click();
|
||||
|
||||
// we end up on a page with the onboarding info
|
||||
await page.getByTestId('closeOnboardingAndFinish').click();
|
||||
|
||||
await expect(page.getByText('That gift was recorded.')).toBeVisible();
|
||||
// const recorded = await page.getByText('That gift was recorded.');
|
||||
await expect(await page.getByText('That gift was recorded.')).toBeVisible();
|
||||
await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
|
||||
|
||||
// Refresh home view and check gift
|
||||
|
||||
@@ -207,7 +207,6 @@ test('Add contact, copy details, delete, and import from paste & from file', asy
|
||||
// Add another new contact
|
||||
await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b, User #222, asdf1234');
|
||||
await page.locator('button > svg.fa-plus').click();
|
||||
await expect(page.locator('div[role="alert"]')).toBeVisible();
|
||||
await expect(page.locator('div[role="alert"] span:has-text("No")')).toBeVisible();
|
||||
await page.locator('div[role="alert"] button:has-text("No")').click(); // don't register
|
||||
await expect(page.locator('div[role="alert"] span:has-text("Contact Added")')).toBeVisible();
|
||||
|
||||
@@ -33,6 +33,13 @@ export async function importUser(page: Page, id?: string): Promise<string> {
|
||||
return did;
|
||||
}
|
||||
|
||||
export async function importUserAndCloseOnboarding(page: Page, id?: string): Promise<string> {
|
||||
const did = await importUser(page, id);
|
||||
await page.goto('./');
|
||||
await page.getByTestId('closeOnboardingAndFinish').click();
|
||||
return did;
|
||||
}
|
||||
|
||||
// This is to switch to someone already in the identity table. It doesn't include registration.
|
||||
export async function switchToUser(page: Page, did: string): Promise<void> {
|
||||
// This is the direct approach but users have to tap on things so we'll do that instead.
|
||||
|
||||
Reference in New Issue
Block a user