add instructions to connect to any profile #224
@@ -57,8 +57,8 @@
|
||||
<!-- Nearest Neighbors Section -->
|
||||
<div
|
||||
v-if="
|
||||
profile.issuerDid !== activeDid &&
|
||||
profile.issuerDid !== neighbors?.[0]?.did
|
||||
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)
|
||||
"
|
||||
class="mt-6"
|
||||
>
|
||||
@@ -85,62 +85,52 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
v-if="neighbors"
|
||||
class="mb-4 bg-blue-50 border border-blue-200 rounded-lg p-4"
|
||||
>
|
||||
<p class="text-sm text-slate-700 mb-3">
|
||||
The following
|
||||
{{ neighbors.length === 1 ? "user is" : "users are" }}
|
||||
closer to the person who owns this profile.
|
||||
</p>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-start gap-3">
|
||||
<span
|
||||
class="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs font-semibold"
|
||||
>1</span
|
||||
>
|
||||
<p class="text-slate-700 pt-0.5">
|
||||
<a
|
||||
class="text-blue-600 hover:text-blue-800 font-medium underline cursor-pointer"
|
||||
@click="onCopyLinkClick()"
|
||||
>
|
||||
Click to copy this profile reference
|
||||
</a>
|
||||
to your clipboard
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<span
|
||||
class="flex-shrink-0 w-6 h-6 flex items-center justify-center bg-blue-600 text-white rounded-full text-xs font-semibold"
|
||||
>2</span
|
||||
>
|
||||
<p class="text-slate-700 pt-0.5">
|
||||
Contact a user listed below and share the reference to request
|
||||
an introduction
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="neighbor in neighbors"
|
||||
:key="neighbor.did"
|
||||
class="flex items-center justify-between gap-3 bg-slate-50 border border-slate-300 rounded-md p-3"
|
||||
class="bg-slate-50 border border-slate-300 rounded-md"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'did', params: { did: neighbor.did } }"
|
||||
class="flex-1 min-w-0"
|
||||
<div class="flex items-center justify-between gap-3 p-3">
|
||||
<div class="flex items-center gap-2 flex-1 min-w-0">
|
||||
<button
|
||||
title="Copy profile link and expand"
|
||||
class="text-blue-600 flex-shrink-0"
|
||||
@click="onNeighborExpandClick(neighbor.did)"
|
||||
>
|
||||
<font-awesome
|
||||
:icon="
|
||||
expandedNeighborDid === neighbor.did
|
||||
? 'chevron-down'
|
||||
: 'chevron-right'
|
||||
"
|
||||
class="text-sm"
|
||||
/>
|
||||
{{ getNeighborDisplayName(neighbor.did) }}
|
||||
</button>
|
||||
<span :class="getRelationBadgeClass(neighbor.relation)">
|
||||
{{ getRelationLabel(neighbor.relation) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="expandedNeighborDid === neighbor.did"
|
||||
class="border-t border-slate-300 p-3 bg-white"
|
||||
>
|
||||
<p class="font-medium truncate text-blue-600">
|
||||
{{ getNeighborDisplayName(neighbor.did) }}
|
||||
</p>
|
||||
<router-link
|
||||
:to="{ name: 'did', params: { did: neighbor.did } }"
|
||||
class="text-blue-600 hover:text-blue-800 font-medium underline"
|
||||
>
|
||||
Go to contact info
|
||||
</router-link>
|
||||
and send them the link in your clipboard and ask for an
|
||||
introduction to this person.
|
||||
<div
|
||||
v-if="
|
||||
getNeighborDisplayName(neighbor.did) === '' ||
|
||||
neighborIsNotInContacts(neighbor.did)
|
||||
"
|
||||
class="flex flex-col gap-1 mt-1"
|
||||
class="flex flex-col gap-1 mt-2"
|
||||
>
|
||||
<p class="text-xs text-slate-600">
|
||||
This person is connected to you, but they are not in this
|
||||
@@ -160,10 +150,7 @@
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
<span :class="getRelationBadgeClass(neighbor.relation)">
|
||||
{{ getRelationLabel(neighbor.relation) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -274,12 +261,13 @@ export default class UserProfileView extends Vue {
|
||||
activeDid = "";
|
||||
allContacts: Array<Contact> = [];
|
||||
allMyDids: Array<string> = [];
|
||||
expandedNeighborDid: string | null = null;
|
||||
isLoading = true;
|
||||
loadingNeighbors = false;
|
||||
neighbors: Array<{ did: string; relation: string }> = [];
|
||||
neighborsError = "";
|
||||
partnerApiServer = DEFAULT_PARTNER_API_SERVER;
|
||||
profile: UserProfile | null = null;
|
||||
neighbors: Array<{ did: string; relation: string }> = [];
|
||||
|
||||
// make this function available to the Vue template
|
||||
didInfo = didInfo;
|
||||
@@ -431,6 +419,31 @@ export default class UserProfileView extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles clicking the expand button next to a neighbor's name
|
||||
* Copies the profile link to clipboard and toggles the expanded section
|
||||
*/
|
||||
async onNeighborExpandClick(did: string) {
|
||||
if (this.expandedNeighborDid === did) {
|
||||
this.expandedNeighborDid = null;
|
||||
// don't copy the link
|
||||
return;
|
||||
}
|
||||
|
||||
// Copy the profile link
|
||||
const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
|
||||
try {
|
||||
await copyToClipboard(deepLink);
|
||||
this.notify.copied("Profile link", TIMEOUTS.STANDARD);
|
||||
} catch (error) {
|
||||
this.$logAndConsole(`Error copying profile link: ${error}`, true);
|
||||
this.notify.error("Failed to copy profile link.");
|
||||
}
|
||||
|
||||
// Toggle the expanded section
|
||||
this.expandedNeighborDid = did;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computed properties for template logic streamlining
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user