Merge pull request 'fix display of gives on contact screen; adjust give UI for project' (#49) from ui-fix into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/49

project.task.yaml

@@ -24,6 +24,7 @@ tasks:
 
 - 24 Move to Vite
 
+- .5 add link to further project / people when a project pays ahead
 - .5 add project ID to the URL, to make a project publicly-accessible
 - .5 remove edit from project page for projects owned by others
 - .5 fix where user 0 sees no txns from user 1 on contacts page but sees them on list page

src/libs/endorserServer.ts

@@ -82,10 +82,15 @@ export function isHiddenDid(did) {
 /**
  always returns text, maybe UNNAMED_VISIBLE or UNKNOWN_ENTITY
  **/
-export function didInfo(did, activeDid, allMyDids, contacts) {
-  const myId: string | undefined = R.find(R.identity, allMyDids);
+export function didInfo(
+  did: string,
+  activeDid: string,
+  allMyDids: Array<string>,
+  contacts: Array<Contact>,
+): string {
+  const myId: string | undefined = R.find(R.equals(did), allMyDids, did);
   if (myId) {
-    return "You" + (myId.did !== activeDid ? " (Alt ID)" : "");
+    return "You" + (myId !== activeDid ? " (Alt ID)" : "");
   } else {
     const contact: Contact | undefined = R.find((c) => c.did === did, contacts);
     if (contact) {

src/views/ContactsView.vue

@@ -135,7 +135,7 @@
               <fa icon="trash-can" class="fa-fw" />
             </button>
 
-            <div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
+            <div v-if="showGiveNumbers" class="ml-auto flex gap-1.5">
               <button
                 class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
                 @click="onClickAddGive(activeDid, contact.did)"

src/views/DiscoverView.vue

@@ -90,10 +90,12 @@
             </div>
 
             <div class="grow">
-              <h2 class="text-base font-semibold">Canyon cleanup</h2>
+              <h2 class="text-base font-semibold">{{ project.name }}</h2>
               <div class="text-sm">
                 <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ project.name }}
+                {{
+                  didInfo(project.issuerDid, activeDid, allMyDids, allContacts)
+                }}
               </div>
             </div>
           </a>
@@ -111,8 +113,10 @@
 import { Component, Vue } from "vue-facing-decorator";
 
 import { accountsDB, db } from "@/db";
+import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
+import { didInfo } from "@/libs/endorserServer";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import InfiniteScroll from "@/components/InfiniteScroll";
@@ -122,6 +126,8 @@ import InfiniteScroll from "@/components/InfiniteScroll";
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: Array<string> = [];
   apiServer = "";
   searchTerms = "";
   alertMessage = "";
@@ -133,11 +139,20 @@ export default class DiscoverView extends Vue {
   remoteCount = 0;
   isLoading = false;
 
+  // make this function available to the Vue template
+  didInfo = didInfo;
+
   async mounted() {
     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();
+
+    await accountsDB.open();
+    const allAccounts = await accountsDB.accounts.toArray();
+    this.allMyDids = allAccounts.map((acc) => acc.did);
+
     this.searchLocal();
   }
 
@@ -166,7 +181,6 @@ export default class DiscoverView extends Vue {
   public async search(beforeId?: string) {
     let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms);
 
-    console.log(beforeId);
     if (beforeId) {
       queryParams = queryParams + `&beforeId=${beforeId}`;
     }
@@ -204,9 +218,8 @@ export default class DiscoverView extends Vue {
       const plans: ProjectData[] = results.data;
       if (plans) {
         for (const plan of plans) {
-          const { name, description, handleId = plan.handleId, rowid } = plan;
-          console.log("here");
-          this.projects.push({ name, description, handleId, rowid });
+          const { name, description, handleId, rowid, issuerDid } = plan;
+          this.projects.push({ name, description, handleId, rowid, issuerDid });
         }
         this.remoteCount = this.projects.length;
       } else {
@@ -310,8 +323,6 @@ export default class DiscoverView extends Vue {
   async loadMoreData(payload: boolean) {
     if (this.projects.length > 0 && payload) {
       const latestProject = this.projects[this.projects.length - 1];
-      console.log("rowid", latestProject, payload);
-      console.log(Object.keys(latestProject));
       if (this.isLocalActive) {
         this.searchLocal(latestProject["rowid"]);
       } else if (this.isRemoteActive) {

src/views/ProjectViewView.vue

@@ -93,7 +93,7 @@
         <h1 class="text-xl">Given to this Project</h1>
       </div>
       <div>
-        <h1 class="text-xl">... and from this Project</h1>
+        <h1 class="text-xl">... and paid forward from this Project</h1>
       </div>
     </div>
     <div class="flex justify-around">
@@ -108,7 +108,12 @@
                 }}</span>
               </div>
               <div class="flex gap-2" v-if="give.amount">
-                <fa icon="coins" class="fa-fw text-slate-400"></fa>
+                <fa
+                  icon="clock"
+                  v-if="give.unit === 'HUR'"
+                  class="fa-fw text-slate-400"
+                ></fa>
+                <fa icon="coins" v-else class="fa-fw text-slate-400"></fa>
                 <span>{{ give.amount }}</span>
               </div>
               <div class="flex gap-2" v-if="give.description">
@@ -130,7 +135,12 @@
                 }}</span>
               </div>
               <div class="flex gap-2" v-if="give.amount">
-                <fa icon="coins" class="fa-fw text-slate-400"></fa>
+                <fa
+                  icon="clock"
+                  v-if="give.unit === 'HUR'"
+                  class="fa-fw text-slate-400"
+                ></fa>
+                <fa icon="coins" v-else class="fa-fw text-slate-400"></fa>
                 <span>{{ give.amount }}</span>
               </div>
               <div class="flex gap-2">