trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 12 Releases 5 Wiki Activity
Browse Source

Giver-recipient controls 

- Dialog now shows separate cards for giver and recipient
- Ability to change giver and/or recipient
- Project giver/recipient is locked in ProjectView (context reinforcement)
pull/140/head
Jose Olarte III 5 days ago
parent
eb7605991c
commit
a7e65b3b49
5 changed files with 465 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 519
      src/components/GiftedDialog.vue
  2. 2
      src/libs/fontawesome.ts
  3. 16
      src/views/ContactGiftingView.vue
  4. 34
      src/views/HomeView.vue
  5. 41
      src/views/ProjectViewView.vue

519
src/components/GiftedDialog.vue
View File

@ -2,19 +2,36 @@
<div v-if="visible" class="dialog-overlay">
<div class="dialog">
<!-- Step 1: Giver -->
<div id="sectionGiftedGiver" v-show="currentStep === 1">
<div v-show="currentStep === 1" id="sectionGiftedGiver">
<label class="block font-bold mb-4">
{{ showProjects ? 'Choose a project to benefit from:' : 'Choose a person to receive from:' }}
{{
stepType === "recipient"
? "Choose who received the gift:"
: showProjects
? "Choose a project to benefit from:"
: "Choose a person to receive from:"
}}
</label>
<!-- Unified Quick-pick grid for People and Projects -->
<ul :class="showProjects ? 'grid grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-4 text-center mb-4' : 'grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4'">
<template v-if="showProjects">
<ul
:class="
shouldShowProjects
? 'grid grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-4 text-center mb-4'
: 'grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4'
"
>
<template v-if="shouldShowProjects">
<!-- show projects -->
<li
v-for="project in projects.slice(0, 7)"
:key="project.handleId"
@click="selectProject(project)"
class="cursor-pointer"
@click="
stepType === 'recipient'
? selectRecipientProject(project)
: selectProject(project)
"
>
<div class="relative w-fit mx-auto">
<ProjectIcon
@ -24,86 +41,130 @@
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
/>
</div>
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
{{ project.name }}
</h3>
<div class="text-xs text-slate-500 truncate">
<font-awesome icon="user" class="fa-fw text-slate-400" />
{{ didInfo(project.issuerDid, activeDid, allMyDids, allContacts) }}
{{
didInfo(project.issuerDid, activeDid, allMyDids, allContacts)
}}
</div>
</li>
<li v-if="projects.length === 0" class="text-xs text-slate-500 italic col-span-full">
<li
v-if="projects.length === 0"
class="text-xs text-slate-500 italic col-span-full"
>
(No projects found.)
</li>
<li v-if="projects.length > 0">
<router-link
:to="{ name: 'discover' }"
class="cursor-pointer"
>
<font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
<h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
<router-link :to="{ name: 'discover' }" class="cursor-pointer">
<font-awesome
icon="circle-right"
class="text-blue-500 text-5xl mb-1"
/>
<h3
class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
>
Show All
</h3>
</router-link>
</li>
</template>
<template v-else>
<!-- show people (contacts) -->
<li
v-if="isFromProjectView && activeDid"
@click="selectGiver({ did: activeDid, name: 'You' })"
v-if="
stepType === 'recipient' ||
(stepType === 'giver' && isFromProjectView)
"
class="cursor-pointer"
@click="
stepType === 'recipient'
? selectRecipient({ did: activeDid, name: 'You' })
: selectGiver({ did: activeDid, name: 'You' })
"
>
<font-awesome icon="hand" class="text-blue-500 text-5xl mb-1" />
<h3 class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden">
<h3
class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
You
</h3>
</li>
<li
@click="selectGiver()"
class="cursor-pointer"
@click="
stepType === 'recipient' ? selectRecipient() : selectGiver()
"
>
<font-awesome icon="circle-question" class="text-slate-400 text-5xl mb-1" />
<h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
<font-awesome
icon="circle-question"
class="text-slate-400 text-5xl mb-1"
/>
<h3
class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
>
Unnamed
</h3>
</li>
<li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic col-span-full">
<li
v-if="allContacts.length === 0"
class="text-xs text-slate-500 italic col-span-full"
>
(Add friends to see more people worthy of recognition.)
</li>
<li
v-for="contact in allContacts.slice(0, 10)"
:key="contact.did"
@click="selectGiver(contact)"
class="cursor-pointer"
@click="
stepType === 'recipient'
? selectRecipient(contact)
: selectGiver(contact)
"
>
<div class="relative w-fit mx-auto">
<EntityIcon
:contact="contact"
class="!size-[3rem] mx-auto border border-slate-300 bg-white overflow-hidden rounded-full mb-1"
/>
<div class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3">
<font-awesome icon="clock" class="block text-white text-xs w-[1em]" />
<div
class="rounded-full bg-slate-400 absolute bottom-0 right-0 p-1 translate-x-1/3"
>
<font-awesome
icon="clock"
class="block text-white text-xs w-[1em]"
/>
</div>
</div>
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
>
{{ contact.name || contact.did }}
</h3>
</li>
<li v-if="allContacts.length > 0">
<li v-if="allContacts.length > 0" class="cursor-pointer">
<router-link
:to="{
:to="{
name: 'contact-gift',
query: {
recipientProjectId: toProjectId,
recipientProjectName: giver?.name,
recipientProjectImage: giver?.image,
recipientProjectHandleId: giver?.handleId
}
recipientProjectHandleId: giver?.handleId,
},
}"
class="cursor-pointer"
>
<font-awesome icon="circle-right" class="text-blue-500 text-5xl mb-1" />
<h3 class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden">
<font-awesome
icon="circle-right"
class="text-blue-500 text-5xl mb-1"
/>
<h3
class="text-xs text-slate-500 font-medium italic text-ellipsis whitespace-nowrap overflow-hidden"
>
Show All
</h3>
</router-link>
@ -120,71 +181,192 @@
</div>
<!-- Step 2: Gift -->
<div id="sectionGiftedGift" v-show="currentStep === 2">
<button
v-if="!fromProjectId"
class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4"
@click="goBackToStep1"
>
<div>
<template v-if="showProjects">
<ProjectIcon
v-if="giver?.handleId"
:entity-id="giver.handleId"
:icon-size="32"
:image-url="giver.image"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
</template>
<template v-else>
<EntityIcon
v-if="giver?.did"
:contact="giver"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
<font-awesome
v-else
icon="circle-question"
class="text-slate-400 text-3xl"
/>
</template>
</div>
<div v-show="currentStep === 2" id="sectionGiftedGift">
<div class="grid grid-cols-2 gap-2 mb-4">
<!-- Giver Button -->
<button
v-if="(giverEntityType === 'person' || giverEntityType === 'project') && !(isFromProjectView && giverEntityType === 'project')"
class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
@click="goBackToStep1('giver')"
>
<div>
<template v-if="giverEntityType === 'project'">
<ProjectIcon
v-if="giver?.handleId"
:entity-id="giver.handleId"
:icon-size="32"
:image-url="giver.image"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
</template>
<template v-else>
<EntityIcon
v-if="giver?.did"
:contact="giver"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
<font-awesome
v-else
icon="circle-question"
class="text-slate-400 text-3xl"
/>
</template>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
{{
giverEntityType === "project"
? "Benefited from:"
: "Received from:"
}}
</p>
<h3 class="font-semibold truncate">
{{ giver?.name || "Unnamed" }}
</h3>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefitted from:' : 'Received from:' }}</p>
<h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
</div>
<p class="ms-auto text-sm text-blue-500 pe-1">
<font-awesome icon="pen" title="Change" />
</p>
</button>
<div
v-else
class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
>
<div>
<template v-if="giverEntityType === 'project'">
<ProjectIcon
v-if="giver?.handleId"
:entity-id="giver.handleId"
:icon-size="32"
:image-url="giver.image"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
</template>
<template v-else>
<EntityIcon
v-if="giver?.did"
:contact="giver"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
<font-awesome
v-else
icon="circle-question"
class="text-slate-400 text-3xl"
/>
</template>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
{{
giverEntityType === "project"
? "Benefited from:"
: "Received from:"
}}
</p>
<h3 class="font-semibold truncate">
{{ giver?.name || "Unnamed" }}
</h3>
</div>
<p class="ms-auto text-sm uppercase font-medium pe-2">Change</p>
</button>
<div v-else class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4">
<div>
<template v-if="showProjects">
<ProjectIcon
v-if="giver?.handleId"
:entity-id="giver.handleId"
:icon-size="32"
:image-url="giver.image"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
</template>
<template v-else>
<EntityIcon
v-if="giver?.did"
:contact="giver"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
<font-awesome
v-else
icon="circle-question"
class="text-slate-400 text-3xl"
/>
</template>
<p class="ms-auto text-sm text-slate-400 pe-1">
<font-awesome icon="lock" title="Can't be changed" />
</p>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefitted from:' : 'Received from:' }}</p>
<h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
<!-- Recipient Button -->
<button
v-if="recipientEntityType === 'person'"
class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
@click="goBackToStep1('recipient')"
>
<div>
<template v-if="recipientEntityType === 'project'">
<ProjectIcon
v-if="receiver?.handleId"
:entity-id="receiver.handleId"
:icon-size="32"
:image-url="receiver.image"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
</template>
<template v-else>
<EntityIcon
v-if="receiver?.did"
:contact="receiver"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
<font-awesome
v-else
icon="circle-question"
class="text-slate-400 text-3xl"
/>
</template>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
{{
recipientEntityType === "project"
? "Given to project:"
: "Given to:"
}}
</p>
<h3 class="font-semibold truncate">
{{ receiver?.name || "Unnamed" }}
</h3>
</div>
<p class="ms-auto text-sm text-blue-500 pe-1">
<font-awesome icon="pen" title="Change" />
</p>
</button>
<div
v-else
class="flex-1 flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2"
>
<div>
<template v-if="recipientEntityType === 'project'">
<ProjectIcon
v-if="receiver?.handleId"
:entity-id="receiver.handleId"
:icon-size="32"
:image-url="receiver.image"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
</template>
<template v-else>
<EntityIcon
v-if="receiver?.did"
:contact="receiver"
class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
/>
<font-awesome
v-else
icon="circle-question"
class="text-slate-400 text-3xl"
/>
</template>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">
{{
recipientEntityType === "project"
? "Given to project:"
: "Given to:"
}}
</p>
<h3 class="font-semibold truncate">
{{ receiver?.name || "Unnamed" }}
</h3>
</div>
<p class="ms-auto text-sm text-slate-400 pe-1">
<font-awesome icon="lock" title="Can't be changed" />
</p>
</div>
</div>
<input
@ -194,33 +376,36 @@
:placeholder="prompt || 'What was given?'"
/>
<div class="flex mb-4">
<button
<button
class="rounded-s border border-e-0 border-slate-400 bg-slate-200 px-4 py-2"
@click="amountInput === '0' ? null : decrement()"
>
<font-awesome icon="chevron-left" />
</button>
</button>
<input
id="inputGivenAmount"
v-model="amountInput"
type="number"
class="flex-1 border border-e-0 border-slate-400 px-2 py-2 text-center w-[1px]"
/>
<button
<button
class="rounded-e border border-slate-400 bg-slate-200 px-4 py-2"
@click="increment()"
>
<font-awesome icon="chevron-right" />
</button>
<select v-model="unitCode" class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2">
<option value="HUR">Hours</option>
<option value="USD">US $</option>
<option value="BTC">BTC</option>
<option value="BX">BX</option>
<option value="ETH">ETH</option>
</select>
</div>
</button>
<select
v-model="unitCode"
class="flex-1 rounded border border-slate-400 ms-2 px-3 py-2"
>
<option value="HUR">Hours</option>
<option value="USD">US $</option>
<option value="BTC">BTC</option>
<option value="BX">BX</option>
<option value="ETH">ETH</option>
</select>
</div>
<router-link
:to="{
name: 'gifted-details',
@ -230,7 +415,10 @@
giverDid: showProjects ? undefined : giver?.did,
giverName: giver?.name,
offerId,
fulfillsProjectId: showProjects && isFromProjectView ? giver?.handleId : toProjectId,
fulfillsProjectId:
showProjects && isFromProjectView
? giver?.handleId
: toProjectId,
providerProjectId: showProjects ? giver?.handleId : fromProjectId,
recipientDid: receiver?.did,
recipientName: receiver?.name,
@ -241,11 +429,11 @@
>
Photo &amp; more options&hellip;
</router-link>
<p class="text-center mb-4">
<p class="text-center text-sm mb-4">
<b class="font-medium">Sign &amp; Send</b> to publish to the world
<font-awesome
icon="circle-info"
class="fa-fw text-blue-500 text-lg cursor-pointer"
class="fa-fw text-blue-500 text-base cursor-pointer"
@click="explainData()"
/>
</p>
@ -269,7 +457,7 @@
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-facing-decorator";
import { Vue, Component, Prop, Watch } from "vue-facing-decorator";
import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
import {
@ -303,6 +491,21 @@ export default class GiftedDialog extends Vue {
@Prop({ default: false }) showProjects = false;
@Prop() isFromProjectView = false;
@Watch('showProjects')
onShowProjectsChange() {
this.updateEntityTypes();
}
@Watch('fromProjectId')
onFromProjectIdChange() {
this.updateEntityTypes();
}
@Watch('toProjectId')
onToProjectIdChange() {
this.updateEntityTypes();
}
activeDid = "";
allContacts: Array<Contact> = [];
allMyDids: Array<string> = [];
@ -326,6 +529,42 @@ export default class GiftedDialog extends Vue {
didInfo = didInfo;
// Computed property to help debug template logic
get shouldShowProjects() {
const result = (this.stepType === 'giver' && this.giverEntityType === 'project') ||
(this.stepType === 'recipient' && this.recipientEntityType === 'project');
return result;
}
stepType = "giver";
giverEntityType = "person" as "person" | "project";
recipientEntityType = "person" as "person" | "project";
updateEntityTypes() {
// Reset and set entity types based on current context
this.giverEntityType = "person";
this.recipientEntityType = "person";
// Determine entity types based on current context
if (this.showProjects) {
// HomeView "Project" button or ProjectViewView "Given by This"
this.giverEntityType = "project";
this.recipientEntityType = "person";
} else if (this.fromProjectId) {
// ProjectViewView "Given by This" button (project is giver)
this.giverEntityType = "project";
this.recipientEntityType = "person";
} else if (this.toProjectId) {
// ProjectViewView "Given to This" button (project is recipient)
this.giverEntityType = "person";
this.recipientEntityType = "project";
} else {
// HomeView "Person" button
this.giverEntityType = "person";
this.recipientEntityType = "person";
}
}
async open(
giver?: libsUtil.GiverReceiverInputInfo,
receiver?: libsUtil.GiverReceiverInputInfo,
@ -342,6 +581,10 @@ export default class GiftedDialog extends Vue {
this.callbackOnSuccess = callbackOnSuccess;
this.offerId = offerId || "";
this.currentStep = giver ? 2 : 1;
this.stepType = "giver";
// Update entity types based on current props
this.updateEntityTypes();
try {
let settings = await databaseUtil.retrieveSettingsForActiveAccount();
@ -373,8 +616,14 @@ export default class GiftedDialog extends Vue {
);
}
if (this.showProjects) {
if (
this.giverEntityType === "project" ||
this.recipientEntityType === "project"
) {
await this.loadProjects();
} else {
// Clear projects array when not needed
this.projects = [];
}
} catch (err: any) {
logger.error("Error retrieving settings from database:", err);
@ -510,12 +759,16 @@ export default class GiftedDialog extends Vue {
this.axios,
this.apiServer,
this.activeDid,
this.showProjects ? undefined : giverDid as string,
this.showProjects && this.isFromProjectView ? this.giver?.handleId : recipientDid as string,
this.showProjects ? undefined : (giverDid as string),
this.showProjects && this.isFromProjectView
? this.giver?.handleId
: (recipientDid as string),
description,
amount,
unitCode,
this.showProjects && this.isFromProjectView ? this.giver?.handleId : this.toProjectId,
this.showProjects && this.isFromProjectView
? this.giver?.handleId
: this.toProjectId,
this.offerId,
false,
undefined,
@ -598,18 +851,19 @@ export default class GiftedDialog extends Vue {
if (contact) {
this.giver = {
did: contact.did,
name: contact.name || contact.did
name: contact.name || contact.did,
};
} else {
this.giver = {
did: '',
name: 'Unnamed'
did: "",
name: "Unnamed",
};
}
this.currentStep = 2;
}
goBackToStep1() {
goBackToStep1(step: string) {
this.stepType = step;
this.currentStep = 1;
}
@ -647,11 +901,36 @@ export default class GiftedDialog extends Vue {
did: project.handleId,
name: project.name,
image: project.image,
handleId: project.handleId
handleId: project.handleId,
};
this.receiver = {
did: this.activeDid,
name: "You"
name: "You",
};
this.currentStep = 2;
}
selectRecipient(contact?: Contact) {
if (contact) {
this.receiver = {
did: contact.did,
name: contact.name || contact.did,
};
} else {
this.receiver = {
did: "",
name: "Unnamed",
};
}
this.currentStep = 2;
}
selectRecipientProject(project: PlanData) {
this.receiver = {
did: project.handleId,
name: project.name,
image: project.image,
handleId: project.handleId,
};
this.currentStep = 2;
}

2
src/libs/fontawesome.ts
View File

@ -61,6 +61,7 @@ import {
faLightbulb,
faLink,
faLocationDot,
faLock,
faLongArrowAltLeft,
faLongArrowAltRight,
faMagnifyingGlass,
@ -145,6 +146,7 @@ library.add(
faLightbulb,
faLink,
faLocationDot,
faLock,
faLongArrowAltLeft,
faLongArrowAltRight,
faMagnifyingGlass,

16
src/views/ContactGiftingView.vue
View File

@ -127,10 +127,14 @@ export default class ContactGiftingView extends Vue {
);
}
this.projectId = (this.$route.query["recipientProjectId"] as string) || "";
this.recipientProjectName = (this.$route.query["recipientProjectName"] as string) || "";
this.recipientProjectImage = (this.$route.query["recipientProjectImage"] as string) || "";
this.recipientProjectHandleId = (this.$route.query["recipientProjectHandleId"] as string) || "";
this.projectId =
(this.$route.query["recipientProjectId"] as string) || "";
this.recipientProjectName =
(this.$route.query["recipientProjectName"] as string) || "";
this.recipientProjectImage =
(this.$route.query["recipientProjectImage"] as string) || "";
this.recipientProjectHandleId =
(this.$route.query["recipientProjectHandleId"] as string) || "";
this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -156,10 +160,10 @@ export default class ContactGiftingView extends Vue {
did: this.recipientProjectHandleId,
name: this.recipientProjectName,
image: this.recipientProjectImage,
handleId: this.recipientProjectHandleId
handleId: this.recipientProjectHandleId,
}
: { did: this.activeDid, name: "you" };
if (giver === "Unnamed") {
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
(this.$refs.customDialog as GiftedDialog).open(

34
src/views/HomeView.vue
View File

@ -122,26 +122,29 @@ Raymer * @version 1.0.0 */
<div class="flex gap-2 items-center mb-2">
<h2 class="text-xl font-bold">Record something given by:</h2>
<button
@click="openGiftedPrompts()"
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
@click="openGiftedPrompts()"
>
<font-awesome icon="lightbulb" class="block text-center w-[1em]" />
<font-awesome
icon="lightbulb"
class="block text-center w-[1em]"
/>
</button>
</div>
<div class="grid grid-cols-2 gap-2">
<button
type="button"
@click="openDialogPerson()"
class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
@click="openDialogPerson()"
>
<font-awesome icon="user" />
Person
</button>
<button
type="button"
@click="openProjectDialog()"
class="text-center text-base uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-lg"
@click="openProjectDialog()"
>
<font-awesome icon="folder-open" />
Project
@ -160,22 +163,26 @@ Raymer * @version 1.0.0 */
<!-- Results List -->
<div class="mt-4 mb-4">
<div class="flex gap-2 items-center mb-3">
<h2 class="text-xl font-bold">
Latest Activity
</h2>
<h2 class="text-xl font-bold">Latest Activity</h2>
<button
v-if="resultsAreFiltered()"
class="block ms-auto text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
@click="openFeedFilters()"
>
<font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
<font-awesome
icon="filter"
class="block text-center w-[1em] translate-y-[0.05em]"
/>
</button>
<button
v-else
class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
@click="openFeedFilters()"
>
<font-awesome icon="filter" class="block text-center w-[1em] translate-y-[0.05em]" />
<font-awesome
icon="filter"
class="block text-center w-[1em] translate-y-[0.05em]"
/>
</button>
</div>
@ -1610,7 +1617,7 @@ export default class HomeView extends Vue {
undefined,
{
did: this.activeDid,
name: "you",
name: "You",
} as GiverReceiverInputInfo,
undefined,
"Given by Unnamed",
@ -1623,7 +1630,7 @@ export default class HomeView extends Vue {
giver,
{
did: this.activeDid,
name: "you",
name: "You",
} as GiverReceiverInputInfo,
undefined,
"Given by " + (giver?.name || "someone not named"),
@ -1864,7 +1871,10 @@ export default class HomeView extends Vue {
}
}
openDialogPerson(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
openDialogPerson(
giver?: GiverReceiverInputInfo | "Unnamed",
description?: string,
) {
this.showProjectsDialog = false;
this.openDialog(giver, description);
}

41
src/views/ProjectViewView.vue
View File

@ -196,7 +196,11 @@
</div>
</div>
<GiftedDialog ref="giveDialogToThis" :to-project-id="projectId" :is-from-project-view="true" />
<GiftedDialog
ref="giveDialogToThis"
:to-project-id="projectId"
:is-from-project-view="true"
/>
<!-- Offers & Gifts to & from this -->
<div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
@ -462,7 +466,12 @@
</button>
</div>
</div>
<GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" :show-projects="true" />
<GiftedDialog
ref="giveDialogFromThis"
:from-project-id="projectId"
:show-projects="true"
:is-from-project-view="true"
/>
<h3 class="text-lg font-bold mb-3 mt-4">
Benefitted From This Project
@ -1173,7 +1182,9 @@ export default class ProjectViewView extends Vue {
);
}
openGiftDialogToProject(contact?: libsUtil.GiverReceiverInputInfo | "Unnamed") {
openGiftDialogToProject(
contact?: libsUtil.GiverReceiverInputInfo | "Unnamed",
) {
if (contact === "Unnamed") {
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected
(this.$refs.giveDialogToThis as GiftedDialog).open(
@ -1185,10 +1196,18 @@ export default class ProjectViewView extends Vue {
// Immediately select "Unnamed" and move to Step 2
(this.$refs.giveDialogToThis as GiftedDialog).selectGiver();
} else {
// Set only the project as recipient, allowing user to select giver in Step 1
// Open straight to Step 2 with current user as giver and current project as recipient
(this.$refs.giveDialogToThis as GiftedDialog).open(
undefined,
{ did: this.issuer, name: this.name, handleId: this.projectId, image: this.imageUrl },
{
did: this.activeDid,
name: "You",
},
{
did: this.issuer,
name: this.name,
handleId: this.projectId,
image: this.imageUrl,
},
undefined,
`Given to ${this.name}`,
);
@ -1198,13 +1217,18 @@ export default class ProjectViewView extends Vue {
openGiftDialogFromProject() {
// Set the project as giver and the current user as recipient
(this.$refs.giveDialogFromThis as GiftedDialog).open(
{ did: undefined, name: this.name, handleId: this.projectId, image: this.imageUrl },
{
did: undefined,
name: this.name,
handleId: this.projectId,
image: this.imageUrl,
},
{ did: this.activeDid, name: "You" },
undefined,
`${this.name} gave to you`,
undefined,
undefined,
true
true,
);
}
@ -1479,4 +1503,3 @@ export default class ProjectViewView extends Vue {
}
}
</script>

Write Preview
Loading…
Cancel
Save