Merge pull request #2624 from NationalSecurityAgency/t#2490/various_d…

…isplay_issues

T#2490/various display issues

dashboard-prime/src/App.vue

@@ -126,22 +126,19 @@ const loadConfigs = () => {
   })
 }
 
-const showHeader = computed(() => {
-  return !skillsDisplayInfo.isSkillsClientPath() && authState.isAuthenticated
-})
-const isPkiAndNeedsToBootstrap = computed(() => {
-  return appConfig.isPkiAuthenticated && appConfig.needToBootstrap;
-})
-const inBootstrapMode = computed(() => {
-  return isPkiAndNeedsToBootstrap.value
-})
+const notSkillsClient = computed(() => !skillsDisplayInfo.isSkillsClientPath())
+const showHeader = computed(() => notSkillsClient.value && authState.isAuthenticated)
+const isPkiAndNeedsToBootstrap = computed(() => appConfig.isPkiAuthenticated && appConfig.needToBootstrap)
+const inBootstrapMode = computed(() => isPkiAndNeedsToBootstrap.value && notSkillsClient.value)
+const isCustomizableHeader = computed(() => notSkillsClient.value && !isLoadingApp.value && !inBootstrapMode.value)
+const isDashboardFooter = computed(() => notSkillsClient.value && !isLoadingApp.value && !inBootstrapMode.value)
 </script>
 
 <template>
   <div role="presentation" class="m-0">
     <VueAnnouncer class="sr-only" />
 
-    <customizable-header v-if="!isLoadingApp && !inBootstrapMode" role="region" aria-label="dynamic customizable header"></customizable-header>
+    <customizable-header v-if="isCustomizableHeader" role="region" aria-label="dynamic customizable header"></customizable-header>
     <div id="skilltree-main-container">
       <div v-if="isLoadingApp" role="main" class="text-center">
         <skills-spinner :is-loading="true" class="mt-8 text-center"/>
@@ -162,8 +159,8 @@ const inBootstrapMode = computed(() => {
       </div>
     </div>
     <ConfirmDialog></ConfirmDialog>
-    <dashboard-footer v-if="!isLoadingApp && !inBootstrapMode" role="region" />
-    <customizable-footer v-if="!isLoadingApp && !inBootstrapMode" role="region" aria-label="dynamic customizable footer"></customizable-footer>
+    <dashboard-footer v-if="isDashboardFooter" role="region" />
+    <customizable-footer v-if="isDashboardFooter" role="region" aria-label="dynamic customizable footer"></customizable-footer>
     <!--    <scroll-to-top v-if="!isScrollToTopDisabled && !inBootstrapMode" />-->
   </div>
 </template>

dashboard-prime/src/components/badges/Badges.vue

@@ -283,9 +283,9 @@ const toDate = (value) => {
     <loading-container v-bind:is-loading="isLoading">
 <!--      <transition name="projectContainer" enter-active-class="animated fadeIn">-->
         <div>
-          <div v-if="badges && badges.length" id="badgeCards" class="flex flex-wrap align-items-center justify-content-center">
-            <div v-for="(badge) of badges" :id="badge.badgeId" :key="badge.badgeId" class="lg:col-4 mb-3"  style="min-width: 23rem;">
-              <BlockUI :blocked="sortOrder.loading">
+          <div v-if="badges && badges.length" id="badgeCards" class="flex flex-wrap gap-3 align-items-stretch justify-content-center">
+            <div v-for="(badge) of badges" :id="badge.badgeId" :key="badge.badgeId" class="flex align-items-stretch"  style="min-width: 23rem;">
+              <BlockUI :blocked="sortOrder.loading" class="flex align-items-stretch h-full">
                 <div class="absolute z-5 top-50 w-full text-center" v-if="sortOrder.loading" :data-cy="`${badge.badgeId}_overlayShown`">
                   <div v-if="badge.badgeId===sortOrder.loadingBadgeId" data-cy="updatingSortMsg">
                     <div class="text-info text-uppercase mb-1">Updating sort order!</div>
@@ -297,6 +297,7 @@ const toDate = (value) => {
                        :ref="(el) => (badgeRef[badge.badgeId] = el)"
                        @badge-updated="badgeUpdated"
                        @badge-deleted="deleteBadge"
+                       class="flex align-items-stretch"
                        @sort-changed-requested="updateSortAndReloadSubjects"
                        @publish-badge="publishBadge"
                        :disable-sort-control="badges.length === 1"/>

dashboard-prime/src/components/badges/global/GlobalBadges.vue

@@ -14,17 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 <script setup>
-import { ref, nextTick, computed, onMounted } from 'vue';
-import Sortable from 'sortablejs';
-import SubPageHeader from "@/components/utils/pages/SubPageHeader.vue";
-import GlobalBadgeService from "@/components/badges/global/GlobalBadgeService.js";
+import { computed, nextTick, onMounted, ref } from 'vue'
+import Sortable from 'sortablejs'
+import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue'
+import GlobalBadgeService from '@/components/badges/global/GlobalBadgeService.js'
 import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
-import EditBadge from "@/components/badges/EditBadge.vue";
-import LoadingContainer from "@/components/utils/LoadingContainer.vue";
-import NoContent2 from "@/components/utils/NoContent2.vue";
-import SkillsBadge from '@/components/badges/Badge.vue'
-import { useConfirm } from 'primevue/useconfirm';
-import SkillsSpinner from "@/components/utils/SkillsSpinner.vue";
+import EditBadge from '@/components/badges/EditBadge.vue'
+import NoContent2 from '@/components/utils/NoContent2.vue'
+import Badge from '@/components/badges/Badge.vue'
+import { useConfirm } from 'primevue/useconfirm'
+import SkillsSpinner from '@/components/utils/SkillsSpinner.vue'
 
 const confirm = useConfirm();
 const announcer = useSkillsAnnouncer();
@@ -204,8 +203,8 @@ const handleFocus = () => {
         <div v-if="(!badges || badges.length === 0) && isLoading">
           <skills-spinner :is-loading="isLoading" label="Loading..." style="width: 3rem; height: 3rem;" variant="info"/>
         </div>
-        <div v-if="badges && badges.length" id="badgeCards" class="flex flex-wrap align-items-center justify-content-center">
-          <div v-for="(badge) of badges" :id="badge.badgeId" :key="badge.badgeId" class="lg:col-4 mb-3"  style="min-width: 23rem;">
+        <div v-if="badges && badges.length" id="badgeCards" class="flex flex-wrap gap-3 align-items-stretch justify-content-center">
+          <div v-for="(badge) of badges" :id="badge.badgeId" :key="badge.badgeId" style="min-width: 23rem;">
             <BlockUI :blocked="sortOrder.loading">
               <div class="absolute z-5 top-50 w-full text-center" v-if="sortOrder.loading" :data-cy="`${badge.badgeId}_overlayShown`">
                 <div v-if="badge.badgeId===sortOrder.loadingBadgeId" data-cy="updatingSortMsg">
@@ -214,10 +213,11 @@ const handleFocus = () => {
                 </div>
               </div>
 
-              <SkillsBadge :badge="badge" :global="true"
+              <badge :badge="badge" :global="true"
                            @badge-updated="saveBadge"
                            @badge-deleted="deleteBadge"
                            @publish-badge="publishBadge"
+                           class="flex align-items-stretch"
                            @sort-changed-requested="sortOrderUpdate"
                            :ref="(el) => (badgeRef[badge.badgeId] = el)"
                            :disable-sort-control="badges.length === 1"/>

dashboard-prime/src/components/myProgress/LastEarnedCard.vue

@@ -40,22 +40,22 @@ const getFooterText = () => {
 </script>
 
 <template>
-  <my-progress-info-card-util title="Earned">
+  <my-progress-info-card-util title="Earned" style="min-width: 24rem">
     <template #left-content>
       <i class="fas fa-calendar-alt mt-1 mb-2 text-bluegray-600" style="font-size: 5rem;" />
     </template>
     <template #right-content>
-      <div class="pt-2 pr-3">
+      <div class="pt-2 pr-3 text-left">
         <div v-if="myProgress.mostRecentAchievedSkill !== null" data-cy="mostRecentAchievedSkill">
           <span>Last Achieved skill</span>
           <Tag severity="success">{{ timeUtils.timeFromNow(myProgress.mostRecentAchievedSkill) }}</Tag>
         </div>
         <div class="my-2" data-cy="numAchievedSkillsLastWeek">
-          <Tag severity="info" style="font-size: 1rem;">{{ myProgress.numAchievedSkillsLastWeek }} skills</Tag>
+          <Tag severity="info" style="font-size: 1rem;">{{ myProgress.numAchievedSkillsLastWeek }}</Tag> skills
           in the last week
         </div>
         <div class="my-2" data-cy="numAchievedSkillsLastMonth">
-          <Tag severity="info" style="font-size: 1rem;">{{ myProgress.numAchievedSkillsLastMonth }} skills</Tag>
+          <Tag severity="info" style="font-size: 1rem;">{{ myProgress.numAchievedSkillsLastMonth }}</Tag> skills
           in the last month
         </div>
       </div>

dashboard-prime/src/components/myProgress/MyProgressInfoCardUtil.vue

@@ -20,25 +20,27 @@ defineProps({
 </script>
 
 <template>
-  <Card :pt="{ footer: { class: 'p-0 h-6rem' }, content: { class: 'p-0' }, body: { class: 'p-0' } }" class="h-full">
+  <Card :pt="{  content: { class: 'p-0' }, body: { class: 'p-3' } }" class="h-full">
     <template #content>
-      <div class="flex h-full gap-2">
-        <div class="flex-1 pl-3 pt-3">
-          <div class="uppercase">
-            <slot name="title">{{ title }}</slot>
+      <div class="flex flex-column" style="height: 16rem;">
+        <div class="flex flex-1 gap-2">
+          <div class="flex-1 pl-3 pt-3">
+            <div class="uppercase">
+              <slot name="title">{{ title }}</slot>
+            </div>
+            <div class="mt-2">
+              <slot name="left-content"></slot>
+            </div>
           </div>
-          <div class="mt-2">
-            <slot name="left-content"></slot>
+          <div class="pr-3 text-right">
+            <slot name="right-content"></slot>
           </div>
         </div>
-        <div class="pr-3 text-right">
-          <slot name="right-content"></slot>
-        </div>
-      </div>
-      <div>
-        <Divider />
-        <div class="px-3 pb-3">
-          <slot name="footer"></slot>
+        <div>
+          <Divider />
+          <div class="px-3 pb-3" style="height: 4rem;">
+            <slot name="footer"></slot>
+          </div>
         </div>
       </div>
     </template>

dashboard-prime/src/components/myProgress/MyProgressPage.vue

@@ -55,7 +55,7 @@ onMounted(() => {
           <div class="flex-1">
             <info-snapshot-card />
           </div>
-          <div class="flex-1 h-full">
+          <div class="flex-1">
             <num-skills />
           </div>
           <div class="flex-1">

dashboard-prime/src/components/myProgress/NumSkills.vue

@@ -66,7 +66,7 @@ const chartOptions = {
 </script>
 
 <template>
-  <my-progress-info-card-util title="Skills">
+  <my-progress-info-card-util title="Skills" style="min-width: 20rem">
     <template #left-content>
       <div>
         <div class="text-4xl text-orange-500" data-cy="numAchievedSkills">{{ myProgress.numAchievedSkills }}</div>
@@ -79,7 +79,7 @@ const chartOptions = {
       <apexchart type="line" height="140" :options="chartOptions" :series="series"></apexchart>
     </template>
     <template #footer>
-      <span data-cy="num-skills-footer" class="line-height-4">So many skills... so little time! Good luck!</span>
+      <span data-cy="num-skills-footer" class="">So many skills... so little time! Good luck!</span>
     </template>
   </my-progress-info-card-util>
 </template>

dashboard-prime/src/components/projects/MyProject.vue

@@ -23,18 +23,14 @@ import ProjectService from '@/components/projects/ProjectService'
 import SettingsService from '@/components/settings/SettingsService'
 import ProjectCardFooter from '@/components/projects/ProjectCardFooter.vue'
 import ProjectCardControls from '@/components/projects/ProjectCardControls.vue'
-import SkillsSpinner from '@/components/utils/SkillsSpinner.vue'
 import UserRolesUtil from '@/components/utils/UserRolesUtil'
-import dayjs from '@/common-components/DayJsCustomizer.js'
 import EditProject from '@/components/projects/EditProject.vue'
 import RemovalValidation from '@/components/utils/modal/RemovalValidation.vue'
 import { useAccessState } from '@/stores/UseAccessState.js'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
-import ReminderMessage from '@/components/utils/misc/ReminderMessage.vue'
 import { useNumberFormat } from '@/common-components/filter/UseNumberFormat.js'
 import ProjectExpirationWarning from '@/components/projects/ProjectExpirationWarning.vue'
-import {useConfirm} from "primevue/useconfirm";
-import GlobalBadgeService from "@/components/badges/global/GlobalBadgeService.js";
+import { useConfirm } from 'primevue/useconfirm'
 import { useAdminProjectsState } from '@/stores/UseAdminProjectsState.js'
 
 const props = defineProps(['project', 'disableSortControl'])
@@ -113,13 +109,6 @@ const createCardOptions = () => {
     icon: 'fas fa-award skills-color-badges',
   }];
 };
-const warningMsgAboutPoints = computed(() => {
-  const shouldWarn = (projectInternal.value.totalPoints + projectInternal.value.totalPointsReused) < minimumPoints.value
-  if (!shouldWarn) {
-    return null
-  }
-  return `Project has insufficient points assigned. Skills cannot be achieved until project has at least ${minimumPoints.value} points.`
-})
 
 const doDeleteProject = () => {
   ProjectService.checkIfProjectBelongsToGlobalBadge(projectInternal.value.projectId)
@@ -182,13 +171,13 @@ defineExpose({
 </script>
 
 <template>
-  <div data-cy="projectCard" class="h-100">
-    <Card :data-cy="`projectCard_${projectInternal.projectId}`" class="relative">
+  <div data-cy="projectCard" class="h-full">
+    <Card :data-cy="`projectCard_${projectInternal.projectId}`" class="relative h-full">
       <template #content>
-        <div class="flex flex-column sm:flex-row flex-wrap"
+        <div class="flex flex-column"
              :class="{
-            'flex-column gap-1 justify-content-left': projectsState.shouldTileProjectsCards,
-            '': !projectsState.shouldTileProjectsCards
+            'gap-1 justify-content-left': projectsState.shouldTileProjectsCards,
+            'gap-2 sm:flex-row flex-wrap': !projectsState.shouldTileProjectsCards
           }">
           <div class="text-truncate">
             <router-link
@@ -264,11 +253,6 @@ defineExpose({
         </div>
 
         <project-expiration-warning :project="projectInternal" @extended="projectInternal.expiring = false" />
-        <ReminderMessage
-          v-if="warningMsgAboutPoints"
-          :id="`projectCardWarning_${projectInternal.projectId}`"
-          data-cy="projectCardWarning"
-          severity="info">{{ warningMsgAboutPoints}}</ReminderMessage>
 
         <div v-if="!disableSortControl"
              :id="`sortControl_${project.projectId}`"

dashboard-prime/src/components/projects/MyProjects.vue

@@ -295,7 +295,7 @@ const hasData = computed(() => {
             '': !projectsState.shouldTileProjectsCards
             }"
            :id="project.projectId">
-        <BlockUI :blocked="sortOrder.loading">
+        <BlockUI :blocked="sortOrder.loading" class="h-full">
           <div v-if="sortOrder.loading"
                class="text-center loading-indicator"
                :data-cy="`${project.projectId}_overlayShown`">

dashboard-prime/src/components/projects/ProjectCardControls.vue

@@ -29,24 +29,25 @@ const isRootUser = computed(() => accessState.isRoot)
 </script>
 
 <template>
-  <div class="flex flex-wrap"
+  <div class="flex flex-wrap" style="min-width: 20rem"
     :class="{
-      'justify-content-left': projectsState.shouldTileProjectsCards,
+      'flex-column gap-2 justify-content-center align-items-center': projectsState.shouldTileProjectsCards,
       'justify-content-end': !projectsState.shouldTileProjectsCards
     }">
-    <router-link :to="{ name:'Subjects', params: { projectId: project.projectId }}">
+    <div>
+      <router-link :to="{ name:'Subjects', params: { projectId: project.projectId }}">
+        <SkillsButton
+            size="small"
+            class="mr-2"
+            outlined
+            severity="info"
+            :data-cy="'projCard_' + project.projectId + '_manageBtn'"
+            :label="readOnlyProject ? 'View' : 'Manage'"
+            icon="fas fa-arrow-circle-right"
+            :aria-label="'manage project + project.name'">
+        </SkillsButton>
+      </router-link>
       <SkillsButton
-          size="small"
-          class="mr-2"
-          outlined
-          severity="info"
-          :data-cy="'projCard_' + project.projectId + '_manageBtn'"
-          :label="readOnlyProject ? 'View' : 'Manage'"
-          icon="fas fa-arrow-circle-right"
-          :aria-label="'manage project + project.name'">
-      </SkillsButton>
-    </router-link>
-    <SkillsButton
       v-if="isRootUser"
       outlined
       severity="info"
@@ -59,6 +60,7 @@ const isRootUser = computed(() => accessState.isRoot)
       icon="fas fa-ban"
       :aria-pressed="project.pinned">
     </SkillsButton>
+    </div>
     <ButtonGroup class="mr-2 p-0 flex" v-if="!readOnlyProject">
       <SkillsButton
         :id="`editProjBtn${project.projectId}`"

dashboard-prime/src/components/projects/ProjectCardFooter.vue

@@ -48,15 +48,15 @@ const numIssuesForDisplay = computed(() => {
   <div class="text-right">
     <div class="flex"
          :class="{
-            'flex-column gap-2 justify-content-left': projectsState.shouldTileProjectsCards,
+            'flex-column gap-2 justify-content-center align-items-center': projectsState.shouldTileProjectsCards,
             '': !projectsState.shouldTileProjectsCards
           }">
       <div class="flex-1 text-left small" data-cy="ProjectCardFooter_issues">
-        <i class="fas fa-user-shield text-success" style="font-size: 1.05rem;" aria-hidden="true"></i> <i>Role:</i> <span data-cy="userRole">{{ userRoleForDisplay }}</span>
+        <i class="fas fa-user-shield text-purple-500" style="font-size: 1.05rem;" aria-hidden="true"></i> <i>Role:</i> <span data-cy="userRole">{{ userRoleForDisplay }}</span>
         <span v-if="!isReadOnlyProj" class="ml-2">
-          <span v-if="!hasIssues"><i class="fas fa-check-circle text-success" style="font-size: 1rem;"
+          <span v-if="!hasIssues"><i class="fas fa-check-circle text-green-500" style="font-size: 1rem;"
                                      aria-hidden="true"></i> <span data-cy="noIssues">No Issues</span></span>
-          <span v-if="hasIssues"><i class="fas fa-exclamation-triangle text-danger" style="font-size: 1rem;"
+          <span v-if="hasIssues"><i class="fas fa-exclamation-triangle text-red-500" style="font-size: 1rem;"
                                     aria-hidden="true"></i>
             There {{ numIssues > 1 ? 'are' : 'is' }} <span style="font-size: 1rem;"><Badge variant="danger">{{ numIssuesForDisplay }}</Badge></span> {{ numIssues > 1 ? 'issues' : 'issue' }} to address </span>
         </span>

dashboard-prime/src/components/settings/SystemSettings.vue

@@ -112,8 +112,8 @@ function loadSystemSettings() {
 
       <SkillsTextInput name="resetTokenExpiration" label="Token Expiration" is-required>
         <template #footer>
-          <div>
-            <small class="text-info" id="resetTokenExpirationFormat">supports ISO 8601 time duration format, e.g., 2H, 30M, 1H30M, 1M42S, etc</small>
+          <div class="w-full">
+            <small class="text-info" id="resetTokenExpirationFormat"><i class="fas fa-exclamation-circle" aria-hidden="true" /> supports ISO 8601 time duration format, e.g., 2H, 30M, 1H30M, 1M42S, etc</small>
           </div>
         </template>
       </SkillsTextInput>

dashboard-prime/src/components/subjects/Subjects.vue

@@ -189,7 +189,7 @@ const sortOrderUpdate = (updateEvent) => {
                        :aria-label="'new subject'"/>
       <jump-to-skill />
       <div v-if="subjectsState.subjects && subjectsState.subjects.length" class="flex flex-wrap gap-3 align-items-stretch justify-content-center" id="subjectCards" data-cy="subjectCards">
-        <div v-for="(subject) of subjectsState.subjects" :key="subject.subjectId" :id="subject.subjectId" class="flex align-items-stretch" style="min-width: 23rem;" :data-cy="`${subject.subjectId}_card`">
+        <div v-for="(subject) of subjectsState.subjects" :key="subject.subjectId" :id="subject.subjectId" class="flex align-items-stretch" :data-cy="`${subject.subjectId}_card`">
           <div>
             <BlockUI :blocked="sortOrder.loading" class="flex align-items-stretch h-full">
                 <div class="absolute z-5 top-50 w-full text-center" v-if="sortOrder.loading" :data-cy="`${subject.subjectId}_overlayShown`">