Merge pull request #2570 from NationalSecurityAgency/t#2490/primevue-…

…myBadges T#2490/primevue my badges
NationalSecurityAgency · Jun 11, 2024 · 16eac27 · 16eac27
2 parents 6eeca20 + 2e622ec
commit 16eac27
Show file tree

Hide file tree

Showing 52 changed files with 1,456 additions and 1,218 deletions.
diff --git a/.github/workflows/build-and-test.yml b/.github/workflows/build-and-test.yml
@@ -140,8 +140,7 @@ jobs:
       - name: Run Cypress tests
         run: |
           cd e2e-tests
-          ../.github/scripts/runSubsetOfCypressTests.sh -t 6 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|/inception|user_actions|configure-skill-expiration_spec|skill-expiration-table_spec|configure_video_spec|configure_video_features_spec|configure_skill_video_self_report_spec|configure_video_validation_spec|handle_video_without_duration_spec|client_display_video_on_subject_page_spec|client_display_video_on_skill_page_spec|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|my-usage_spec|performedSkills_table_spec|/error_pages_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/|/learning-path/|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver|/manage-my-projects_spec|/accessibility|/community/|/metrics/projectMetrics|/metrics/skillMetrics_spec|/metrics/subjectMetrics_spec|/projects_invite_only_spec|/app_features_spec|/breadcrumb_spec|/contact|/cross-project_spec|/discoverable_proj_invite_spec|/login_spec|/markdown_spec/metrics/multipleProjectMetrics_empty_spec|/metrics/multipleProjectMetrics_spec|/my-progress_breadcrumb_spec'
-          
+          ../.github/scripts/runSubsetOfCypressTests.sh -t 6 -c ${{ matrix.container }} -f 'projects_crud|/skills_table_spec|/skill_reuse_spec|quiz_creation|question_def|metrics-reUsedData_spec|quiz_and_survey|quiz_runs|quiz_skill_assignment|quiz_read|quiz_role|quiz_settings|quiz_skills-in_project_reuse|client-display_quiz_spec|client-display_quiz_theme_spec|client-display_quiz_visual_spec|client-display_run_quiz_spec|run_survey_spec|quiz_skills-catalog_spec|/inception|user_actions|configure-skill-expiration_spec|skill-expiration-table_spec|configure_video_spec|configure_video_features_spec|configure_skill_video_self_report_spec|configure_video_validation_spec|handle_video_without_duration_spec|client_display_video_on_subject_page_spec|client_display_video_on_skill_page_spec|/skills_spec|/users_spec|/subjects_spec|/levels_management_spec|/skills_group_spec|/skills_group_modal_spec|/move-skills/|/badges_spec|/skill-reuse/skill_reuse/|/catalog/|/project_settings_spec|/icon_manager_spec|/not_found_spec|my-usage_spec|/error_pages_spec|/add_skills_to_badge_spec|/tag-skills|/settings_spec|/client-display/|/learning-path/|/copy_project_spec|/project_errors_spec|/selfReport-approvalHistory_spec|/approver|/manage-my-projects_spec|/accessibility|/community/|/metrics/projectMetrics|/metrics/skillMetrics_spec|/metrics/subjectMetrics_spec|/projects_invite_only_spec|/app_features_spec|/breadcrumb_spec|/contact|/cross-project_spec|/discoverable_proj_invite_spec|/login_spec|/markdown_spec/metrics/multipleProjectMetrics_empty_spec|/metrics/multipleProjectMetrics_spec|/my-progress_breadcrumb_spec|/my-progress_spec|/my-progress-badges_spec|/navigation_spec|/progress_and_ranking_disabled_spec|/project_expiration_spec|performedSkills_table_spec'
           cd ..
         env:
           ELECTRON_EXTRA_LAUNCH_ARGS: '--disable-gpu'

diff --git a/dashboard-prime/src/components/access/RoleManager.vue b/dashboard-prime/src/components/access/RoleManager.vue
@@ -11,6 +11,8 @@ import Column from "primevue/column";
 import DataTable from "primevue/datatable";
 import { useColors } from '@/skills-display/components/utilities/UseColors.js'
 import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
+import { useRouter } from 'vue-router'
+import { userErrorState } from '@/stores/UserErrorState.js'
 
 // role constants
 const ROLE_APP_USER = 'ROLE_APP_USER';
@@ -26,6 +28,8 @@ const announcer = useSkillsAnnouncer();
 const userInfo = useUserInfo();
 const colors = useColors()
 const responsive = useResponsiveBreakpoints()
+const router = useRouter()
+const errorState = userErrorState()
 
 const emit = defineEmits(['role-added', 'role-deleted']);
 const props = defineProps({
@@ -191,7 +195,7 @@ function handleError(e) {
     errNotification.value.enable = true;
   } else {
     const errorMessage = (e.response && e.response.data && e.response.data.message) ? e.response.data.message : undefined;
-    // this.handlePush({ name: 'ErrorPage', query: { errorMessage } });
+    errorState.navToErrorPage('Failed to add User Role', errorMessage)
   }
 }
 

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/badges/Badges.vue b/dashboard-prime/src/components/badges/Badges.vue
@@ -26,7 +26,6 @@ const route = useRoute();
 const confirm = useConfirm();
 const elementHelper = useElementHelper()
 
-const subPageHeader = ref();
 let global = ref(false);
 let isLoadingData = ref(true);
 let badges = ref([]);
@@ -176,15 +175,6 @@ const newBadge = () => {
 
 const handleHidden = (e) => {
   displayNewBadgeModal.value = false;
-  if (!e || !e.update) {
-    handleFocus();
-  }
-};
-
-const handleFocus = () => {
-  nextTick(() => {
-    subPageHeader.value.focusOnActionButton();
-  });
 };
 
 const enableDragAndDrop = () => {

diff --git a/dashboard-prime/src/components/badges/global/GlobalBadges.vue b/dashboard-prime/src/components/badges/global/GlobalBadges.vue
@@ -101,18 +101,6 @@ const newBadge = () => {
   displayNewBadgeModal.value = true;
 };
 
-const handleHidden = (event) => {
-  if (!event || !event.update) {
-    handleFocus();
-  }
-};
-
-const handleFocus = () => {
-  nextTick(() => {
-    subPageHeader.value.focusOnActionButton();
-  });
-};
-
 const enableDropAndDrop = () => {
   if (badges.value && badges.value.length > 0) {
     nextTick(() => {
@@ -174,8 +162,7 @@ const sortOrderUpdate = (updateEvent) => {
     </loading-container>
 
     <edit-badge v-if="displayNewBadgeModal" v-model="displayNewBadgeModal" :badge="emptyNewBadge"
-                :global="true" @badge-updated="saveBadge"
-                @hidden="handleHidden"></edit-badge>
+                :global="true" @badge-updated="saveBadge"></edit-badge>
   </div>
 </template>
 

diff --git a/dashboard-prime/src/components/header/SettingsButton.vue b/dashboard-prime/src/components/header/SettingsButton.vue
@@ -36,16 +36,15 @@ if (appConfig.rankingAndProgressViewsEnabled) {
     },
     disabled: pagePath.isProgressAndRankingPage
   })
+  allItems.push({
+    label: 'Project Admin',
+    icon: 'fas fa-user-edit',
+    command: () => {
+      router.push({ path: pagePath.adminHomePage })
+    },
+    disabled: pagePath.isAdminPage
+  })
 }
-
-allItems.push({
-  label: 'Project Admin',
-  icon: 'fas fa-user-edit',
-  command: () => {
-    router.push({ path: pagePath.adminHomePage })
-  },
-  disabled: pagePath.isAdminPage
-})
 allItems.push({
   label: 'Settings',
   icon: 'fas fa-cog',

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' }" tabindex="-1">
+          <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/ContactOwnersDialog.vue b/dashboard-prime/src/components/myProgress/ContactOwnersDialog.vue
@@ -18,6 +18,10 @@ const props = defineProps({
   projectId: {
     type: String,
     required: true
+  },
+  saveButtonLabel: {
+    type: String,
+    default: 'Save'
   }
 })
 const schema = object({
@@ -26,6 +30,7 @@ const schema = object({
     .required()
     .min(10)
     .max(appConfig.maxContactOwnersMessageLength)
+    .customDescriptionValidator('Message')
     .label('Message')
 })
 const sent = ref(false)
@@ -50,7 +55,7 @@ const contactProjectAdmins = (values) => {
     :show-save-button="!sent"
     :save-data-function="contactProjectAdmins"
     :header="`Contact ${props.projectName ? props.projectName : 'Project'}`"
-    saveButtonLabel="Save"
+    :saveButtonLabel="saveButtonLabel"
     :validation-schema="schema"
     :enable-return-focus="true"
     :initialValues="{}"

diff --git a/dashboard-prime/src/components/myProgress/InfoSnapshotCard.vue b/dashboard-prime/src/components/myProgress/InfoSnapshotCard.vue
@@ -133,7 +133,7 @@ const projectsNotContributedToYet = computed(() => myProjects.value.length - myP
           projects!
         </div>
         <div class="flex-1 text-right">
-        <router-link :to="{ name: 'MyUsagePage' }">
+        <router-link :to="{ name: 'MyUsagePage' }" tabindex="-1">
           <SkillsButton
             label="Usage"
             icon="fas fa-chart-line"

diff --git a/dashboard-prime/src/components/myProgress/MyCurrentProjects.vue b/dashboard-prime/src/components/myProgress/MyCurrentProjects.vue
@@ -1,45 +1,27 @@
 <script setup>
 import { nextTick, onMounted, ref } from 'vue'
 import { useMyProgressState } from '@/stores/UseMyProgressState.js'
-import { useElementHelper } from '@/components/utils/inputForm/UseElementHelper.js';
+import { useElementHelper } from '@/components/utils/inputForm/UseElementHelper.js'
 import ProjectService from '@/components/projects/ProjectService.js'
 import ProjectLinkCard from '@/components/myProgress/ProjectLinkCard.vue'
 import Sortable from 'sortablejs'
+import SkillsSpinner from '@/components/utils/SkillsSpinner.vue'
 
 const myProgressState = useMyProgressState()
 const elementHelper = useElementHelper()
 const sortOrderLoading = ref(false)
 const sortOrderLoadingProjectId = ref(-1)
 
 const updateSortAndReloadProjects = (updateInfo) => {
-  const currentIndex = myProgressState.myProjects.sort((a, b) => {
-    if (a.displayOrder > b.displayOrder) {
-      return 1
-    }
-    if (b.displayOrder > a.displayOrder) {
-      return -1
-    }
-    return 0
-  })
-    .findIndex((item) => item.projectId === updateInfo.projectId)
+  const currentIndex = myProgressState.myProjects.findIndex((item) => item.projectId === updateInfo.projectId)
   const newIndex = updateInfo.direction === 'up' ? currentIndex - 1 : currentIndex + 1
-  projectOrderUpdate(updateInfo.projectId, newIndex)
-    .then(() => {
-
-    })
-  // if (newIndex >= 0 && (newIndex) < this.myProjects.length) {
-  //   this.loading = true
-  //   ProjectService.moveMyProject(updateInfo.projectId, newIndex)
-    // .finally(() => {
-    //   this.loadSummaryAndEnableSummary()
-    //     .then(() => {
-    //       const foundRef = this.$refs[`proj${updateInfo.projectId}`];
-    //       this.$nextTick(() => {
-    //         foundRef[0].focusSortControl();
-    //       });
-    //     });
-    // });
-  // }
+  if (newIndex >= 0 && newIndex < myProgressState.myProjects.length) {
+    projectOrderUpdate(updateInfo.projectId, newIndex)
+      .finally(() => {
+        const idToFocusOn = `sortControlHandle-${updateInfo.projectId}`
+        nextTick(() => document.getElementById(idToFocusOn)?.focus())
+      })
+  }
 }
 
 onMounted(() => {
@@ -58,50 +40,67 @@ const enableProjectDropAndDrop = () => {
             projectOrderUpdate(event.item.id, event.newIndex)
           }
         })
-      });
+      })
     })
   }
 }
 
 const projectOrderUpdate = (projectId, newIndex) => {
-  sortOrderLoadingProjectId.value = projectId;
-  sortOrderLoading.value = true;
+  sortOrderLoadingProjectId.value = projectId
+  sortOrderLoading.value = true
+
+  const currentProjects = myProgressState.myProjects
+  const currentIndex = currentProjects.findIndex((item) => item.projectId === projectId)
+
+  const itemToMove = currentProjects[currentIndex]
+  const updatedProjects = [...currentProjects]
+
+  updatedProjects.splice(currentIndex, 1)
+  updatedProjects.splice(newIndex, 0, itemToMove)
+
   return ProjectService.moveMyProject(projectId, newIndex)
     .finally(() => {
-      sortOrderLoading.value = false;
-    });
+      sortOrderLoading.value = false
+      myProgressState.myProjects = updatedProjects
+    })
 }
 
 </script>
 
 <template>
-  <div class="grid" id="projectCards">
-    <div v-for="(proj, index) in myProgressState.myProjects"
-         :key="proj.projectName"
-         :id="proj.projectId"
-         class="col">
-      <!--      <b-overlay :show="sortOrderLoading" rounded="sm" opacity="0.4">-->
-      <!--        <template #overlay>-->
-      <!--          <div class="text-center">-->
-      <!--            <div v-if="proj.projectId===sortOrderLoadingProjectId">-->
-      <!--              <div class="text-info text-uppercase mb-1">Updating sort order!</div>-->
-      <!--              <b-spinner label="Loading..." style="width: 3rem; height: 3rem;" variant="info" />-->
-      <!--            </div>-->
-      <!--          </div>-->
-      <!--        </template>-->
-
-      <project-link-card
+  <BlockUI :blocked="sortOrderLoading">
+    <skills-spinner :is-loading="true"
+                    v-if="sortOrderLoading"
+                    aria-label="Updating sort order"
+                    class="loading-indicator" />
+    <div class="grid" id="projectCards">
 
-        :ref="`proj${proj.projectId}`"
-        :display-order="index"
-        @sort-changed-requested="updateSortAndReloadProjects"
-        :proj="proj"
-        class="fadein animation-duration-500" />
-      <!--      </b-overlay>-->
+      <div v-for="(proj, index) in myProgressState.myProjects"
+           :key="proj.projectName"
+           :id="proj.projectId"
+           class="col">
+        <project-link-card
+          :ref="`proj${proj.projectId}`"
+          :display-order="index"
+          @sort-changed-requested="updateSortAndReloadProjects"
+          :proj="proj"
+          class="fadein animation-duration-500" />
+      </div>
     </div>
-  </div>
+  </BlockUI>
 </template>
 
 <style scoped>
-
+.loading-indicator {
+  position: absolute;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
 </style>