7 changed files with 374 additions and 48 deletions
@ -0,0 +1,150 @@ |
|||
<template> |
|||
<QuickNav selected="Home"></QuickNav> |
|||
<!-- CONTENT --> |
|||
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
|||
<!-- Breadcrumb --> |
|||
<div id="ViewBreadcrumb" class="mb-8"> |
|||
<h1 class="text-lg text-center font-light relative px-7"> |
|||
<!-- Back --> |
|||
<fa |
|||
icon="chevron-left" |
|||
@click="$router.back()" |
|||
class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
|||
/> |
|||
Offers to Your Projects |
|||
</h1> |
|||
</div> |
|||
|
|||
<InfiniteScroll @reached-bottom="loadMoreOffersToUserProjects"> |
|||
<ul id="listLatestActivity" class="border-t border-slate-300"> |
|||
<li |
|||
v-for="offer in newOffersToUserProjects" |
|||
:key="offer.jwtId" |
|||
class="mt-4 relative group" |
|||
> |
|||
<div |
|||
class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm" |
|||
v-if="offer.jwtId == lastAckedOfferToUserProjectsJwtId" |
|||
> |
|||
You've already seen all the following |
|||
</div> |
|||
|
|||
<span>{{ |
|||
didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts) |
|||
}}</span> |
|||
offered |
|||
<span v-if="offer.objectDescription">{{ |
|||
offer.objectDescription |
|||
}}</span |
|||
>{{ offer.objectDescription && offer.amount ? ", and " : "" }} |
|||
<span v-if="offer.amount">{{ |
|||
displayAmount(offer.unit, offer.amount) |
|||
}}</span> |
|||
to |
|||
<span>{{ offer.planName }}</span> |
|||
<router-link |
|||
:to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }" |
|||
class="text-blue-500" |
|||
> |
|||
<fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" /> |
|||
</router-link> |
|||
</li> |
|||
</ul> |
|||
</InfiniteScroll> |
|||
</section> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue } from "vue-facing-decorator"; |
|||
|
|||
import EntityIcon from "@/components/EntityIcon.vue"; |
|||
import GiftedDialog from "@/components/GiftedDialog.vue"; |
|||
import InfiniteScroll from "@/components/InfiniteScroll.vue"; |
|||
import QuickNav from "@/components/QuickNav.vue"; |
|||
import { NotificationIface } from "@/constants/app"; |
|||
import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index"; |
|||
import { Contact } from "@/db/tables/contacts"; |
|||
import { |
|||
didInfo, |
|||
displayAmount, |
|||
getNewOffersToUserProjects, |
|||
OfferToPlanSummaryRecord, |
|||
} from "@/libs/endorserServer"; |
|||
|
|||
@Component({ |
|||
components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav }, |
|||
}) |
|||
export default class RecentOffersToUserView extends Vue { |
|||
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|||
|
|||
activeDid = ""; |
|||
allContacts: Array<Contact> = []; |
|||
allMyDids: string[] = []; |
|||
apiServer = ""; |
|||
lastAckedOfferToUserProjectsJwtId = ""; |
|||
newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = []; |
|||
newOffersToUserProjectsAtEnd = false; |
|||
|
|||
showOffersDetails = false; |
|||
showOffersToUserProjectsDetails = false; |
|||
didInfo = didInfo; |
|||
displayAmount = displayAmount; |
|||
|
|||
async created() { |
|||
try { |
|||
const settings = await retrieveSettingsForActiveAccount(); |
|||
this.apiServer = settings.apiServer || ""; |
|||
this.activeDid = settings.activeDid || ""; |
|||
this.lastAckedOfferToUserProjectsJwtId = |
|||
settings.lastAckedOfferToUserProjectsJwtId || ""; |
|||
|
|||
this.allContacts = await db.contacts.toArray(); |
|||
|
|||
await accountsDB.open(); |
|||
const allAccounts = await accountsDB.accounts.toArray(); |
|||
if (allAccounts.length > 0) { |
|||
this.allMyDids = allAccounts.map((acc) => acc.did); |
|||
} |
|||
|
|||
const offersToUserProjectsData = await getNewOffersToUserProjects( |
|||
this.axios, |
|||
this.apiServer, |
|||
this.activeDid, |
|||
undefined, |
|||
undefined, |
|||
); |
|||
this.newOffersToUserProjects = offersToUserProjectsData.data; |
|||
this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit; |
|||
|
|||
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
|||
} catch (err: any) { |
|||
console.error("Error retrieving settings & contacts:", err); |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Error", |
|||
text: err.message || "There was an error retrieving your activity.", |
|||
}, |
|||
5000, |
|||
); |
|||
} |
|||
} |
|||
|
|||
async loadMoreOffersToUserProjects() { |
|||
if (this.newOffersToUserProjectsAtEnd) { |
|||
return; |
|||
} |
|||
const offersToUserProjectsData = await getNewOffersToUserProjects( |
|||
this.axios, |
|||
this.apiServer, |
|||
this.activeDid, |
|||
undefined, |
|||
this.newOffersToUserProjects[this.newOffersToUserProjects.length - 1] |
|||
.jwtId, |
|||
); |
|||
this.newOffersToUserProjects.push(...offersToUserProjectsData.data); |
|||
this.newOffersToUserProjectsAtEnd = !offersToUserProjectsData.hitLimit; |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<QuickNav selected="Home"></QuickNav> |
|||
<!-- CONTENT --> |
|||
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
|||
<!-- Breadcrumb --> |
|||
<div id="ViewBreadcrumb" class="mb-8"> |
|||
<h1 class="text-lg text-center font-light relative px-7"> |
|||
<!-- Back --> |
|||
<fa |
|||
icon="chevron-left" |
|||
@click="$router.back()" |
|||
class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
|||
/> |
|||
Offers to You |
|||
</h1> |
|||
</div> |
|||
|
|||
<InfiniteScroll @reached-bottom="loadMoreOffersToUser"> |
|||
<ul id="listLatestActivity" class="border-t border-slate-300"> |
|||
<li |
|||
v-for="offer in newOffersToUser" |
|||
:key="offer.jwtId" |
|||
class="mt-4 relative group" |
|||
> |
|||
<div |
|||
class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm" |
|||
v-if="offer.jwtId == lastAckedOfferToUserJwtId" |
|||
> |
|||
You've already seen all the following |
|||
</div> |
|||
|
|||
<span>{{ |
|||
didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts) |
|||
}}</span> |
|||
offered |
|||
<span v-if="offer.objectDescription">{{ |
|||
offer.objectDescription |
|||
}}</span |
|||
>{{ offer.objectDescription && offer.amount ? ", and " : "" }} |
|||
<span v-if="offer.amount">{{ |
|||
displayAmount(offer.unit, offer.amount) |
|||
}}</span> |
|||
<router-link |
|||
:to="{ path: '/claim/' + encodeURIComponent(offer.jwtId) }" |
|||
class="text-blue-500" |
|||
> |
|||
<fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" /> |
|||
</router-link> |
|||
</li> |
|||
</ul> |
|||
</InfiniteScroll> |
|||
</section> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Component, Vue } from "vue-facing-decorator"; |
|||
|
|||
import GiftedDialog from "@/components/GiftedDialog.vue"; |
|||
import EntityIcon from "@/components/EntityIcon.vue"; |
|||
import InfiniteScroll from "@/components/InfiniteScroll.vue"; |
|||
import QuickNav from "@/components/QuickNav.vue"; |
|||
import { NotificationIface } from "@/constants/app"; |
|||
import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index"; |
|||
import { Contact } from "@/db/tables/contacts"; |
|||
import { |
|||
didInfo, |
|||
displayAmount, |
|||
getNewOffersToUser, |
|||
OfferSummaryRecord, |
|||
} from "@/libs/endorserServer"; |
|||
|
|||
@Component({ |
|||
components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav }, |
|||
}) |
|||
export default class RecentOffersToUserView extends Vue { |
|||
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|||
|
|||
activeDid = ""; |
|||
allContacts: Array<Contact> = []; |
|||
allMyDids: string[] = []; |
|||
apiServer = ""; |
|||
lastAckedOfferToUserJwtId = ""; |
|||
newOffersToUser: Array<OfferSummaryRecord> = []; |
|||
newOffersToUserAtEnd = false; |
|||
|
|||
showOffersDetails = false; |
|||
showOffersToUserProjectsDetails = false; |
|||
didInfo = didInfo; |
|||
displayAmount = displayAmount; |
|||
|
|||
async created() { |
|||
try { |
|||
const settings = await retrieveSettingsForActiveAccount(); |
|||
this.apiServer = settings.apiServer || ""; |
|||
this.activeDid = settings.activeDid || ""; |
|||
this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || ""; |
|||
|
|||
this.allContacts = await db.contacts.toArray(); |
|||
|
|||
await accountsDB.open(); |
|||
const allAccounts = await accountsDB.accounts.toArray(); |
|||
if (allAccounts.length > 0) { |
|||
this.allMyDids = allAccounts.map((acc) => acc.did); |
|||
} |
|||
|
|||
const offersToUserData = await getNewOffersToUser( |
|||
this.axios, |
|||
this.apiServer, |
|||
this.activeDid, |
|||
undefined, |
|||
undefined, |
|||
); |
|||
this.newOffersToUser = offersToUserData.data; |
|||
this.newOffersToUserAtEnd = !offersToUserData.hitLimit; |
|||
|
|||
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
|||
} catch (err: any) { |
|||
console.error("Error retrieving settings & contacts:", err); |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Error", |
|||
text: err.message || "There was an error retrieving your activity.", |
|||
}, |
|||
5000, |
|||
); |
|||
} |
|||
} |
|||
|
|||
async loadMoreOffersToUser() { |
|||
if (this.newOffersToUserAtEnd) { |
|||
return; |
|||
} |
|||
const offersToUserData = await getNewOffersToUser( |
|||
this.axios, |
|||
this.apiServer, |
|||
this.activeDid, |
|||
undefined, |
|||
this.newOffersToUser[this.newOffersToUser.length - 1].jwtId, |
|||
); |
|||
this.newOffersToUser.push(...offersToUserData.data); |
|||
this.newOffersToUserAtEnd = !offersToUserData.hitLimit; |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue