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

<template>
  <QuickNav selected="Projects"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24">
    <!-- Breadcrumb -->
    <div id="ViewBreadcrumb" class="mb-8">
      <h1 class="text-lg text-center font-light relative px-7">
        <!-- Back -->
        <button
          @click="$router.go(-1)"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
        >
          <fa icon="chevron-left" class="fa-fw"></fa>
        </button>
        View Plan
      </h1>
    </div>

    <!-- Project Details -->
    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
      <div>
        <div class="block pb-4 flex gap-4">
          <div class="flex-none w-16 pt-1">
            <EntityIcon
              :entityId="projectId"
              :iconSize="64"
              class="block border border-slate-300 rounded-md"
            ></EntityIcon>
          </div>

          <div class="overflow-hidden">
            <h2 class="text-xl font-semibold">{{ name }}</h2>
            <div class="text-sm mb-3">
              <div class="truncate">
                <fa icon="user" class="fa-fw text-slate-400"></fa>
                {{ issuer }}
              </div>
              <div>
                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
                {{ timeSince }}
              </div>
              <div v-if="latitude || longitude">
                <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
                <a
                  :href="getOpenStreetMapUrl()"
                  target="_blank"
                  class="underline"
                >
                  Map View
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="text-sm text-slate-500">
          <div v-if="!expanded">
            {{ truncatedDesc }}
            <a v-if="description.length >= truncateLength" @click="expandText"
              >Read More</a
            >
          </div>
          <div v-else>
            {{ description }}
            <a
              @click="collapseText"
              class="uppercase text-xs font-semibold text-slate-700"
              >Read Less</a
            >
          </div>
        </div>
      </div>
      <button
        v-if="issuer == activeDid"
        type="button"
        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
        @click="onEditClick()"
      >
        Edit
      </button>
    </div>

    <div>
      <div v-if="activeDid" class="text-center">
        <button
          @click="openDialog({ name: 'you', did: activeDid })"
          class="block w-full text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
        >
          I gave&hellip;
        </button>
        <p class="mt-2 mb-4 text-center">Or, record a gift from:</p>
      </div>
      <p v-if="!activeDid" class="mt-2 mb-4">Record a gift from:</p>

      <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
        <li @click="openDialog()">
          <EntityIcon
            :entityId="null"
            :iconSize="64"
            class="mx-auto border border-slate-300 rounded-md mb-1"
          ></EntityIcon>
          <h3
            class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
          >
            Anonymous
          </h3>
        </li>
        <li
          v-for="contact in allContacts"
          :key="contact.did"
          @click="openDialog(contact)"
        >
          <EntityIcon
            :entityId="contact.did"
            :iconSize="64"
            class="mx-auto border border-slate-300 rounded-md mb-1"
          ></EntityIcon>
          <h3
            class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
          >
            {{ contact.name || "(no name)" }}
          </h3>
        </li>
      </ul>

      <!-- Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list (we want to limit the grid count above to 8 or 12 accounts to keep it compact) -->
      <router-link
        v-if="allContacts.length >= 7"
        :to="{ name: 'contact-gives' }"
        class="block text-center text-md font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md"
      >
        Show More Contacts&hellip;
      </router-link>
    </div>

    <!-- Gifts to & from this -->
    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4">
      <div class="bg-slate-100 px-4 py-3 rounded-md">
        <h3 class="text-sm uppercase font-semibold mb-3">
          Given to this Project
        </h3>

        <ul class="text-sm border-t border-slate-300">
          <li
            v-for="give in givesToThis"
            :key="give.id"
            class="py-1.5 border-b border-slate-300"
          >
            <div class="flex justify-between gap-4">
              <span
                ><fa icon="user" class="fa-fw text-slate-400"></fa>
                {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
              </span>
              <span v-if="give.amount"
                ><fa icon="coins" class="fa-fw text-slate-400"></fa>
                {{ give.amount }}
              </span>
            </div>
            <div v-if="give.description" class="text-slate-500">
              <fa icon="comment" class="fa-fw text-slate-400"></fa>
              {{ give.description }}
            </div>
          </li>
        </ul>
      </div>

      <div class="bg-slate-100 px-4 py-3 rounded-md">
        <h3 class="text-sm uppercase font-semibold mb-3">
          &hellip;and from this Project
        </h3>

        <ul class="text-sm border-t border-slate-300">
          <li
            v-for="give in givesByThis"
            :key="give.id"
            class="py-1.5 border-b border-slate-300"
          >
            <div class="flex justify-between gap-4">
              <span
                ><fa icon="user" class="fa-fw text-slate-400"></fa>
                {{ didInfo(give.agentDid, activeDid, allMyDids, allContacts) }}
              </span>
              <span v-if="give.amount"
                ><fa icon="coins" class="fa-fw text-slate-400"></fa>
                {{ give.amount }}
              </span>
            </div>
            <div v-if="give.description" class="text-slate-500">
              <fa icon="comment" class="fa-fw text-slate-400"></fa>
              {{ give.description }}
            </div>
          </li>
        </ul>
      </div>
    </div>

    <GiftedDialog
      ref="customDialog"
      message="Received from"
      :projectId="this.projectId"
    >
    </GiftedDialog>
  </section>
</template>

<script lang="ts">
import { AxiosError, RawAxiosRequestHeaders } from "axios";
import * as moment from "moment";
import { IIdentifier } from "@veramo/core";
import { Component, Vue } from "vue-facing-decorator";

import GiftedDialog from "@/components/GiftedDialog.vue";
import { accountsDB, db } from "@/db/index";
import { Contact } from "@/db/tables/contacts";
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto";
import {
  didInfo,
  GiverInputInfo,
  GiveServerRecord,
} from "@/libs/endorserServer";
import QuickNav from "@/components/QuickNav.vue";
import EntityIcon from "@/components/EntityIcon.vue";
import { Account } from "@/db/tables/accounts";

interface Notification {
  group: string;
  type: string;
  title: string;
  text: string;
}

@Component({
  components: { GiftedDialog, QuickNav, EntityIcon },
})
export default class ProjectViewView extends Vue {
  $notify!: (notification: Notification, timeout?: number) => void;

  activeDid = "";
  allMyDids: Array<string> = [];
  allContacts: Array<Contact> = [];
  apiServer = "";
  description = "";
  expanded = false;
  givesToThis: Array<GiveServerRecord> = [];
  givesByThis: Array<GiveServerRecord> = [];
  latitude = 0;
  longitude = 0;
  name = "";
  issuer = "";
  projectId = localStorage.getItem("projectId") || ""; // handle ID
  timeSince = "";
  truncatedDesc = "";
  truncateLength = 40;

  async created() {
    await db.open();
    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
    this.activeDid = settings?.activeDid || "";
    this.apiServer = settings?.apiServer || "";
    this.allContacts = await db.contacts.toArray();

    await accountsDB.open();
    const accounts = accountsDB.accounts;
    const accountsArr = await accounts?.toArray();
    this.allMyDids = accountsArr.map((acc) => acc.did);
    const account = accountsArr.find((acc) => acc.did === this.activeDid);
    const identity = JSON.parse(account?.identity || "null");
    this.LoadProject(identity);
  }

  public async getIdentity(activeDid: string) {
    await accountsDB.open();
    const account = (await accountsDB.accounts
      .where("did")
      .equals(activeDid)
      .first()) as Account;
    const identity = JSON.parse(account?.identity || "null");

    if (!identity) {
      throw new Error(
        "Attempted to load project records with no identity available.",
      );
    }
    return identity;
  }

  public async getHeaders(identity: IIdentifier) {
    const token = await accessToken(identity);
    const headers = {
      "Content-Type": "application/json",
      Authorization: "Bearer " + token,
    };
    return headers;
  }

  onEditClick() {
    localStorage.setItem("projectId", this.projectId as string);
    const route = {
      name: "new-edit-project",
    };
    this.$router.push(route);
  }

  // Isn't there a better way to make this available to the template?
  didInfo(
    did: string,
    activeDid: string,
    dids: Array<string>,
    contacts: Array<Contact>,
  ) {
    return didInfo(did, activeDid, dids, contacts);
  }

  expandText() {
    this.expanded = true;
  }

  collapseText() {
    this.expanded = false;
  }

  async LoadProject(identity: IIdentifier) {
    const url =
      this.apiServer +
      "/api/claim/byHandle/" +
      encodeURIComponent(this.projectId);
    const headers: RawAxiosRequestHeaders = {
      "Content-Type": "application/json",
    };
    if (identity) {
      const token = await accessToken(identity);
      headers["Authorization"] = "Bearer " + token;
    }

    try {
      const resp = await this.axios.get(url, { headers });
      if (resp.status === 200) {
        const startTime = resp.data.startTime;
        if (startTime != null) {
          const eventDate = new Date(startTime);
          const now = moment.now();
          this.timeSince = moment.utc(now).to(eventDate);
        }
        this.issuer = resp.data.issuer;
        this.name = resp.data.claim?.name || "(no name)";
        this.description = resp.data.claim?.description || "(no description)";
        this.truncatedDesc = this.description.slice(0, this.truncateLength);
        this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
        this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
      } else if (resp.status === 404) {
        // actually, axios throws an error so we never get here
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: "That project does not exist.",
          },
          -1,
        );
      }
    } catch (error: unknown) {
      const serverError = error as AxiosError;
      if (serverError.response?.status === 404) {
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: "That project does not exist.",
          },
          -1,
        );
      } else {
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: "Something went wrong retrieving that project. See logs for more info.",
          },
          -1,
        );
        console.error("Error retrieving project:", serverError.message);
      }
    }

    const givesInUrl =
      this.apiServer +
      "/api/v2/report/givesForPlans?planIds=" +
      encodeURIComponent(JSON.stringify([this.projectId]));
    try {
      const resp = await this.axios.get(givesInUrl, { headers });
      if (resp.status === 200 && resp.data.data) {
        this.givesToThis = resp.data.data;
      } else {
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: "Failed to retrieve gives to this project.",
          },
          -1,
        );
      }
    } catch (error: unknown) {
      const serverError = error as AxiosError;
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "Something went wrong retrieving gives to this project.",
        },
        -1,
      );
      console.error(
        "Error retrieving gives to this project:",
        serverError.message,
      );
    }

    const givesOutUrl =
      this.apiServer +
      "/api/v2/report/givesProvidedBy?providerId=" +
      encodeURIComponent(this.projectId);
    try {
      const resp = await this.axios.get(givesOutUrl, { headers });
      if (resp.status === 200 && resp.data.data) {
        this.givesByThis = resp.data.data;
      } else {
        this.$notify(
          {
            group: "alert",
            type: "danger",
            title: "Error",
            text: "Failed to retrieve gives by this project.",
          },
          -1,
        );
      }
    } catch (error: unknown) {
      const serverError = error as AxiosError;
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error",
          text: "Something went wrong retrieving gives by project.",
        },
        -1,
      );
      console.error(
        "Error retrieving gives by this project:",
        serverError.message,
      );
    }
  }

  getOpenStreetMapUrl() {
    // Google URL is https://maps.google.com/?q=LAT,LONG
    return (
      "https://www.openstreetmap.org/?mlat=" +
      this.latitude +
      "&mlon=" +
      this.longitude +
      "#map=15/" +
      this.latitude +
      "/" +
      this.longitude
    );
  }

  openDialog(contact: GiverInputInfo) {
    (this.$refs.customDialog as GiftedDialog).open(contact);
  }
}
</script>