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

…smallScreenImprovements

#2490: various small screen improvements

dashboard-prime/src/components/header/DashboardHeader.vue

@@ -25,12 +25,12 @@ const appInfoState = useAppInfoState()
     <!--      Any reported skills will be queued for application once the upgrade has completed.</span>-->
     <!--    </div>-->
     <div class="bg-primary-reverse">
-      <div class="flex flex-wrap pt-3 px-3 justify-content-center mb-3 border-bottom-1 border-200">
+      <div class="flex flex-wrap pt-3 px-3 pb-2 justify-content-center mb-3 border-bottom-1 border-200">
         <div class="flex-1 justify-content-center">
           <div class="flex">
             <router-link data-cy="skillTreeLogo" class="" to="/">
               <img
-                class="mb-5"
+                class="mb-3"
                 ref="skillTreeLogo"
                 src="@/assets/img/skilltree_logo_v1.png"
                 alt="skilltree logo" />

dashboard-prime/src/components/header/SkillsBreadcrumb.vue

@@ -261,7 +261,7 @@ const isQuizzesValueUnderProgressAndRanking = (value, items) => {
           <skills-breadcrumb-item
             :icon="item.icon"
             :label="item.label"
-            :show-separator="item.label && smallScreenMode"
+            :show-separator="item.value && smallScreenMode"
             :value="item.value" />
         </div>
       </template>

dashboard-prime/src/components/levels/Levels.vue

@@ -1,13 +1,15 @@
 <script setup>
-import {computed, nextTick, onMounted, ref} from 'vue';
-import {useRoute} from 'vue-router';
-import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue';
-import {useSkillsAnnouncer} from '@/common-components/utilities/UseSkillsAnnouncer.js'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import SubPageHeader from '@/components/utils/pages/SubPageHeader.vue'
+import { useSkillsAnnouncer } from '@/common-components/utilities/UseSkillsAnnouncer.js'
 import SettingService from '@/components/settings/SettingsService.js'
-import LevelService from './LevelService.js';
-import Column from "primevue/column";
-import {useConfirm} from "primevue/useconfirm";
-import NewLevel from './NewLevel.vue';
+import LevelService from './LevelService.js'
+import Column from 'primevue/column'
+import { useConfirm } from 'primevue/useconfirm'
+import NewLevel from './NewLevel.vue'
+import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
+import { useFocusState } from '@/stores/UseFocusState.js'
 
 const confirm = useConfirm();
 const announcer = useSkillsAnnouncer();
@@ -18,6 +20,7 @@ const props = defineProps({
     default: 25,
   },
 });
+const focusState = useFocusState()
 
 onMounted(() => {
   SettingService.getSetting(route.params.projectId, 'level.points.enabled')
@@ -146,14 +149,12 @@ const loadLevels = () => {
         .then((response) => {
           levels.value = response;
           table.value.options.busy = false;
-          handleFocusOnNextTick();
         });
   }
   return LevelService.getLevelsForProject(route.params.projectId)
       .then((response) => {
         levels.value = response;
         table.value.options.busy = false;
-        handleFocusOnNextTick();
       });
 };
 
@@ -168,7 +169,6 @@ const removeLastItem = () => {
                 msg: `Cannot remove level: [${lastLevel}].  This project level belongs to one or more global badges. Please contact a Supervisor to remove this dependency.`,
                 header: 'Unable to Delete'
               });
-              // msgOk(`Cannot remove level: [${lastLevel}].  This project level belongs to one or more global badges. Please contact a Supervisor to remove this dependency.`, 'Unable to delete');
             } else {
               confirmAndRemoveLastItem();
             }
@@ -190,6 +190,7 @@ const confirmAndRemoveLastItem = () => {
           table.value.options.busy = true;
           doRemoveLastItem().then(() => {
             loadLevels().then(() => {
+              focusState.focusOnLastElement()
               announcer.polite('Level has been removed');
             });
           }).catch((error) => {
@@ -246,43 +247,25 @@ const editLevel = (existingLevel) => {
   displayLevelModal.value = true;
 };
 
-const handleHidden = (e) => {
-  if (!e || !e.saved) {
-    handleFocus(e);
-  }
-};
-
-const handleFocusOnNextTick = () => {
-  if (currentlyFocusedLevelId.value) {
-    nextTick(() => handleFocus({ edit: true }));
-  }
-};
-
-const handleFocus = (e) => {
-  let ref = $refs.addLevel;
-  if (e && e.edit) {
-    const refName = `edit_${currentlyFocusedLevelId.value}`;
-    ref = $refs[refName];
-  }
-  currentlyFocusedLevelId.value = '';
-  nextTick(() => {
-    if (ref) {
-      ref.focus();
-    }
-  });
-};
+const responsive = useResponsiveBreakpoints()
+const isFlex = computed(() => responsive.sm.value)
 </script>
 
 <template>
   <div id="level-def-panel" ref="mainFocus">
     <sub-page-header title="Levels">
       <div class="row">
         <div class="col">
-<!--          <b-tooltip target="remove-button" title="You must retain at least one level." :disabled="!onlyOneLevelLeft"></b-tooltip>-->
           <span id="remove-button" class="mr-2">
-            <SkillsButton ref="removeNextLevel" @click="removeLastItem" :disabled="onlyOneLevelLeft" size="small"
-                      data-cy="removeLevel" icon="fas fa-trash-alt" label="Remove Highest">
-<!--              <span class="d-none d-sm-inline">Remove</span> Highest <i class="text-warning fas fa-trash-alt" aria-hidden="true"/>-->
+            <SkillsButton
+              id="removeHighestBtn"
+              ref="removeNextLevel"
+              @click="removeLastItem"
+              :disabled="onlyOneLevelLeft"
+              size="small"
+              :track-for-focus="true"
+              data-cy="removeLevel"
+              icon="fas fa-trash-alt" label="Remove Highest">
             </SkillsButton>
           </span>
 <!--          <b-tooltip target="add-button" title="Reached maximum limit of levels." :disabled="!reachedMaxLevels"></b-tooltip>-->
@@ -296,11 +279,11 @@ const handleFocus = (e) => {
       </div>
     </sub-page-header>
 
-    <Card>
+    <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
       <template #content>
         <SkillsDataTable tableStoredStateId="levels" v-if="!loading" :options="table.options" :loading="loading" :value="levels"
-                   data-cy="levelsTable" size="small" stripedRows>
-          <Column field="level" header="Level">
+                   data-cy="levelsTable" striped-rows>
+          <Column field="level" header="Level" :class="{'flex': isFlex }">
             <template #body="slotProps">
               {{ slotProps.data.level }}
               <span v-if="slotProps.data.achievable === false" class="icon-warning text-sm">
@@ -310,10 +293,10 @@ const handleFocus = (e) => {
               </span>
             </template>
           </Column>
-          <Column field="percent" header="Percent">
+          <Column field="percent" header="Percent" :class="{'flex': isFlex }">
             {{ slotProps.data.percent }}
           </Column>
-          <Column field="points" header="Points">
+          <Column field="points" header="Points" :class="{'flex': isFlex }">
             <template #body="slotProps">
                 <span v-if="slotProps.data.pointsFrom !== null && slotProps.data.pointsFrom !== undefined">
                   {{ slotProps.data.pointsFrom }} to
@@ -325,7 +308,7 @@ const handleFocus = (e) => {
                 </span>
             </template>
           </Column>
-          <Column field="edit" header="Edit">
+          <Column field="edit" header="Edit" :class="{'flex': isFlex }">
             <template #body="slotProps">
               <SkillsButton :ref="`edit_${ slotProps.data.level}`" @click="editLevel(slotProps.data)" size="small" data-cy="editLevelButton" icon="fas fa-edit" label="Edit" :track-for-focus="true" :id="`editLevelButton_${slotProps.data.level}`" />
             </template>
@@ -340,8 +323,7 @@ const handleFocus = (e) => {
                :level="levelToEdit"
                :level-as-points="levelsAsPoints"
                :is-edit="isEdit"
-               :all-levels="levels"
-               @hidden="handleHidden"></new-level>
+               :all-levels="levels"></new-level>
   </div>
 </template>
 

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

@@ -106,15 +106,6 @@ const warningMsgAboutPoints = computed(() => {
   return `Project has insufficient points assigned. Skills cannot be achieved until project has at least ${minimumPoints.value} points.`
 })
 
-const checkIfProjectBelongsToGlobalBadge = () => {
-  ProjectService.checkIfProjectBelongsToGlobalBadge(projectInternal.value.projectId)
-      .then((res) => {
-        if (res) {
-          deleteProjectDisabled.value = true;
-          deleteProjectToolTip.value = 'Cannot delete this project as it belongs to one or more global badges. Please contact a Supervisor to remove this dependency.';
-        }
-      });
-};
 const doDeleteProject = () => {
   ProjectService.checkIfProjectBelongsToGlobalBadge(projectInternal.value.projectId)
       .then((belongsToGlobal) => {
@@ -179,7 +170,7 @@ defineExpose({
   <div data-cy="projectCard" class="h-100">
     <Card :data-cy="`projectCard_${projectInternal.projectId}`" class="relative">
       <template #content>
-        <div class="flex flex-wrap"
+        <div class="flex flex-column sm:flex-row flex-wrap"
              :class="{
             'flex-column gap-1 justify-content-left': projectsState.shouldTileProjectsCards,
             '': !projectsState.shouldTileProjectsCards

dashboard-prime/src/components/skills/crossProjects/ShareSkillsWithOtherProjects.vue

@@ -162,15 +162,15 @@ const onShareWithAllProjects = (checked) => {
     <template #content>
       <!--      <loading-container :is-loading="loading.sharedSkillsInit || loading.allSkills || loading.projInfo">-->
       <no-content2 v-if="restrictedUserCommunity" title="Cannot Be Added" icon="fas fa-shield-alt"
-                   class="my-5" data-cy="restrictedUserCommunityWarning">
+                   class="my-5 mx-4" data-cy="restrictedUserCommunityWarning">
         This project's access is
         restricted to <b class="text-primary">{{ appConfig.userCommunityRestrictedDescriptor }}</b> users
         only and its skills <b class="text-primary">cannot</b> be added as dependencies in other Projects.
       </no-content2>
       <div v-if="!restrictedUserCommunity">
         <div class="p-3">
-          <div class="flex gap-4">
-            <div class="flex flex-1">
+          <div class="flex gap-4 flex-wrap flex-column lg:flex-row">
+            <div class="flex flex-1 ">
               <skills-selector :options="allSkills"
                                v-on:removed="onDeselectedSkill"
                                v-on:added="onSelectedSkill"
@@ -216,7 +216,7 @@ const onShareWithAllProjects = (checked) => {
                                v-on:skill-removed="deleteSharedSkill"></shared-skills-table>
         </div>
         <div v-else>
-          <no-content2 title="Not Selected Yet..." icon="fas fa-share-alt" class="my-5"
+          <no-content2 title="Not Selected Yet..." icon="fas fa-share-alt" class="p-5"
                        message="To make your project's skills eligible please select a skill and then the project that you want to share this skill with." />
         </div>
         <!--          </loading-container>-->

dashboard-prime/src/components/skills/crossProjects/SharedSkillsFromOtherProjects.vue

@@ -36,6 +36,7 @@ onMounted(() => {
       </div>
       <div v-else>
         <no-content2 title="No Skills Available Yet..." icon="far fa-handshake"
+                     class="p-5"
                      message="Coordinate with other projects to share skills with this project."></no-content2>
       </div>
     </template>

dashboard-prime/src/components/skills/crossProjects/SharedSkillsTable.vue

@@ -1,11 +1,14 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import Column from 'primevue/column'
+import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
 
 const props = defineProps(['sharedSkills', 'disableDelete'])
 const emit = defineEmits(['skill-removed'])
 const sortField = ref('')
 const sortOrder = ref(0)
+const responsive = useResponsiveBreakpoints()
+const isFlex = computed(() => responsive.lg.value)
 
 const loaded = ref(false)
 
@@ -35,29 +38,33 @@ const sortTable = (criteria) => {
   sortField.value = criteria.sortField
   sortOrder.value = criteria.sortOrder
 }
+
 </script>
 
 <template>
   <div id="shared-skills-table" v-if="sharedSkills && sharedSkills.length" data-cy="sharedSkillsTableDiv">
     <SkillsDataTable
       v-if="loaded" :value="sharedSkills" :sortField="sortField" :sortOrder="sortOrder" @sort="sortTable"
       data-cy="sharedSkillsTable" tableStoredStateId="sharedSkillsTable">
-      <Column field="skillName" header="Shared Skill" sortable>
+      <Column field="skillName" header="Shared Skill" sortable :class="{'flex': isFlex }">
         <template #body="slotProps">
           {{ slotProps.data.skillName }}
         </template>
       </Column>
-      <Column field="projectName" header="Project" sortable>
+      <Column field="projectName" header="Project" sortable :class="{'flex': isFlex }">
         <template #body="slotProps">
-          <div><i v-if="slotProps.data.sharedWithAllProjects" class="fas fa-globe text-secondary" />
-            {{ getProjectName(slotProps.data) }}
-          </div>
-          <div v-if="slotProps.data.projectName" class="text-secondary" style="font-size: 0.9rem;">ID:
-            {{ getProjectId(slotProps.data) }}
+          <div class="flex flex-column">
+            <div>
+              <i v-if="slotProps.data.sharedWithAllProjects" class="fas fa-globe text-secondary" />
+              {{ getProjectName(slotProps.data) }}
+            </div>
+            <div v-if="slotProps.data.projectName" class="text-secondary" style="font-size: 0.9rem;">ID:
+              {{ getProjectId(slotProps.data) }}
+            </div>
           </div>
         </template>
       </Column>
-      <Column field="remove" header="Remove" v-if="!disableDelete">
+      <Column field="remove" header="Remove" v-if="!disableDelete" :class="{'flex': isFlex }">
         <template #body="slotProps">
           <Button @click="onDeleteEvent(slotProps.data)"
                   variant="outline-info" size="small" class="text-info"

dashboard-prime/src/components/skills/dependencies/DependencyTable.vue

@@ -6,6 +6,7 @@ import SkillsService from '@/components/skills/SkillsService'
 import NoContent2 from '@/components/utils/NoContent2.vue'
 import Column from 'primevue/column'
 import { useProjConfig } from '@/stores/UseProjConfig.js'
+import { useResponsiveBreakpoints } from '@/components/utils/misc/UseResponsiveBreakpoints.js'
 
 const projConfig = useProjConfig();
 const props = defineProps(['isLoading', 'data'])
@@ -73,10 +74,13 @@ const sortTable = (criteria) => {
   sortField.value = criteria.sortField
   sortOrder.value = criteria.sortOrder
 }
+
+const responsive = useResponsiveBreakpoints()
+const isFlex = computed(() => responsive.sm.value)
 </script>
 
 <template>
-  <Card style="margin-bottom:10px;">
+  <Card class="mb-3" :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader title="Learning Path Routes"></SkillsCardHeader>
     </template>
@@ -93,17 +97,17 @@ const sortTable = (criteria) => {
           :sortOrder="sortOrder"
           @sort="sortTable"
           striped-rows>
-          <Column field="fromItem" header="From" sortable>
+          <Column field="fromItem" header="From" sortable :class="{'flex': isFlex }">
             <template #body="slotProps">
               <a :href="getUrl(slotProps.data.fromNode)">{{ slotProps.data.fromItem }}</a>
             </template>
           </Column>
-          <Column field="toItem" header="To" sortable>
+          <Column field="toItem" header="To" sortable :class="{'flex': isFlex }">
             <template #body="slotProps">
               <a :href="getUrl(slotProps.data.toNode)">{{ slotProps.data.toItem }}</a>
             </template>
           </Column>
-          <Column field="edit" header="Edit" v-if="!isReadOnlyProj">
+          <Column field="edit" header="Edit" v-if="!isReadOnlyProj" :class="{'flex': isFlex }">
             <template #body="slotProps">
               <Button @click="removeLearningPath(slotProps.data)"
                       variant="outline-info" size="small" class="text-info"

dashboard-prime/src/components/skills/dependencies/PrerequisiteSelector.vue

@@ -200,8 +200,8 @@ function validate(value, ctx) {
       <SkillsCardHeader title="Add a new item to the learning path"></SkillsCardHeader>
     </template>
     <template #content>
-      <div class="flex gap-2">
-        <div class="flex-1">
+      <div class="flex gap-2 flex-wrap flex-column lg:flex-row lg:align-items-end">
+        <div class="flex-1 field">
           <label for="learningItemFromInput">From:</label>
           <skills-selector :options="allSkills"
                            ref="fromSelector"
@@ -217,7 +217,7 @@ function validate(value, ctx) {
                            :showType=true
                            :onlySingleSelectedValue="true" />
         </div>
-        <div class="flex-1">
+        <div class="flex-1 field">
           <label for="learningItemToInput">To:</label>
           <skills-selector :options="allPotentialSkills"
                            ref="toSelector"
@@ -233,7 +233,7 @@ function validate(value, ctx) {
                            :showType=true
                            :onlySingleSelectedValue="true" />
         </div>
-        <div>
+        <div class="field text-center">
           <Button @click="onAddPath"
                   class="mt-3"
                   data-cy="addLearningPathItemBtn"