Browse Source

add pages to see all the offers to user and offers to user's projects

master
Trent Larson 1 week ago
parent
commit
d260defb05
  1. 25
      src/libs/endorserServer.ts
  2. 10
      src/router/index.ts
  3. 4
      src/views/DIDView.vue
  4. 7
      src/views/HomeView.vue
  5. 80
      src/views/NewActivityView.vue
  6. 150
      src/views/RecentOffersToUserProjectsView.vue
  7. 146
      src/views/RecentOffersToUserView.vue

25
src/libs/endorserServer.ts

@ -593,17 +593,21 @@ export async function setPlanInCache(
/**
*
* @returns { data: Array<OfferSummaryRecord>, hitLimit: boolean }
* @returns { data: Array<OfferSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
*/
export async function getNewOffersToUser(
axios: Axios,
apiServer: string,
activeDid: string,
lastAckedOfferToUserJwtId?: string,
afterOfferJwtId?: string,
beforeOfferJwtId?: string,
) {
let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
if (lastAckedOfferToUserJwtId) {
url += "&afterId=" + lastAckedOfferToUserJwtId;
if (afterOfferJwtId) {
url += "&afterId=" + afterOfferJwtId;
}
if (beforeOfferJwtId) {
url += "&beforeId=" + beforeOfferJwtId;
}
const headers = await getHeaders(activeDid);
const response = await axios.get(url, { headers });
@ -611,17 +615,22 @@ export async function getNewOffersToUser(
}
/**
*
* @returns { data: Array<OfferToPlanSummaryRecord>, hitLimit: boolean }
* @returns { data: Array<OfferToPlanSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
*/
export async function getNewOffersToUserProjects(
axios: Axios,
apiServer: string,
activeDid: string,
lastAckedOfferToUserProjectsJwtId?: string,
afterOfferJwtId?: string,
beforeOfferJwtId?: string,
) {
let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
if (lastAckedOfferToUserProjectsJwtId) {
url += "?afterId=" + lastAckedOfferToUserProjectsJwtId;
if (afterOfferJwtId) {
url += "?afterId=" + afterOfferJwtId;
}
if (beforeOfferJwtId) {
url += afterOfferJwtId ? "&" : "?";
url += "beforeId=" + beforeOfferJwtId;
}
const headers = await getHeaders(activeDid);
const response = await axios.get(url, { headers });

10
src/router/index.ts

@ -184,6 +184,16 @@ const routes: Array<RouteRecordRaw> = [
name: "quick-action-bvc-end",
component: () => import("../views/QuickActionBvcEndView.vue"),
},
{
path: "/recent-offers-to-user",
name: "recent-offers-to-user",
component: () => import("../views/RecentOffersToUserView.vue"),
},
{
path: "/recent-offers-to-user-projects",
name: "recent-offers-to-user-projects",
component: () => import("../views/RecentOffersToUserProjectsView.vue"),
},
{
path: "/scan-contact",
name: "scan-contact",

4
src/views/DIDView.vue

@ -41,8 +41,8 @@
class="ml-2 mr-2 mt-4"
>
Details
<fa v-if="showDidDetails" icon="chevron-up" class="text-blue-400" />
<fa v-else icon="chevron-down" class="text-blue-400" />
<fa v-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
<fa v-else icon="chevron-right" class="text-blue-400" />
</button>
<!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
<pre

7
src/views/HomeView.vue

@ -197,7 +197,6 @@
</div>
<div
v-if="numNewOffersToUser || numNewOffersToUserProjects"
@click="goToActivityToUserPage()"
class="border-t p-2 border-slate-300"
>
@ -212,7 +211,9 @@
>
{{ numNewOffersToUser }}{{ newOffersToUserHitLimit ? "+" : "" }}
</span>
<p>new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you</p>
<p class="text-center">
new offer{{ numNewOffersToUser === 1 ? "" : "s" }} to you
</p>
</div>
<div
v-if="numNewOffersToUserProjects"
@ -225,7 +226,7 @@
{{ numNewOffersToUserProjects
}}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}
</span>
<p>
<p class="text-center">
new offer{{ numNewOffersToUserProjects === 1 ? "" : "s" }} to your
projects
</p>

80
src/views/NewActivityView.vue

@ -16,21 +16,26 @@
</div>
<!-- Display a single row with the name of "New Offers To You" with a count. -->
<div>
<span class="text-lg font-medium"
>{{ newOffersToUser.length
}}{{ newOffersToUserHitLimit ? "+" : "" }}</span
>
<span class="text-lg font-medium ml-4"
>New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
>
<fa
v-if="newOffersToUser.length > 0"
:icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
class="cursor-pointer ml-4 text-lg"
@click="expandOffersToUserAndMarkRead()"
data-testid="showOffersToUser"
/>
<div class="flex justify-between">
<div>
<span class="text-lg font-medium"
>{{ newOffersToUser.length
}}{{ newOffersToUserHitLimit ? "+" : "" }}</span
>
<span class="text-lg font-medium ml-4"
>New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
>
<fa
v-if="newOffersToUser.length > 0"
:icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
class="cursor-pointer ml-4 text-lg"
@click="expandOffersToUserAndMarkRead()"
data-testid="showOffersToUser"
/>
</div>
<router-link to="/recent-offers-to-user" class="text-blue-500">
See all
</router-link>
</div>
<div v-if="showOffersDetails" class="ml-4 mt-4">
@ -43,7 +48,7 @@
<span>{{
didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
}}</span>
offers
offered
<span v-if="offer.objectDescription">{{
offer.objectDescription
}}</span
@ -70,24 +75,29 @@
</div>
<!-- Display a single row with the name of "New Offers To Your Projects" with a count. -->
<div class="mt-4">
<span class="text-lg font-medium"
>{{ newOffersToUserProjects.length
}}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
>
<span class="text-lg font-medium ml-4"
>New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To Your
Projects</span
>
<fa
v-if="newOffersToUserProjects.length > 0"
:icon="
showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
"
class="cursor-pointer ml-4 text-lg"
@click="expandOffersToUserProjectsAndMarkRead()"
data-testid="showOffersToUserProjects"
/>
<div class="mt-4 flex justify-between">
<div>
<span class="text-lg font-medium"
>{{ newOffersToUserProjects.length
}}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
>
<span class="text-lg font-medium ml-4"
>New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
Your Projects</span
>
<fa
v-if="newOffersToUserProjects.length > 0"
:icon="
showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
"
class="cursor-pointer ml-4 text-lg"
@click="expandOffersToUserProjectsAndMarkRead()"
data-testid="showOffersToUserProjects"
/>
</div>
<router-link to="/recent-offers-to-user-projects" class="text-blue-500">
See all
</router-link>
</div>
<div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
@ -100,7 +110,7 @@
<span>{{
didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
}}</span>
offers
offered
<span v-if="offer.objectDescription">{{
offer.objectDescription
}}</span

150
src/views/RecentOffersToUserProjectsView.vue

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

146
src/views/RecentOffersToUserView.vue

@ -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…
Cancel
Save