add page for user profile view and update endpoints; rename any "rowid" to "rowId"

src/views/UserProfileView.vue

@@ -0,0 +1,151 @@
+<template>
+  <QuickNav selected="Discover" />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+      Individual Profile
+    </h1>
+
+    <!-- Loading Animation -->
+    <div
+      class="fixed left-6 mt-16 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
+      v-if="isLoading"
+    >
+      <fa icon="spinner" class="fa-spin-pulse"></fa>
+    </div>
+
+    <div v-else-if="profile">
+      <!-- Profile Info -->
+      <div class="mt-8">
+        <div class="text-sm">
+          <fa icon="user" class="fa-fw text-slate-400"></fa>
+          {{ didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) }}
+        </div>
+        <p v-if="profile.description" class="mt-4 text-slate-600">
+          {{ profile.description }}
+        </p>
+      </div>
+
+      <!-- Map -->
+      <div v-if="profile?.locLat && profile?.locLon" class="mt-4">
+        <h2 class="text-lg font-semibold">Location</h2>
+        <div class="h-96 mt-2 w-full">
+          <l-map
+            ref="profileMap"
+            :center="[profile.locLat, profile.locLon]"
+            :zoom="12"
+          >
+            <l-tile-layer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              layer-type="base"
+              name="OpenStreetMap"
+            />
+            <l-marker :lat-lng="[profile.locLat, profile.locLon]">
+              <l-popup>{{
+                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
+              }}</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 { DEFAULT_PARTNER_API_SERVER, NotificationIface } from "@/constants/app";
+import { db } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import { didInfo, getHeaders } from "@/libs/endorserServer";
+import { UserProfile } from "@/libs/partnerServer";
+import { retrieveAccountDids } from "@/libs/util";
+
+@Component({
+  components: {
+    LMap,
+    LMarker,
+    LPopup,
+    LTileLayer,
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class UserProfileView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $router!: Router;
+  $route!: RouteLocationNormalizedLoaded;
+
+  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;
+
+  async mounted() {
+    const settings = await db.settings.toArray();
+    this.activeDid = settings[0]?.activeDid || "";
+    this.partnerApiServer =
+      settings[0]?.partnerApiServer || this.partnerApiServer;
+
+    this.allContacts = await db.contacts.toArray();
+    this.allMyDids = await retrieveAccountDids();
+
+    await this.loadProfile();
+  }
+
+  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;
+      } else {
+        throw new Error("Failed to load profile");
+      }
+    } catch (error) {
+      console.error("Error loading profile:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was a problem loading the profile.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}
+</script>