fixing preview record popup in profile page

Author: prakhyatox

src/components/Navigation/Loaders.vue

@@ -8,7 +8,7 @@
         cols="12"
         class="text-center"
       >
-        <h2 class="blue--text">
+        <h2 class="text-blue">
           Loading your content. <br> Please wait ...
         </h2>
       </v-col>
@@ -678,9 +678,9 @@
 </template>
 
 <script>
-    export default {
-        name: "Loaders"
-    }
+export default {
+  name: "Loaders"
+}
 </script>
 
 <style scoped>

src/components/Records/Record/DataProcessesAndConditions.vue

@@ -19,7 +19,7 @@
           getField('metadata')['certifications_and_community_badges'].length)
     "
     class="pa-4 d-flex flex-column"
-    outlined
+    border
     :color="backColor"
     tile
     elevation="3"
@@ -44,7 +44,7 @@
           v-for="(item, key, index) in generateDataConditions()"
           :key="key + '_' + index"
           class="pa-4 mt-15 d-flex flex-column"
-          outlined
+          border
           color="white"
           tile
           elevation="3"
@@ -54,7 +54,7 @@
             size="20"
           />
           <v-card-title class="pa-0 text--primary card-title-customize">
-            {{ cleanString(key) | capitalize }}
+            {{ $filters.capitalize(cleanString(key)) }}
           </v-card-title>
           <v-card-text class="ma-0 pt-8">
             <div v-if="key === 'licences'">
@@ -74,7 +74,7 @@
               :key="subItem.name + '_' + subIndex"
               class="pa-4 mt-2 d-flex flex-column v-card-hover"
               flat
-              outlined
+              border
             >
               <a
                 v-if="subItem.url"

src/components/Records/Record/GeneralInfo.vue

@@ -1,6 +1,6 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+<template>
   <v-card
-    class="pa-4 d-flex flex-column"
+    class="pa-4 d-flex flex-column overflow-initial"
     border
     :color="backColor"
     tile
@@ -79,7 +79,7 @@
             size="small"
             start
           >
-            fa-project-diagram
+            fas fa-project-diagram
           </v-icon>
           <span
             v-if="currentRecord.fairsharingRecord.hasGraph"

src/components/Records/Record/GeneralInfo/Badge/InfoBadge.vue

@@ -9,20 +9,20 @@
           :rotate="360"
           :size="85"
           :width="10"
-          :value="badge.progress"
+          :model-value="badge.progress"
           :color="badge.progressColor"
           class="mr-1"
         >
           <v-tooltip
             v-if="showProgressHover"
-            bottom
-            nudge-bottom="30"
+            location="bottom"
+            offset="30"
             :open-on-hover="showProgressHover"
             :color="badge.progressColor"
           >
-            <template #activator="{ on }">
+            <template #activator="{ props }">
               <div
-                v-on="on"
+                v-bind="props"
               >
                 <div class="circle-transparent" />
               </div>
@@ -31,13 +31,13 @@
           </v-tooltip>
           <v-tooltip
             v-if="badge.icon"
-            top
+            location="top"
             :open-on-hover="showTextHover"
           >
-            <template #activator="{ on }">
+            <template #activator="{ props }">
               <div
                 style="position:relative;"
-                v-on="on"
+                v-bind="props"
               >
                 <Icon
                   style="cursor:help"
@@ -105,20 +105,20 @@ export default {
   methods: {
     mergedAssociations() {
       return prepareAssociations(this, this.currentRecordLocal['fairsharingRecord'].recordAssociations,
-          this.currentRecordLocal['fairsharingRecord'].reverseRecordAssociations)
+        this.currentRecordLocal['fairsharingRecord'].reverseRecordAssociations)
     },
     checkBadges() {
       this.badges = new BadgeBuilder(this.currentRecordLocal['fairsharingRecord'])
-      .hasStatus()
-      .hasLicence()
-      .hasMaintainer()
-      .hasStandard()
-      .hasDatabase()
-      .hasPolicy()
-      .hasAPI()
-      .hasPID()
-      .hasCertificate()
-      .getBadges()
+        .hasStatus()
+        .hasLicence()
+        .hasMaintainer()
+        .hasStandard()
+        .hasDatabase()
+        .hasPolicy()
+        .hasAPI()
+        .hasPID()
+        .hasCertificate()
+        .getBadges()
     },
   }
 }

src/components/Records/Record/GeneralInfo/Citations.vue

@@ -8,7 +8,7 @@
         md="6"
       >
         <v-card
-          class="pa-4 d-flex flex-column"
+          class="pa-4 d-flex flex-column overflow-initial"
           border
           color="white"
           tile

src/components/Records/Record/GeneralInfo/Description.vue

@@ -21,18 +21,15 @@
       class="ma-0 full-width ml-md-12 ml-8"
       :class="{'text-end' : $vuetify.display.smAndDown}"
     >
-      {{ getField('description') | capitalize }}
+      {{ $filters.capitalize(getField('description')) }}
     </p>
   </div>
 </template>
 
 <script>
 import {mapGetters, mapState} from "vuex";
-
-import stringUtils from "@/utils/stringUtils";
 export default {
   name: "Description",
-  mixins: [stringUtils],
   computed: {
     ...mapGetters("record", ["getField"]),
     ...mapState("editor", ["recordTooltips"]),

src/components/Records/Record/GeneralInfo/Keywords.vue

@@ -30,7 +30,7 @@
           :key="item.label"
           class="mr-2 mb-2"
           :color="getChipColor(item)"
-          text-color="white"
+          variant="flat"
           @click="returnToSearch('subjects', item.label)"
         >
           <KeywordTooltip
@@ -70,7 +70,7 @@
           :key="item.label"
           class="mr-2 mb-2"
           :color="getChipColor(item)"
-          text-color="white"
+          variant="flat"
           @click="returnToSearch('domains', item.label)"
         >
           <KeywordTooltip
@@ -109,7 +109,7 @@
           v-for="item in getField('taxonomies')"
           :key="item.label"
           class="mr-2 mb-2"
-          text-color="white"
+          variant="flat"
           :color="getChipColor(item)"
           @click="returnToSearch('taxonomies', item.label)"
         >
@@ -149,7 +149,7 @@
           v-for="item in getField('userDefinedTags')"
           :key="item.label"
           class="mr-2 mb-2 text-capitalize"
-          text-color="white"
+          variant="flat"
           :color="getChipColor(item)"
           @click="returnToSearch('userDefinedTags', item.label)"
         >

src/components/Records/Record/GeneralInfo/Registry.vue

@@ -21,18 +21,15 @@
       class="ma-0 full-width ml-md-12 ml-8"
       :class="{'text-end' : $vuetify.display.smAndDown}"
     >
-      {{ getField('registry') | capitalize }}
+      {{ $filters.capitalize(getField('registry')) }}
     </p>
   </div>
 </template>
 
 <script>
 import {mapGetters, mapState} from "vuex";
-
-import stringUtils from "@/utils/stringUtils";
 export default {
   name: "Registry",
-  mixins: [stringUtils],
   computed: {
     ...mapGetters("record", ["getField"]),
     ...mapState("editor", ["recordTooltips"]),

src/components/Records/Record/GeneralInfo/Type.vue

@@ -21,7 +21,7 @@
       class="ma-0 full-width ml-md-12 ml-8"
       :class="{'text-end' : $vuetify.display.smAndDown}"
     >
-      {{ cleanString(getField('type')) | capitalize }}
+      {{ $filters.capitalize(cleanString(getField('type'))) }}
     </p>
   </div>
 </template>

src/components/Records/Record/RecordMenu.vue

@@ -1,20 +1,18 @@
 <template>
   <div class="text-right">
     <v-menu
-      offset-y
       :disabled="readOnlyMode"
     >
-      <template #activator="{ on, attrs }">
+      <template #activator="{ props }">
         <v-btn
           class="mt-1"
           color="primary"
-          v-bind="attrs"
-          v-on="on"
+          v-bind="props"
         >
           Actions
           <v-icon
-            small
-            right
+            size="small"
+            end
           >
             fa-chevron-down
           </v-icon>

src/components/Records/Record/RelatedContent.vue

@@ -177,11 +177,11 @@ export default {
       const _module = this;
       // A policy may recommend collections; other records may be collected.
       if (_module.currentRecord['fairsharingRecord'].registry === 'Policy') {
-        _module.$set(_module.tabsData.tabs, 'related_collections', {registry: ["Collection"], data: [], count:0});
+        _module.tabsData.tabs['related_collections'] = {registry: ["Collection"], data: [], count:0}
       }
       if (_module.currentRecord['fairsharingRecord'].registry === 'FAIRassist' ||
           _module.currentRecord['fairsharingRecord'].registry === 'Standard') {
-        _module.$set(_module.tabsData.tabs, 'related_fairassist_components', {registry: ["FAIRassist"], data: [], count:0});
+        _module.tabsData.tabs['related_fairassist_components'] = {registry: ["FAIRassist"], data: [], count:0}
       }
       if (Object.keys(_module.currentRecord['fairsharingRecord']).includes('recordAssociations') ||
           Object.keys(_module.currentRecord['fairsharingRecord']).includes('reverseRecordAssociations')) {