#2490: on self report configure page fixed ability to collapse a conf…

…iguration; improved width of the components and added support for a responsive layout
NationalSecurityAgency · Jul 9, 2024 · c4000de · c4000de
1 parent feabfe9
commit c4000de
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 27 deletions.
diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfManager.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfManager.vue
@@ -62,11 +62,6 @@ const userTagConfLabel = computed(() => {
 });
 
 const toggleConfDetails = (dataToToggle) => {
-  // eslint-disable-next-line no-underscore-dangle
-  // data.value = data.value.map((item) => ({ ...item, _showDetails: data.item.userId === item.userId ? !item._showDetails : false }));
-  data.value.forEach((item) => {
-    collapseRow(item.userId);
-  })
   toggleRow(dataToToggle.userId);
 };
 
@@ -139,9 +134,6 @@ const updateTable = (basicTableInfo) => {
   data.value = res;
 };
 
-const removeTagConf = (removedConf) => {
-  removeConf(removedConf, 'tagConf');
-};
 
 const updatedConf = (newConf) => {
   const itemToUpdate = data.value.find((i) => i.userId === newConf.approverUserId);
@@ -267,10 +259,10 @@ const sortTable = (sortContext) => {
             <span class=""><i class="fas fa-users" :class="colors.getTextClass(2)" aria-hidden="true"/> Approval Workload</span>
           </template>
           <template #body="slotProps">
-            <div class="flex" :data-cy="`workloadCell_${slotProps.data.userId}`">
-              <div class="flex flex-1">
-                <div v-if="!slotProps.data.hasConf">
-                  <InputSwitch class="mr-2"
+            <div class="flex gap-2" :data-cy="`workloadCell_${slotProps.data.userId}`">
+              <div class="flex flex-1 gap-2 align-items-center">
+                <div v-if="!slotProps.data.hasConf" class="flex flex-1 gap-2 align-items-center">
+                  <InputSwitch
                       :aria-label="`Enable and disable fallback for ${slotProps.data.userId} approve`"
                       @update:modelValue="handleFallback($event, slotProps.data)"
                       data-cy="fallbackSwitch"
@@ -283,10 +275,10 @@ const sortTable = (sortContext) => {
                   <div v-for="tConf in slotProps.data.tagConf" :key="tConf.userTagValue">Users in <span class="font-italic text-secondary">{{tConf.userTagKeyLabel}}:</span> <span>{{tConf.userTagValue}}</span></div>
                 </div>
                 <div v-if="slotProps.data.userConf && slotProps.data.userConf.length > 0" >
-                  <Badge variant="success">{{slotProps.data.userConf.length}}</Badge> Specific User{{ slotProps.data.userConf.length > 1 ? 's' : '' }}
+                  <Tag variant="success">{{slotProps.data.userConf.length}}</Tag> Specific User{{ slotProps.data.userConf.length > 1 ? 's' : '' }}
                 </div>
                 <div v-if="slotProps.data.skillConf && slotProps.data.skillConf.length > 0" >
-                  <Badge variant="info">{{ slotProps.data.skillConf.length }}</Badge> Specific Skill{{ slotProps.data.skillConf.length  > 1 ? 's' : '' }}
+                  <Tag variant="info">{{ slotProps.data.skillConf.length }}</Tag> Specific Skill{{ slotProps.data.skillConf.length  > 1 ? 's' : '' }}
                 </div>
               </div>
               <div>

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSkill.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSkill.vue
@@ -178,13 +178,13 @@ const removeTagConf = (removedItem) => {
 </script>
 
 <template>
-  <Card>
+  <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader title="Split Workload By Skill"></SkillsCardHeader>
     </template>
     <template #content>
-      <div v-if="!(loadingMeta.skills || loadingMeta.subjects)" class="flex no-gutters mx-1">
-        <div class="flex flex-1 flex-column mx-1 mt-1 align-self-end">
+      <div v-if="!(loadingMeta.skills || loadingMeta.subjects)" class="flex gap-1 align-items-center pt-3 px-3 flex-column lg:flex-row">
+        <div class="flex flex-1 flex-column mx-1 mt-1 w-full">
           <div class="mb-1">Add a Single Skill</div>
           <skills-selector
               :disabled="selectedSubject !== null || loading"
@@ -196,10 +196,10 @@ const removeTagConf = (removedItem) => {
               :onlySingleSelectedValue="true"
               :warnBeforeRemoving="false"/>
         </div>
-        <div class="flex mx-1 text-center align-self-end">
-          <span class="mt-3">OR</span>
+        <div class="flex mx-1 text-center">
+          <span class="text-center">OR</span>
         </div>
-        <div class="flex flex-1 flex-column mx-1 mt-1 align-self-end">
+        <div class="flex flex-1 flex-column mx-1 mt-1 align-self-end w-full">
           <div class="mb-1">Add <b>ALL</b> Skills under a Subject</div>
           <subject-selector v-if="availableSubjects && availableSubjects.length > 0"
                             :disabled="(selectedSkills && selectedSkills.length > 0) || loading"
@@ -210,7 +210,7 @@ const removeTagConf = (removedItem) => {
                             :onlySingleSelectedValue="true"
                             :warnBeforeRemoving="false"/>
         </div>
-        <div class="mx-1 mt-1 text-center align-self-end">
+        <div class="mx-1 mt-1 text-center lg:align-self-end">
           <SkillsButton
               aria-label="Add Tag Value"
               @click="addSkillToConf"

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSpecificUsers.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfSpecificUsers.vue
@@ -106,12 +106,12 @@ const updateSelectedList = () => {
 </script>
 
 <template>
-  <Card>
+  <Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
     <template #header>
       <SkillsCardHeader title="Split Workload By Specific Users"></SkillsCardHeader>
     </template>
     <template #content>
-      <div class="flex mx-2">
+      <div class="flex px-3 pt-3 gap-2 flex-column md:flex-row align-items-center">
         <div class="flex flex-1 px-1">
           <existing-user-input
               class="w-full"
@@ -180,7 +180,7 @@ const updateSelectedList = () => {
         </SkillsDataTable>
 
         <no-content2 v-if="!hadData" title="Not Configured Yet..."
-                     class="my-5"
+                     class="py-5"
                      data-cy="noUserConf"
                      icon-size="fa-2x"
                      icon="fas fa-user-plus">

diff --git a/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfUserTag.vue b/dashboard-prime/src/components/skills/selfReport/SelfReportApprovalConfUserTag.vue
@@ -82,12 +82,12 @@ const removeTagConf = (removedIem) => {
 </script>
 
 <template>
-<Card>
+<Card :pt="{ body: { class: 'p-0' }, content: { class: 'p-0' } }">
   <template #header>
     <SkillsCardHeader :title="'Split Workload By ' + tagLabel"></SkillsCardHeader>
   </template>
   <template #content>
-    <div class="flex gap-2">
+    <div class="flex gap-2 px-3 pt-3">
       <div class="flex flex-1">
         <SkillsTextInput
             class="w-full"
@@ -151,7 +151,7 @@ const removeTagConf = (removedIem) => {
     </SkillsDataTable>
 
     <no-content2 v-if="!hadData" title="Not Configured Yet..."
-                 class="my-5"
+                 class="py-5"
                  icon-size="fa-2x"
                  data-cy="noTagKeyConf"
                  icon="fas fa-user-tag">