You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
575 lines
16 KiB
575 lines
16 KiB
<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…
|
|
</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="Anonymous"
|
|
: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…
|
|
</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">
|
|
…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"
|
|
@dialog-result="handleDialogResult"
|
|
message="Received from"
|
|
>
|
|
</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 } from "@/db/tables/settings";
|
|
import { accessToken } from "@/libs/crypto";
|
|
import {
|
|
createAndSubmitGive,
|
|
didInfo,
|
|
GiverInputInfo,
|
|
GiverOutputInfo,
|
|
GiveServerRecord,
|
|
ResultWithType,
|
|
} from "@/libs/endorserServer";
|
|
import QuickNav from "@/components/QuickNav.vue";
|
|
import EntityIcon from "@/components/EntityIcon.vue";
|
|
|
|
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);
|
|
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();
|
|
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,
|
|
);
|
|
}
|
|
}
|
|
|
|
openDialog(contact: GiverInputInfo) {
|
|
const dialog: GiftedDialog = this.$refs.customDialog as GiftedDialog;
|
|
dialog.open(contact);
|
|
}
|
|
|
|
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
|
|
);
|
|
}
|
|
|
|
handleDialogResult(result: GiverOutputInfo) {
|
|
if (result.action === "confirm") {
|
|
return new Promise((resolve) => {
|
|
this.recordGive(
|
|
result.giver?.did,
|
|
result.description,
|
|
result.hours,
|
|
).then(() => {
|
|
resolve(null);
|
|
});
|
|
});
|
|
} else {
|
|
// action was not "confirm" so do nothing
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param giverDid may be null
|
|
* @param description may be an empty string
|
|
* @param hours may be 0
|
|
*/
|
|
async recordGive(giverDid?: string, description?: string, hours?: number) {
|
|
if (!this.activeDid) {
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: "You must select an identity before you can record a give.",
|
|
},
|
|
-1,
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (!description && !hours) {
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: "You must enter a description or some number of hours.",
|
|
},
|
|
-1,
|
|
);
|
|
} else {
|
|
const identity = await this.getIdentity(this.activeDid);
|
|
const result = await createAndSubmitGive(
|
|
this.axios,
|
|
this.apiServer,
|
|
identity,
|
|
giverDid,
|
|
this.activeDid,
|
|
description,
|
|
hours,
|
|
this.projectId,
|
|
);
|
|
if (result.type == "success") {
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "success",
|
|
title: "Success",
|
|
text: "That gift was recorded.",
|
|
},
|
|
-1,
|
|
);
|
|
} else {
|
|
console.log("Error with give creation:", result);
|
|
if (result.type != "error") {
|
|
console.log(
|
|
"... and it has an unexpected result type of",
|
|
(result as ResultWithType).type,
|
|
);
|
|
}
|
|
const message =
|
|
result?.error?.userMessage ||
|
|
"There was an error recording the Give.";
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "danger",
|
|
title: "Error",
|
|
text: message,
|
|
},
|
|
-1,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|