improvements to gifting-adjacent views #143
Open
jose
wants to merge 29 commits from gifting-periphery-improvements into master
7 changed files with 1202 additions and 342 deletions
@ -4,14 +4,14 @@ |
|||||
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
||||
<!-- Breadcrumb --> |
<!-- Breadcrumb --> |
||||
<div id="ViewBreadcrumb" class="mb-8"> |
<div id="ViewBreadcrumb" class="mb-8"> |
||||
<h1 class="text-lg text-center font-light relative px-7"> |
<h1 class="text-2xl text-center font-semibold relative px-7"> |
||||
<!-- Back --> |
<!-- Back --> |
||||
<router-link |
<router-link |
||||
:to="{ name: 'home' }" |
:to="{ name: 'home' }" |
||||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
||||
><font-awesome icon="chevron-left" class="fa-fw"></font-awesome> |
><font-awesome icon="chevron-left" class="fa-fw"></font-awesome> |
||||
</router-link> |
</router-link> |
||||
Given by... |
{{ stepType === "giver" ? "Given by..." : "Given to..." }} |
||||
</h1> |
</h1> |
||||
</div> |
</div> |
||||
|
|
||||
@ -19,19 +19,18 @@ |
|||||
<ul class="border-t border-slate-300"> |
<ul class="border-t border-slate-300"> |
||||
<li class="border-b border-slate-300 py-3"> |
<li class="border-b border-slate-300 py-3"> |
||||
<h2 class="text-base flex gap-4 items-center"> |
<h2 class="text-base flex gap-4 items-center"> |
||||
<span class="grow"> |
<span class="grow flex gap-2 items-center font-medium"> |
||||
<img |
<font-awesome |
||||
src="../assets/blank-square.svg" |
icon="circle-question" |
||||
width="32" |
class="text-slate-400 text-4xl" |
||||
class="inline-block align-middle border border-slate-300 rounded-md mr-1" |
|
||||
/> |
/> |
||||
Unnamed/Unknown |
<span class="italic text-slate-400">(Unnamed/Unknown)</span> |
||||
</span> |
</span> |
||||
<span class="text-right"> |
<span class="text-right"> |
||||
<button |
<button |
||||
type="button" |
type="button" |
||||
class="block w-full text-center text-sm 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-1.5 rounded-md" |
class="block w-full text-center text-sm 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-1.5 rounded-md" |
||||
@click="openDialog()" |
@click="openDialog('Unnamed')" |
||||
> |
> |
||||
<font-awesome icon="gift" class="fa-fw"></font-awesome> |
<font-awesome icon="gift" class="fa-fw"></font-awesome> |
||||
</button> |
</button> |
||||
@ -44,13 +43,14 @@ |
|||||
class="border-b border-slate-300 py-3" |
class="border-b border-slate-300 py-3" |
||||
> |
> |
||||
<h2 class="text-base flex gap-4 items-center"> |
<h2 class="text-base flex gap-4 items-center"> |
||||
<span class="grow font-semibold"> |
<span class="grow flex gap-2 items-center font-medium"> |
||||
<EntityIcon |
<EntityIcon |
||||
:contact="contact" |
:contact="contact" |
||||
:icon-size="32" |
:icon-size="34" |
||||
class="inline-block align-middle border border-slate-300 rounded-md mr-1" |
class="inline-block align-middle border border-slate-300 rounded-full overflow-hidden" |
||||
/> |
/> |
||||
{{ contact.name || "(no name)" }} |
<span v-if="contact.name">{{ contact.name }}</span> |
||||
|
<span v-else class="italic text-slate-400">(No name)</span> |
||||
</span> |
</span> |
||||
<span class="text-right"> |
<span class="text-right"> |
||||
<button |
<button |
||||
@ -65,7 +65,13 @@ |
|||||
</li> |
</li> |
||||
</ul> |
</ul> |
||||
|
|
||||
<GiftedDialog ref="customDialog" :to-project-id="projectId" /> |
<GiftedDialog |
||||
|
ref="customDialog" |
||||
|
:from-project-id="fromProjectId" |
||||
|
:to-project-id="toProjectId" |
||||
|
:show-projects="showProjects" |
||||
|
:is-from-project-view="isFromProjectView" |
||||
|
/> |
||||
</section> |
</section> |
||||
</template> |
</template> |
||||
|
|
||||
@ -97,6 +103,24 @@ export default class ContactGiftingView extends Vue { |
|||||
description = ""; |
description = ""; |
||||
projectId = ""; |
projectId = ""; |
||||
prompt = ""; |
prompt = ""; |
||||
|
recipientProjectName = ""; |
||||
|
recipientProjectImage = ""; |
||||
|
recipientProjectHandleId = ""; |
||||
|
|
||||
|
// New context parameters |
||||
|
stepType = "giver"; |
||||
|
giverEntityType = "person" as "person" | "project"; |
||||
|
recipientEntityType = "person" as "person" | "project"; |
||||
|
giverProjectId = ""; |
||||
|
giverProjectName = ""; |
||||
|
giverProjectImage = ""; |
||||
|
giverProjectHandleId = ""; |
||||
|
giverDid = ""; |
||||
|
recipientDid = ""; |
||||
|
fromProjectId = ""; |
||||
|
toProjectId = ""; |
||||
|
showProjects = false; |
||||
|
isFromProjectView = false; |
||||
|
|
||||
async created() { |
async created() { |
||||
try { |
try { |
||||
@ -124,9 +148,41 @@ export default class ContactGiftingView extends Vue { |
|||||
); |
); |
||||
} |
} |
||||
|
|
||||
this.projectId = (this.$route.query["projectId"] 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; |
this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt; |
||||
|
|
||||
|
// Read new context parameters |
||||
|
this.stepType = (this.$route.query["stepType"] as string) || "giver"; |
||||
|
this.giverEntityType = |
||||
|
(this.$route.query["giverEntityType"] as "person" | "project") || |
||||
|
"person"; |
||||
|
this.recipientEntityType = |
||||
|
(this.$route.query["recipientEntityType"] as "person" | "project") || |
||||
|
"person"; |
||||
|
this.giverProjectId = |
||||
|
(this.$route.query["giverProjectId"] as string) || ""; |
||||
|
this.giverProjectName = |
||||
|
(this.$route.query["giverProjectName"] as string) || ""; |
||||
|
this.giverProjectImage = |
||||
|
(this.$route.query["giverProjectImage"] as string) || ""; |
||||
|
this.giverProjectHandleId = |
||||
|
(this.$route.query["giverProjectHandleId"] as string) || ""; |
||||
|
this.giverDid = (this.$route.query["giverDid"] as string) || ""; |
||||
|
this.recipientDid = (this.$route.query["recipientDid"] as string) || ""; |
||||
|
this.fromProjectId = (this.$route.query["fromProjectId"] as string) || ""; |
||||
|
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"; |
||||
|
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
} catch (err: any) { |
} catch (err: any) { |
||||
logger.error("Error retrieving settings & contacts:", err); |
logger.error("Error retrieving settings & contacts:", err); |
||||
@ -144,17 +200,108 @@ export default class ContactGiftingView extends Vue { |
|||||
} |
} |
||||
} |
} |
||||
|
|
||||
openDialog(giver?: GiverReceiverInputInfo) { |
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") { |
||||
const recipient = this.projectId |
if (contact === "Unnamed") { |
||||
? undefined |
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected |
||||
: { did: this.activeDid, name: "you" }; |
let recipient: GiverReceiverInputInfo; |
||||
|
let giver: GiverReceiverInputInfo | undefined; |
||||
|
|
||||
|
if (this.stepType === "giver") { |
||||
|
// We're selecting a giver, so recipient is either a project or the current user |
||||
|
if (this.recipientEntityType === "project") { |
||||
|
recipient = { |
||||
|
did: this.recipientProjectHandleId, |
||||
trentlarson
commented 2 days ago
Review
A DID can only be a person's DID, not a project handleId. |
|||||
|
name: this.recipientProjectName, |
||||
|
image: this.recipientProjectImage, |
||||
|
handleId: this.recipientProjectHandleId, |
||||
|
}; |
||||
|
} else { |
||||
|
recipient = { did: this.activeDid, name: "You" }; |
||||
|
} |
||||
|
giver = undefined; // Will be set to "Unnamed" in GiftedDialog |
||||
|
} else { |
||||
|
// We're selecting a recipient, so recipient is "Unnamed" and giver is preserved from context |
||||
|
recipient = { did: "", name: "Unnamed" }; |
||||
|
|
||||
|
// Preserve the existing giver from the context |
||||
|
if (this.giverEntityType === "project") { |
||||
|
giver = { |
||||
|
// no did, because it's a project |
||||
|
name: this.giverProjectName, |
||||
|
image: this.giverProjectImage, |
||||
|
handleId: this.giverProjectHandleId, |
||||
|
}; |
||||
|
} else if (this.giverDid) { |
||||
|
giver = { |
||||
|
did: this.giverDid, |
||||
|
name: this.giverProjectName || "Someone", |
||||
|
}; |
||||
|
} else { |
||||
|
giver = { did: this.activeDid, name: "You" }; |
||||
|
} |
||||
|
} |
||||
|
|
||||
(this.$refs.customDialog as GiftedDialog).open( |
(this.$refs.customDialog as GiftedDialog).open( |
||||
giver, |
giver, |
||||
recipient, |
recipient, |
||||
undefined, |
undefined, |
||||
"Given by " + (giver?.name || "someone not named"), |
this.stepType === "giver" ? "Given by Unnamed" : "Given to Unnamed", |
||||
this.prompt, |
this.prompt, |
||||
); |
); |
||||
|
// Immediately select "Unnamed" and move to Step 2 |
||||
|
(this.$refs.customDialog as GiftedDialog).selectGiver(); |
||||
|
} else { |
||||
|
// Regular case: contact is a GiverReceiverInputInfo |
||||
|
let giver: GiverReceiverInputInfo; |
||||
|
let recipient: GiverReceiverInputInfo; |
||||
|
|
||||
|
if (this.stepType === "giver") { |
||||
|
// We're selecting a giver, so the contact becomes the giver |
||||
|
giver = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined |
||||
|
|
||||
|
// Recipient is either a project or the current user |
||||
|
if (this.recipientEntityType === "project") { |
||||
|
recipient = { |
||||
|
did: this.recipientProjectHandleId, |
||||
|
name: this.recipientProjectName, |
||||
|
image: this.recipientProjectImage, |
||||
|
handleId: this.recipientProjectHandleId, |
||||
|
}; |
||||
|
} else { |
||||
|
recipient = { did: this.activeDid, name: "You" }; |
||||
|
} |
||||
|
} else { |
||||
|
// We're selecting a recipient, so the contact becomes the recipient |
||||
|
recipient = contact as GiverReceiverInputInfo; // Safe because we know contact is not "Unnamed" or undefined |
||||
|
|
||||
|
// Preserve the existing giver from the context |
||||
|
if (this.giverEntityType === "project") { |
||||
|
giver = { |
||||
|
did: this.giverProjectHandleId, |
||||
|
name: this.giverProjectName, |
||||
|
image: this.giverProjectImage, |
||||
|
handleId: this.giverProjectHandleId, |
||||
|
}; |
||||
|
} else if (this.giverDid) { |
||||
|
giver = { |
||||
|
did: this.giverDid, |
||||
|
name: this.giverProjectName || "Someone", |
||||
|
}; |
||||
|
} else { |
||||
|
giver = { did: this.activeDid, name: "You" }; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
(this.$refs.customDialog as GiftedDialog).open( |
||||
|
giver, |
||||
|
recipient, |
||||
|
undefined, |
||||
|
this.stepType === "giver" |
||||
|
? "Given by " + (contact?.name || "someone not named") |
||||
|
: "Given to " + (contact?.name || "someone not named"), |
||||
|
this.prompt, |
||||
|
); |
||||
|
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|||||
Loading…
Reference in new issue
A DID is only for a user, so it can never be a project handle.