From f85d34c665180f7ee2ea3b039c00641acc4e9ac6 Mon Sep 17 00:00:00 2001
From: Dima May <sudo.may1@gmail.com>
Date: Thu, 11 Jul 2024 10:45:20 +0000
Subject: [PATCH 1/2] #2490: created custom component for the stars, utilized
 primevue's disable mechanism and override the opacity to keep the same
 look-and-feel

---
 .../components/progress/MySkillLevel.vue      |  3 ++-
 .../components/subjects/SubjectTile.vue       |  4 +--
 .../components/utilities/LevelsProgress.vue   | 25 +++++++++++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue

diff --git a/dashboard-prime/src/skills-display/components/progress/MySkillLevel.vue b/dashboard-prime/src/skills-display/components/progress/MySkillLevel.vue
index 7102c08a2c..79cfd2d3d7 100644
--- a/dashboard-prime/src/skills-display/components/progress/MySkillLevel.vue
+++ b/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>
diff --git a/dashboard-prime/src/skills-display/components/subjects/SubjectTile.vue b/dashboard-prime/src/skills-display/components/subjects/SubjectTile.vue
index dbb0cf7c10..49298b28ac 100644
--- a/dashboard-prime/src/skills-display/components/subjects/SubjectTile.vue
+++ b/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">
diff --git a/dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue b/dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue
new file mode 100644
index 0000000000..639b4f6e97
--- /dev/null
+++ b/dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue
@@ -0,0 +1,25 @@
+<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>
\ No newline at end of file

From 99899d2bf9cc40a0c3f0884576904ef4c37eb6a6 Mon Sep 17 00:00:00 2001
From: Dima May <sudo.may1@gmail.com>
Date: Thu, 11 Jul 2024 11:15:55 +0000
Subject: [PATCH 2/2] #2490: missing header

---
 .../components/utilities/LevelsProgress.vue       | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue b/dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue
index 639b4f6e97..d30a06c2de 100644
--- a/dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue
+++ b/dashboard-prime/src/skills-display/components/utilities/LevelsProgress.vue
@@ -1,3 +1,18 @@
+/*
+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'