Merge pull request #2660 from NationalSecurityAgency/t#2628/stars_no_…

…focus

T#2628/stars no focus

dashboard-prime/src/skills-display/components/progress/MySkillLevel.vue

@@ -16,6 +16,7 @@ limitations under the License.
 <script setup>
 import { computed } from 'vue'
 import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
+import LevelsProgress from '@/skills-display/components/utilities/LevelsProgress.vue'
 
 const props = defineProps({
   userProgress: Object,
@@ -40,7 +41,7 @@ const totalLevels = computed(() => props.userProgress.totalLevels)
       {{ attributes.levelDisplayName }} <Tag severity="info">{{ level }}</Tag> out of <Tag>{{ totalLevels }}</Tag>
     </div>
     <div class="flex justify-content-center mt-2 overall-progress-stars-icons">
-      <Rating v-model="level" :stars="totalLevels" readonly :cancel="false" data-cy="overallStars"/>
+      <LevelsProgress :level="level" :totalLevels="totalLevels" data-cy="overallStars"/>
     </div>
   </div>
 </template>

dashboard-prime/src/skills-display/components/subjects/SubjectTile.vue

@@ -22,6 +22,7 @@ import { useSkillsDisplayInfo } from '@/skills-display/UseSkillsDisplayInfo.js'
 import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
 import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js'
 import CardWithVericalSections from '@/components/utils/cards/CardWithVericalSections.vue'
+import LevelsProgress from '@/skills-display/components/utilities/LevelsProgress.vue'
 
 const props = defineProps({
   subject: {
@@ -85,8 +86,7 @@ const progress = computed(() => {
         <i :class="subject.iconClass" class="text-7xl text-400 sd-theme-subject-tile-icon" aria-hidden="true"/>
         <div class="text-xl pt-1 font-medium" data-cy="levelTitle">{{ attributes.levelDisplayName }} {{ subject.skillsLevel }}</div>
         <div class="flex justify-content-center mt-2 subject-progress-stars-icons">
-          <Rating v-model="subject.skillsLevel" :stars="subject.totalLevels" readonly :cancel="false"
-                  data-cy="subjectStars" />
+          <LevelsProgress :level="subject.skillsLevel" :totalLevels="subject.totalLevels" data-cy="subjectStars"/>
         </div>
 
         <div class="flex mt-2">

dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue

@@ -0,0 +1,40 @@
+/*
+Copyright 2024 SkillTree
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  level: Number,
+  totalLevels: Number
+})
+const levelInternal = ref(props.level)
+</script>
+
+<template>
+  <Rating
+    v-model="levelInternal"
+    :stars="totalLevels"
+    readonly
+    disabled
+    :cancel="false"
+    class="override-readonly-opacity" />
+</template>
+
+<style>
+.override-readonly-opacity.p-rating {
+  opacity: 1 !important;
+}
+</style>