crowd-funder-for-time-pwa/src/views/NewActivityView.vue

<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"
        />
        New Activity For You
      </h1>
    </div>

    <!-- Display a single row with the name of "New Offers To You" with a count. -->
    <div class="new-offers-row flex justify-between items-center mb-4">
      <div class="flex justify-between items-center">
        <span class="text-lg font-medium">New Offers To You</span>
        <fa
          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
          class="cursor-pointer ml-4"
          @click="showOffersDetails = !showOffersDetails"
        />
      </div>
      <span class="text-lg font-medium">{{ newOffersToUser.length }}</span>
    </div>

    <div v-if="showOffersDetails" class="ml-4">
      <ul>
        <li v-for="offer in newOffersToUser" :key="offer.id" class="mt-2">
          <span>{{
            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
          }}</span>
          offers
          <span v-if="offer.description">{{ offer.description }}</span>
          <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>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";

import GiftedDialog from "@/components/GiftedDialog.vue";
import QuickNav from "@/components/QuickNav.vue";
import EntityIcon from "@/components/EntityIcon.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: { GiftedDialog, QuickNav, EntityIcon },
})
export default class NewActivityView extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  activeDid = "";
  allContacts: Array<Contact> = [];
  allMyDids: string[] = [];
  apiServer = "";
  lastAckedOfferToUserJwtId = "";
  newOffersToUser: Array<OfferSummaryRecord> = [];

  showOffersDetails = 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);
      }
      this.newOffersToUser = await getNewOffersToUser(
        this.axios,
        this.apiServer,
        this.activeDid,
        this.lastAckedOfferToUserJwtId,
      );

      // 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,
      );
    }
  }
}
</script>