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

2024-11-05 19:03:12 -07:00
parent 0d880d1edc
commit c004706425
7 changed files with 374 additions and 48 deletions
--- a/src/libs/endorserServer.ts
+++ b/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 });
--- a/src/router/index.ts
+++ b/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",
--- a/src/views/DIDView.vue
+++ b/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
--- a/src/views/HomeView.vue
+++ b/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>
--- a/src/views/NewActivityView.vue
+++ b/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
--- a/src/views/RecentOffersToUserProjectsView.vue
+++ b/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>
--- a/src/views/RecentOffersToUserView.vue
+++ b/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>