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

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) {
+  if (afterOfferJwtId) {
-    url += "&afterId=" + lastAckedOfferToUserJwtId;
+    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) {
+  if (afterOfferJwtId) {
-    url += "?afterId=" + lastAckedOfferToUserProjectsJwtId;
+    url += "?afterId=" + afterOfferJwtId;
+  }
+  if (beforeOfferJwtId) {
+    url += afterOfferJwtId ? "&" : "?";
+    url += "beforeId=" + beforeOfferJwtId;
   }
   const headers = await getHeaders(activeDid);
   const response = await axios.get(url, { headers });

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",

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-if="showDidDetails" icon="chevron-down" class="text-blue-400" />
-          <fa v-else 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

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>

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>
+    <div class="flex justify-between">
-      <span class="text-lg font-medium"
+      <div>
-        >{{ newOffersToUser.length
+        <span class="text-lg font-medium"
-        }}{{ newOffersToUserHitLimit ? "+" : "" }}</span
+          >{{ newOffersToUser.length
-      >
+          }}{{ newOffersToUserHitLimit ? "+" : "" }}</span
-      <span class="text-lg font-medium ml-4"
+        >
-        >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
+        <span class="text-lg font-medium ml-4"
-      >
+          >New Offer{{ newOffersToUser.length === 1 ? "" : "s" }} To You</span
-      <fa
+        >
-        v-if="newOffersToUser.length > 0"
+        <fa
-        :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
+          v-if="newOffersToUser.length > 0"
-        class="cursor-pointer ml-4 text-lg"
+          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
-        @click="expandOffersToUserAndMarkRead()"
+          class="cursor-pointer ml-4 text-lg"
-        data-testid="showOffersToUser"
+          @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">
+    <div class="mt-4 flex justify-between">
-      <span class="text-lg font-medium"
+      <div>
-        >{{ newOffersToUserProjects.length
+        <span class="text-lg font-medium"
-        }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
+          >{{ newOffersToUserProjects.length
-      >
+          }}{{ newOffersToUserProjectsHitLimit ? "+" : "" }}</span
-      <span class="text-lg font-medium ml-4"
+        >
-        >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To Your
+        <span class="text-lg font-medium ml-4"
-        Projects</span
+          >New Offer{{ newOffersToUserProjects.length === 1 ? "" : "s" }} To
-      >
+          Your Projects</span
-      <fa
+        >
-        v-if="newOffersToUserProjects.length > 0"
+        <fa
-        :icon="
+          v-if="newOffersToUserProjects.length > 0"
-          showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
+          :icon="
-        "
+            showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
-        class="cursor-pointer ml-4 text-lg"
+          "
-        @click="expandOffersToUserProjectsAndMarkRead()"
+          class="cursor-pointer ml-4 text-lg"
-        data-testid="showOffersToUserProjects"
+          @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

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>

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>