Merge changes

src/views/ProjectViewView.vue

@@ -6,27 +6,29 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Back -->
-        <button
-          @click="$router.go(-1)"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-        >
-          <fa icon="chevron-left" class="fa-fw"></fa>
-        </button>
-        Project Idea
-      </h1>
-      <h2 class="text-xl font-semibold">
-        {{ name }}
-        <button
-          v-if="activeDid === issuer || activeDid === agentDid"
-          @click="onEditClick()"
-          title="Edit"
-          data-testId="editClaimButton"
-        >
-          <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-        </button>
-      </h2>
+      <div>
+        <h1 class="text-center text-lg font-light relative px-7">
+          <!-- Back -->
+          <button
+            @click="$router.go(-1)"
+            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+          >
+            <fa icon="chevron-left" class="fa-fw"></fa>
+          </button>
+          Project Idea
+        </h1>
+        <h2 class="text-center text-xl font-semibold">
+          {{ name }}
+          <button
+            v-if="activeDid === issuer || activeDid === agentDid"
+            @click="onEditClick()"
+            title="Edit"
+            data-testId="editClaimButton"
+          >
+            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+          </button>
+        </h2>
+      </div>
     </div>
 
     <!-- Project Details -->
@@ -47,22 +49,22 @@
             <div class="text-sm mb-3">
               <div class="truncate">
                 <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{
-                  serverUtil.didInfo(issuer, activeDid, allMyDids, allContacts)
-                }}
+                {{ issuerInfoObject?.displayName }}
                 <span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
-                  <button
-                    @click="
-                      libsUtil.doCopyTwoSecRedo(
-                        issuer,
-                        () => (showDidCopy = !showDidCopy),
-                      )
-                    "
-                    class="ml-2 mr-2"
+                  <a
+                    :href="`/did/${issuer}`"
+                    target="_blank"
+                    class="text-blue-500"
                   >
-                    <fa icon="copy" class="text-slate-400 fa-fw"></fa>
-                  </button>
-                  <span v-show="showDidCopy">Copied DID</span>
+                    <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  </a>
+                </span>
+                <span v-else-if="serverUtil.isHiddenDid(issuer)">
+                  <fa
+                    icon="info-circle"
+                    class="fa-fw text-blue-500 cursor-pointer"
+                    @click="openHiddenDidDialog()"
+                  />
                 </span>
               </div>
               <div v-if="startTime">
@@ -74,14 +76,21 @@
                 <a
                   :href="getOpenStreetMapUrl()"
                   target="_blank"
-                  class="underline"
+                  class="underline text-blue-500"
                   >Map View
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <fa
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw text-blue-500"
+                  />
                 </a>
               </div>
               <div v-if="url">
                 <fa icon="globe" class="fa-fw text-slate-400"></fa>
-                <a :href="addScheme(url)" target="_blank" class="underline">
+                <a
+                  :href="addScheme(url)"
+                  target="_blank"
+                  class="underline text-blue-500"
+                >
                   {{ domainForWebsite(this.url) }}
                   <fa icon="arrow-up-right-from-square" class="fa-fw" />
                 </a>
@@ -475,6 +484,8 @@
       </div>
     </div>
   </section>
+
+  <HiddenDidDialog ref="hiddenDidDialog" />
 </template>
 
 <script lang="ts">
@@ -506,11 +517,13 @@ import {
 } from "../libs/endorserServer";
 import * as serverUtil from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
+import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 
 @Component({
   components: {
     EntityIcon,
     GiftedDialog,
+    HiddenDidDialog,
     OfferDialog,
     ProjectIcon,
     QuickNav,
@@ -522,6 +535,7 @@ export default class ProjectViewView extends Vue {
 
   activeDid = "";
   agentDid = "";
+  agentDidVisibleToDids: Array<string> = [];
   allMyDids: Array<string> = [];
   allContacts: Array<Contact> = [];
   apiServer = "";
@@ -538,6 +552,12 @@ export default class ProjectViewView extends Vue {
   imageUrl = "";
   isRegistered = false;
   issuer = "";
+  issuerInfoObject: {
+    known: boolean;
+    displayName: string;
+    profileImageUrl?: string;
+  } | null = null;
+  issuerVisibleToDids: Array<string> = [];
   latitude = 0;
   longitude = 0;
   name = "";
@@ -545,7 +565,6 @@ export default class ProjectViewView extends Vue {
   offersHitLimit = false;
   projectId = ""; // handle ID
   recentlyCheckedAndUnconfirmableJwts: string[] = [];
-  showDidCopy = false;
   startTime = "";
   truncatedDesc = "";
   truncateLength = 40;
@@ -623,8 +642,17 @@ export default class ProjectViewView extends Vue {
             startDateTime.toLocaleTimeString();
         }
         this.agentDid = resp.data.claim?.agent?.identifier;
+        this.agentDidVisibleToDids =
+          resp.data.claim?.agent?.identifierVisibleToDids || [];
         this.imageUrl = resp.data.claim?.image;
         this.issuer = resp.data.issuer;
+        this.issuerInfoObject = serverUtil.didInfoObject(
+          this.issuer,
+          this.activeDid,
+          this.allMyDids,
+          this.allContacts,
+        );
+        this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
         this.name = resp.data.claim?.name || "(no name)";
         this.description = resp.data.claim?.description || "(no description)";
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
@@ -1156,5 +1184,15 @@ export default class ProjectViewView extends Vue {
       );
     }
   }
+
+  openHiddenDidDialog() {
+    (this.$refs.hiddenDidDialog as HiddenDidDialog).open(
+      "creator",
+      this.issuerVisibleToDids,
+      this.allContacts,
+      this.activeDid,
+      this.allMyDids,
+    );
+  }
 }
 </script>