Browse Source

Merge pull request 'Quick links to record a gift, to this person or to a project' (#27) from give-to-project into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/27
kb/add-usage-guide
anomalist 1 year ago
parent
commit
09f02ca4b2
  1. 2
      project.task.yaml
  2. 20
      src/components/GiftedDialog.vue
  3. 17
      src/libs/endorserServer.ts
  4. 42
      src/views/HomeView.vue
  5. 164
      src/views/ProjectViewView.vue

2
project.task.yaml

@ -7,8 +7,6 @@ tasks:
- 8 Move to vue-facing-decorator
- 01 design ideas for simple gives on the first page
- 01 give time to a particular project - use "provider" attribute
- give example assignee:trent
- .1 remove commitments from ProjectView UI
- 01 add list of 'give' records for a project on ProjectView UI

20
src/components/GiftedDialog.vue

@ -2,13 +2,12 @@
<div v-if="visible" class="dialog-overlay">
<div class="dialog">
<h1 class="text-lg text-center">
Received from {{ contact?.name || "nobody in particular" }}
{{ message }} {{ giver?.name || "somebody not specified" }}
</h1>
<p class="py-2">{{ message }}</p>
<input
type="text"
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
placeholder="What you received"
placeholder="What was received"
v-model="description"
/>
<div class="flex flex-row">
@ -27,9 +26,10 @@
</div>
</div>
</div>
<p class="text-right">Sign & Send to publish to the world</p>
<div class="text-right">
<button class="rounded border border-slate-400" @click="confirm">
<span class="m-2">Confirm</span>
<span class="m-2">Sign & Send</span>
</button>
&nbsp;
<button class="rounded border border-slate-400" @click="cancel">
@ -45,15 +45,16 @@ export default {
props: ["message"],
data() {
return {
contact: null,
giver: null,
description: "",
hours: "0",
visible: false,
};
},
methods: {
open(contact) {
this.contact = contact;
open(giver) {
// giver: GiverInputInfo
this.giver = giver;
this.visible = true;
},
close() {
@ -69,10 +70,13 @@ export default {
this.close();
this.$emit("dialog-result", {
action: "confirm",
contact: this.contact,
giver: this.giver,
hours: parseFloat(this.hours),
description: this.description,
});
this.description = "";
this.giver = null;
this.hours = "0";
},
cancel() {
this.close();

17
src/libs/endorserServer.ts

@ -15,6 +15,11 @@ export interface AgreeVerifiableCredential {
object: Record<any, any>;
}
export interface GiverInputInfo {
did?: string;
name?: string;
}
export interface ClaimResult {
success: { claimId: string; handleId: string };
error: { code: string; message: string };
@ -46,6 +51,7 @@ export interface GiveVerifiableCredential {
"@type": string;
agent?: { identifier: string };
description?: string;
fulfills?: { "@type": string; identifier: string };
identifier?: string;
object?: { amountOfThisGood: number; unitCode: string };
recipient: { identifier: string };
@ -95,7 +101,7 @@ export function didInfo(did, identifiers, contacts) {
/**
* For result, see https://endorser.ch:3000/api-docs/#/claims/post_api_v2_claim
*
* @param identity
* @param fromDid may be null
* @param toDid
@ -109,7 +115,8 @@ export async function createAndSubmitGive(
fromDid: string,
toDid: string,
description: string,
hours: number
hours: number,
fulfillsProjectHandleId?: string
): Promise<AxiosResponse<ClaimResult> | InternalError> {
// Make a claim
const vcClaim: GiveVerifiableCredential = {
@ -126,6 +133,12 @@ export async function createAndSubmitGive(
if (hours) {
vcClaim.object = { amountOfThisGood: hours, unitCode: "HUR" };
}
if (fulfillsProjectHandleId) {
vcClaim.fulfills = {
"@type": "PlanAction",
identifier: fulfillsProjectHandleId,
};
}
// Make a payload for the claim
const vcPayload = {
vc: {

42
src/views/HomeView.vue

@ -51,8 +51,9 @@
<div class="mb-8">
<h1 class="text-2xl">Quick Action</h1>
<p class="mb-2">Choose a contact to whom to show appreciation:</p>
<div>
<p>Choose a contact to whom to show appreciation:</p>
<!-- similar contact selection code is in multiple places -->
<div class="px-4">
<button
v-for="contact in allContacts"
:key="contact.did"
@ -61,12 +62,9 @@
>
{{ contact.name }}
</button>
<span v-if="allContacts.length > 0">or</span>
<button
@click="openDialog()"
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
>
nobody in particular
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
<button @click="openDialog()" class="text-blue-500">
someone not specified
</button>
</div>
</div>
@ -74,7 +72,7 @@
<GiftedDialog
ref="customDialog"
@dialog-result="handleDialogResult"
message="Confirm to publish to the world."
message="Received from"
>
</GiftedDialog>
@ -278,13 +276,13 @@ export default class HomeView extends Vue {
return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
}
openDialog(contact) {
this.$refs.customDialog.open(contact);
openDialog(giver) {
this.$refs.customDialog.open(giver);
}
handleDialogResult(result) {
if (result.action === "confirm") {
return new Promise((resolve) => {
this.recordGive(result.contact, result.description, result.hours);
this.recordGive(result.contact?.did, result.description, result.hours);
resolve();
});
} else {
@ -294,17 +292,23 @@ export default class HomeView extends Vue {
/**
*
* @param contact may be null
* @param giverDid may be null
* @param description may be an empty string
* @param hours may be 0
*/
recordGive(contact, description, hours) {
recordGive(giverDid, description, hours) {
if (this.activeDid == null) {
this.alertTitle = "Error";
this.alertMessage =
"You must select an identity before you can record a give.";
return;
}
if (!description && !hours) {
this.alertTitle = "Error";
this.alertMessage =
"You must enter a description or some number of hours.";
return;
}
const account = R.find(
(acc) => acc.did === this.activeDid,
this.allAccounts
@ -318,7 +322,7 @@ export default class HomeView extends Vue {
this.axios,
this.apiServer,
identity,
contact?.did,
giverDid,
this.activeDid,
description,
hours
@ -328,7 +332,8 @@ export default class HomeView extends Vue {
console.log("Error with give result:", result);
this.alertTitle = "Error";
this.alertMessage =
result.data?.message || "There was an error recording the give.";
result.data?.error?.message ||
"There was an error recording the give.";
} else {
this.alertTitle = "Success";
this.alertMessage = "That gift was recorded.";
@ -336,10 +341,13 @@ export default class HomeView extends Vue {
}
})
.catch((e) => {
// axios throws errors on 400 responses
console.log("Error with give caught:", e);
this.alertTitle = "Error";
this.alertMessage =
e.userMessage || "There was an error recording the give.";
e.userMessage ||
e.response?.data?.error?.message ||
"There was an error recording the give.";
});
}

164
src/views/ProjectViewView.vue

@ -9,7 +9,7 @@
></router-link>
</li>
<!-- Search -->
<li class="basis-1/5 rounded-md bg-slate-400 text-white">
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'discover' }"
class="block text-center py-3 px-1"
@ -17,7 +17,7 @@
></router-link>
</li>
<!-- Projects -->
<li class="basis-1/5 rounded-md text-slate-500">
<li class="basis-1/5 rounded-md bg-slate-400 text-white">
<router-link
:to="{ name: 'projects' }"
class="block text-center py-3 px-1"
@ -108,14 +108,50 @@
</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">
<button
v-for="contact in allContacts"
:key="contact.did"
@click="openDialog(contact)"
class="text-blue-500"
>
&nbsp;{{ contact.name }},
</button>
<span v-if="allContacts.length > 0">&nbsp;or&nbsp;</span>
<button @click="openDialog()" class="text-blue-500">
someone not specified
</button>
</div>
</div>
<GiftedDialog
ref="customDialog"
@dialog-result="handleDialogResult"
message="Received from"
>
</GiftedDialog>
<!-- Commit -->
<!--
<router-link
:to="{ name: 'new-edit-commitment' }"
class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
>Make Commitment</router-link
>
-->
<!-- Commitments -->
<!--
<div class="bg-slate-100 px-4 py-3 rounded-md">
<h3 class="text-sm uppercase font-semibold mb-3">Commitments</h3>
@ -142,6 +178,19 @@
</li>
</ul>
</div>
-->
<!-- This same popup code is in many files. -->
<div v-bind:class="computedAlertClassNames()">
<button
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@click="onClickClose()"
>
<fa icon="xmark"></fa>
</button>
<h4 class="font-bold pr-5">{{ alertTitle }}</h4>
<p>{{ alertMessage }}</p>
</div>
</section>
</template>
@ -151,15 +200,20 @@ import * as moment from "moment";
import * as R from "ramda";
import { Options, Vue } from "vue-class-component";
import GiftedDialog from "@/components/GiftedDialog.vue";
import { accountsDB, db } from "@/db";
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";
@Options({
components: {},
components: { GiftedDialog },
})
export default class ProjectViewView extends Vue {
activeDid = "";
allContacts: Array<Contact> = [];
apiServer = "";
expanded = false;
name = "";
@ -167,7 +221,7 @@ export default class ProjectViewView extends Vue {
truncatedDesc = "";
truncateLength = 40;
timeSince = "";
projectId = localStorage.getItem("projectId") || "";
projectId = localStorage.getItem("projectId") || ""; // handle ID
errorMessage = "";
onEditClick() {
@ -230,8 +284,9 @@ export default class ProjectViewView extends Vue {
async created() {
await db.open();
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
const activeDid = settings?.activeDid || "";
this.activeDid = settings?.activeDid || "";
this.apiServer = settings?.apiServer || "";
this.allContacts = await db.contacts.toArray();
await accountsDB.open();
const num_accounts = await accountsDB.accounts.count();
@ -239,7 +294,7 @@ export default class ProjectViewView extends Vue {
console.error("Problem! Should have a profile!");
} else {
const accounts = await accountsDB.accounts.toArray();
const account = R.find((acc) => acc.did === activeDid, accounts);
const account = R.find((acc) => acc.did === this.activeDid, accounts);
const identity = JSON.parse(account?.identity || "null");
if (!identity) {
throw new Error("No identity found.");
@ -247,5 +302,102 @@ export default class ProjectViewView extends Vue {
this.LoadProject(identity);
}
}
openDialog(contact) {
this.$refs.customDialog.open(contact);
}
handleDialogResult(result) {
if (result.action === "confirm") {
return new Promise((resolve) => {
this.recordGive(result.contact?.did, result.description, result.hours);
resolve();
});
} 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, description, hours) {
if (this.activeDid == null) {
this.alertTitle = "Error";
this.alertMessage =
"You must select an identity before you can record a give.";
return;
}
if (!description && !hours) {
this.alertTitle = "Error";
this.alertMessage =
"You must enter a description or some number of hours.";
return;
}
const accounts = await accountsDB.accounts.toArray();
const account = R.find((acc) => acc.did === this.activeDid, accounts);
const identity = JSON.parse(account?.identity || "null");
if (!identity) {
throw new Error("No identity found.");
}
createAndSubmitGive(
this.axios,
this.apiServer,
identity,
giverDid,
this.activeDid,
description,
hours,
this.projectId
)
.then((result) => {
if (result.status != 201 || result.data?.error) {
console.log("Error with give result:", result);
this.alertTitle = "Error";
this.alertMessage =
result.data?.error?.message ||
"There was an error recording the give.";
} else {
this.alertTitle = "Success";
this.alertMessage = "That gift was recorded.";
//this.updateAllFeed(); // full update is overkill but we should show something
}
})
.catch((e) => {
// axios throws errors on 400 responses
console.log("Error with give caught:", e);
this.alertTitle = "Error";
this.alertMessage =
e.userMessage ||
e.response?.data?.error?.message ||
"There was an error recording the give.";
});
}
// This same popup code is in many files.
alertMessage = "";
alertTitle = "";
public onClickClose() {
this.alertTitle = "";
this.alertMessage = "";
}
public computedAlertClassNames() {
return {
hidden: !this.alertMessage,
"dismissable-alert": true,
"bg-slate-100": true,
"p-5": true,
rounded: true,
"drop-shadow-lg": true,
fixed: true,
"top-3": true,
"inset-x-3": true,
"transition-transform": true,
"ease-in": true,
"duration-300": true,
};
}
}
</script>

Loading…
Cancel
Save