You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
315 lines
8.9 KiB
315 lines
8.9 KiB
<template>
|
|
<QuickNav selected="Discover" />
|
|
<TopMessage />
|
|
|
|
<!-- CONTENT -->
|
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
|
|
<!-- Breadcrumb -->
|
|
<div id="ViewBreadcrumb" class="mb-8">
|
|
<h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
|
|
<!-- Back -->
|
|
<button
|
|
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
|
|
@click="$router.back()"
|
|
>
|
|
<font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
|
|
</button>
|
|
Individual Profile
|
|
</h1>
|
|
<div class="text-sm text-center text-slate-500"></div>
|
|
</div>
|
|
|
|
<!-- Loading Animation -->
|
|
<div
|
|
v-if="isLoading"
|
|
class="fixed left-6 mt-16 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
|
|
>
|
|
<font-awesome icon="spinner" class="fa-spin-pulse"></font-awesome>
|
|
</div>
|
|
|
|
<div v-else-if="profile">
|
|
<!-- Profile Info -->
|
|
<div class="mt-8">
|
|
<div class="text-sm">
|
|
<font-awesome icon="user" class="fa-fw text-slate-400"></font-awesome>
|
|
{{ profileDisplayName }}
|
|
<button title="Copy Link to Profile" @click="onCopyLinkClick()">
|
|
<font-awesome
|
|
icon="link"
|
|
class="text-sm text-slate-500 ml-2 mb-1"
|
|
/>
|
|
</button>
|
|
</div>
|
|
<p v-if="profile.description" class="mt-4 text-slate-600">
|
|
{{ profile.description }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Map for first coordinates -->
|
|
<div v-if="hasFirstLocation" class="mt-4">
|
|
<h2 class="text-lg font-semibold">Location</h2>
|
|
<div class="h-96 mt-2 w-full">
|
|
<l-map ref="profileMap" :center="firstLocationCoords" :zoom="mapZoom">
|
|
<l-tile-layer
|
|
:url="tileLayerUrl"
|
|
layer-type="base"
|
|
name="OpenStreetMap"
|
|
/>
|
|
<l-marker :lat-lng="firstLocationCoords">
|
|
<l-popup>{{ profileDisplayName }}</l-popup>
|
|
</l-marker>
|
|
</l-map>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map for second coordinates -->
|
|
<div v-if="hasSecondLocation" class="mt-4">
|
|
<h2 class="text-lg font-semibold">Second Location</h2>
|
|
<div class="h-96 mt-2 w-full">
|
|
<l-map
|
|
ref="profileMap"
|
|
:center="secondLocationCoords"
|
|
:zoom="mapZoom"
|
|
>
|
|
<l-tile-layer
|
|
:url="tileLayerUrl"
|
|
layer-type="base"
|
|
name="OpenStreetMap"
|
|
/>
|
|
<l-marker :lat-lng="secondLocationCoords">
|
|
<l-popup>{{ profileDisplayName }}</l-popup>
|
|
</l-marker>
|
|
</l-map>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center mt-8">
|
|
<p class="text-lg text-slate-500">Profile not found.</p>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import "leaflet/dist/leaflet.css";
|
|
import { Component, Vue } from "vue-facing-decorator";
|
|
import { LMap, LTileLayer, LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
|
|
import { Router, RouteLocationNormalizedLoaded } from "vue-router";
|
|
|
|
import QuickNav from "../components/QuickNav.vue";
|
|
import TopMessage from "../components/TopMessage.vue";
|
|
import {
|
|
APP_SERVER,
|
|
DEFAULT_PARTNER_API_SERVER,
|
|
NotificationIface,
|
|
} from "../constants/app";
|
|
import { Contact } from "../db/tables/contacts";
|
|
import { didInfo, getHeaders } from "../libs/endorserServer";
|
|
import { UserProfile } from "../libs/partnerServer";
|
|
import { retrieveAccountDids } from "../libs/util";
|
|
import { logger } from "../utils/logger";
|
|
import { useClipboard } from "@vueuse/core";
|
|
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
|
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
|
import { NOTIFY_PROFILE_LOAD_ERROR } from "@/constants/notifications";
|
|
|
|
/**
|
|
* User Profile View Component
|
|
*
|
|
* Displays individual user profile information including:
|
|
* - Basic profile data and description
|
|
* - Location information with interactive maps
|
|
* - Profile link sharing functionality
|
|
*
|
|
* Features:
|
|
* - Profile data loading from partner API
|
|
* - Interactive maps for location visualization
|
|
* - Copy-to-clipboard functionality for profile links
|
|
* - Responsive design with loading states
|
|
*
|
|
* @author Matthew Raymer
|
|
*/
|
|
@Component({
|
|
components: {
|
|
LMap,
|
|
LMarker,
|
|
LPopup,
|
|
LTileLayer,
|
|
QuickNav,
|
|
TopMessage,
|
|
},
|
|
mixins: [PlatformServiceMixin],
|
|
})
|
|
export default class UserProfileView extends Vue {
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
|
$router!: Router;
|
|
$route!: RouteLocationNormalizedLoaded;
|
|
|
|
notify!: ReturnType<typeof createNotifyHelpers>;
|
|
|
|
activeDid = "";
|
|
allContacts: Array<Contact> = [];
|
|
allMyDids: Array<string> = [];
|
|
isLoading = true;
|
|
partnerApiServer = DEFAULT_PARTNER_API_SERVER;
|
|
profile: UserProfile | null = null;
|
|
|
|
// make this function available to the Vue template
|
|
didInfo = didInfo;
|
|
|
|
/**
|
|
* Initializes notification helpers
|
|
*/
|
|
created() {
|
|
this.notify = createNotifyHelpers(this.$notify);
|
|
}
|
|
|
|
/**
|
|
* Component initialization
|
|
*
|
|
* Loads account settings, contacts, and profile data
|
|
* Uses PlatformServiceMixin for database operations
|
|
*/
|
|
async mounted() {
|
|
await this.initializeSettings();
|
|
await this.loadContacts();
|
|
await this.loadProfile();
|
|
}
|
|
|
|
/**
|
|
* Initializes account settings from database
|
|
*/
|
|
private async initializeSettings() {
|
|
const settings = await this.$accountSettings();
|
|
this.activeDid = settings.activeDid || "";
|
|
this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
|
|
}
|
|
|
|
/**
|
|
* Loads all contacts from database
|
|
*/
|
|
private async loadContacts() {
|
|
this.allContacts = await this.$getAllContacts();
|
|
this.allMyDids = await retrieveAccountDids();
|
|
}
|
|
|
|
/**
|
|
* Loads user profile data from partner API
|
|
*
|
|
* Handles profile loading with error handling and loading states
|
|
*/
|
|
async loadProfile() {
|
|
const profileId: string = this.$route.params.id as string;
|
|
if (!profileId) {
|
|
this.isLoading = false;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`${this.partnerApiServer}/api/partner/userProfile/${encodeURIComponent(profileId)}`,
|
|
{
|
|
method: "GET",
|
|
headers: await getHeaders(this.activeDid),
|
|
},
|
|
);
|
|
|
|
if (response.status === 200) {
|
|
const result = await response.json();
|
|
this.profile = result.data;
|
|
if (this.profile && this.profile.rowId !== profileId) {
|
|
// currently the server returns "rowid" with lowercase "i"; remove when that's fixed
|
|
this.profile.rowId = profileId;
|
|
}
|
|
} else {
|
|
throw new Error("Failed to load profile");
|
|
}
|
|
} catch (error) {
|
|
logger.error("Error loading profile:", error);
|
|
this.notify.error(NOTIFY_PROFILE_LOAD_ERROR.message, TIMEOUTS.LONG);
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Copies profile link to clipboard
|
|
*
|
|
* Creates a deep link to the profile and copies it to the clipboard
|
|
* Shows success notification when completed
|
|
*/
|
|
onCopyLinkClick() {
|
|
const deepLink = `${APP_SERVER}/deep-link/user-profile/${this.profile?.rowId}`;
|
|
useClipboard()
|
|
.copy(deepLink)
|
|
.then(() => {
|
|
this.notify.copied("profile link", TIMEOUTS.STANDARD);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Computed properties for template logic streamlining
|
|
*/
|
|
|
|
/**
|
|
* Gets the display name for the profile using didInfo utility
|
|
* @returns Formatted display name for the profile owner
|
|
*/
|
|
get profileDisplayName() {
|
|
return this.didInfo(
|
|
this.profile?.issuerDid,
|
|
this.activeDid,
|
|
this.allMyDids,
|
|
this.allContacts,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Checks if the profile has first location coordinates
|
|
* @returns True if both latitude and longitude are available
|
|
*/
|
|
get hasFirstLocation() {
|
|
return this.profile?.locLat && this.profile?.locLon;
|
|
}
|
|
|
|
/**
|
|
* Gets the coordinate array for the first location
|
|
* @returns Array of [latitude, longitude] for map center
|
|
*/
|
|
get firstLocationCoords() {
|
|
return [this.profile?.locLat, this.profile?.locLon];
|
|
}
|
|
|
|
/**
|
|
* Checks if the profile has second location coordinates
|
|
* @returns True if both latitude and longitude are available
|
|
*/
|
|
get hasSecondLocation() {
|
|
return this.profile?.locLat2 && this.profile?.locLon2;
|
|
}
|
|
|
|
/**
|
|
* Gets the coordinate array for the second location
|
|
* @returns Array of [latitude, longitude] for map center
|
|
*/
|
|
get secondLocationCoords() {
|
|
return [this.profile?.locLat2, this.profile?.locLon2];
|
|
}
|
|
|
|
/**
|
|
* Standard map zoom level for profile location maps
|
|
* @returns Default zoom level for location display
|
|
*/
|
|
get mapZoom() {
|
|
return 12;
|
|
}
|
|
|
|
/**
|
|
* OpenStreetMap tile layer URL template
|
|
* @returns URL template for map tile fetching
|
|
*/
|
|
get tileLayerUrl() {
|
|
return "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
|
}
|
|
}
|
|
</script>
|
|
|