Fix JavaScript runtime errors for undefined name property access

- Add null checks to prevent "Cannot read properties of undefined (reading 'name')" errors - Fix ProjectCard, MembersList, ProjectsView, DiscoverView, ProjectViewView components - Add null validation in DIDView.claimDescription() and ClaimReportCertificateView.drawCanvas() - Add missing databaseUtil import in MembersList component - Use meaningful fallback text for undefined names ("Unnamed Project", "Unnamed Member") - Resolves template rendering crashes when entities lack name properties
2025-07-05 05:38:20 +00:00
parent 2b54354b3f
commit 23789d4ecd
8 changed files with 90 additions and 46 deletions
--- a/src/components/InfiniteScroll.vue
+++ b/src/components/InfiniteScroll.vue
@@ -60,17 +60,21 @@ export default class InfiniteScroll extends Vue {
   * Used internally by Vue's lifecycle system
   */
  updated() {
-    if (!this.observer) {
-      const options = {
-        root: null,
-        rootMargin: `0px 0px ${this.distance}px 0px`,
-        threshold: 1.0,
-      };
-      this.observer = new IntersectionObserver(
-        this.handleIntersection,
-        options,
-      );
-      this.observer.observe(this.$refs.sentinel as HTMLElement);
+    if (!this.observer && this.$refs.sentinel) {
+      const sentinelElement = this.$refs.sentinel as HTMLElement;
+      // Ensure we have a valid HTMLElement before observing
+      if (sentinelElement instanceof HTMLElement) {
+        const options = {
+          root: null,
+          rootMargin: `0px 0px ${this.distance}px 0px`,
+          threshold: 1.0,
+        };
+        this.observer = new IntersectionObserver(
+          this.handleIntersection,
+          options,
+        );
+        this.observer.observe(sentinelElement);
+      }
    }
  }

--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -66,7 +66,7 @@
         changes the password 
         -->
        <button
-          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          class="btn-action-refresh"
          title="Refresh members list"
          @click="fetchMembers"
        >
@@ -80,13 +80,15 @@
      >
        <div class="flex items-center justify-between">
          <div class="flex items-center">
-            <h3 class="text-lg font-medium">{{ member.name }}</h3>
+            <h3 class="text-lg font-medium">
+              {{ member.name || "Unnamed Member" }}
+            </h3>
            <div
              v-if="!getContactFor(member.did) && member.did !== activeDid"
              class="flex justify-end"
            >
              <button
-                class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
+                class="btn-add-contact"
                title="Add as contact"
                @click="addAsContact(member)"
              >
@@ -95,7 +97,7 @@
            </div>
            <button
              v-if="member.did !== activeDid"
-              class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+              class="btn-info-contact"
              title="Contact info"
              @click="
                informAboutAddingContact(
@@ -114,7 +116,7 @@
              class="flex items-center"
            >
              <button
-                class="mr-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+                class="btn-admission"
                :title="
                  member.member.admitted ? 'Remove member' : 'Admit member'
                "
@@ -126,7 +128,7 @@
                />
              </button>
              <button
-                class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+                class="btn-info-admission"
                title="Admission info"
                @click="informAboutAdmission()"
              >
@@ -141,7 +143,7 @@
      </div>
      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
        <button
-          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          class="btn-action-refresh"
          title="Refresh members list"
          @click="fetchMembers"
        >
@@ -168,10 +170,10 @@ import {
 } from "../libs/endorserServer";
 import { decryptMessage } from "../libs/crypto";
 import { Contact } from "../db/tables/contacts";
-import * as databaseUtil from "../db/databaseUtil";
 import * as libsUtil from "../libs/util";
 import { NotificationIface } from "../constants/app";
-import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
+import * as databaseUtil from "../db/databaseUtil";

 interface Member {
  admitted: boolean;
@@ -186,7 +188,9 @@ interface DecryptedMember {
  isRegistered: boolean;
 }

-@Component
+@Component({
+  mixins: [PlatformServiceMixin],
+})
 export default class MembersList extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

@@ -353,13 +357,7 @@ export default class MembersList extends Vue {
  }

  async loadContacts() {
-    const platformService = PlatformServiceFactory.getInstance();
-    const result = await platformService.dbQuery("SELECT * FROM contacts");
-    if (result) {
-      this.contacts = databaseUtil.mapQueryResultToValues(
-        result,
-      ) as unknown as Contact[];
-    }
+    this.contacts = await this.$getAllContacts();
  }

  getContactFor(did: string): Contact | undefined {
@@ -443,11 +441,7 @@ export default class MembersList extends Vue {
          if (result.success) {
            decrMember.isRegistered = true;
            if (oldContact) {
-              const platformService = PlatformServiceFactory.getInstance();
-              await platformService.dbExec(
-                "UPDATE contacts SET registered = ? WHERE did = ?",
-                [true, decrMember.did],
-              );
+              await this.$updateContact(decrMember.did, { registered: true });
              oldContact.registered = true;
            }
            this.$notify(
@@ -500,11 +494,7 @@ export default class MembersList extends Vue {
        name: member.name,
      };

-      const platformService = PlatformServiceFactory.getInstance();
-      await platformService.dbExec(
-        "INSERT INTO contacts (did, name) VALUES (?, ?)",
-        [member.did, member.name],
-      );
+      await this.$insertContact(newContact);
      this.contacts.push(newContact);

      this.$notify(
@@ -535,3 +525,36 @@ export default class MembersList extends Vue {
  }
 }
 </script>
+
+<style scoped>
+/* Button Classes */
+.btn-action-refresh {
+  @apply w-8 h-8 flex items-center justify-center rounded-full 
+    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
+    transition-colors;
+}
+
+.btn-add-contact {
+  @apply ml-2 w-8 h-8 flex items-center justify-center rounded-full 
+    bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 
+    transition-colors;
+}
+
+.btn-info-contact {
+  @apply ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+    transition-colors;
+}
+
+.btn-admission {
+  @apply mr-2 w-6 h-6 flex items-center justify-center rounded-full 
+    bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 
+    transition-colors;
+}
+
+.btn-info-admission {
+  @apply mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full 
+    bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 
+    transition-colors;
+}
+</style>
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -15,7 +15,7 @@ issuer information. * * @author Matthew Raymer */
    <h3
      class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
    >
-      {{ project.name }}
+      {{ project.name || "Unnamed Project" }}
    </h3>

    <div class="text-xs text-slate-500 truncate">