jsnbuchanan
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

In-progress: homeview design refresh 

I had to comment out line 544 because it was causing errors (and seemed redundant?)
Jose Olarte III 8 months ago
parent
61afba3bca
commit
ef8c2e6093
2 changed files with 231 additions and 95 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 154
      src/views/HomeView.vue
  2. 170
      src/views/ProjectViewView.vue

154
src/views/HomeView.vue
View File

@ -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: {

170
src/views/ProjectViewView.vue
View File

@ -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;
@ -1271,10 +1299,12 @@ export default class ProjectViewView extends Vue {
});
// 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>

Write Preview
Loading…
Cancel
Save