forked from trent_larson/crowd-funder-for-time-pwa
In-progress: homeview design refresh
I had to comment out line 544 because it was causing errors (and seemed redundant?)
This commit is contained in:
Jose Olarte III
@@ -186,23 +186,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">
|
||||
<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
|
||||
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>
|
||||
@@ -249,19 +249,123 @@
|
||||
</div>
|
||||
|
||||
<InfiniteScroll @reached-bottom="loadMoreGives">
|
||||
<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"
|
||||
>
|
||||
<ul id="listLatestActivity" class="space-y-4">
|
||||
<li v-for="record in feedData" :key="record.jwtId">
|
||||
<div
|
||||
class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
|
||||
class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
|
||||
v-if="record.jwtId == feedLastViewedClaimId"
|
||||
>
|
||||
You've already seen all the following
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
@@ -282,7 +386,6 @@
|
||||
</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 ||
|
||||
@@ -314,7 +417,6 @@
|
||||
class="inline-block align-middle border border-slate-300 rounded-md ml-1"
|
||||
/>
|
||||
</span>
|
||||
-->
|
||||
<span class="pl-2 block break-words">
|
||||
{{ giveDescription(record) }}
|
||||
</span>
|
||||
@@ -359,6 +461,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</li>
|
||||
</ul>
|
||||
</InfiniteScroll>
|
||||
@@ -436,6 +539,7 @@ import {
|
||||
OnboardPage,
|
||||
registerSaveAndActivatePasskey,
|
||||
} from "../libs/util";
|
||||
// import { fa0 } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
interface GiveRecordWithContactInfo extends GiveSummaryRecord {
|
||||
giver: {
|
||||
|
||||
@@ -341,23 +341,37 @@
|
||||
<div v-else-if="givesTotalsByUnit.length > 0" class="flex-1">
|
||||
<span class="font-semibold mr-2 shrink-0">Totals</span>
|
||||
<span class="whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
<a @click="totalsExpanded = !totalsExpanded" class="cursor-pointer text-blue-500">
|
||||
<a
|
||||
@click="totalsExpanded = !totalsExpanded"
|
||||
class="cursor-pointer text-blue-500"
|
||||
>
|
||||
<!-- just show the hours, or alternatively whatever is first -->
|
||||
<span v-if="givenTotalHours() > 0">
|
||||
{{ givenTotalHours() }} {{ libsUtil.UNIT_SHORT["HUR"] }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ givesTotalsByUnit[0].amount }} {{ libsUtil.UNIT_SHORT[givesTotalsByUnit[0].unit] }}
|
||||
{{ givesTotalsByUnit[0].amount }}
|
||||
{{ libsUtil.UNIT_SHORT[givesTotalsByUnit[0].unit] }}
|
||||
</span>
|
||||
<span v-if="givesTotalsByUnit.length > 1">...</span>
|
||||
<span>
|
||||
<fa :icon="totalsExpanded ? 'chevron-up' : 'chevron-right'" class="fa-fw text-xs ml-1" />
|
||||
<fa
|
||||
:icon="totalsExpanded ? 'chevron-up' : 'chevron-right'"
|
||||
class="fa-fw text-xs ml-1"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
<!-- show the full list when expanded -->
|
||||
<div v-if="totalsExpanded">
|
||||
<div v-for="(total, index) in givesTotalsByUnit" :key="total.unit" class="ml-2">
|
||||
<fa :icon="libsUtil.iconForUnitCode(total.unit)" class="fa-fw text-slate-400 mr-1" />
|
||||
<div
|
||||
v-for="total in givesTotalsByUnit"
|
||||
:key="total.unit"
|
||||
class="ml-2"
|
||||
>
|
||||
<fa
|
||||
:icon="libsUtil.iconForUnitCode(total.unit)"
|
||||
class="fa-fw text-slate-400 mr-1"
|
||||
/>
|
||||
{{ total.amount }} {{ libsUtil.UNIT_LONG[total.unit] }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -365,7 +379,9 @@
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="font-semibold mr-2 shrink-0">
|
||||
{{ givesToThis.length }}{{ givesHitLimit ? "+" : "" }} record{{ givesToThis.length === 1 ? "" : "s" }}
|
||||
{{ givesToThis.length }}{{ givesHitLimit ? "+" : "" }} record{{
|
||||
givesToThis.length === 1 ? "" : "s"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -374,62 +390,71 @@
|
||||
<ul class="mt-2 text-sm border-t border-slate-300">
|
||||
<li
|
||||
v-for="give in givesToThis"
|
||||
:key="give.id"
|
||||
class="py-1.5 border-b border-slate-300"
|
||||
>
|
||||
<div class="flex justify-between gap-4">
|
||||
<span>
|
||||
<fa icon="user" class="fa-fw text-slate-400" />
|
||||
{{
|
||||
serverUtil.didInfo(
|
||||
give.agentDid,
|
||||
activeDid,
|
||||
allMyDids,
|
||||
allContacts,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span v-if="give.amount" class="whitespace-nowrap">
|
||||
<fa
|
||||
:icon="libsUtil.iconForUnitCode(give.unit)"
|
||||
class="fa-fw text-slate-400"
|
||||
/>{{ give.amount }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-slate-500">
|
||||
<fa icon="calendar" class="fa-fw text-slate-400" />
|
||||
{{ give.issuedAt?.substring(0, 10) }}
|
||||
</div>
|
||||
<div v-if="give.description" class="text-slate-500">
|
||||
<fa icon="comment" class="fa-fw text-slate-400" />
|
||||
{{ give.description }}
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<a @click="onClickLoadClaim(give.jwtId)">
|
||||
<fa icon="file-lines" class="text-blue-500 cursor-pointer" />
|
||||
</a>
|
||||
:key="give.id"
|
||||
class="py-1.5 border-b border-slate-300"
|
||||
>
|
||||
<div class="flex justify-between gap-4">
|
||||
<span>
|
||||
<fa icon="user" class="fa-fw text-slate-400" />
|
||||
{{
|
||||
serverUtil.didInfo(
|
||||
give.agentDid,
|
||||
activeDid,
|
||||
allMyDids,
|
||||
allContacts,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<span v-if="give.amount" class="whitespace-nowrap">
|
||||
<fa
|
||||
:icon="libsUtil.iconForUnitCode(give.unit)"
|
||||
class="fa-fw text-slate-400"
|
||||
/>{{ give.amount }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-slate-500">
|
||||
<fa icon="calendar" class="fa-fw text-slate-400" />
|
||||
{{ give.issuedAt?.substring(0, 10) }}
|
||||
</div>
|
||||
<div v-if="give.description" class="text-slate-500">
|
||||
<fa icon="comment" class="fa-fw text-slate-400" />
|
||||
{{ give.description }}
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<a @click="onClickLoadClaim(give.jwtId)">
|
||||
<fa icon="file-lines" class="text-blue-500 cursor-pointer" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
v-if="
|
||||
checkIsConfirmable(give) &&
|
||||
!recentlyCheckedAndUnconfirmableJwts.includes(give.jwtId)
|
||||
"
|
||||
@click="deepCheckConfirmable(give)"
|
||||
>
|
||||
<fa icon="circle-check" class="text-blue-500 cursor-pointer" />
|
||||
</a>
|
||||
<a v-else-if="checkingConfirmationForJwtId === give.jwtId">
|
||||
<fa icon="spinner" class="fa-spin-pulse" />
|
||||
</a>
|
||||
<a v-else @click="shallowNotifyWhyCannotConfirm(give)">
|
||||
<fa icon="circle-check" class="text-slate-500 cursor-pointer" />
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="give.fullClaim.image" class="flex justify-center">
|
||||
<a :href="give.fullClaim.image" target="_blank">
|
||||
<img :src="give.fullClaim.image" class="h-24 mt-2 rounded-xl" />
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
v-if="
|
||||
checkIsConfirmable(give) &&
|
||||
!recentlyCheckedAndUnconfirmableJwts.includes(give.jwtId)
|
||||
"
|
||||
@click="deepCheckConfirmable(give)"
|
||||
>
|
||||
<fa
|
||||
icon="circle-check"
|
||||
class="text-blue-500 cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
<a v-else-if="checkingConfirmationForJwtId === give.jwtId">
|
||||
<fa icon="spinner" class="fa-spin-pulse" />
|
||||
</a>
|
||||
<a v-else @click="shallowNotifyWhyCannotConfirm(give)">
|
||||
<fa
|
||||
icon="circle-check"
|
||||
class="text-slate-500 cursor-pointer"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="give.fullClaim.image" class="flex justify-center">
|
||||
<a :href="give.fullClaim.image" target="_blank">
|
||||
<img
|
||||
:src="give.fullClaim.image"
|
||||
class="h-24 mt-2 rounded-xl"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -594,7 +619,7 @@ export default class ProjectViewView extends Vue {
|
||||
givesHitLimit = false;
|
||||
givesProvidedByThis: Array<GiveSummaryRecord> = [];
|
||||
givesProvidedByHitLimit = false;
|
||||
givesTotalsByUnit: Array<{unit: string, amount: number}> = [];
|
||||
givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
|
||||
imageUrl = "";
|
||||
isRegistered = false;
|
||||
issuer = "";
|
||||
@@ -1254,14 +1279,17 @@ export default class ProjectViewView extends Vue {
|
||||
|
||||
async loadTotals() {
|
||||
this.loadingTotals = true;
|
||||
const url = this.apiServer + "/api/v2/report/givesToPlans?planIds=" + encodeURIComponent(JSON.stringify([this.projectId]));
|
||||
const url =
|
||||
this.apiServer +
|
||||
"/api/v2/report/givesToPlans?planIds=" +
|
||||
encodeURIComponent(JSON.stringify([this.projectId]));
|
||||
const headers = await serverUtil.getHeaders(this.activeDid);
|
||||
|
||||
try {
|
||||
const resp = await this.axios.get(url, { headers });
|
||||
if (resp.status === 200 && resp.data.data) {
|
||||
// Calculate totals by unit
|
||||
const totals: {[key: string]: number} = {};
|
||||
const totals: { [key: string]: number } = {};
|
||||
resp.data.data.forEach((give: GiveSummaryRecord) => {
|
||||
const amount = give.fullClaim.object?.amountOfThisGood;
|
||||
const unit = give.fullClaim.object?.unitCode;
|
||||
@@ -1269,12 +1297,14 @@ export default class ProjectViewView extends Vue {
|
||||
totals[unit] = (totals[unit] || 0) + amount;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Convert totals object to array format
|
||||
this.givesTotalsByUnit = Object.entries(totals).map(([unit, amount]) => ({
|
||||
unit,
|
||||
amount
|
||||
}));
|
||||
this.givesTotalsByUnit = Object.entries(totals).map(
|
||||
([unit, amount]) => ({
|
||||
unit,
|
||||
amount,
|
||||
}),
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading totals:", error);
|
||||
@@ -1293,7 +1323,9 @@ export default class ProjectViewView extends Vue {
|
||||
}
|
||||
|
||||
givenTotalHours(): number {
|
||||
return this.givesTotalsByUnit.find(total => total.unit === "HUR")?.amount || 0;
|
||||
return (
|
||||
this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user