add project search (which just goes to console for now)

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>