forked from jsnbuchanan/crowd-funder-for-time-pwa
DiscoverView searches almost done.
Contact fixes ContactAmounts fix quick-nav Cleaning up ProjectView still more to do Hide advanced by default on StatisticsView project.task updated
This commit is contained in:
Matthew Raymer
@@ -31,39 +31,48 @@
|
||||
<a
|
||||
href="#"
|
||||
@click="searchLocal()"
|
||||
class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold"
|
||||
v-bind:class="computedLocalTabClassNames()"
|
||||
>
|
||||
Nearby
|
||||
<span
|
||||
class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
|
||||
>20+</span
|
||||
>{{ localCount }}</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300"
|
||||
v-bind:class="computedRemoteTabClassNames()"
|
||||
@click="search()"
|
||||
>
|
||||
Remote
|
||||
<span
|
||||
class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
|
||||
>13</span
|
||||
>{{ remoteCount }}</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Loading Animation -->
|
||||
<div
|
||||
class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
|
||||
v-if="isLoading"
|
||||
>
|
||||
<fa icon="spinner" class="fa-spin-pulse"></fa>
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<ul class="">
|
||||
<li class="border-b border-slate-300">
|
||||
<ul v-if="projects.length > 0">
|
||||
<li
|
||||
class="border-b border-slate-300"
|
||||
v-for="project in projects"
|
||||
:key="project.handleId"
|
||||
>
|
||||
<a
|
||||
@click="
|
||||
onClickLoadProject(
|
||||
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ',
|
||||
)
|
||||
"
|
||||
@click="onClickLoadProject(project.handleId)"
|
||||
class="block py-4 flex gap-4"
|
||||
>
|
||||
<div class="w-12">
|
||||
@@ -76,63 +85,14 @@
|
||||
<div class="grow">
|
||||
<h2 class="text-base font-semibold">Canyon cleanup</h2>
|
||||
<div class="text-sm">
|
||||
<fa icon="user" class="fa-fw text-slate-400"></fa> Rotary
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="border-b border-slate-300">
|
||||
<a
|
||||
@click="
|
||||
onClickLoadProject(
|
||||
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ',
|
||||
)
|
||||
"
|
||||
class="block py-4 flex gap-4"
|
||||
>
|
||||
<div class="w-12">
|
||||
<img
|
||||
src="https://picsum.photos/200/200?random=2"
|
||||
class="w-full rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h2 class="text-base font-semibold">Potluck with neighbors</h2>
|
||||
<div class="text-sm">
|
||||
<fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A.
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="border-b border-slate-300">
|
||||
<a
|
||||
@click="
|
||||
onClickLoadProject(
|
||||
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ',
|
||||
)
|
||||
"
|
||||
class="block py-4 flex gap-4"
|
||||
>
|
||||
<div class="w-12">
|
||||
<img
|
||||
src="https://picsum.photos/200/200?random=3"
|
||||
class="w-full rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grow">
|
||||
<h2 class="text-base font-semibold">Historical site</h2>
|
||||
<div class="text-sm">
|
||||
<fa icon="user" class="fa-fw text-slate-400 mr-1"></fa>
|
||||
<em>Unknown</em>
|
||||
<fa icon="user" class="fa-fw text-slate-400"></fa>
|
||||
{{ project.name }}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-else>No projects found yet.</p>
|
||||
<AlertMessage
|
||||
:alertTitle="alertTitle"
|
||||
:alertMessage="alertMessage"
|
||||
@@ -149,6 +109,28 @@ import { accessToken } from "@/libs/crypto";
|
||||
import AlertMessage from "@/components/AlertMessage";
|
||||
import QuickNav from "@/components/QuickNav";
|
||||
|
||||
/**
|
||||
* Represents data about a project
|
||||
**/
|
||||
interface ProjectData {
|
||||
/**
|
||||
* Name of the project
|
||||
**/
|
||||
name: string;
|
||||
/**
|
||||
* Description of the project
|
||||
**/
|
||||
description: string;
|
||||
/**
|
||||
* URL referencing information about the project
|
||||
**/
|
||||
handleId: string;
|
||||
/**
|
||||
* The Identier of the project
|
||||
**/
|
||||
rowid: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
components: { AlertMessage, QuickNav },
|
||||
})
|
||||
@@ -158,12 +140,19 @@ export default class DiscoverView extends Vue {
|
||||
searchTerms = "";
|
||||
alertMessage = "";
|
||||
alertTitle = "";
|
||||
projects: ProjectData[] = [];
|
||||
isLocalActive = true;
|
||||
isRemoteActive = false;
|
||||
localCount = 0;
|
||||
remoteCount = 0;
|
||||
isLoading = false;
|
||||
|
||||
async mounted() {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
this.activeDid = settings?.activeDid || "";
|
||||
this.apiServer = settings?.apiServer || "";
|
||||
this.searchLocal();
|
||||
}
|
||||
|
||||
public async buildHeaders() {
|
||||
@@ -194,7 +183,11 @@ export default class DiscoverView extends Vue {
|
||||
const claimType = "claimType=PlanAction";
|
||||
const queryParams = [claimContents, claimType].join("&");
|
||||
|
||||
this.isRemoteActive = true;
|
||||
this.isLocalActive = false;
|
||||
|
||||
try {
|
||||
this.isLoading = true;
|
||||
const response = await fetch(
|
||||
this.apiServer + "/api/v2/report/claims?" + queryParams,
|
||||
{
|
||||
@@ -211,7 +204,8 @@ export default class DiscoverView extends Vue {
|
||||
const results = await response.json();
|
||||
|
||||
if (results.data) {
|
||||
console.log("Plans found in that search:", results.data);
|
||||
this.projects = results.data;
|
||||
this.remoteCount = this.projects.length;
|
||||
} else {
|
||||
throw JSON.stringify(results);
|
||||
}
|
||||
@@ -220,6 +214,8 @@ export default class DiscoverView extends Vue {
|
||||
this.alertMessage =
|
||||
e.userMessage || "There was an error retrieving projects.";
|
||||
this.alertTitle = "Error";
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -235,6 +231,9 @@ export default class DiscoverView extends Vue {
|
||||
].join("&");
|
||||
|
||||
try {
|
||||
this.isLoading = true;
|
||||
this.isLocalActive = true;
|
||||
this.isRemoteActive = false;
|
||||
const response = await fetch(
|
||||
this.apiServer + "/api/v2/report/plansByLocation?" + queryParams,
|
||||
{
|
||||
@@ -250,7 +249,8 @@ export default class DiscoverView extends Vue {
|
||||
const results = await response.json();
|
||||
|
||||
if (results.data) {
|
||||
console.log("Plans found in that location:", results.data);
|
||||
this.projects = results.data;
|
||||
this.localCount = this.projects.length;
|
||||
} else {
|
||||
throw JSON.stringify(results);
|
||||
}
|
||||
@@ -259,6 +259,8 @@ export default class DiscoverView extends Vue {
|
||||
this.alertMessage =
|
||||
e.userMessage || "There was an error retrieving projects.";
|
||||
this.alertTitle = "Error";
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -273,5 +275,37 @@ export default class DiscoverView extends Vue {
|
||||
};
|
||||
this.$router.push(route);
|
||||
}
|
||||
|
||||
public computedLocalTabClassNames() {
|
||||
return {
|
||||
"inline-block": true,
|
||||
"py-3": true,
|
||||
"rounded-t-lg": true,
|
||||
"border-b-2": true,
|
||||
active: this.isLocalActive,
|
||||
"text-blue-600": this.isLocalActive,
|
||||
"border-blue-600": this.isLocalActive,
|
||||
"font-semibold": this.isLocalActive,
|
||||
"border-transparent": !this.isLocalActive,
|
||||
"hover:text-slate-600": !this.isLocalActive,
|
||||
"hover:border-slate-300": !this.isLocalActive,
|
||||
};
|
||||
}
|
||||
|
||||
public computedRemoteTabClassNames() {
|
||||
return {
|
||||
"inline-block": true,
|
||||
"py-3": true,
|
||||
"rounded-t-lg": true,
|
||||
"border-b-2": true,
|
||||
active: this.isRemoteActive,
|
||||
"text-blue-600": this.isRemoteActive,
|
||||
"border-blue-600": this.isRemoteActive,
|
||||
"font-semibold": this.isRemoteActive,
|
||||
"border-transparent": !this.isRemoteActive,
|
||||
"hover:text-slate-600": !this.isRemoteActive,
|
||||
"hover:border-slate-300": !this.isRemoteActive,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user