Browse Source

chore: update to match latest API for retrieving plans

kb/add-usage-guide
Trent Larson 2 years ago
parent
commit
5638798ca8
  1. 7
      project.yaml
  2. 20
      src/views/NewEditProjectView.vue
  3. 37
      src/views/ProjectViewView.vue
  4. 27
      src/views/ProjectsView.vue

7
project.yaml

@ -1,12 +1,15 @@
- top screens from img/screens.pdf milestone:2 :
- new
- make sure to save with plan identifier if it isn't already
- make sure to save with plan identifier if it isn't already assignee:trent
- feedback to show saving
- edit
- make sure to save with plan identifier if it isn't already
- make sure to save with plan identifier if it isn't already assignee:trent
- feedback to show saved
- view all :
- also extract plan identifier (instead of claim ID) assignee:trent
- search bar isn't highlighted & icon on right doesn't show
- no tab bar across bottom
- add spinner
- view one
- change lookup to pull from new /api/ext/plan with plan identifier assignee:trent
- image

20
src/views/NewEditProjectView.vue

@ -10,7 +10,7 @@
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
><fa icon="chevron-left" class="fa-fw"></fa
></router-link>
[New/Edit] Project
[New/Edit] Plan
</h1>
</div>
@ -65,6 +65,14 @@ import * as didJwt from "did-jwt";
import { IIdentifier } from "@veramo/core";
import { useAppStore } from "@/store/app";
interface VerifiableCredential {
"@context": string;
"@type": string;
name: string;
description: string;
identifier?: string;
}
@Options({
components: {},
})
@ -93,8 +101,8 @@ export default class NewEditProjectView extends Vue {
async LoadProject(identity: IIdentifier) {
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
const url =
endorserApiServer + "/api/plan/" + encodeURIComponent(this.projectId);
// eslint-disable-next-line prettier/prettier
const url = endorserApiServer + "/api/claim/byHandle/" + encodeURIComponent(this.projectId);
const token = await accessToken(identity);
const headers = {
"Content-Type": "application/json",
@ -116,12 +124,16 @@ export default class NewEditProjectView extends Vue {
private async SaveProject(identity: IIdentifier) {
// Make a claim
const vcClaim = {
const vcClaim: VerifiableCredential = {
"@context": "https://schema.org",
"@type": "PlanAction",
name: this.projectName,
description: this.description,
identifier: this.projectId || undefined,
};
if (this.projectId) {
vcClaim.identifier = this.projectId;
}
// Make a payload for the claim
const vcPayload = {
sub: "PlanAction",

37
src/views/ProjectViewView.vue

@ -60,10 +60,14 @@
><fa icon="ellipsis-vertical" class="fa-fw"></fa
></a>
View Project
View Plan
</h1>
</div>
<div>
{{ errorMessage }}
</div>
<!-- Project Details -->
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<div>
@ -158,6 +162,7 @@ export default class ProjectViewView extends Vue {
truncateLength = 40;
timeSince = "";
projectId = localStorage.getItem("projectId") || "";
errorMessage = "";
onEditClick() {
localStorage.setItem("projectId", this.projectId as string);
@ -178,8 +183,8 @@ export default class ProjectViewView extends Vue {
async LoadProject(identity: IIdentifier) {
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
const url =
endorserApiServer + "/api/plan/" + encodeURIComponent(this.projectId);
// eslint-disable-next-line prettier/prettier
const url = endorserApiServer + "/api/claim/byHandle/" + encodeURIComponent(this.projectId);
const token = await accessToken(identity);
const headers = {
"Content-Type": "application/json",
@ -191,15 +196,27 @@ export default class ProjectViewView extends Vue {
console.log(resp.status, resp.data);
if (resp.status === 200) {
const startTime = resp.data.startTime;
const eventDate = new Date(startTime);
const now = moment.now();
this.timeSince = moment.utc(now).to(eventDate);
this.name = resp.data.name;
this.description = resp.data.description;
if (startTime != null) {
const eventDate = new Date(startTime);
const now = moment.now();
this.timeSince = moment.utc(now).to(eventDate);
}
this.name = resp.data.claim?.name || "(no name)";
this.description = resp.data.claim?.description || "(no description)";
this.truncatedDesc = this.description.slice(0, this.truncateLength);
} else if (resp.status === 404) {
// actually, axios throws an error so we never get here
this.errorMessage = "That project does not exist.";
}
} catch (error: any) {
if (error?.response?.status === 404) {
this.errorMessage = "That project does not exist.";
} else {
this.errorMessage =
"Something went wrong retrieving that project." +
" See logs for more info.";
console.log("Error retrieving project:", error);
}
} catch (error) {
console.log(error);
}
}

27
src/views/ProjectsView.vue

@ -2,7 +2,7 @@
<section id="Content" class="p-6 pb-24">
<!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
My Projects
My Plans
</h1>
<!-- Quick Search -->
@ -32,10 +32,10 @@
<li
class="border-b border-slate-300"
v-for="project in projects"
:key="project.id"
:key="project.handleId"
>
<a
@click="onClickLoadProject(project.id)"
@click="onClickLoadProject(project.handleId)"
class="block py-4 flex gap-4"
>
<div class="flex-none w-12">
@ -68,7 +68,7 @@ import { AppString } from "@/constants/app";
components: {},
})
export default class ProjectsView extends Vue {
projects: { id: string; name: string; description: string }[] = [];
projects: { handleId: string; name: string; description: string }[] = [];
onClickLoadProject(id: string) {
console.log("projectId", id);
@ -82,10 +82,7 @@ export default class ProjectsView extends Vue {
async LoadProjects(identity: IIdentifier) {
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
const url =
endorserApiServer +
"/api/claim/?claimType=PlanAction&issuer=" +
identity.did;
const url = endorserApiServer + "/api/v2/report/plansByIssuer";
const token = await accessToken(identity);
const headers = {
"Content-Type": "application/json",
@ -95,15 +92,13 @@ export default class ProjectsView extends Vue {
try {
const resp = await this.axios.get(url, { headers });
if (resp.status === 200) {
const claims = resp.data;
console.log("All claims:", claims);
for (let i = 0; i < claims.length; i++) {
const claim = claims[i].claim;
const plans = resp.data.data;
for (let i = 0; i < plans.length; i++) {
const plan = plans[i];
const data = {
id: claims[i].id,
name: claim.name,
description: claim.description,
identifier: claim.identifier,
name: plan.name,
description: plan.description,
handleId: plan.fullIri,
};
this.projects.push(data);
}

Loading…
Cancel
Save