Merge branch 'master' into search-projects

2023-07-02 20:21:19 -04:00
parent cdeece1795 09f02ca4b2
commit 48227e8cf2
5 changed files with 210 additions and 35 deletions
--- a/project.task.yaml
+++ b/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
--- a/src/components/GiftedDialog.vue
+++ b/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();
--- a/src/libs/endorserServer.ts
+++ b/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: {
--- a/src/views/HomeView.vue
+++ b/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>

@@ -279,13 +277,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 {
@@ -295,17 +293,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
@@ -319,7 +323,7 @@ export default class HomeView extends Vue {
      this.axios,
      this.apiServer,
      identity,
-      contact?.did,
+      giverDid,
      this.activeDid,
      description,
      hours
@@ -329,7 +333,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.";
@@ -337,10 +342,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.";
      });
  }

--- a/src/views/ProjectViewView.vue
+++ b/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>