#2218 Modify expand and collapse behavior

NationalSecurityAgency · Dec 24, 2024 · 8c4415e · 8c4415e
1 parent 1c4edd4
commit 8c4415e
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/dashboard/src/skills-display/components/progress/SkillProgress.vue b/dashboard/src/skills-display/components/progress/SkillProgress.vue
@@ -16,7 +16,7 @@ limitations under the License.
 <script setup>
 import SkillProgressNameRow from '@/skills-display/components/progress/skill/SkillProgressNameRow.vue'
 import { useRoute } from 'vue-router'
-import { computed, ref } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useSkillsDisplayInfo } from '@/skills-display/UseSkillsDisplayInfo.js'
 import SkillsSummaryCards from '@/skills-display/components/progress/SkillsSummaryCards.vue'
 import MarkdownText from '@/common-components/utilities/markdown/MarkdownText.vue'
@@ -65,6 +65,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
     required: false
+  },
+  expandGroups: {
+    type: Boolean,
+    default: false,
+    required: false
   }
 })
 const emit = defineEmits(['add-tag-filter', 'points-earned'])
@@ -120,10 +125,19 @@ const pointsEarned = (pts) => {
 }
 
 const isSkillComplete = computed(() => props.skill && props.skill.meta && props.skill.meta.complete)
-const expanded = ref(false);
+const expanded = ref(null);
 const toggleRow = () => {
   expanded.value = !expanded.value;
 }
+watch(() => props.expandGroups, (newValue) => {
+  expanded.value = newValue
+})
+
+onMounted(() => {
+  if(props.expandGroups) {
+    expanded.value = props.expandGroups
+  }
+})
 </script>
 
 <template>

diff --git a/dashboard/src/skills-display/components/progress/SkillsProgressList.vue b/dashboard/src/skills-display/components/progress/SkillsProgressList.vue
@@ -221,6 +221,10 @@ const isLastViewedScrollSupported = computed(() => {
 })
 // this.lastViewedButtonDisabled = resultSkills.findIndex((i) => i.isLastViewed || (i.children && i.children.findIndex((c) => c.isLastViewed) >= 0)) < 0
 
+const expandGroups = ref(true);
+const onGroupsToggle = () => {
+
+}
 </script>
 
 <template>
@@ -276,7 +280,12 @@ const isLastViewedScrollSupported = computed(() => {
 
           <div class="" data-cy="skillDetailsToggle">
             <div class="flex flex-row align-content-center">
-              <span class="text-muted pr-1 align-content-center">{{ attributes.skillDisplayName }} Details:</span>
+              <span class="text-muted pr-1 align-content-center">Expand Groups:</span>
+              <InputSwitch v-model="expandGroups"
+                           @change="onGroupsToggle"
+                           aria-label="Expand Groups"
+                           data-cy="expandGroupsSwitch" />
+              <span class="text-muted pr-1 ml-3 align-content-center">{{ attributes.skillDisplayName }} Details:</span>
               <InputSwitch v-model="showDescriptionsInternal"
                            @change="onDetailsToggle"
                            :aria-label="`Show ${attributes.skillDisplayName} Details`"
@@ -327,6 +336,7 @@ const isLastViewedScrollSupported = computed(() => {
               :ref="`skillProgress${skill.skillId}`"
               :skill="skill"
               :type="type"
+              :expand-groups="expandGroups"
               :enable-drill-down="true"
               :show-description="showDescriptionsInternal"
               :data-cy="`skillProgress_index-${index}`"