From 930aef1e4d5de8cafb1d4ab7c0d22e1cc13807fd Mon Sep 17 00:00:00 2001
From: wadeking98 <wkingnumber2@gmail.com>
Date: Fri, 27 May 2022 13:37:17 -0700
Subject: [PATCH] styling changes to timeline

Signed-off-by: wadeking98 <wkingnumber2@gmail.com>
---
 src/components/entity/EntityResult.vue        | 340 ++++++------------
 .../credentialDetail/CredentialDetail.vue     |   5 +-
 .../entity/filter/EntityFilterChips.vue       |   2 +-
 .../entity/filter/EntityFilterFacetPanels.vue |   4 +-
 4 files changed, 126 insertions(+), 225 deletions(-)

diff --git a/src/components/entity/EntityResult.vue b/src/components/entity/EntityResult.vue
index 760265e..42819da 100644
--- a/src/components/entity/EntityResult.vue
+++ b/src/components/entity/EntityResult.vue
@@ -1,48 +1,26 @@
 <template>
   <div v-if="!loading">
     <BackTo />
-    <EntityHeader
-      :name="entityName"
-      :businessNumber="entityBusinessNumber"
-      :jurisdiction="entityJurisdiction"
-      :state="entityState"
-      class="mb-2"
-    />
+    <EntityHeader :name="entityName" :businessNumber="entityBusinessNumber" :jurisdiction="entityJurisdiction"
+      :state="entityState" class="mb-2" />
     <v-tabs v-model="currentTab" slider-size="5px">
-      <v-tab
-        v-for="(item, i) in tabItems"
-        :key="i"
-        :ripple="false"
-        active-class="tab-active"
-        @click="tabClick(item.refname)"
-        class="text-capitalize"
-        >{{ item.text }}</v-tab
-      >
+      <v-tab v-for="(item, i) in tabItems" :key="i" :ripple="false" active-class="tab-active"
+        @click="tabClick(item.refname)" class="text-capitalize">{{ item.text }}</v-tab>
     </v-tabs>
     <v-divider></v-divider>
     <v-row>
-      <v-col
-        :class="{
-          'pa-0 pt-2 pb-4': true,
-          'text-right': $vuetify.breakpoint.smAndUp,
-        }"
-        ><span
-          class="text-body-2 show-all-statuses vertical-align-middle"
-          @click="toggleCredentialsExpanded"
-          >Show all Credential statuses</span
-        ></v-col
-      >
+      <v-col :class="{
+        'pa-0 pt-2 pb-4': true,
+        'text-right': $vuetify.breakpoint.smAndUp,
+      }"><span class="text-body-2 show-all-statuses vertical-align-middle" @click="toggleCredentialsExpanded">Show
+          all Credential statuses</span></v-col>
     </v-row>
 
     <!-- topic -->
     <EntityCard ref="registration" :expanded="credentialsExpanded">
       <template #expansionPanels>
-        <CredentialItem
-          :authority="entityRegistrationIssuer"
-          :authorityLink="entityRegistrationIssuerUrl"
-          :effectiveDate="entityEffectiveDate"
-          :credId="entityNameCredId"
-        >
+        <CredentialItem :authority="entityRegistrationIssuer" :authorityLink="entityRegistrationIssuerUrl"
+          :effectiveDate="entityEffectiveDate" :credId="entityNameCredId">
           <template #header>
             <div class="text-h6 font-weight-bold">Registration</div>
           </template>
@@ -54,12 +32,11 @@
             <span>{{ entityName }}</span>
             <span>&nbsp;is a&nbsp;</span>
             <Dialog>
-              <template #activator
-                ><span class="fake-link" v-t="entityJurisdiction"></span
-                ><v-icon small class="fake-link mx-1">{{
-                  mdiInformationOutline
-                }}</v-icon></template
-              >
+              <template #activator><span class="fake-link" v-t="entityJurisdiction"></span>
+                <v-icon small class="fake-link mx-1">{{
+                    mdiInformationOutline
+                }}</v-icon>
+              </template>
               <template #content>
                 <div v-html="entityDesc.html"></div>
               </template>
@@ -68,9 +45,9 @@
           <div class="text-body-2">
             <div>
               {{
-                `${entityTypeToRegValue(
-                  $t(entityJurisdiction)
-                )}: ${entityIncorporationNumber} `
+                  `${entityTypeToRegValue(
+                    $t(entityJurisdiction)
+                  )}: ${entityIncorporationNumber} `
               }}
             </div>
             <div>Registered on: {{ entityRegistrationDate | formatDate }}</div>
@@ -83,22 +60,15 @@
     </EntityCard>
 
     <!-- relationships related to -->
-    <EntityCard
-      ref="relationships"
-      :expanded="credentialsExpanded"
-      v-if="businessAsRelationship.length > 0"
-    >
+    <EntityCard ref="relationships" :expanded="credentialsExpanded" v-if="businessAsRelationship.length > 0">
       <template #title>
         <div class="flex">
           <Dialog>
             <template #activator>
-              <span
-                class="fake-link text--primary"
-                style="text-decoration: none"
-              >
+              <span class="fake-link text--primary" style="text-decoration: none">
                 Relationships
                 <v-icon class="icon-dense" dense>{{
-                  mdiInformationOutline
+                    mdiInformationOutline
                 }}</v-icon>
               </span>
             </template>
@@ -119,69 +89,53 @@
         </div>
       </template>
       <template #expansionPanels>
-        <CredentialItem
-          v-for="(_, i) in Math.min(
-            businessAsRelationship.length - relationshipStartIndex,
-            itemsDisplayed
-          )"
-          :key="i"
-          :expired="
-            businessAsRelationship[i + relationshipStartIndex].credential
-              .revoked
-          "
-          :authority="
-            credOrRelationshipToDisplay(
-              businessAsRelationship[i + relationshipStartIndex],
-              credSet
-            ).authority
-          "
-          :authorityLink="
-            credOrRelationshipToDisplay(
-              businessAsRelationship[i + relationshipStartIndex],
-              credSet
-            ).authorityLink
-          "
-          :effectiveDate="
-            businessAsRelationship[i + relationshipStartIndex].credential
-              .effective_date
-          "
-          :credId="
-            businessAsRelationship[i + relationshipStartIndex].credential.id
-          "
-        >
+        <CredentialItem v-for="(_, i) in Math.min(
+          businessAsRelationship.length - relationshipStartIndex,
+          itemsDisplayed
+        )" :key="i" :expired="
+  businessAsRelationship[i + relationshipStartIndex].credential
+    .revoked
+" :authority="
+  credOrRelationshipToDisplay(
+    businessAsRelationship[i + relationshipStartIndex],
+    credSet
+  ).authority
+" :authorityLink="
+  credOrRelationshipToDisplay(
+    businessAsRelationship[i + relationshipStartIndex],
+    credSet
+  ).authorityLink
+" :effectiveDate="
+  businessAsRelationship[i + relationshipStartIndex].credential
+    .effective_date
+" :credId="
+  businessAsRelationship[i + relationshipStartIndex].credential.id
+">
           <template #header>
             <div>
-              <span
-                v-if="
-                  businessAsRelationship[i + relationshipStartIndex].credential
-                    .revoked
-                "
-                class="expired-credential"
-              >
+              <span v-if="
+                businessAsRelationship[i + relationshipStartIndex].credential
+                  .revoked
+              " class="expired-credential">
                 <v-icon>{{ mdiCircleMedium }}</v-icon>
                 Credential replaced:
                 {{
-                  businessAsRelationship[i + relationshipStartIndex].credential
-                    .revoked_date | formatDate
+                    businessAsRelationship[i + relationshipStartIndex].credential
+                      .revoked_date | formatDate
                 }}
               </span>
 
               <v-icon v-else>{{ mdiCircleMedium }}</v-icon>
               <span @click.stop>
-                <router-link
-                  :to="`/entity/${
-                    businessAsRelationship[i + relationshipStartIndex]
-                      .related_topic &&
-                    businessAsRelationship[i + relationshipStartIndex]
-                      .related_topic.source_id
-                  }`"
-                  class="font-weight-bold"
-                  >{{
-                    getRelationshipName(
-                      businessAsRelationship[i + relationshipStartIndex]
-                    )
-                  }}</router-link
-                >
+                <router-link :to="`/entity/${businessAsRelationship[i + relationshipStartIndex]
+                .related_topic &&
+                businessAsRelationship[i + relationshipStartIndex]
+                  .related_topic.source_id
+                }`" class="font-weight-bold">{{
+      getRelationshipName(
+        businessAsRelationship[i + relationshipStartIndex]
+      )
+  }}</router-link>
               </span>
             </div>
           </template>
@@ -195,46 +149,32 @@
                 <p class="ma-0">Items displayed</p>
               </v-col>
               <v-col class="py-0 d-flex align-center justify-center">
-                <v-select
-                  @change="correctRelDisplay"
-                  v-model="itemsDisplayed"
-                  :items="[5, 10, 25, 100]"
-                ></v-select>
+                <v-select @change="correctRelDisplay" v-model="itemsDisplayed" :items="[5, 10, 25, 100]"></v-select>
               </v-col>
               <v-col class="d-flex align-center justify-center">
                 <p class="ma-0">
                   {{ relationshipStartIndex + 1 }} -
                   {{
-                    Math.min(
-                      Math.min(itemsDisplayed, businessAsRelationship.length) +
+                      Math.min(
+                        Math.min(itemsDisplayed, businessAsRelationship.length) +
                         relationshipStartIndex,
-                      businessAsRelationship.length
-                    )
+                        businessAsRelationship.length
+                      )
                   }}
                   of {{ businessAsRelationship.length }}
                 </p>
               </v-col>
-              <v-col
-                :class="{
-                  'd-flex align-center flex-shrink-1': true,
-                  'justify-center': !$vuetify.breakpoint.lgAndUp,
-                }"
-              >
-                <v-btn
-                  :disabled="relationshipStartIndex <= 0"
-                  icon
-                  @click="incRelationshipStartIndex(-1)"
-                >
+              <v-col :class="{
+                'd-flex align-center flex-shrink-1': true,
+                'justify-center': !$vuetify.breakpoint.lgAndUp,
+              }">
+                <v-btn :disabled="relationshipStartIndex <= 0" icon @click="incRelationshipStartIndex(-1)">
                   <v-icon>{{ mdiChevronLeft }}</v-icon>
                 </v-btn>
-                <v-btn
-                  :disabled="
-                    relationshipStartIndex + itemsDisplayed >=
-                    businessAsRelationship.length
-                  "
-                  icon
-                  @click="incRelationshipStartIndex(1)"
-                >
+                <v-btn :disabled="
+                  relationshipStartIndex + itemsDisplayed >=
+                  businessAsRelationship.length
+                " icon @click="incRelationshipStartIndex(1)">
                   <v-icon>{{ mdiChevronRight }}</v-icon>
                 </v-btn>
               </v-col>
@@ -245,22 +185,15 @@
     </EntityCard>
 
     <!-- relationships related from -->
-    <EntityCard
-      ref="relationships"
-      :expanded="credentialsExpanded"
-      v-if="ownedByRelationship.length > 0"
-    >
+    <EntityCard ref="relationships" :expanded="credentialsExpanded" v-if="ownedByRelationship.length > 0">
       <template #title>
         <div class="flex">
           <Dialog>
             <template #activator>
-              <span
-                class="fake-link text--primary"
-                style="text-decoration: none"
-              >
+              <span class="fake-link text--primary" style="text-decoration: none">
                 Relationships
                 <v-icon class="icon-dense" dense>{{
-                  mdiInformationOutline
+                    mdiInformationOutline
                 }}</v-icon>
               </span>
             </template>
@@ -281,18 +214,11 @@
         </div>
       </template>
       <template #expansionPanels>
-        <CredentialItem
-          v-for="(_, i) in ownedByRelationship"
-          :key="i"
-          :cred="credOrRelationshipToDisplay(ownedByRelationship[i], credSet)"
-          :disableDefaultHeader="true"
-          :effectiveDate="ownedByRelationship[i].credential.effective_date"
-        >
+        <CredentialItem v-for="(_, i) in ownedByRelationship" :key="i"
+          :cred="credOrRelationshipToDisplay(ownedByRelationship[i], credSet)" :disableDefaultHeader="true"
+          :effectiveDate="ownedByRelationship[i].credential.effective_date">
           <template #header>
-            <span
-              v-if="ownedByRelationship[i].credential.revoked"
-              class="expired-credential"
-            >
+            <span v-if="ownedByRelationship[i].credential.revoked" class="expired-credential">
               <v-icon>{{ mdiCircleMedium }}</v-icon>
               Credential replaced:
               {{ ownedByRelationship[i].credential.revoked_date | formatDate }}
@@ -300,13 +226,9 @@
 
             <v-icon v-else>{{ mdiCircleMedium }}</v-icon>
             <span @click.stop>
-              <router-link
-                :to="`/entity/${
-                  ownedByRelationship[i].related_topic &&
-                  ownedByRelationship[i].related_topic.source_id
-                }`"
-                class="font-weight-bold"
-              >
+              <router-link :to="`/entity/${ownedByRelationship[i].related_topic &&
+              ownedByRelationship[i].related_topic.source_id
+              }`" class="font-weight-bold">
                 {{ getRelationshipName(ownedByRelationship[i]) }}
               </router-link>
             </span>
@@ -323,82 +245,54 @@
       <template>
         <!-- header content for the credential card -->
         <v-row>
-          <v-col
-            class="d-flex justify-start align-end pl-5 pt-0"
-            v-if="$vuetify.breakpoint.smAndDown"
-          >
+          <v-col class="d-flex justify-start align-end pl-5 pt-0" v-if="$vuetify.breakpoint.smAndDown">
             <EntityFilterDialog />
           </v-col>
           <v-col class="d-flex justify-end align-end pr-5 pt-0">
             <div class="text-body-2">
-              <span class="fake-link" @click="switchCredentialTimeOrder"
-                >Sort by date</span
-              >
-              <v-icon
-                class="icon-dense"
-                dense
-                v-if="credentialTimeOrder === 1"
-                >{{ mdiArrowUp }}</v-icon
-              >
+              <span class="fake-link" @click="switchCredentialTimeOrder">Sort by date</span>
+              <v-icon class="icon-dense" dense v-if="credentialTimeOrder === 1">{{ mdiArrowUp }}</v-icon>
               <v-icon class="icon-dense" dense v-else>{{
-                mdiArrowDown
+                  mdiArrowDown
               }}</v-icon>
             </div>
           </v-col>
         </v-row>
         <!-- body content of the credential card -->
         <v-row>
-          <v-col
-            v-if="$vuetify.breakpoint.mdAndUp"
-            cols="12"
-            md="4"
-            class="pa-0"
-          >
+          <v-col v-if="$vuetify.breakpoint.mdAndUp" cols="12" md="4" class="pa-0">
             <EntityFilterFacetPanels />
           </v-col>
           <v-col cols="12" md="8" class="pa-5 pl-3 pt-0">
             <EntityFilterChips class="pb-2" />
             <v-timeline dense align-top class="pa-0">
-              <v-timeline-item
-                v-for="(cred, i) in filteredEntityCredentials"
-                :key="i"
-                color="#38598A"
-                small
-              >
+              <v-timeline-item v-for="(cred, i) in filteredEntityCredentials" :key="i" color="#38598A" small>
                 <div class="pl-3 mt-n3">
                   <div class="text-body-2 font-weight-bold mb-2">
-                    {{ cred.date_effective | formatDate }}
+                    {{ cred.date_effective | formatDate }} - <span v-if="cred.revoked">
+                      Credential replaced:
+                      {{ cred.revoked_date | formatDate }}
+                    </span>
+                    <span v-else-if="isExpired(cred.attributes)">
+                      Credential expired:
+                      {{ isExpired(cred.attributes) | formatDate }}
+                    </span>
+                    <span v-else>
+                      Present
+                    </span>
+
                   </div>
-                  <EntityCard
-                    :expanded="credentialsExpanded"
-                    :timeline="true"
-                    class="pl-0 timeline-cred"
-                  >
+                  <EntityCard :expanded="credentialsExpanded" :timeline="true" class="pl-0 timeline-cred">
                     <template #expansionPanels>
                       <CredentialItem :cred="cred" :timeline="true">
                         <template #header>
                           <div class="text-body-2">
-                            <div class="expired-credential">
-                              <div v-if="cred.revoked">
-                                Credential replaced:
-                                {{ cred.revoked_date | formatDate }}
-                              </div>
-                              <div v-else-if="isExpired(cred.attributes)">
-                                Credential expired:
-                                {{ isExpired(cred.attributes) | formatDate }}
-                              </div>
-                            </div>
-                            <div
-                              v-if="cred.registration_reason"
-                              class="font-weight-bold"
-                              v-t="cred.registration_reason"
-                            ></div>
-                            <div
-                              v-else-if="
-                                cred.relationship_types &&
-                                cred.relationship_types.length
-                              "
-                            >
+                            <div v-if="cred.registration_reason" class="font-weight-bold"
+                              v-t="cred.registration_reason"></div>
+                            <div v-else-if="
+                              cred.relationship_types &&
+                              cred.relationship_types.length
+                            ">
                               <div class="font-weight-bold">
                                 DBA name registered
                               </div>
@@ -541,12 +435,12 @@ export default class EntityResult extends Vue {
   credentialFilters: {
     (creds: Array<ICredentialDisplayType>): Array<ICredentialDisplayType>;
   }[] = [
-    this.applyDateFilter,
-    this.applyExpiredFilter,
-    this.applyCredentialTypeFilter,
-    this.applyIssuerFilter,
-    this.applyRegistrationTypeFilter,
-  ];
+      this.applyDateFilter,
+      this.applyExpiredFilter,
+      this.applyCredentialTypeFilter,
+      this.applyIssuerFilter,
+      this.applyRegistrationTypeFilter,
+    ];
   getRelationshipName = getRelationshipName;
   getCredentialLabel = getCredentialLabel;
   isExpired = isExpired;
@@ -676,7 +570,7 @@ export default class EntityResult extends Vue {
     if (
       this.relationshipStartIndex + num * interval >= 0 &&
       this.relationshipStartIndex + num * interval <
-        this.businessAsRelationship.length
+      this.businessAsRelationship.length
     )
       this.relationshipStartIndex += num * interval;
   }
@@ -957,15 +851,19 @@ export default class EntityResult extends Vue {
   text-decoration: underline;
   color: $input-color;
 }
+
 .tab-active {
   border-bottom: 5px solid $secondary-color;
 }
+
 .expired-credential {
   color: $error-color;
 }
+
 .progress {
   color: $secondary-color;
 }
+
 .flex {
   display: flex;
 }
diff --git a/src/components/entity/credentialDetail/CredentialDetail.vue b/src/components/entity/credentialDetail/CredentialDetail.vue
index 0f0475a..b12c9ee 100644
--- a/src/components/entity/credentialDetail/CredentialDetail.vue
+++ b/src/components/entity/credentialDetail/CredentialDetail.vue
@@ -13,7 +13,7 @@
     <div>
       <v-card rounded="sm" class="mb-5 card">
         <v-card-title class="pa-5 pb-0">
-          <p class="text-h6 font-weight-bold">
+          <p class="text-h6 font-weight-bold wrap">
             <v-icon class="validated pb-1" v-if="!credRevoked">{{
               mdiShieldCheckOutline
             }}</v-icon>
@@ -357,6 +357,9 @@ export default class CredentialDetail extends Vue {
 .card {
   @include card-raised;
 }
+.wrap{
+  word-break: break-word;
+}
 .verification-time {
   color: $gray;
 }
diff --git a/src/components/entity/filter/EntityFilterChips.vue b/src/components/entity/filter/EntityFilterChips.vue
index c7816e2..1537cb1 100644
--- a/src/components/entity/filter/EntityFilterChips.vue
+++ b/src/components/entity/filter/EntityFilterChips.vue
@@ -67,7 +67,7 @@ export default class EntityFilterChips extends Vue {
         chips.push({
           filterField: key,
           filterString:
-            key === "show_expired" ? "Show Expired" : (key as string),
+            key === "show_expired" ? "Show Inactive Credentials" : (key as string),
         });
       }
     });
diff --git a/src/components/entity/filter/EntityFilterFacetPanels.vue b/src/components/entity/filter/EntityFilterFacetPanels.vue
index d8edf70..affd288 100644
--- a/src/components/entity/filter/EntityFilterFacetPanels.vue
+++ b/src/components/entity/filter/EntityFilterFacetPanels.vue
@@ -172,7 +172,7 @@
       <CustomFilterFacetPanel>
         <template #title>
           <div class="flex">
-            Show Expired
+            Show Inactive Credentials
             <Dialog>
               <template #activator>
                 <v-icon small class="mx-1">{{
@@ -218,7 +218,7 @@
                     ></v-simple-checkbox>
                   </v-list-item-action>
                   <v-list-item-content class="pt-1 pb-1">
-                    <div>Show Expired</div>
+                    <div>Show Inactive Credentials</div>
                   </v-list-item-content>
                 </template>
               </v-list-item>