2490: added display of my badges across all projects on progress and …

…ranking pages; added cypress tests
NationalSecurityAgency · Jun 10, 2024 · 8f35eb1 · 8f35eb1
1 parent bcb13b3
commit 8f35eb1
Show file tree

Hide file tree

Showing 24 changed files with 755 additions and 548 deletions.
diff --git a/dashboard-prime/src/components/access/invite-only/InviteStatuses.vue b/dashboard-prime/src/components/access/invite-only/InviteStatuses.vue
@@ -47,10 +47,6 @@ const inviteExtensionMenuItems = ref([
       {
         label: '30 minutes',
         value: 'PT30M',
-        command: (event, second) => {
-          console.log(event)
-          console.log(second)
-        }
       },
       {
         label: '8 hours',

diff --git a/dashboard-prime/src/components/access/invite-only/InviteUsersToProject.vue b/dashboard-prime/src/components/access/invite-only/InviteUsersToProject.vue
@@ -110,7 +110,6 @@ const sendInvites = () => {
     recipients: toRaw(inviteRecipients.value)
   }
 
-  console.log(inviteRequest)
   AccessService.sendProjectInvites(route.params.projectId, inviteRequest).then((resp) => {
     inviteRecipients.value = []
     if (resp.unsuccessful) {

diff --git a/dashboard-prime/src/components/access/invite-only/RevokeUserAccess.vue b/dashboard-prime/src/components/access/invite-only/RevokeUserAccess.vue
@@ -93,7 +93,6 @@ const revokeAccess = (userId, userIdForDisplay) => {
   const msg = `Are you sure you want to revoke ${userIdForDisplay}'s access to this Project? ${userIdForDisplay}'s achievements will NOT be deleted,
         however ${userIdForDisplay} will no longer be able to access the training profile.`;
   dialogMessages.msgConfirm(msg, 'Revoke Access', (val) => {
-    console.log(val)
       tableIsBusy.value = true;
       AccessService.deleteUserRole(route.params.projectId, userId, 'ROLE_PRIVATE_PROJECT_USER').then(() => {
         loadData();

diff --git a/dashboard-prime/src/components/myProgress/BadgeNumCard.vue b/dashboard-prime/src/components/myProgress/BadgeNumCard.vue
@@ -21,22 +21,30 @@ const myProgress = computed(() => myProgressState.myProgress)
           data-cy="numBadgesAvailable">/ {{ myProgress.totalBadges
           }}</span>
       </div>
-      <div v-if="myProgress.totalGlobalBadges > 0">
-        <Tag severity="info" data-cy="numAchievedGlobalBadges">Global Badges: {{ myProgress.numAchievedGlobalBadges
-          }} / {{ myProgress.totalGlobalBadges }}
+      <div v-if="myProgress.globalBadgeCount > 0">
+        <Tag
+          severity="secondary"
+          class="mt-1"
+          data-cy="numAchievedGlobalBadges">Global Badges:
+          {{ myProgress.numAchievedGlobalBadges
+          }} / {{ myProgress.globalBadgeCount }}
         </Tag>
       </div>
-      <div v-if="myProgress.totalGems > 0">
-        <Tag severity="info" data-cy="numAchievedGemBadges">Gems: {{ myProgress.numAchievedGemBadges }} /
-          {{ myProgress.totalGems }}
+      <div v-if="myProgress.gemCount > 0">
+        <Tag
+          severity="warning"
+          class="mt-1"
+          data-cy="numAchievedGemBadges">Gems:
+          {{ myProgress.numAchievedGemBadges }} /
+          {{ myProgress.gemCount }}
         </Tag>
       </div>
     </template>
     <template #right-content>
       <div style="font-size: 3.5rem;" class="mt-2">
       <span class="fa-stack">
             <i class="fas fa-circle fa-stack-2x text-bluegray-600"></i>
-            <i class="fas fa-trophy fa-stack-1x text-primary"></i>
+            <i class="fas fa-trophy fa-stack-1x text-green-500"></i>
           </span>
       </div>
     </template>
@@ -45,13 +53,14 @@ const myProgress = computed(() => myProgressState.myProgress)
         <div data-cy="badges-num-footer" class="flex-1">
           Be proud to earn those badges!!
         </div>
-        <!--          :to="{ name: 'MyBadges' }"-->
-        <SkillsButton
-          label="My Badges"
-          icon="fas fa-award"
-          outlined
-          size="small"
-          data-cy="viewBadges" />
+        <router-link :to="{ name: 'MyBadges' }">
+          <SkillsButton
+            label="My Badges"
+            icon="fas fa-award"
+            outlined
+            size="small"
+            data-cy="viewBadges" />
+        </router-link>
       </div>
     </template>
   </my-progress-info-card-util>

diff --git a/dashboard-prime/src/components/myProgress/MyProgressPage.vue b/dashboard-prime/src/components/myProgress/MyProgressPage.vue
@@ -7,6 +7,7 @@ import NumSkills from '@/components/myProgress/NumSkills.vue'
 import LastEarnedCard from '@/components/myProgress/LastEarnedCard.vue'
 import BadgeNumCard from '@/components/myProgress/BadgeNumCard.vue'
 import MyCurrentProjects from '@/components/myProgress/MyCurrentProjects.vue'
+import MyProgressTitle from '@/components/myProgress/MyProgressTitle.vue'
 
 const myProgressState = useMyProgressState()
 
@@ -22,25 +23,18 @@ onMounted(() => {
     <div v-if="!myProgressState.isLoadingMyProgressSummary">
       <progress-and-ranking-splash v-if="!myProgressState.hasProjects" />
       <div v-if="myProgressState.hasProjects">
-        <Card :pt="{ content: { class: 'p-0' }, body: { class: 'p-3' } }">
-          <template #content>
-            <div class="flex">
-              <div class="flex-1">
-                <span class="text-2xl uppercase" role="heading" aria-level="1">My Projects</span>
-              </div>
-              <div>
-                <router-link :to="{ name: 'DiscoverProjectsPage' }">
-                  <SkillsButton
-                    label="Projects Catalog"
-                    outlined
-                    icon="fas fa-tasks"
-                    data-cy="manageMyProjsBtn"
-                    variant="outline-primary" />
-                </router-link>
-              </div>
-            </div>
+        <my-progress-title title="My Progress">
+          <template #rightContent>
+            <router-link :to="{ name: 'DiscoverProjectsPage' }">
+              <SkillsButton
+                label="Projects Catalog"
+                outlined
+                icon="fas fa-tasks"
+                data-cy="manageMyProjsBtn"
+                variant="outline-primary" />
+            </router-link>
           </template>
-        </Card>
+        </my-progress-title>
 
         <div class="flex gap-3 flex-wrap mt-3">
           <div class="flex-1">

diff --git a/dashboard-prime/src/components/myProgress/MyProgressTitle.vue b/dashboard-prime/src/components/myProgress/MyProgressTitle.vue
@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  title: String,
+})
+</script>
+
+<template>
+  <Card :pt="{ content: { class: 'p-0' }, body: { class: 'p-3' } }">
+    <template #content>
+      <div class="flex">
+        <div class="flex-1">
+          <span class="text-2xl uppercase" role="heading" aria-level="1">{{ title }}</span>
+        </div>
+        <div>
+          <slot name="rightContent"></slot>
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/dashboard-prime/src/components/myProgress/MyProjectSkillsPage.vue b/dashboard-prime/src/components/myProgress/MyProjectSkillsPage.vue
@@ -4,16 +4,28 @@ import { useRoute } from 'vue-router'
 import { useSkillsDisplayAttributesState } from '@/skills-display/stores/UseSkillsDisplayAttributesState.js'
 import SkillsDisplayHome from '@/skills-display/components/SkillsDisplayHome.vue'
 import ProjectService from '@/components/projects/ProjectService.js'
+import { useSkillsDisplayThemeState } from '@/skills-display/stores/UseSkillsDisplayThemeState.js'
 
 const route = useRoute()
 const projectId = route.params.projectId
 const skillsDisplayAttributes = useSkillsDisplayAttributesState()
+const themeState = useSkillsDisplayThemeState()
+
+themeState.theme.disableSkillTreeBrand = true
+themeState.theme.disableBreadcrumb = true
+themeState.theme.pageTitle = {
+  textAlign: 'left',
+  fontSize: '1.5rem'
+}
 
 onMounted(() => {
-  // constructSkillsDisplay()
   skillsDisplayAttributes.projectId = projectId
   skillsDisplayAttributes.serviceUrl = ''
   skillsDisplayAttributes.loadingConfig = false
+  skillsDisplayAttributes.internalBackButton = false
+
+  themeState.theme.landingPageTitle = `${skillsDisplayAttributes.projectDisplayName}: ${skillsDisplayAttributes.projectName}`
+  themeState.initThemeObjInStyleTag(themeState.theme)
   handleProjInvitation()
 })
 
@@ -23,6 +35,8 @@ const handleProjInvitation = () => {
     ProjectService.addToMyProjects(projectId);
   }
 }
+
+
 </script>
 
 <template>

diff --git a/dashboard-prime/src/components/myProgress/ProjectLinkCard.vue b/dashboard-prime/src/components/myProgress/ProjectLinkCard.vue
@@ -76,7 +76,7 @@ const currentProgressPercent = computed(() => Math.trunc(props.proj.points / pro
 
 <template>
   <Card :pt="{ content: { class: 'p-0' }, body: { class: 'p-0 pb-2' } }"
-
+        :data-cy="`project-link-card-${proj.projectId}`"
         class="conic"
         :class="{ 'proj-link-card' : !overSortControl }">
     <template #content>

diff --git a/dashboard-prime/src/components/myProgress/badges/MyBadges.vue b/dashboard-prime/src/components/myProgress/badges/MyBadges.vue
@@ -0,0 +1,48 @@
+<script setup>
+import MyProgressService from '@/components/myProgress/MyProgressService.js'
+import { computed, onMounted, ref } from 'vue'
+import MyBadgesDetails from '@/skills-display/components/badges/MyBadgesDetails.vue'
+import BadgesCatalog from '@/skills-display/components/badges/BadgesCatalog.vue'
+import MyProgressTitle from '@/components/myProgress/MyProgressTitle.vue'
+
+const loading = ref(true)
+const badges = ref([])
+
+onMounted(() => {
+  loadBadges()
+})
+
+const unachievedBadges = computed(() => badges.value.filter((badge) => badge.badgeAchieved === false))
+const achievedBadges = computed(() => badges.value.filter((badge) => badge.badgeAchieved === true))
+
+
+const loadBadges = () => {
+  loading.value = true
+  MyProgressService.loadMyBadges().then((res) => {
+    badges.value = res
+  }).finally(() => {
+    loading.value = false
+  })
+}
+</script>
+
+<template>
+<div>
+  <my-progress-title title="My Badges" />
+
+  <my-badges-details
+    data-cy="achievedBadges"
+    :badges="achievedBadges"
+    class="mt-3"
+  />
+
+  <badges-catalog class="mt-3"
+                  :badges="unachievedBadges"
+                  data-cy="availableBadges">
+  </badges-catalog>
+</div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/dashboard-prime/src/router/ProgressAndRankingRoutes.js b/dashboard-prime/src/router/ProgressAndRankingRoutes.js
@@ -4,8 +4,14 @@ import MyProjectSkillsPage from '@/components/myProgress/MyProjectSkillsPage.vue
 import QuizRun from '@/components/quiz/QuizRunInDashboard.vue';
 import DiscoverProjectsPage from '@/components/myProgress/discover/DiscoverProjectsPage.vue'
 import MyUsagePage from '@/components/myProgress/usage/MyUsagePage.vue'
+import MyBadges from '@/components/myProgress/badges/MyBadges.vue'
+import BadgeDetailsPage from '@/skills-display/components/badges/BadgeDetailsPage.vue'
+import SkillPage from '@/components/skills/SkillPage.vue'
 
 const createProgressAndRankingRoutes = (skillsDisplayChildRoutes) => {
+
+  const skillPlaceholder = '##SKILL##'
+
   return {
     path: '/progress-and-rankings',
     component: MyProgress,
@@ -73,7 +79,18 @@ const createProgressAndRankingRoutes = (skillsDisplayChildRoutes) => {
             message: 'Discover Projects',
           },
         },
-      }
+      }, {
+        name: 'MyBadges',
+        path: 'my-badges',
+        component: MyBadges,
+        meta: {
+          requiresAuth: true,
+          nonAdmin: true,
+          announcer: {
+            message: 'My Badges',
+          },
+        },
+      },
     ]
   }
 }

diff --git a/dashboard-prime/src/skills-display/UseSkillsDisplayInfo.js b/dashboard-prime/src/skills-display/UseSkillsDisplayInfo.js
@@ -78,12 +78,32 @@ export const useSkillsDisplayInfo = () => {
     return route.name === getContextSpecificRouteName('SubjectDetailsPage')
   })
   const isGlobalBadgePage = computed(() => {
-    return route.name === getContextSpecificRouteName('globalBadgeDetails')
+    return route.name === getContextSpecificRouteName('globalBadgeDetails') ||
+      route.name === 'globalBadgeDetails'
   })
 
-  const createToBadgeLink = (badge) => {
-    const name = badge.global ? 'globalBadgeDetails' : 'badgeDetails'
-    return { name: getContextSpecificRouteName(name), params: { badgeId: badge.badgeId } }
+  const createToBadgeLink = (badge, globalBadgeUnderProjectId = null) => {
+    let name = ''
+    const params = { badgeId: badge.badgeId }
+
+    if (badge.global) {
+      name = getContextSpecificRouteName('globalBadgeDetails')
+      if (!route.params.projectId) {
+        if (!globalBadgeUnderProjectId) {
+          throw new Error(`globalBadgeUnderProjectId is required for global badges, badgeId: [${badge.badgeId}]`)
+        }
+        params.projectId = globalBadgeUnderProjectId
+      }
+    } else {
+      name = getContextSpecificRouteName('badgeDetails')
+    }
+
+    if (badge.projectId) {
+      params.projectId = badge.projectId
+    }
+
+    const res = { name, params }
+    return res
   }
 
   const isDependency = () => {

diff --git a/dashboard-prime/src/skills-display/components/badges/BadgeCatalogItem.vue b/dashboard-prime/src/skills-display/components/badges/BadgeCatalogItem.vue
@@ -90,7 +90,7 @@ const otherUsersAchieved = computed(() => {
             <i :class="iconCss" style="font-size: 5rem;" />
             <placement-badge :badge="badge" class="mt-2" />
             <div v-if="badge.gem" class="text-muted text-orange-800">
-              <small>Expires {{ timeUtils.relativeTime(badge.endDate) }}</small>
+              <small aria-label="`This is a gem badge and it expires in ${timeUtils.relativeTime(badge.endDate)}`">Expires {{ timeUtils.relativeTime(badge.endDate) }}</small>
             </div>
             <div v-if="badge.global" class="text-muted">
               <small><b>Global Badge</b></small>
@@ -109,6 +109,9 @@ const otherUsersAchieved = computed(() => {
       <div class="flex-1">
         <div class="flex align-content-end">
           <div class="flex-1 text-2xl font-medium" data-cy="badgeTitle">
+            <div v-if="badge.projectName" class="text-color-secondary text-base" data-cy="badgeProjectName">
+              <span class="font-italic">Project:</span> {{ badge.projectName}}
+            </div>
             <highlighted-value :value="badge.badge" :filter="searchString" />
           </div>
           <div class="align-content-end">