add new projects to front page

src/views/NewActivityView.vue

@@ -16,12 +16,13 @@
     </div>
 
     <!-- Display a single row with the name of "New Offers To You" with a count. -->
-    <div class="mb-4">
+    <div>
       <span class="text-lg font-medium">{{ newOffersToUser.length }}</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()"
@@ -29,11 +30,11 @@
       />
     </div>
 
-    <div v-if="showOffersDetails" class="ml-4">
+    <div v-if="showOffersDetails" class="ml-4 mt-4">
       <ul class="list-disc ml-4">
         <li
           v-for="offer in newOffersToUser"
-          :key="offer.id"
+          :key="offer.jwtId"
           class="mt-4 relative group"
         >
           <span>{{
@@ -64,6 +65,64 @@
         </li>
       </ul>
     </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
+      }}</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>
+
+    <div v-if="showOffersToUserProjectsDetails" class="ml-4 mt-4">
+      <ul class="list-disc ml-4">
+        <li
+          v-for="offer in newOffersToUserProjects"
+          :key="offer.jwtId"
+          class="mt-4 relative group"
+        >
+          <span>{{
+            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
+          }}</span>
+          offers
+          <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>
+          <!-- New line that appears on hover -->
+          <div
+            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as new offers
+          </div>
+        </li>
+      </ul>
+    </div>
   </section>
 </template>
 
@@ -85,7 +144,9 @@ import {
   didInfo,
   displayAmount,
   getNewOffersToUser,
+  getNewOffersToUserProjects,
   OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
 } from "@/libs/endorserServer";
 
 @Component({
@@ -99,10 +160,12 @@ export default class NewActivityView extends Vue {
   allMyDids: string[] = [];
   apiServer = "";
   lastAckedOfferToUserJwtId = "";
+  lastAckedOfferToUserProjectsJwtId = "";
   newOffersToUser: Array<OfferSummaryRecord> = [];
+  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
 
   showOffersDetails = false;
-
+  showOffersToUserProjectsDetails = false;
   didInfo = didInfo;
   displayAmount = displayAmount;
 
@@ -112,6 +175,8 @@ export default class NewActivityView extends Vue {
       this.apiServer = settings.apiServer || "";
       this.activeDid = settings.activeDid || "";
       this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
+      this.lastAckedOfferToUserProjectsJwtId =
+        settings.lastAckedOfferToUserProjectsJwtId || "";
 
       this.allContacts = await db.contacts.toArray();
 
@@ -126,6 +191,12 @@ export default class NewActivityView extends Vue {
         this.activeDid,
         this.lastAckedOfferToUserJwtId,
       );
+      this.newOffersToUserProjects = await getNewOffersToUserProjects(
+        this.axios,
+        this.apiServer,
+        this.activeDid,
+        this.lastAckedOfferToUserProjectsJwtId,
+      );
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -144,22 +215,22 @@ export default class NewActivityView extends Vue {
 
   async expandOffersToUserAndMarkRead() {
     this.showOffersDetails = !this.showOffersDetails;
-    if (this.newOffersToUser.length > 0) {
+    if (this.showOffersDetails) {
       await updateAccountSettings(this.activeDid, {
         lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
       });
       // note that we don't update this.lastAckedOfferToUserJwtId in case they
       // later choose the last one to keep the offers as new
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Marked as Read",
+          text: "The offers are marked as viewed. Click in the list to keep them as new.",
+        },
+        5000,
+      );
     }
-    this.$notify(
-      {
-        group: "alert",
-        type: "info",
-        title: "Marked as Read",
-        text: "The offers are marked as viewed. Click in the list to keep them as new.",
-      },
-      5000,
-    );
   }
 
   async markOffersAsReadStartingWith(jwtId: string) {
@@ -187,5 +258,55 @@ export default class NewActivityView extends Vue {
       3000,
     );
   }
+
+  async expandOffersToUserProjectsAndMarkRead() {
+    this.showOffersToUserProjectsDetails =
+      !this.showOffersToUserProjectsDetails;
+    if (this.showOffersToUserProjectsDetails) {
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.newOffersToUserProjects[0].jwtId,
+      });
+      // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
+      // they later choose the last one to keep the offers as new
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Marked as Read",
+          text: "The offers are marked as viewed. Click in the list to keep them as new.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async markOffersToUserProjectsAsReadStartingWith(jwtId: string) {
+    const index = this.newOffersToUserProjects.findIndex(
+      (offer) => offer.jwtId === jwtId,
+    );
+    if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
+      // Set to the next offer's jwtId
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.newOffersToUserProjects[index + 1].jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await updateAccountSettings(this.activeDid, {
+        lastAckedOfferToUserProjectsJwtId:
+          this.lastAckedOfferToUserProjectsJwtId,
+      });
+    }
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Marked as Unread",
+        text: "All offers above that one are marked as unread.",
+      },
+      3000,
+    );
+  }
 }
 </script>