Browse Source

allow viewing of a project without an ID (and other refactors)

kb/add-usage-guide
Trent Larson 1 year ago
parent
commit
0257901c5b
  1. 13
      project.task.yaml
  2. 1
      src/views/AccountViewView.vue
  3. 1
      src/views/ContactAmountsView.vue
  4. 39
      src/views/DiscoverView.vue
  5. 1
      src/views/HomeView.vue
  6. 1
      src/views/NewEditProjectView.vue
  7. 106
      src/views/ProjectViewView.vue
  8. 19
      src/views/ProjectsView.vue

13
project.task.yaml

@ -1,11 +1,11 @@
tasks: tasks:
- .5 audit all console.log calls
- 01 design ideas for simple gives on the Home page - 01 design ideas for simple gives on the Home page
- 01 add list of 'give' records for a project on ProjectView UI - 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 - 08 search by location, endpoint, etc assignee:trent
- 01 add a location for a project via map pin : - 01 add a location for a project via map pin (see API by clicking on "Nearby")
- give attribute to use assignee:trent
- 01 remove all the "form" fields (or at least investigate to see if that page refresh is desired) - 01 remove all the "form" fields (or at least investigate to see if that page refresh is desired)
- 08 Scan QR code to import into contacts. - 08 Scan QR code to import into contacts.
@ -69,9 +69,10 @@ tasks:
- pull, w/ scheduled runs - pull, w/ scheduled runs
- linking between projects or plans : - linking between projects or plans :
- terminology: - show total time given to & from a project
- for subtasks: fulfills (is it really the same?), feeds, contributes to, supplies, boosts, advances - terminology:
- 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) - 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 : - Stats :
- 01 point out user's location on the world - 01 point out user's location on the world

1
src/views/AccountViewView.vue

@ -279,6 +279,7 @@ import { useClipboard } from "@vueuse/core";
import { AppString } from "@/constants/app"; import { AppString } from "@/constants/app";
import { db, accountsDB } from "@/db"; import { db, accountsDB } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto"; import { accessToken } from "@/libs/crypto";
import { AxiosError } from "axios/index"; 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 { Component, Vue } from "vue-facing-decorator";
import { accountsDB, db } from "@/db"; import { accountsDB, db } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts"; import { Contact } from "@/db/tables/contacts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken, SimpleSigner } from "@/libs/crypto"; import { accessToken, SimpleSigner } from "@/libs/crypto";

39
src/views/DiscoverView.vue

@ -58,7 +58,14 @@
<!-- Results List --> <!-- Results List -->
<ul class=""> <ul class="">
<li class="border-b border-slate-300"> <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"> <div class="w-12">
<img <img
src="https://picsum.photos/200/200?random=1" src="https://picsum.photos/200/200?random=1"
@ -76,7 +83,14 @@
</li> </li>
<li class="border-b border-slate-300"> <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"> <div class="w-12">
<img <img
src="https://picsum.photos/200/200?random=2" src="https://picsum.photos/200/200?random=2"
@ -94,7 +108,14 @@
</li> </li>
<li class="border-b border-slate-300"> <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"> <div class="w-12">
<img <img
src="https://picsum.photos/200/200?random=3" src="https://picsum.photos/200/200?random=3"
@ -240,5 +261,17 @@ export default class DiscoverView extends Vue {
this.alertTitle = "Error"; 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> </script>

1
src/views/HomeView.vue

@ -73,6 +73,7 @@
import { Component, Vue } from "vue-facing-decorator"; import { Component, Vue } from "vue-facing-decorator";
import GiftedDialog from "@/components/GiftedDialog.vue"; import GiftedDialog from "@/components/GiftedDialog.vue";
import { db, accountsDB } from "@/db"; import { db, accountsDB } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto"; import { accessToken } from "@/libs/crypto";
import { createAndSubmitGive, didInfo } from "@/libs/endorserServer"; 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 { Component, Vue } from "vue-facing-decorator";
import { accountsDB, db } from "@/db"; import { accountsDB, db } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken, SimpleSigner } from "@/libs/crypto"; import { accessToken, SimpleSigner } from "@/libs/crypto";
import { useAppStore } from "@/store/app"; import { useAppStore } from "@/store/app";

106
src/views/ProjectViewView.vue

@ -66,28 +66,40 @@
</div> </div>
<div> <div>
<button <div v-if="activeDid">
@click="openDialog({ name: 'you', did: activeDid })" <button
class="text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md" @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"
I gave... >
</button> I gave...
... or choose a contact who gave: </button>
&horbar; or:
</div>
<!-- similar contact selection code is in multiple places --> <!-- similar contact selection code is in multiple places -->
<button Record a gift from
v-for="contact in allContacts" <span v-for="contact in allContacts" :key="contact.did">
:key="contact.did" <button @click="openDialog(contact)" class="text-blue-500">
@click="openDialog(contact)" &nbsp;{{ contact.name }}</button
class="text-blue-500" >,
> </span>
&nbsp;{{ contact.name }},
</button>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span> <span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
<button @click="openDialog()" class="text-blue-500"> <button @click="openDialog()" class="text-blue-500">
someone not specified someone not specified
</button> </button>
</div> </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>
-->
<GiftedDialog <GiftedDialog
ref="customDialog" ref="customDialog"
@dialog-result="handleDialogResult" @dialog-result="handleDialogResult"
@ -108,6 +120,7 @@ import { Component, Vue } from "vue-facing-decorator";
import GiftedDialog from "@/components/GiftedDialog.vue"; import GiftedDialog from "@/components/GiftedDialog.vue";
import { accountsDB, db } from "@/db"; import { accountsDB, db } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
import { Contact } from "@/db/tables/contacts"; import { Contact } from "@/db/tables/contacts";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { createAndSubmitGive } from "@/libs/endorserServer"; import { createAndSubmitGive } from "@/libs/endorserServer";
@ -120,26 +133,42 @@ import QuickNav from "@/components/QuickNav";
components: { GiftedDialog, AlertMessage, QuickNav }, components: { GiftedDialog, AlertMessage, QuickNav },
}) })
export default class ProjectViewView extends Vue { export default class ProjectViewView extends Vue {
accounts: AccountsSchema;
activeDid = ""; activeDid = "";
alertMessage = "";
alertTitle = "";
allContacts: Array<Contact> = []; allContacts: Array<Contact> = [];
apiServer = ""; apiServer = "";
description = "";
errorMessage = "";
expanded = false; expanded = false;
givesToThis: Array<any> = [];
givesFromThis: Array<any> = [];
name = ""; name = "";
description = ""; numAccounts = 0;
projectId = localStorage.getItem("projectId") || ""; // handle ID
timeSince = "";
truncatedDesc = ""; truncatedDesc = "";
truncateLength = 40; truncateLength = 40;
timeSince = "";
projectId = localStorage.getItem("projectId") || ""; // handle ID
errorMessage = "";
alertMessage = "";
alertTitle = "";
accounts: AccountsSchema;
numAccounts = 0;
async beforeCreate() { async beforeCreate() {
accountsDB.open(); accountsDB.open();
this.accounts = accountsDB.accounts; 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) { public async getIdentity(activeDid) {
@ -188,11 +217,13 @@ export default class ProjectViewView extends Vue {
this.apiServer + this.apiServer +
"/api/claim/byHandle/" + "/api/claim/byHandle/" +
encodeURIComponent(this.projectId); encodeURIComponent(this.projectId);
const token = await accessToken(identity);
const headers = { const headers = {
"Content-Type": "application/json", "Content-Type": "application/json",
Authorization: "Bearer " + token,
}; };
if (identity) {
const token = await accessToken(identity);
headers["Authorization"] = "Bearer " + token;
}
try { try {
const resp = await this.axios.get(url, { headers }); const resp = await this.axios.get(url, { headers });
@ -202,7 +233,6 @@ export default class ProjectViewView extends Vue {
const eventDate = new Date(startTime); const eventDate = new Date(startTime);
const now = moment.now(); const now = moment.now();
this.timeSince = moment.utc(now).to(eventDate); this.timeSince = moment.utc(now).to(eventDate);
errorMessage;
} }
this.name = resp.data.claim?.name || "(no name)"; this.name = resp.data.claim?.name || "(no name)";
this.description = resp.data.claim?.description || "(no description)"; this.description = resp.data.claim?.description || "(no description)";
@ -224,28 +254,6 @@ export default class ProjectViewView extends Vue {
} }
} }
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();
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.",
);
}
this.LoadProject(identity);
}
}
openDialog(contact) { openDialog(contact) {
this.$refs.customDialog.open(contact); this.$refs.customDialog.open(contact);
} }

19
src/views/ProjectsView.vue

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

Loading…
Cancel
Save