trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

feat: allow changing of both giver and receiver to projects or people

Browse Source
This commit is contained in:
Trent Larson
2025-12-17 21:08:09 -07:00
parent 306e221479
commit 70a0ef7ef6
9 changed files with 218 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/EntityGrid.vue
View File

@@ -1036,6 +1036,50 @@ export default class EntityGrid extends Vue {
return data;
}
/**
* Watch for changes in entityType to load projects when switching to projects
*/
@Watch("entityType")
async onEntityTypeChange(newType: "people" | "projects"): Promise<void> {
// Reset displayed count and clear search when switching types
this.displayedCount = INITIAL_BATCH_SIZE;
this.searchTerm = "";
this.filteredEntities = [];
this.searchBeforeId = undefined;
this.infiniteScrollReset?.();
// When switching to projects, load them if not provided via entities prop
if (newType === "projects" && !this.entities) {
// Ensure apiServer is loaded
if (!this.apiServer) {
const settings = await this.$accountSettings();
this.apiServer = settings.apiServer || "";
this.starredPlanHandleIds = settings.starredPlanHandleIds || [];
}
// Load projects if we have an API server
if (this.apiServer && this.allProjects.length === 0) {
this.isLoadingProjects = true;
try {
await this.fetchProjects();
} catch (error) {
logger.error(
"Error loading projects when switching to projects:",
error,
);
} finally {
this.isLoadingProjects = false;
}
}
}
// Clear project state when switching away from projects
if (newType === "people") {
this.allProjects = [];
this.loadBeforeId = undefined;
}
}
/**
* Watch for changes in search term to reset displayed count and pagination
*/

49
src/components/EntitySelectionStep.vue
View File

@@ -12,6 +12,17 @@ properties * * @author Matthew Raymer */
{{ stepLabel }}
</label>
<!-- Toggle link for entity type selection -->
<div class="mb-3">
<button
type="button"
class="text-sm text-blue-600 hover:text-blue-800 underline font-medium"
@click="handleToggleEntityType"
>
{{ toggleLinkText }}
</button>
</div>
<EntityGrid
:entity-type="shouldShowProjects ? 'projects' : 'people'"
:entities="shouldShowProjects ? projects || undefined : allContacts"
@@ -19,7 +30,6 @@ properties * * @author Matthew Raymer */
:all-my-dids="allMyDids"
:all-contacts="allContacts"
:conflict-checker="conflictChecker"
:show-you-entity="shouldShowYouEntity"
:you-selectable="youSelectable"
:notify="notify"
:conflict-context="conflictContext"
@@ -90,10 +100,6 @@ export default class EntitySelectionStep extends Vue {
@Prop({ default: false })
showProjects!: boolean;
/** Whether this is from a project view */
@Prop({ default: false })
isFromProjectView!: boolean;
/** Array of available projects (optional - EntityGrid loads internally if not provided) */
@Prop({ required: false })
projects?: PlanData[];
@@ -195,16 +201,6 @@ export default class EntitySelectionStep extends Vue {
return false;
}
/**
* Whether to show the "You" entity
*/
get shouldShowYouEntity(): boolean {
return (
this.stepType === "recipient" ||
(this.stepType === "giver" && this.isFromProjectView)
);
}
/**
* Whether the "You" entity is selectable
*/
@@ -212,6 +208,17 @@ export default class EntitySelectionStep extends Vue {
return !this.conflictChecker(this.activeDid);
}
/**
* Text for the toggle link
*/
get toggleLinkText(): string {
if (this.shouldShowProjects) {
return "or choose a person instead →";
} else {
return "or choose a project instead →";
}
}
/**
* Handle entity selection from EntityGrid
*/
@@ -222,6 +229,13 @@ export default class EntitySelectionStep extends Vue {
});
}
/**
* Handle toggle entity type button click
*/
handleToggleEntityType(): void {
this.emitToggleEntityType();
}
/**
* Handle cancel button click
*/
@@ -242,6 +256,11 @@ export default class EntitySelectionStep extends Vue {
emitCancel(): void {
// No return value needed
}
@Emit("toggle-entity-type")
emitToggleEntityType(): void {
// No return value needed
}
}
</script>

17
src/components/GiftDetailsStep.vue
View File

@@ -172,10 +172,6 @@ export default class GiftDetailsStep extends Vue {
@Prop({ default: "" })
prompt!: string;
/** Whether this is from a project view */
@Prop({ default: false })
isFromProjectView!: boolean;
/** Whether there's a conflict between giver and receiver */
@Prop({ default: false })
hasConflict!: boolean;
@@ -192,6 +188,14 @@ export default class GiftDetailsStep extends Vue {
@Prop({ default: "" })
toProjectId!: string;
/** Whether the giver is locked and cannot be edited */
@Prop({ default: false })
isGiverLocked!: boolean;
/** Whether the recipient is locked and cannot be edited */
@Prop({ default: false })
isRecipientLocked!: boolean;
/**
* Function prop for handling description updates
* Called when the description input changes, allowing parent to control validation
@@ -281,14 +285,15 @@ export default class GiftDetailsStep extends Vue {
* Whether the giver can be edited
*/
get canEditGiver(): boolean {
return !(this.isFromProjectView && this.giverEntityType === "project");
// If giver is locked via prop, it cannot be edited
return !this.isGiverLocked;
}
/**
* Whether the recipient can be edited
*/
get canEditRecipient(): boolean {
return this.recipientEntityType === "person";
return !this.isRecipientLocked;
}
/**

132
src/components/GiftedDialog.vue
View File

@@ -3,18 +3,18 @@
<div
class="dialog"
data-testid="gifted-dialog"
:data-recipient-entity-type="recipientEntityType"
:data-recipient-entity-type="currentRecipientEntityType"
>
<!-- Step 1: Entity Selection -->
<EntitySelectionStep
v-show="firstStep"
:step-type="stepType"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:giver-entity-type="currentGiverEntityType"
:recipient-entity-type="currentRecipientEntityType"
:show-projects="
giverEntityType === 'project' || recipientEntityType === 'project'
currentGiverEntityType === 'project' ||
currentRecipientEntityType === 'project'
"
:is-from-project-view="isFromProjectView"
:all-contacts="allContacts"
:active-did="activeDid"
:all-my-dids="allMyDids"
@@ -29,6 +29,7 @@
:offer-id="offerId"
:notify="$notify"
@entity-selected="handleEntitySelected"
@toggle-entity-type="handleToggleEntityType"
@cancel="cancel"
/>
@@ -37,17 +38,18 @@
v-show="!firstStep"
:giver="giver"
:receiver="receiver"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:giver-entity-type="currentGiverEntityType"
:recipient-entity-type="currentRecipientEntityType"
:description="description"
:amount="parseFloat(amountInput) || 0"
:unit-code="unitCode"
:prompt="prompt"
:is-from-project-view="isFromProjectView"
:has-conflict="hasPersonConflict"
:offer-id="offerId"
:from-project-id="fromProjectId"
:to-project-id="toProjectId"
:is-giver-locked="isGiverLocked"
:is-recipient-locked="isRecipientLocked"
:on-update-description="(desc: string) => (description = desc)"
:on-update-amount="handleAmountUpdate"
:on-update-unit-code="(code: string) => (unitCode = code)"
@@ -113,11 +115,10 @@ export default class GiftedDialog extends Vue {
@Prop() fromProjectId = "";
@Prop() toProjectId = "";
@Prop() isFromProjectView = false;
@Prop({ default: "person" }) giverEntityType = "person" as
@Prop({ default: "person" }) initialGiverEntityType = "person" as
| "person"
| "project";
@Prop({ default: "person" }) recipientEntityType = "person" as
@Prop({ default: "person" }) initialRecipientEntityType = "person" as
| "person"
| "project";
@@ -131,12 +132,16 @@ export default class GiftedDialog extends Vue {
description = "";
firstStep = true; // true = Step 1 (giver/recipient selection), false = Step 2 (amount/description)
giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
currentGiverEntityType: "person" | "project" = "person"; // Mutable version (can be toggled)
currentRecipientEntityType: "person" | "project" = "person"; // Mutable version (can be toggled)
offerId = "";
prompt = "";
receiver?: libsUtil.GiverReceiverInputInfo;
stepType = "giver";
unitCode = "HUR";
visible = false;
isGiverLocked = false;
isRecipientLocked = false;
libsUtil = libsUtil;
@@ -145,8 +150,10 @@ export default class GiftedDialog extends Vue {
// Computed property to help debug template logic
get shouldShowProjects() {
const result =
(this.stepType === "giver" && this.giverEntityType === "project") ||
(this.stepType === "recipient" && this.recipientEntityType === "project");
(this.stepType === "giver" &&
this.currentGiverEntityType === "project") ||
(this.stepType === "recipient" &&
this.currentRecipientEntityType === "project");
return result;
}
@@ -154,8 +161,8 @@ export default class GiftedDialog extends Vue {
get hasPersonConflict() {
// Only check for conflicts when both entities are persons
if (
this.giverEntityType !== "person" ||
this.recipientEntityType !== "person"
this.currentGiverEntityType !== "person" ||
this.currentRecipientEntityType !== "person"
) {
return false;
}
@@ -176,8 +183,8 @@ export default class GiftedDialog extends Vue {
wouldCreateConflict(contactDid: string) {
// Only check for conflicts when both entities are persons
if (
this.giverEntityType !== "person" ||
this.recipientEntityType !== "person"
this.currentGiverEntityType !== "person" ||
this.currentRecipientEntityType !== "person"
) {
return false;
}
@@ -211,8 +218,9 @@ export default class GiftedDialog extends Vue {
this.amountInput = amountInput || "0";
this.unitCode = unitCode || "HUR";
this.callbackOnSuccess = callbackOnSuccess;
this.firstStep = !giver;
this.stepType = "giver";
// Initialize current entity types from initial prop values
this.currentGiverEntityType = this.initialGiverEntityType;
this.currentRecipientEntityType = this.initialRecipientEntityType;
try {
const settings = await this.$accountSettings();
@@ -223,6 +231,41 @@ export default class GiftedDialog extends Vue {
const activeIdentity = await (this as any).$getActiveIdentity();
this.activeDid = activeIdentity.activeDid || "";
// Determine if entities should be locked
// An entity is locked if it's provided as an input property (has did or handleId)
// For persons: locked if did is provided and not "You" (activeDid)
// For projects: locked if handleId is provided
// When entities come from ContactsView, ContactGiftingView, or ProjectViewView context,
// they should be locked if they have a valid identifier (did or handleId)
const isGiverProvided =
giver &&
((giver.did && giver.did !== this.activeDid) ||
(giver.handleId && giver.handleId !== ""));
const isReceiverProvided =
receiver &&
((receiver.did && receiver.did !== this.activeDid) ||
(receiver.handleId && receiver.handleId !== ""));
// Lock entities that are provided (from context or explicitly set)
// This ensures that when entities are chosen from ContactsView, ContactGiftingView,
// or ProjectViewView, the other entity (giver or recipient) that was already set
// from context is locked
this.isGiverLocked = !!isGiverProvided;
this.isRecipientLocked = !!isReceiverProvided;
// Determine if receiver should be locked (for step navigation logic)
// Receiver is locked only if it's provided AND it's not "You" (activeDid)
// "You" is treated as a default that can be changed
const isReceiverLocked =
receiver && receiver.did && receiver.did !== this.activeDid;
// Only skip Step 1 if both giver and receiver are provided AND receiver is locked
// If receiver is "You" (default), still show Step 1 so user can change it
this.firstStep = !(giver && isReceiverLocked);
// If giver is provided but receiver is not locked, start with recipient selection
// Otherwise, start with giver selection
this.stepType = giver && !isReceiverLocked ? "recipient" : "giver";
logger.debug("[GiftedDialog] Settings received:", {
activeDid: this.activeDid,
apiServer: this.apiServer,
@@ -278,6 +321,11 @@ export default class GiftedDialog extends Vue {
this.prompt = "";
this.unitCode = "HUR";
this.firstStep = true;
// Reset to initial prop values
this.currentGiverEntityType = this.initialGiverEntityType;
// Reset lock states
this.isGiverLocked = false;
this.isRecipientLocked = false;
}
async confirm() {
@@ -356,8 +404,8 @@ export default class GiftedDialog extends Vue {
let providerPlanHandleId: string | undefined;
if (
this.giverEntityType === "project" &&
this.recipientEntityType === "person"
this.currentGiverEntityType === "project" &&
this.currentRecipientEntityType === "person"
) {
// Project-to-person gift
fromDid = undefined; // No person giver
@@ -365,8 +413,8 @@ export default class GiftedDialog extends Vue {
fulfillsProjectHandleId = undefined; // No project recipient
providerPlanHandleId = this.giver?.handleId; // Project giver
} else if (
this.giverEntityType === "person" &&
this.recipientEntityType === "project"
this.currentGiverEntityType === "person" &&
this.currentRecipientEntityType === "project"
) {
// Person-to-project gift
fromDid = giverDid as string; // Person giver
@@ -526,17 +574,22 @@ export default class GiftedDialog extends Vue {
return {
amountInput: this.amountInput,
description: this.description,
giverDid: this.giverEntityType === "person" ? this.giver?.did : undefined,
giverDid:
this.currentGiverEntityType === "person" ? this.giver?.did : undefined,
giverName: this.giver?.name,
offerId: this.offerId,
fulfillsProjectId:
this.recipientEntityType === "project" ? this.toProjectId : undefined,
this.currentRecipientEntityType === "project"
? this.toProjectId
: undefined,
providerProjectId:
this.giverEntityType === "project"
this.currentGiverEntityType === "project"
? this.giver?.handleId
: this.fromProjectId,
recipientDid:
this.recipientEntityType === "person" ? this.receiver?.did : undefined,
this.currentRecipientEntityType === "person"
? this.receiver?.did
: undefined,
recipientName: this.receiver?.name,
unitCode: this.unitCode,
};
@@ -596,6 +649,13 @@ export default class GiftedDialog extends Vue {
entityType: string;
currentEntity: { did: string; name: string };
}) {
// Prevent editing if the entity is locked
if (data.entityType === "giver" && this.isGiverLocked) {
return;
}
if (data.entityType === "recipient" && this.isRecipientLocked) {
return;
}
this.goBackToStep1(data.entityType);
}
@@ -606,6 +666,24 @@ export default class GiftedDialog extends Vue {
this.confirm();
}
/**
* Handle toggle entity type request from EntitySelectionStep
*/
handleToggleEntityType() {
// Toggle the appropriate entity type based on current step
if (this.stepType === "giver") {
this.currentGiverEntityType =
this.currentGiverEntityType === "person" ? "project" : "person";
// Clear any selected giver when toggling
this.giver = undefined;
} else if (this.stepType === "recipient") {
this.currentRecipientEntityType =
this.currentRecipientEntityType === "person" ? "project" : "person";
// Clear any selected receiver when toggling
this.receiver = undefined;
}
}
/**
* Handle amount update from GiftDetailsStep
*/

4
src/views/ClaimView.vue
View File

@@ -236,8 +236,8 @@
</div>
<GiftedDialog
ref="customGiveDialog"
:giver-entity-type="'person'"
:recipient-entity-type="projectInfo ? 'project' : 'person'"
:initial-giver-entity-type="'person'"
:initial-recipient-entity-type="projectInfo ? 'project' : 'person'"
:to-project-id="
detailsForGive?.fulfillsPlanHandleId ||
detailsForOffer?.fulfillsPlanHandleId ||

8
src/views/ContactGiftingView.vue
View File

@@ -105,11 +105,10 @@
<GiftedDialog
ref="giftedDialog"
:giver-entity-type="giverEntityType"
:recipient-entity-type="recipientEntityType"
:initial-giver-entity-type="giverEntityType"
:initial-recipient-entity-type="recipientEntityType"
:from-project-id="fromProjectId"
:to-project-id="toProjectId"
:is-from-project-view="isFromProjectView"
:hide-show-all="true"
/>
</section>
@@ -165,7 +164,6 @@ export default class ContactGiftingView extends Vue {
fromProjectId = "";
toProjectId = "";
showProjects = false;
isFromProjectView = false;
offerId = "";
async created() {
@@ -217,8 +215,6 @@ export default class ContactGiftingView extends Vue {
this.toProjectId = (this.$route.query["toProjectId"] as string) || "";
this.showProjects =
(this.$route.query["showProjects"] as string) === "true";
this.isFromProjectView =
(this.$route.query["isFromProjectView"] as string) === "true";
this.offerId = (this.$route.query["offerId"] as string) || "";
// eslint-disable-next-line @typescript-eslint/no-explicit-any

4
src/views/ContactsView.vue
View File

@@ -120,8 +120,8 @@
<GiftedDialog
ref="customGivenDialog"
:giver-entity-type="'person'"
:recipient-entity-type="'person'"
:initial-giver-entity-type="'person'"
:initial-recipient-entity-type="'person'"
/>
<OfferDialog ref="customOfferDialog" />
<ContactNameDialog ref="contactNameDialog" />

43
src/views/HomeView.vue
View File

@@ -123,24 +123,14 @@ Raymer * @version 1.0.0 */
</button>
</div>
<div class="grid grid-cols-2 gap-2">
<button
type="button"
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="openPersonDialog()"
>
<font-awesome icon="user" />
Person
</button>
<button
type="button"
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
</button>
</div>
<button
type="button"
class="text-center text-base uppercase bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-3 rounded-lg flex items-center justify-center gap-2"
@click="openPersonDialog()"
>
<font-awesome icon="plus" />
Record something given
</button>
</div>
</div>
</div>
@@ -148,8 +138,8 @@ Raymer * @version 1.0.0 */
<GiftedDialog
ref="giftedDialog"
:giver-entity-type="showProjectsDialog ? 'project' : 'person'"
:recipient-entity-type="'person'"
:initial-giver-entity-type="'person'"
:initial-recipient-entity-type="'person'"
/>
<GiftedPrompts ref="giftedPrompts" />
<FeedFilters ref="feedFilters" />
@@ -446,7 +436,6 @@ export default class HomeView extends Vue {
userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
selectedImage = "";
isImageViewerOpen = false;
showProjectsDialog = false;
/**
* CRITICAL VUE REACTIVITY BUG WORKAROUND
@@ -1811,17 +1800,19 @@ export default class HomeView extends Vue {
* - this.activeDid
*
* @param giver Optional contact info for giver
* @param description Optional gift description
* @param prompt Optional gift prompt
*/
openDialog(giver?: GiverReceiverInputInfo, prompt?: string) {
// Determine the giver entity based on DID logic
const giverEntity = this.createGiverEntity(giver);
// In HomeView, "You" is the default recipient but it's not locked
// User can still change it in Step 1 if they want
(this.$refs.giftedDialog as GiftedDialog).open(
giverEntity,
{
did: this.activeDid,
name: "You", // In HomeView, we always use "You" as the giver
name: "You",
} as GiverReceiverInputInfo,
undefined,
prompt,
@@ -1919,15 +1910,9 @@ export default class HomeView extends Vue {
}
openPersonDialog(giver?: GiverReceiverInputInfo, prompt?: string) {
this.showProjectsDialog = false;
this.openDialog(giver, prompt);
}
openProjectDialog() {
this.showProjectsDialog = true;
(this.$refs.giftedDialog as GiftedDialog).open();
}
/**
* Computed property for registration status
*

10
src/views/ProjectViewView.vue
View File

@@ -238,10 +238,9 @@
<GiftedDialog
ref="giveDialogToThis"
:giver-entity-type="'person'"
:recipient-entity-type="'project'"
:initial-giver-entity-type="'person'"
:initial-recipient-entity-type="'project'"
:to-project-id="projectId"
:is-from-project-view="true"
/>
<!-- Offers & Gifts to & from this -->
@@ -521,10 +520,9 @@
</div>
<GiftedDialog
ref="giveDialogFromThis"
:giver-entity-type="'project'"
:recipient-entity-type="'person'"
:initial-giver-entity-type="'project'"
:initial-recipient-entity-type="'person'"
:from-project-id="projectId"
:is-from-project-view="true"
/>
<h3 class="text-lg font-bold leading-tight mb-3">