Browse Source

Merge pull request 'Show the gives to & from a project (plan)' (#37) from project-gives into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/37
similarify-search
anomalist 1 year ago
parent
commit
3f8be3b4de
  1. 14
      project.task.yaml
  2. 2
      src/main.ts
  3. 1
      src/views/AccountViewView.vue
  4. 1
      src/views/ContactAmountsView.vue
  5. 39
      src/views/DiscoverView.vue
  6. 1
      src/views/HomeView.vue
  7. 1
      src/views/NewEditProjectView.vue
  8. 199
      src/views/ProjectViewView.vue
  9. 19
      src/views/ProjectsView.vue

14
project.task.yaml

@ -1,12 +1,13 @@
tasks:
- .5 audit all console.log calls
- 01 design ideas for simple gives on the Home page
- 01 add list of 'give' records for a project on ProjectView UI
- 02 Discover page - display results (currently in console.log), spin when searching
- 02 Discover page - display results (currently in console.log) & link, spin when searching
- 08 search by location, endpoint, etc assignee:trent
- 01 add a location for a project via map pin :
- give attribute to use assignee:trent
- 01 add a location for a project via map pin (see API by clicking on "Nearby")
- 01 remove all the "form" fields (or at least investigate to see if that page refresh is desired)
- .2 change "errorMessage" to "alertMessage" on ProjectViewView.vue
- 08 Scan QR code to import into contacts.
@ -69,9 +70,10 @@ tasks:
- pull, w/ scheduled runs
- linking between projects or plans :
- terminology:
- for subtasks: fulfills (is it really the same?), feeds, contributes to, supplies, boosts, advances
- for blocking: blocks, precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
- show total time given to & from a project
- terminology:
- for subtasks: fulfills (is it really the same?), feeds, contributes to, supplies, boosts, advances
- for blocking: blocks, precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
- Stats :
- 01 point out user's location on the world

2
src/main.ts

@ -19,6 +19,7 @@ import {
faCircleUser,
faClock,
faCoins,
faComment,
faCopy,
faEllipsisVertical,
faEye,
@ -58,6 +59,7 @@ library.add(
faCircleUser,
faClock,
faCoins,
faComment,
faCopy,
faEllipsisVertical,
faEye,

1
src/views/AccountViewView.vue

@ -284,6 +284,7 @@ import { useClipboard } from "@vueuse/core";
import { AppString } from "@/constants/app";
import { db, accountsDB } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto";
import { AxiosError } from "axios/index";

1
src/views/ContactAmountsView.vue

@ -121,6 +121,7 @@ import * as R from "ramda";
import { Component, Vue } from "vue-facing-decorator";
import { accountsDB, db } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken, SimpleSigner } from "@/libs/crypto";

39
src/views/DiscoverView.vue

@ -58,7 +58,14 @@
<!-- Results List -->
<ul class="">
<li class="border-b border-slate-300">
<a href="project-view.html" class="block py-4 flex gap-4">
<a
@click="
onClickLoadProject(
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ',
)
"
class="block py-4 flex gap-4"
>
<div class="w-12">
<img
src="https://picsum.photos/200/200?random=1"
@ -76,7 +83,14 @@
</li>
<li class="border-b border-slate-300">
<a href="project-view.html" class="block py-4 flex gap-4">
<a
@click="
onClickLoadProject(
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ',
)
"
class="block py-4 flex gap-4"
>
<div class="w-12">
<img
src="https://picsum.photos/200/200?random=2"
@ -94,7 +108,14 @@
</li>
<li class="border-b border-slate-300">
<a href="project-view.html" class="block py-4 flex gap-4">
<a
@click="
onClickLoadProject(
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ',
)
"
class="block py-4 flex gap-4"
>
<div class="w-12">
<img
src="https://picsum.photos/200/200?random=3"
@ -240,5 +261,17 @@ export default class DiscoverView extends Vue {
this.alertTitle = "Error";
}
}
/**
* Handle clicking on a project entry found in the list
* @param id of the project
**/
onClickLoadProject(id: string) {
localStorage.setItem("projectId", id);
const route = {
name: "project",
};
this.$router.push(route);
}
}
</script>

1
src/views/HomeView.vue

@ -73,6 +73,7 @@
import { Component, Vue } from "vue-facing-decorator";
import GiftedDialog from "@/components/GiftedDialog.vue";
import { db, accountsDB } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto";
import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";

1
src/views/NewEditProjectView.vue

@ -76,6 +76,7 @@ import * as didJwt from "did-jwt";
import { Component, Vue } from "vue-facing-decorator";
import { accountsDB, db } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken, SimpleSigner } from "@/libs/crypto";
import { useAppStore } from "@/store/app";

199
src/views/ProjectViewView.vue

@ -23,7 +23,7 @@
</h1>
</div>
<div>
<div class="text-red-500">
{{ errorMessage }}
</div>
@ -65,32 +65,84 @@
</button>
</div>
<button
@click="openDialog({ name: 'you', did: activeDid })"
class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
>
I gave...
</button>
<div>
<p>... or choose a contact who gave:</p>
<!-- similar contact selection code is in multiple places -->
<div class="px-4">
<div v-if="activeDid">
<button
v-for="contact in allContacts"
:key="contact.did"
@click="openDialog(contact)"
class="text-blue-500"
@click="openDialog({ name: 'you', did: activeDid })"
class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md"
>
&nbsp;{{ contact.name }},
</button>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
<button @click="openDialog()" class="text-blue-500">
someone not specified
I gave...
</button>
&horbar; or:
</div>
<!-- similar contact selection code is in multiple places -->
Record a gift from
<span v-for="contact in allContacts" :key="contact.did">
<button @click="openDialog(contact)" class="text-blue-500">
&nbsp;{{ contact.name }}</button
>,
</span>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
<button @click="openDialog()" class="text-blue-500">
someone not specified
</button>
</div>
<!-- Gifts to & from this -->
<div class="mt-8 flex justify-around">
<div>
<h1 class="text-xl">Given to this Project</h1>
</div>
<div>
<h1 class="text-xl">... and from this Project</h1>
</div>
</div>
<div class="flex justify-around">
<div class="w-1/2">
<div v-for="give in givesToThis" :key="give.id">
<div class="flex justify-between">
<div class="flex gap-3">
<div class="flex gap-2">
<fa icon="user" class="fa-fw text-slate-400"></fa>
<span>{{
didInfo(give.agentDid, activeDid, accounts, allContacts)
}}</span>
</div>
<div class="flex gap-2" v-if="give.amount">
<fa icon="coins" class="fa-fw text-slate-400"></fa>
<span>{{ give.amount }}</span>
</div>
<div class="flex gap-2" v-if="give.description">
<fa icon="comment" class="fa-fw text-slate-400"></fa>
<span>{{ give.description }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="w-1/2">
<div v-for="give in givesByThis" :key="give.id">
<div class="flex justify-between">
<div class="flex gap-3">
<div class="flex gap-2">
<fa icon="user" class="fa-fw text-slate-400"></fa>
<span>{{
didInfo(give.agentDid, activeDid, accounts, allContacts)
}}</span>
</div>
<div class="flex gap-2" v-if="give.amount">
<fa icon="coins" class="fa-fw text-slate-400"></fa>
<span>{{ give.amount }}</span>
</div>
<div class="flex gap-2">
<fa icon="comment" class="fa-fw text-slate-400"></fa>
<span>{{ give.description }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<GiftedDialog
ref="customDialog"
@dialog-result="handleDialogResult"
@ -107,15 +159,20 @@
<script lang="ts">
import { AxiosError } 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";
import { AccountsSchema } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { createAndSubmitGive } from "@/libs/endorserServer";
import { accessToken } from "@/libs/crypto";
import { IIdentifier } from "@veramo/core";
import {
createAndSubmitGive,
didInfo,
GiveServerRecord,
} from "@/libs/endorserServer";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";
@ -123,26 +180,42 @@ import QuickNav from "@/components/QuickNav";
components: { GiftedDialog, AlertMessage, QuickNav },
})
export default class ProjectViewView extends Vue {
accounts: AccountsSchema;
activeDid = "";
alertMessage = "";
alertTitle = "";
allContacts: Array<Contact> = [];
apiServer = "";
description = "";
errorMessage = "";
expanded = false;
givesToThis: Array<GiveServerRecord> = [];
givesByThis: Array<GiveServerRecord> = [];
name = "";
description = "";
numAccounts = 0;
projectId = localStorage.getItem("projectId") || ""; // handle ID
timeSince = "";
truncatedDesc = "";
truncateLength = 40;
timeSince = "";
projectId = localStorage.getItem("projectId") || ""; // handle ID
errorMessage = "";
alertMessage = "";
alertTitle = "";
accounts: AccountsSchema;
numAccounts = 0;
async beforeCreate() {
accountsDB.open();
this.accounts = accountsDB.accounts;
this.numAccounts = await this.accounts.count();
this.numAccounts = (await this.accounts?.count()) || 0;
}
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();
this.accounts = accountsDB.accounts;
const accountsArr = await this.accounts?.toArray();
const account = accountsArr.find((acc) => acc.did === this.activeDid);
const identity = JSON.parse(account?.identity || "null");
this.LoadProject(identity);
}
public async getIdentity(activeDid) {
@ -178,6 +251,11 @@ export default class ProjectViewView extends Vue {
this.$router.push(route);
}
// Isn't there a better way to make this available to the template?
didInfo(did, activeDid, identities, contacts) {
return didInfo(did, activeDid, identities, contacts);
}
expandText() {
this.expanded = true;
}
@ -191,21 +269,24 @@ export default class ProjectViewView extends Vue {
this.apiServer +
"/api/claim/byHandle/" +
encodeURIComponent(this.projectId);
const token = await accessToken(identity);
const headers = {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
};
if (identity) {
const token = await accessToken(identity);
headers["Authorization"] = "Bearer " + token;
}
try {
const resp = await this.axios.get(url, { headers });
if (resp.status === 200) {
// feel free to remove this; I haven't yet because it's helpful
console.log('Loaded project: ', resp.data);
const startTime = resp.data.startTime;
if (startTime != null) {
const eventDate = new Date(startTime);
const now = moment.now();
this.timeSince = moment.utc(now).to(eventDate);
errorMessage;
}
this.name = resp.data.claim?.name || "(no name)";
this.description = resp.data.claim?.description || "(no description)";
@ -225,27 +306,41 @@ export default class ProjectViewView extends Vue {
console.error("Error retrieving project:", error);
}
}
}
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();
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.errorMessage = "Failed to retrieve gives to this project.";
}
} catch (error: unknown) {
console.error("Error retrieving gives to this project:", error);
const serverError = error as AxiosError;
this.errorMessage =
"Something went wrong retrieving gives to this project.";
}
if (this.numAccounts === 0) {
console.error("Problem! Should have a profile!");
} else {
const accounts = await accountsDB.accounts.toArray();
const account = accounts.find((acc) => acc.did === this.activeDid);
const identity = JSON.parse(account?.identity || "null");
if (!identity) {
throw new Error(
"An ID is chosen but there are no keys for it so it cannot be used to talk with the service.",
);
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.errorMessage = "Failed to retrieve gives by this project.";
}
this.LoadProject(identity);
} catch (error: unknown) {
console.error("Error retrieving gives by this project:", error);
const serverError = error as AxiosError;
this.errorMessage =
"Something went wrong retrieving gives by project.";
}
}

19
src/views/ProjectsView.vue

@ -75,6 +75,7 @@
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { accountsDB, db } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto";
import { IIdentifier } from "@veramo/core";
@ -137,14 +138,15 @@ export default class ProjectsView extends Vue {
try {
this.isLoading = true;
const resp = await this.axios.get(url, { headers });
if (resp.status === 200) {
if (resp.status === 200 || !resp.data.data) {
const plans: ProjectData[] = resp.data.data;
for (const plan of plans) {
const { name, description, handleId = plan.fullIri, rowid } = plan;
this.projects.push({ name, description, handleId, rowid });
}
} else {
console.log(resp.status);
console.log("Bad server response & data:", resp.status, resp.data);
throw Error("Failed to get projects from the server.");
}
} catch (error) {
console.error("Got error loading projects:", error.message);
@ -217,19 +219,18 @@ export default class ProjectsView extends Vue {
this.apiServer = settings?.apiServer || "";
if (this.numAccounts === 0) {
console.error("Problem! You need a profile!");
this.alertTitle = "Error!";
this.alertMessage = "Problem! You need a profile!";
console.error("No accounts found.");
this.alertTitle = "Error";
this.alertMessage = "You need an identity to load your projects.";
} else {
const identity = await this.getIdentity(activeDid);
console.log(identity);
this.current = identity;
this.LoadProjects(identity);
}
} catch (err) {
console.log(err);
this.alertTitle = "Error!";
this.alertMessage = "Problem! You need a profile!";
console.log("Error initializing:", err);
this.alertTitle = "Error";
this.alertMessage = "Something went wrong loading your projects.";
}
}

Loading…
Cancel
Save