Merge pull request #3145 from molgenis/fix-green-checkmark

Fixed the green checkmark on the biobank cards. Adjusted the pop-over's styling and the quality labels are rendered in biobank card, biobank and collection reports.
molgenis · Jan 16, 2024 · 6189db0 · 6189db0
2 parents a60c9b0 + 9d04240
commit 6189db0
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 85 deletions.
diff --git a/apps/directory/src/components/biobankcards-components/BiobankCard.vue b/apps/directory/src/components/biobankcards-components/BiobankCard.vue
@@ -12,11 +12,7 @@
       <div class="align-self-stretch">
         <header class="border-0 biobank-card-header p-1">
           <h5 class="pt-1 pl-1 pr-1 mt-1">
-            <router-link
-              :to="'/biobank/' + biobank.id"
-              title="Biobank details"
-              class="text-dark"
-            >
+            <router-link :to="'/biobank/' + biobank.id" class="text-dark">
               <span
                 class="fa fa-server mr-2 text-primary"
                 aria-hidden="true"
@@ -31,23 +27,26 @@
                   faIcon="fa-regular fa-circle-check"
                   textColor="text-success"
                   class="ml-1 certificate-icon"
-                  popover-placement="right"
+                  popover-placement="bottom"
                 >
                   <div
                     class="popover-content"
                     v-for="quality of biobankQualities"
                     :key="quality.label"
                   >
-                    <table v-if="getQualityInfo(quality.label)">
-                      <tbody>
-                        <th class="pr-3">
-                          {{ getQualityInfo(quality.label).label }}
-                        </th>
-                        <td>
-                          {{ getQualityInfo(quality.label).definition }}
-                        </td>
-                      </tbody>
-                    </table>
+                    <div v-if="quality.quality_standard">
+                      <div class="quality-standard-label">
+                        {{
+                          getQualityInfo(quality.quality_standard.name)?.label
+                        }}
+                      </div>
+                      <div class="quality-standard-definition">
+                        {{
+                          getQualityInfo(quality.quality_standard.name)
+                            ?.definition
+                        }}
+                      </div>
+                    </div>
                   </div>
                 </info-popover>
               </sup>
@@ -399,4 +398,20 @@ article section {
 .right-content-list li {
   margin-bottom: 0.5rem;
 }
+
+.popover-content {
+  margin-bottom: 15px;
+}
+
+.popover-content:last-child {
+  margin-bottom: 0;
+}
+
+.popover-content .quality-standard-label {
+  font-weight: 700;
+}
+
+.popover-content .quality-standard-definition {
+  font-weight: 600;
+}
 </style>
diff --git a/apps/directory/src/components/report-components/CollectionReportInfoCard.vue b/apps/directory/src/components/report-components/CollectionReportInfoCard.vue
@@ -119,24 +119,6 @@
               </li>
             </ul>
           </template>
-          <template
-            v-if="info.certifications && info.certifications.length > 0"
-          >
-            <h5>Quality</h5>
-            <ul class="right-content-list">
-              <li>
-                <span class="font-weight-bold mr-2">Certification(s):</span>
-                <span
-                  v-for="(cert, index) in info.certifications"
-                  :key="`${cert}-${index}`"
-                >
-                  <span class="cert-badge badge badge-success">
-                    {{ cert }}
-                  </span>
-                </span>
-              </li>
-            </ul>
-          </template>
           <template v-if="info.collaboration.length > 0">
             <h5>Collaboration</h5>
             <div class="container p-0">

diff --git a/apps/directory/src/components/tables/QualityColumn.vue b/apps/directory/src/components/tables/QualityColumn.vue
@@ -26,31 +26,33 @@
       <span v-else>
         <span
           v-if="
-            !quality.certification_image_link && getQualityInfo(quality.label)
+            !quality.certification_image_link && 'quality_standard' in quality
           "
         >
-          {{ getQualityInfo(quality.label).label }}
+          {{ getQualityInfo(quality.quality_standard.name).label }}
         </span>
         <span v-else>
           <img
-            v-if="getQualityInfo(quality.label)"
+            v-if="quality.quality_standard"
             :src="quality.certification_image_link"
             class="quality-logo"
             :alt="generateQualityLabel(quality)"
           />
         </span>
       </span>
       <info-popover
-        v-if="qualityInfo && Object.keys(qualityInfo).length"
+        v-if="quality.quality_standard"
         class="ml-2"
         popover-placement="bottom"
       >
         <div class="popover-content">
           <div>
-            <b> {{ getQualityInfo(quality.label).label }}</b>
+            <b> {{ getQualityInfo(quality.quality_standard.name)?.label }}</b>
           </div>
           <div>
-            <span> {{ getQualityInfo(quality.label).definition }}</span>
+            <span>
+              {{ getQualityInfo(quality.quality_standard.name)?.definition }}
+            </span>
           </div>
         </div>
       </info-popover>
@@ -83,7 +85,7 @@ export default {
   methods: {
     generateQualityLabel(quality) {
       return quality.label !== "Others"
-        ? this.getQualityInfo(quality.label).label
+        ? this.getQualityInfo(quality.quality_standard.name).label
         : quality.certification_number;
     },
     getQualityInfo(key) {

diff --git a/apps/directory/src/functions/viewmodelMapper.js b/apps/directory/src/functions/viewmodelMapper.js
@@ -434,7 +434,7 @@ export const mapQualityStandards = (instance) => {
 
   if (instance) {
     for (const quality of instance) {
-      arr.push(quality.quality_standard.label);
+      arr.push(quality.quality_standard.name);
     }
   }
 

diff --git a/apps/directory/src/property-config/initialBiobankColumns.js b/apps/directory/src/property-config/initialBiobankColumns.js
@@ -11,7 +11,7 @@ export const initialBiobankColumns = [
   {
     label: "Quality labels:",
     column: {
-      quality: [{ quality_standard: ["label"] }],
+      quality: [{ quality_standard: ["name"] }],
     },
     showOnBiobankCard: true,
   },

diff --git a/apps/directory/src/property-config/initialBiobankReportColumns.js b/apps/directory/src/property-config/initialBiobankReportColumns.js
@@ -2,12 +2,7 @@ export const initialBiobankReportColumns = [
   {
     label: "Quality labels:",
     column: {
-      quality: [
-        "label",
-        "certification_report",
-        "certification_image_link",
-        "certification_number",
-      ],
+      quality: [{ quality_standard: ["name"] }],
     },
   },
   {
@@ -18,12 +13,7 @@ export const initialBiobankReportColumns = [
         "size",
         { type: ["label"] },
         {
-          quality: [
-            "label",
-            "certification_report",
-            "certification_image_link",
-            "certification_number",
-          ],
+          quality: [{ quality_standard: ["name"] }],
         },
         { sub_collections: ["id"] },
       ],

diff --git a/apps/directory/src/property-config/initialCollectionColumns.js b/apps/directory/src/property-config/initialCollectionColumns.js
@@ -4,7 +4,7 @@ const initialCollectionColumns = [
   {
     label: "Quality labels:",
     column: {
-      quality: [{ quality_standard: ["label"] }],
+      quality: [{ quality_standard: ["name"] }],
     },
     showOnBiobankCard: true,
   },

diff --git a/apps/directory/src/views/BiobankReport.vue b/apps/directory/src/views/BiobankReport.vue
@@ -92,18 +92,6 @@
                           <h5>Also Known In</h5>
                           <ReportDetailsList :reportDetails="alsoKnownIn" />
                         </template>
-                        <h5
-                          v-if="
-                            quality &&
-                            quality.Certification &&
-                            quality.Certification.value.length > 0
-                          "
-                        >
-                          Quality
-                        </h5>
-                        <report-details-list
-                          :reportDetails="quality"
-                        ></report-details-list>
                       </ul>
                     </div>
                   </div>

diff --git a/apps/molgenis-components/src/components/forms/InfoPopover.vue b/apps/molgenis-components/src/components/forms/InfoPopover.vue
@@ -89,26 +89,20 @@ export default {
     placementStyle() {
       switch (this.popoverPlacement) {
         case "right": {
-          const top = 0;
-          const left = this.elementWidth + 8;
-
-          return `top: ${top}px;left:${left}px;`;
+          const left = this.elementWidth + 12;
+          return `top: 50%; left:${left}px; transform: translateY(-50%);`;
         }
         case "left": {
-          const top = 0;
-          const right = this.elementWidth + 8;
-
-          return `top: ${top}rem;right:${right}px;`;
+          const right = this.elementWidth + 12;
+          return `top: 50%; right:${right}px; transform: translateY(-50%);`;
         }
         case "bottom": {
-          const top = this.elementHeight + 8;
-          const right = this.elementWidth / 2 - this.contentWidth / 2;
-          return `top: ${top}px;right:${right}px;`;
+          const top = this.elementHeight + 12;
+          return `top: ${top}px; left: 50%; transform: translateX(-50%);`;
         }
         default: {
-          const bottom = this.elementHeight + 8;
-          const right = this.elementWidth / 2 - this.contentWidth / 2;
-          return `bottom: ${bottom}px;right:${right}px;`;
+          const bottom = this.elementHeight + 12;
+          return `bottom: ${bottom}px; left: 50%; transform: translateX(-50%);`;
         }
       }
     },
@@ -129,15 +123,16 @@ export default {
 .w3tooltip .tooltiptext {
   visibility: hidden;
   position: absolute;
+  width: max-content;
   background-color: var(--dark);
   color: #fff;
-  text-align: center;
-  padding: 0.8rem 0.6rem;
+  line-height: normal;
+  padding: 6px 10px;
   border-radius: 6px;
   z-index: 1;
   opacity: 0;
-  white-space: nowrap;
   transition: opacity 0.6s;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
 .w3tooltip:hover {
   cursor: pointer;