|
|
|
@ -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> |
|
|
|
|
|
|
|
@ -96,6 +102,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 { |
|
|
|
@ -111,9 +135,41 @@ export default class ContactGiftingView extends Vue { |
|
|
|
dbAllContacts, |
|
|
|
) as unknown as Contact[]; |
|
|
|
|
|
|
|
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); |
|
|
|
@ -131,17 +187,108 @@ export default class ContactGiftingView extends Vue { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
openDialog(giver?: GiverReceiverInputInfo) { |
|
|
|
const recipient = this.projectId |
|
|
|
? undefined |
|
|
|
: { did: this.activeDid, name: "you" }; |
|
|
|
(this.$refs.customDialog as GiftedDialog).open( |
|
|
|
giver, |
|
|
|
recipient, |
|
|
|
undefined, |
|
|
|
"Given by " + (giver?.name || "someone not named"), |
|
|
|
this.prompt, |
|
|
|
); |
|
|
|
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, |
|
|
|
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, |
|
|
|
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> |
|
|
|
|
Matthew Raymer
3 weeks ago