Merge pull request 'add project search (which just goes to console for now)' (#28) from search-projects into master

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

project.task.yaml

@@ -11,12 +11,11 @@ tasks:
 - .1 remove commitments from ProjectView UI
 - 01 add list of 'give' records for a project on ProjectView UI
 
-- 02 Discover page :
-  - search :
-    - give example assignee:trent
+- 02 Discover page - display results (currently in console.log), spin when searching
 - 08 search by location, endpoint, etc assignee:trent
 - 01 add a location for a project via map pin :
   - give attribute to use assignee:trent
+- 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.
 
@@ -31,7 +30,7 @@ tasks:
 
 - refactor UI :
   - .5 Alerts show at the top and can be missed, eg. account data download
-  - 01 Change alerts into a component (to cut down duplicate code)
+  - 01 Change alert popup code a component (to cut down duplicate code; see "in many files")
   - 01 Change "nav" tabs across the bottom into a component (eliminating duplicate code).
   - .5 Fix how icons show on top of bottom bar on ContactAmounts page
   - .2 Hide "Advanced" section in Account page by default
@@ -55,6 +54,9 @@ tasks:
 
 - Discuss whether the remaining tasks are worthwhile before MVP release.
 
+- 01 fix images on project page, on discovery page
+- .2 fix "Rotary" and static icon to the right on project page
+
 - stats v1 :
   - 01 show numeric stats
   - 01 link to world for specific stats
@@ -79,6 +81,11 @@ tasks:
 - 40 notifications v+ :
   - pull, w/ scheduled runs
 
+- linking between projects or plans :
+    - terminology:
+      - 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 :
   - 01 point out user's location on the world
   - 01 present a credential selected from the stats
@@ -87,11 +94,6 @@ tasks:
   - badge for amount given/offered to your project
   - set a goal of given/offers
 
-- linking between projects or plans :
-  - terminology:
-    - Fulfills, Feeds, contributes to, supplies, boosts, advances
-    - Precedes, comes before, is sought by -- vs follows, seeks, builds on ("contributes to" isn't specific enough, "succeeds" has different, possibly confusing meaning)
-
 - automated tests, eg. cypress
 
 - Notifications (wake on the phone, push notifications)

src/views/DiscoverView.vue

@@ -51,18 +51,20 @@
     </h1>
 
     <!-- Quick Search -->
-    <form id="QuickSearch" class="mb-4 flex">
+    <div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="search()">
       <input
         type="text"
+        v-model="searchTerms"
         placeholder="Search…"
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
       />
       <button
+        @click="search()"
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
         <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
-    </form>
+    </div>
 
     <!-- Result Tabs -->
     <div class="text-center text-slate-500 border-b border-slate-300">
@@ -151,14 +153,112 @@
         </a>
       </li>
     </ul>
+
+    <!-- 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>
 
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
+import { accountsDB, db } from "@/db";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import * as R from "ramda";
+import { accessToken } from "@/libs/crypto";
 
 @Options({
   components: {},
 })
-export default class DiscoverView extends Vue {}
+export default class DiscoverView extends Vue {
+  activeDid = "";
+  apiServer = "";
+  searchTerms = "";
+
+  // 'mounted' hook runs after initial render
+  async mounted() {
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";
+  }
+
+  public async search() {
+    const headers = { "Content-Type": "application/json" };
+    if (this.activeDid) {
+      await accountsDB.open();
+      const allAccounts = await accountsDB.accounts.toArray();
+      const account = R.find((acc) => acc.did === this.activeDid, allAccounts);
+      //console.log("about to parse from", this.activeDid, account?.identity);
+      const identity = JSON.parse(account?.identity || "null");
+      if (!identity) {
+        throw new Error("No identity found.");
+      }
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    } else {
+      // it's OK without auth... we just won't get any identifiers
+    }
+    const claimContents =
+      "claimContents=" + encodeURIComponent(this.searchTerms);
+    const claimType = "claimType=PlanAction";
+    const queryParams = [claimContents, claimType].join("&");
+    return fetch(this.apiServer + "/api/v2/report/claims?" + queryParams, {
+      method: "GET",
+      headers: headers,
+    })
+      .then(async (response) => {
+        if (response.status !== 200) {
+          const details = await response.text();
+          throw details;
+        }
+        return response.json();
+      })
+      .then((results) => {
+        if (results.data) {
+          console.log(results.data);
+        } else {
+          throw JSON.stringify(results);
+        }
+      })
+      .catch((e) => {
+        console.log("Error with feed load:", e);
+        this.alertMessage =
+          e.userMessage || "There was an error retrieving projects.";
+        this.alertTitle = "Error";
+      });
+  }
+
+  // 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>

src/views/HomeView.vue

@@ -202,6 +202,7 @@ export default class HomeView extends Vue {
         console.log("Error with feed load:", e);
         this.alertMessage =
           e.userMessage || "There was an error retrieving feed data.";
+        this.alertTitle = "Error";
       });
 
     this.isHiddenSpinner = true;