|
|
@ -4,27 +4,31 @@ |
|
|
|
<ul class="flex text-2xl p-2 gap-2"> |
|
|
|
<!-- Home Feed --> |
|
|
|
<li class="basis-1/5 rounded-md text-slate-500"> |
|
|
|
<a href="" class="block text-center py-3 px-1" |
|
|
|
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1" |
|
|
|
><fa icon="house-chimney" class="fa-fw"></fa |
|
|
|
></a> |
|
|
|
></router-link> |
|
|
|
</li> |
|
|
|
<!-- Search --> |
|
|
|
<li class="basis-1/5 rounded-md text-slate-500"> |
|
|
|
<a href="search.html" class="block text-center py-3 px-1" |
|
|
|
<li class="basis-1/5 rounded-md bg-slate-400 text-white"> |
|
|
|
<router-link |
|
|
|
:to="{ name: 'discover' }" |
|
|
|
class="block text-center py-3 px-1" |
|
|
|
><fa icon="magnifying-glass" class="fa-fw"></fa |
|
|
|
></a> |
|
|
|
></router-link> |
|
|
|
</li> |
|
|
|
<!-- Projects --> |
|
|
|
<li class="basis-1/5 rounded-md bg-slate-400 text-white"> |
|
|
|
<a href="" class="block text-center py-3 px-1" |
|
|
|
<li class="basis-1/5 rounded-md text-slate-500"> |
|
|
|
<router-link |
|
|
|
:to="{ name: 'projects' }" |
|
|
|
class="block text-center py-3 px-1" |
|
|
|
><fa icon="folder-open" class="fa-fw"></fa |
|
|
|
></a> |
|
|
|
></router-link> |
|
|
|
</li> |
|
|
|
<!-- Commitments --> |
|
|
|
<li class="basis-1/5 rounded-md text-slate-500"> |
|
|
|
<a href="" class="block text-center py-3 px-1" |
|
|
|
<router-link :to="{ name: '' }" class="block text-center py-3 px-1" |
|
|
|
><fa icon="hand" class="fa-fw"></fa |
|
|
|
></a> |
|
|
|
></router-link> |
|
|
|
</li> |
|
|
|
<!-- Profile --> |
|
|
|
<li class="basis-1/5 rounded-md text-slate-500"> |
|
|
@ -62,13 +66,8 @@ |
|
|
|
|
|
|
|
<!-- Project Details --> |
|
|
|
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"> |
|
|
|
<!-- Image --> |
|
|
|
<div class="-mx-4 -mt-3 mb-3"> |
|
|
|
<img src="https://picsum.photos/800/400" class="w-full" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<h2 class="text-xl font-semibold">Canyon cleanup</h2> |
|
|
|
<h2 class="text-xl font-semibold">{{ name }}</h2> |
|
|
|
<div class="flex justify-between gap-4 text-sm mb-3"> |
|
|
|
<span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span> |
|
|
|
<span |
|
|
@ -78,11 +77,20 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="text-sm text-slate-500"> |
|
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem |
|
|
|
accusantium doloremque laudantium… |
|
|
|
<a href="" class="uppercase text-xs font-semibold text-slate-700" |
|
|
|
>Read More</a |
|
|
|
> |
|
|
|
<div v-if="!expanded"> |
|
|
|
{{ truncatedDesc }} |
|
|
|
<a v-if="description.length >= truncateLength" @click="expandText" |
|
|
|
>Read More</a |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
{{ description }} |
|
|
|
<a |
|
|
|
@click="collapseText" |
|
|
|
class="uppercase text-xs font-semibold text-slate-700" |
|
|
|
>Read Less</a |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -135,12 +143,25 @@ import { AppString } from "@/constants/app"; |
|
|
|
components: {}, |
|
|
|
}) |
|
|
|
export default class ProjectViewView extends Vue { |
|
|
|
expanded = false; |
|
|
|
name = ""; |
|
|
|
description = ""; |
|
|
|
truncatedDesc = ""; |
|
|
|
truncateLength = 40; |
|
|
|
projectId = |
|
|
|
localStorage.getItem("projectId") === null |
|
|
|
? "" |
|
|
|
: localStorage.getItem("projectId"); |
|
|
|
|
|
|
|
expandText() { |
|
|
|
this.expanded = true; |
|
|
|
} |
|
|
|
|
|
|
|
collapseText() { |
|
|
|
this.expanded = false; |
|
|
|
} |
|
|
|
|
|
|
|
async LoadProject(identity: IIdentifier) { |
|
|
|
console.log("LoadProject", this.projectId); |
|
|
|
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER; |
|
|
|
const url = endorserApiServer + "/api/claim/" + this.projectId; |
|
|
|
const token = await accessToken(identity); |
|
|
@ -152,6 +173,12 @@ export default class ProjectViewView extends Vue { |
|
|
|
try { |
|
|
|
const resp = await this.axios.get(url, { headers }); |
|
|
|
console.log(resp.status, resp.data); |
|
|
|
if (resp.status === 200) { |
|
|
|
const claim = resp.data.claim; |
|
|
|
this.name = claim.name; |
|
|
|
this.description = claim.description; |
|
|
|
this.truncatedDesc = this.description.slice(0, this.truncateLength); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.log(error); |
|
|
|
} |
|
|
|