trentlarson/crowd-funder-from-jason
1
0
Fork 0
forked from jsnbuchanan/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request 'allow changing of both giver and receiver to projects or people' (#228) from giver-receiver-selectable into master

Browse Source 
Reviewed-on: trent_larson/crowd-funder-for-time-pwa#228
This commit is contained in:
trentlarson
2025-12-19 02:10:06 +00:00
parent 3a4cdf78d8 9260892838
commit 386b7604eb
11 changed files with 455 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/EntityGrid.vue
View File

@@ -155,6 +155,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
:active-did="activeDid"
:all-my-dids="allMyDids"
:all-contacts="allContacts"
:conflicted="isProjectConflicted(project.handleId)"
:notify="notify"
:conflict-context="conflictContext"
@project-selected="handleProjectSelected"
@@ -175,6 +176,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
:active-did="activeDid"
:all-my-dids="allMyDids"
:all-contacts="allContacts"
:conflicted="isProjectConflicted(project.handleId)"
:notify="notify"
:conflict-context="conflictContext"
@project-selected="handleProjectSelected"
@@ -190,6 +192,7 @@ projects, and special entities with selection. * * @author Matthew Raymer */
:active-did="activeDid"
:all-my-dids="allMyDids"
:all-contacts="allContacts"
:conflicted="isProjectConflicted(project.handleId)"
:notify="notify"
:conflict-context="conflictContext"
@project-selected="handleProjectSelected"
@@ -556,6 +559,13 @@ export default class EntityGrid extends Vue {
return this.conflictChecker(did);
}
/**
* Check if a project handleId is conflicted
*/
isProjectConflicted(handleId: string): boolean {
return this.conflictChecker(handleId);
}
/**
* Handle person selection from PersonCard
*/
@@ -1037,6 +1047,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
*/

58
src/components/EntitySelectionStep.vue
View File

@@ -8,9 +8,19 @@ notifications for conflicted entities * - Template streamlined with computed CSS
properties * * @author Matthew Raymer */
<template>
<div id="sectionGiftedGiver">
<label class="block font-bold mb-4">
<label class="block font-bold mb-1">
{{ stepLabel }}
</label>
<!-- Toggle link for entity type selection -->
<div class="text-right mb-4">
<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'"
@@ -19,7 +29,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 +99,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[];
@@ -160,15 +165,15 @@ export default class EntitySelectionStep extends Vue {
*/
get stepLabel(): string {
if (this.stepType === "recipient") {
return "Choose who received the gift:";
return "Choose who received the gift";
} else if (this.stepType === "giver") {
if (this.shouldShowProjects) {
return "Choose a project benefitted from:";
return "Choose a project benefitted from";
} else {
return "Choose a person received from:";
return "Choose a person received from";
}
}
return "Choose entity:";
return "Choose entity";
}
/**
@@ -195,16 +200,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 +207,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 +228,13 @@ export default class EntitySelectionStep extends Vue {
});
}
/**
* Handle toggle entity type button click
*/
handleToggleEntityType(): void {
this.emitToggleEntityType();
}
/**
* Handle cancel button click
*/
@@ -242,6 +255,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;
}
/**

193
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;
}
@@ -172,22 +179,56 @@ export default class GiftedDialog extends Vue {
return false;
}
// Computed property to check if a contact would create a conflict when selected
wouldCreateConflict(contactDid: string) {
// Only check for conflicts when both entities are persons
// Computed property to check if current selection would create a project conflict
get hasProjectConflict() {
// Only check for conflicts when both entities are projects
if (
this.giverEntityType !== "person" ||
this.recipientEntityType !== "person"
this.currentGiverEntityType !== "project" ||
this.currentRecipientEntityType !== "project"
) {
return false;
}
if (this.stepType === "giver") {
// If selecting as giver, check if it conflicts with current recipient
return this.receiver?.did === contactDid;
} else if (this.stepType === "recipient") {
// If selecting as recipient, check if it conflicts with current giver
return this.giver?.did === contactDid;
// Check if giver and recipient are the same project
if (
this.giver?.handleId &&
this.receiver?.handleId &&
this.giver.handleId === this.receiver.handleId
) {
return true;
}
return false;
}
// Computed property to check if a contact or project would create a conflict when selected
wouldCreateConflict(identifier: string) {
// Check for person conflicts when both entities are persons
if (
this.currentGiverEntityType === "person" &&
this.currentRecipientEntityType === "person"
) {
if (this.stepType === "giver") {
// If selecting as giver, check if it conflicts with current recipient
return this.receiver?.did === identifier;
} else if (this.stepType === "recipient") {
// If selecting as recipient, check if it conflicts with current giver
return this.giver?.did === identifier;
}
}
// Check for project conflicts when both entities are projects
if (
this.currentGiverEntityType === "project" &&
this.currentRecipientEntityType === "project"
) {
if (this.stepType === "giver") {
// If selecting as giver, check if it conflicts with current recipient
return this.receiver?.handleId === identifier;
} else if (this.stepType === "recipient") {
// If selecting as recipient, check if it conflicts with current giver
return this.giver?.handleId === identifier;
}
}
return false;
@@ -211,8 +252,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 +265,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 +355,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() {
@@ -315,6 +397,15 @@ export default class GiftedDialog extends Vue {
return;
}
// Check for project conflict
if (this.hasProjectConflict) {
this.safeNotify.error(
"You cannot select the same project as both giver and recipient.",
TIMEOUTS.STANDARD,
);
return;
}
this.close();
this.safeNotify.toast(
NOTIFY_GIFTED_DETAILS_RECORDING_GIVE.message,
@@ -356,8 +447,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 +456,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 +617,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 +692,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 +709,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
*/

90
src/components/ProjectCard.vue
View File

@@ -1,11 +1,8 @@
/** * ProjectCard.vue - Individual project display component * * Extracted from
GiftedDialog.vue to handle project entity display * with selection states and
issuer information. * * @author Matthew Raymer */
GiftedDialog.vue to handle project entity display * with selection states,
conflict detection, and issuer information. * * @author Matthew Raymer */
<template>
<li
class="flex items-center gap-2 px-2 py-1.5 border-b border-slate-300 hover:bg-slate-50 cursor-pointer"
@click="handleClick"
>
<li :class="cardClasses" @click="handleClick">
<ProjectIcon
:entity-id="project.handleId"
:icon-size="30"
@@ -14,8 +11,8 @@ issuer information. * * @author Matthew Raymer */
/>
<div class="overflow-hidden">
<h3 class="text-sm font-semibold truncate">
{{ project.name || unnamedProject }}
<h3 :class="nameClasses">
{{ displayName }}
</h3>
<div class="text-xs text-slate-500 truncate">
@@ -33,6 +30,7 @@ import { PlanData } from "../interfaces/records";
import { Contact } from "../db/tables/contacts";
import { didInfo } from "../libs/endorserServer";
import { UNNAMED_PROJECT } from "@/constants/entities";
import { NotificationIface } from "../constants/app";
/**
* ProjectCard - Displays a project entity with selection capability
@@ -42,6 +40,8 @@ import { UNNAMED_PROJECT } from "@/constants/entities";
* - Displays project name and issuer information
* - Handles click events for selection
* - Shows issuer name using didInfo utility
* - Selection states (selectable, conflicted, disabled)
* - Warning notifications for conflicted entities
*/
@Component({
components: {
@@ -65,6 +65,18 @@ export default class ProjectCard extends Vue {
@Prop({ required: true })
allContacts!: Contact[];
/** Whether this project would create a conflict if selected */
@Prop({ default: false })
conflicted!: boolean;
/** Notification function from parent component */
@Prop()
notify?: (notification: NotificationIface, timeout?: number) => void;
/** Context for conflict messages (e.g., "giver", "recipient") */
@Prop({ default: "other party" })
conflictContext!: string;
/**
* Get the unnamed project constant
*/
@@ -72,6 +84,51 @@ export default class ProjectCard extends Vue {
return UNNAMED_PROJECT;
}
/**
* Computed CSS classes for the card
*/
get cardClasses(): string {
const baseCardClasses =
"flex items-center gap-2 px-2 py-1.5 border-b border-slate-300";
if (this.conflicted) {
return `${baseCardClasses} *:opacity-50 cursor-not-allowed`;
}
return `${baseCardClasses} cursor-pointer hover:bg-slate-50`;
}
/**
* Computed CSS classes for the project name
*/
get nameClasses(): string {
const baseNameClasses = "text-sm font-semibold truncate";
if (this.conflicted) {
return `${baseNameClasses} text-slate-500`;
}
// Add italic styling for entities without set names
if (!this.project.name) {
return `${baseNameClasses} italic text-slate-500`;
}
return baseNameClasses;
}
/**
* Computed display name for the project
*/
get displayName(): string {
// If the project has a set name, use that name
if (this.project.name) {
return this.project.name;
}
// If the project does not have a set name
return this.unnamedProject;
}
/**
* Computed display name for the project issuer
*/
@@ -85,10 +142,23 @@ export default class ProjectCard extends Vue {
}
/**
* Handle card click - emit project selection
* Handle card click - emit if not conflicted, show warning if conflicted
*/
handleClick(): void {
this.emitProjectSelected(this.project);
if (!this.conflicted) {
this.emitProjectSelected(this.project);
} else if (this.notify) {
// Show warning notification for conflicted entity
this.notify(
{
group: "alert",
type: "warning",
title: "Cannot Select",
text: `You cannot select "${this.displayName}" because it is already selected as the ${this.conflictContext}.`,
},
3000,
);
}
}
// Emit methods using @Emit decorator

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" />

134
src/views/HomeView.vue
View File

@@ -111,7 +111,34 @@ Raymer * @version 1.0.0 */
<!-- Record Quick-Action -->
<div class="mb-6">
<div class="flex gap-2 items-center mb-2">
<h2 class="font-bold">Record something given by:</h2>
<!-- Thank button - always visible and unchanged -->
<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 flex items-center justify-center gap-2 px-4 py-3 rounded-full"
@click="openPersonDialog()"
>
<font-awesome icon="plus" />
<span>Thank</span>
</button>
<!-- Plus button - appears when scrolled, positioned over house-chimney icon -->
<transition
enter-active-class="transition-all duration-1000 ease-out"
leave-active-class="transition-all duration-1000 ease-in"
enter-from-class="scale-0"
enter-to-class="scale-100"
leave-from-class="scale-100"
leave-to-class="scale-0"
>
<button
v-if="isScrolled"
type="button"
class="fixed bottom-10 p-4 w-14 h-14 z-50 text-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-full flex items-center justify-center"
:style="getButtonPosition()"
@click="openPersonDialog()"
>
<font-awesome icon="plus" />
</button>
</transition>
<button
class="block ms-auto text-sm 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-1.5 rounded-full"
@click="openGiftedPrompts()"
@@ -122,25 +149,6 @@ 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>
</div>
</div>
</div>
@@ -148,8 +156,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 +454,8 @@ 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;
isScrolled = false;
scrollHandler?: () => void;
/**
* CRITICAL VUE REACTIVITY BUG WORKAROUND
@@ -547,11 +556,44 @@ export default class HomeView extends Vue {
this.numNewOffersToUser + this.numNewOffersToUserProjects > 0,
},
});
// Add scroll listener for button collapse
// Note: Scrolling happens on #app element, not window (see tailwind.css)
const appElement = document.getElementById("app");
const scrollElement = appElement || window;
this.scrollHandler = () => {
const scrollTop = appElement
? appElement.scrollTop
: window.pageYOffset || document.documentElement.scrollTop || 0;
const shouldBeScrolled = scrollTop > 100;
if (this.isScrolled !== shouldBeScrolled) {
this.isScrolled = shouldBeScrolled;
}
};
// Set initial state
this.scrollHandler();
// Listen on scroll element (prefer #app, fallback to window)
scrollElement.addEventListener("scroll", this.scrollHandler, {
passive: true,
});
} catch (err: unknown) {
this.handleError(err);
}
}
/**
* Cleanup scroll listener on component unmount
*/
beforeUnmount() {
if (this.scrollHandler) {
const appElement = document.getElementById("app");
const scrollElement = appElement || window;
scrollElement.removeEventListener("scroll", this.scrollHandler);
}
}
/**
* Watch for changes in the current activeDid
* Reload settings when user switches identities
@@ -1811,17 +1853,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 +1963,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
*
@@ -1937,5 +1975,39 @@ export default class HomeView extends Vue {
get isUserRegistered() {
return this.isRegistered;
}
/**
* Calculates the horizontal position for the button to align with house button center
*/
getButtonPosition() {
const quickNav = document.getElementById("QuickNav");
if (!quickNav) {
return { left: "1.5rem" }; // Fallback to left-6
}
const navList = quickNav.querySelector("ul");
if (!navList) {
return { left: "1.5rem" };
}
// Get the first nav item (house button)
const firstItem = navList.querySelector("li:first-child");
if (!firstItem) {
return { left: "1.5rem" };
}
const itemRect = firstItem.getBoundingClientRect();
const buttonWidth = 56; // w-14 = 3.5rem = 56px
// Calculate center of house button
const houseButtonCenter = itemRect.left + itemRect.width / 2;
// Position button so its center aligns with house button center
const buttonLeft = houseButtonCenter - buttonWidth / 2;
return {
left: `${buttonLeft}px`,
};
}
}
</script>

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">

3
src/views/UserProfileView.vue
View File

@@ -58,7 +58,8 @@
<div
v-if="
profile.issuerDid !== activeDid && // only show neighbors if they're not current user
profile.issuerDid !== neighbors?.[0]?.did // and they're not directly connected (since there's no in-between)
profile.issuerDid !== neighbors?.[0]?.did // and they're not directly connected
// (which we know because there is no neighbor in-between them)
"
class="mt-6"
>