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"> |
|||
<!-- Breadcrumb --> |
|||
<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 --> |
|||
<router-link |
|||
:to="{ name: 'home' }" |
|||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
|||
><font-awesome icon="chevron-left" class="fa-fw"></font-awesome> |
|||
</router-link> |
|||
Given by... |
|||
{{ stepType === "giver" ? "Given by..." : "Given to..." }} |
|||
</h1> |
|||
</div> |
|||
|
|||
@ -19,19 +19,18 @@ |
|||
<ul class="border-t border-slate-300"> |
|||
<li class="border-b border-slate-300 py-3"> |
|||
<h2 class="text-base flex gap-4 items-center"> |
|||
<span class="grow"> |
|||
<img |
|||
src="../assets/blank-square.svg" |
|||
width="32" |
|||
class="inline-block align-middle border border-slate-300 rounded-md mr-1" |
|||
<span class="grow flex gap-2 items-center font-medium"> |
|||
<font-awesome |
|||
icon="circle-question" |
|||
class="text-slate-400 text-4xl" |
|||
/> |
|||
Unnamed/Unknown |
|||
<span class="italic text-slate-400">(Unnamed/Unknown)</span> |
|||
</span> |
|||
<span class="text-right"> |
|||
<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" |
|||
@click="openDialog()" |
|||
@click="openDialog('Unnamed')" |
|||
> |
|||
<font-awesome icon="gift" class="fa-fw"></font-awesome> |
|||
</button> |
|||
@ -44,13 +43,14 @@ |
|||
class="border-b border-slate-300 py-3" |
|||
> |
|||
<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 |
|||
:contact="contact" |
|||
:icon-size="32" |
|||
class="inline-block align-middle border border-slate-300 rounded-md mr-1" |
|||
:icon-size="34" |
|||
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 class="text-right"> |
|||
<button |
|||
@ -65,7 +65,13 @@ |
|||
</li> |
|||
</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> |
|||
</template> |
|||
|
|||
@ -97,6 +103,24 @@ export default class ContactGiftingView extends Vue { |
|||
description = ""; |
|||
projectId = ""; |
|||
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() { |
|||
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; |
|||
|
|||
// 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 |
|||
} catch (err: any) { |
|||
logger.error("Error retrieving settings & contacts:", err); |
|||
@ -144,17 +200,108 @@ export default class ContactGiftingView extends Vue { |
|||
} |
|||
} |
|||
|
|||
openDialog(giver?: GiverReceiverInputInfo) { |
|||
const recipient = this.projectId |
|||
? undefined |
|||
: { did: this.activeDid, name: "you" }; |
|||
openDialog(contact?: GiverReceiverInputInfo | "Unnamed") { |
|||
if (contact === "Unnamed") { |
|||
// Special case: Pass undefined to trigger Step 1, but with "Unnamed" pre-selected |
|||
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( |
|||
giver, |
|||
recipient, |
|||
undefined, |
|||
"Given by " + (giver?.name || "someone not named"), |
|||
this.stepType === "giver" ? "Given by Unnamed" : "Given to Unnamed", |
|||
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> |
|||
|
|||
Loading…
Reference in new issue
A DID is only for a user, so it can never be a project handle.