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

Feature: Project Gifting 

- Gifting dialog: added ability to pick a project to benefit from
- Project view: modified dialog calls in Project view to toggle between giving to and benefiting from a project
- Project view: removed redundant person selection
- Project view: benefiting from a project locks the project selection in dialog to enforce context.
gifting-ui-2025-05
Jose Olarte III 2 days ago
parent
7eefee1ea5
commit
3daf1c8a5c
4 changed files with 244 additions and 140 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. 291
      src/components/GiftedDialog.vue
  2. 2
      src/libs/util.ts
  3. 17
      src/views/HomeView.vue
  4. 74
      src/views/ProjectViewView.vue

291
src/components/GiftedDialog.vue
View File

@ -3,63 +3,104 @@
<div class="dialog">
<!-- Step 1: Giver -->
<div id="sectionGiftedGiver" v-show="currentStep === 1">
<label class="block font-bold mb-4">Choose a person to receive from:</label>
<!-- Quick-pick grid -->
<ul
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-2 gap-y-4 text-center mb-4"
>
<li
@click="selectGiver()"
class="cursor-pointer"
>
<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"
<label class="block font-bold mb-4">
{{ 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">
<li
v-for="project in projects.slice(0, 7)"
:key="project.handleId"
@click="selectProject(project)"
class="cursor-pointer"
>
Unnamed
</h3>
</li>
<li v-if="allContacts.length === 0" class="text-xs text-slate-500 italic">
(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"
>
<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="relative w-fit mx-auto">
<ProjectIcon
:entity-id="project.handleId"
:icon-size="48"
:image-url="project.image"
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">
{{ 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) }}
</div>
</div>
<h3
class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
</li>
<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">
Show All
</h3>
</router-link>
</li>
</template>
<template v-else>
<li
v-if="isFromProjectView && activeDid"
@click="selectGiver({ did: activeDid, name: 'You' })"
class="cursor-pointer"
>
{{ contact.name || contact.did }}
</h3>
</li>
<li v-if="allContacts.length > 0">
<router-link
:to="{ name: 'contact-gift' }"
<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">
You
</h3>
</li>
<li
@click="selectGiver()"
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
<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>
</router-link>
</li>
</li>
<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"
>
<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>
</div>
<h3 class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden">
{{ contact.name || contact.did }}
</h3>
</li>
<li v-if="allContacts.length > 0">
<router-link
:to="{ name: 'contact-gift' }"
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>
</ul>
<button
@ -72,27 +113,72 @@
<!-- Step 2: Gift -->
<div id="sectionGiftedGift" v-show="currentStep === 2">
<button class="w-full flex items-center gap-2 bg-slate-100 border border-slate-300 rounded-md p-2 mb-4" @click="goBackToStep1">
<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>
<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"
/>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">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>
<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 class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? '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>
</div>
<div class="text-start min-w-0">
<p class="text-xs text-slate-500 leading-1 -mb-1 uppercase">{{ showProjects ? 'Benefited from:' : 'Received from:' }}</p>
<h3 class="font-semibold truncate">{{ giver?.name || 'Unnamed' }}</h3>
</div>
</div>
<input
v-model="description"
type="text"
@ -182,6 +268,7 @@ import {
createAndSubmitGive,
didInfo,
serverMessageForUser,
getHeaders,
} from "../libs/endorserServer";
import * as libsUtil from "../libs/util";
import { db, retrieveSettingsForActiveAccount } from "../db/index";
@ -191,10 +278,13 @@ import { retrieveAccountDids } from "../libs/util";
import { logger } from "../utils/logger";
import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
import EntityIcon from "../components/EntityIcon.vue";
import ProjectIcon from "../components/ProjectIcon.vue";
import { PlanData } from "../interfaces/records";
@Component({
components: {
EntityIcon,
ProjectIcon,
},
})
export default class GiftedDialog extends Vue {
@ -202,6 +292,8 @@ export default class GiftedDialog extends Vue {
@Prop() fromProjectId = "";
@Prop() toProjectId = "";
@Prop({ default: false }) showProjects = false;
@Prop() isFromProjectView = false;
activeDid = "";
allContacts: Array<Contact> = [];
@ -222,6 +314,10 @@ export default class GiftedDialog extends Vue {
libsUtil = libsUtil;
projects: PlanData[] = [];
didInfo = didInfo;
async open(
giver?: libsUtil.GiverReceiverInputInfo,
receiver?: libsUtil.GiverReceiverInputInfo,
@ -234,7 +330,6 @@ export default class GiftedDialog extends Vue {
this.giver = giver;
this.prompt = prompt || "";
this.receiver = receiver;
// if we show "given to user" selection, default checkbox to true
this.amountInput = "0";
this.callbackOnSuccess = callbackOnSuccess;
this.offerId = offerId || "";
@ -269,7 +364,10 @@ export default class GiftedDialog extends Vue {
this.allContacts,
);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (this.showProjects) {
await this.loadProjects();
}
} catch (err: any) {
logger.error("Error retrieving settings from database:", err);
this.$notify(
@ -404,7 +502,7 @@ export default class GiftedDialog extends Vue {
this.axios,
this.apiServer,
this.activeDid,
giverDid as string,
this.showProjects ? undefined : giverDid as string,
recipientDid as string,
description,
amount,
@ -413,7 +511,7 @@ export default class GiftedDialog extends Vue {
this.offerId,
false,
undefined,
this.fromProjectId,
this.showProjects ? this.giver?.handleId : undefined,
);
if (!result.success) {
@ -506,6 +604,49 @@ export default class GiftedDialog extends Vue {
goBackToStep1() {
this.currentStep = 1;
}
async loadProjects() {
try {
const response = await fetch(this.apiServer + "/api/v2/report/plans", {
method: "GET",
headers: await getHeaders(this.activeDid),
});
if (response.status !== 200) {
throw new Error("Failed to load projects");
}
const results = await response.json();
if (results.data) {
this.projects = results.data;
}
} catch (error) {
logger.error("Error loading projects:", error);
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "Failed to load projects",
},
3000,
);
}
}
selectProject(project: PlanData) {
this.giver = {
did: project.handleId,
name: project.name,
image: project.image,
handleId: project.handleId
};
this.receiver = {
did: this.activeDid,
name: "You"
};
this.currentStep = 2;
}
}
</script>

2
src/libs/util.ts
View File

@ -49,6 +49,8 @@ import { insertDidSpecificSettings, parseJsonField } from "../db/databaseUtil";
export interface GiverReceiverInputInfo {
did?: string;
name?: string;
image?: string;
handleId?: string;
}
export enum OnboardPage {

17
src/views/HomeView.vue
View File

@ -132,7 +132,7 @@ Raymer * @version 1.0.0 */
<div class="grid grid-cols-2 gap-2">
<button
type="button"
@click="openDialog()"
@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"
>
<font-awesome icon="user" />
@ -140,7 +140,7 @@ Raymer * @version 1.0.0 */
</button>
<button
type="button"
@click="openDialog()"
@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"
>
<font-awesome icon="folder-open" />
@ -153,7 +153,7 @@ Raymer * @version 1.0.0 */
</div>
</div>
<GiftedDialog ref="customDialog" />
<GiftedDialog ref="customDialog" :show-projects="showProjectsDialog" />
<GiftedPrompts ref="giftedPrompts" />
<FeedFilters ref="feedFilters" />
@ -439,6 +439,7 @@ export default class HomeView extends Vue {
selectedImageData: Blob | null = null;
isImageViewerOpen = false;
imageCache: Map<string, Blob | null> = new Map();
showProjectsDialog = false;
/**
* Initializes the component on mount
@ -1862,5 +1863,15 @@ export default class HomeView extends Vue {
this.$router.push({ name: "contact-qr" });
}
}
openDialogPerson(giver?: GiverReceiverInputInfo | "Unnamed", description?: string) {
this.showProjectsDialog = false;
this.openDialog(giver, description);
}
openProjectDialog() {
this.showProjectsDialog = true;
(this.$refs.customDialog as any).open();
}
}
</script>

74
src/views/ProjectViewView.vue
View File

@ -196,63 +196,7 @@
</div>
</div>
<div v-if="activeDid && isRegistered">
<div class="text-center">
<p class="mt-2 mt-4 text-center">Record a contribution from:</p>
</div>
<ul
class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-2"
>
<li @click="openGiftDialogToProject({ name: 'you', did: activeDid })">
<font-awesome
icon="hand"
class="fa-fw text-blue-500 text-5xl cursor-pointer"
/>
<h3
class="mt-5 text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
>
You
</h3>
</li>
<li @click="openGiftDialogToProject()">
<img
src="../assets/blank-square.svg"
class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
/>
<h3
class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
>
Unnamed/Unknown
</h3>
</li>
<li
v-for="contact in allContacts.slice(0, 5)"
:key="contact.did"
@click="openGiftDialogToProject(contact)"
>
<EntityIcon
:contact="contact"
:icon-size="64"
class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
/>
<h3
class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
>
{{ contact.name || "(no name)" }}
</h3>
</li>
<li>
<span
v-if="allContacts.length >= 5"
class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
@click="onClickAllContactsGifting()"
>
... or someone else...
</span>
</li>
</ul>
</div>
<GiftedDialog ref="giveDialogToThis" :to-project-id="projectId" />
<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">
@ -518,7 +462,7 @@
</button>
</div>
</div>
<GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" />
<GiftedDialog ref="giveDialogFromThis" :from-project-id="projectId" :show-projects="true" />
<h3 class="text-lg font-bold mb-3 mt-4">
Benefitted From This Project
@ -1241,21 +1185,26 @@ 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
(this.$refs.giveDialogToThis as GiftedDialog).open(
contact,
undefined,
{ did: this.issuer, name: this.name, handleId: this.projectId, image: this.imageUrl },
undefined,
(contact?.name || "Someone not named") + ` gave to this project`,
`Given to ${this.name}`,
);
}
}
openGiftDialogFromProject() {
// Set the project as giver and the current user as recipient
(this.$refs.giveDialogFromThis as GiftedDialog).open(
undefined,
{ did: undefined, name: this.name, handleId: this.projectId, image: this.imageUrl },
{ did: this.activeDid, name: "You" },
undefined,
`This project gave to you`,
`${this.name} gave to you`,
undefined,
undefined,
true
);
}
@ -1530,3 +1479,4 @@ export default class ProjectViewView extends Vue {
}
}
</script>

Write Preview
Loading…
Cancel
Save