#2490 - added v-skills and v-skills-onMount directives

NationalSecurityAgency · May 10, 2024 · 6e8c763 · 6e8c763
1 parent 90e39cc
commit 6e8c763
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 17 deletions.
diff --git a/dashboard-prime/src/components/skills/AddSkillEvent.vue b/dashboard-prime/src/components/skills/AddSkillEvent.vue
@@ -60,7 +60,6 @@ const addButtonIcon = computed(() => {
 });
 
 const newUserObjNoSpacesValidatorInNonPkiMode = (value) => {
-  console.log(`vee-validating value: ${JSON.stringify(value)}`);
   if (pkiAuthenticated.value || !value.userId) {
     return true;
   }
@@ -124,7 +123,7 @@ const addSkill = () => {
           nextTick(() => announcer.polite(`Skill event has been added for ${userId}`));
         }
         usersAdded.value.push(historyObj);
-        // currentSelectedUser.value = null;
+        currentSelectedUser.value = null;
         resetForm();
       })
       .catch((e) => {
@@ -139,7 +138,7 @@ const addSkill = () => {
             key: currentSelectedUser.value.userId + new Date().getTime() + false,
           };
           usersAdded.value.push(historyObj);
-          // currentSelectedUser.value = null;
+          currentSelectedUser.value = null;
           resetForm();
         } else {
           const errorMessage = (e.response && e.response.data && e.response.data.message) ? e.response.data.message : undefined;
@@ -177,20 +176,14 @@ const addSkill = () => {
             <SkillsButton
                 aria-label="Add Specific User"
                 data-cy="addSkillEventButton"
+                v-skills="'ManuallyAddSkillEvent'"
                 @click="addSkill"
                 :disabled="!meta.valid || disable"
                 :icon="addButtonIcon" label="Add">
             </SkillsButton>
           </div>
         </div>
         <Message v-if="!isLoading && minPointsTooltip" severity="warn" :closable="false">{{ minPointsTooltip }}</Message>
-<!--        <div>-->
-<!--          <div>Errors: {{ JSON.stringify(errors) }}</div>-->
-<!--          <div>Meta: {{ JSON.stringify(meta) }}</div>-->
-<!--          <div>Values: {{ JSON.stringify(values) }}, disable {{ disable }}</div>-->
-<!--          <div>disable: {{ disable }}</div>-->
-<!--          <div>currentSelectedUser: {{ currentSelectedUser }}</div>-->
-<!--        </div>-->
         <div class="mt-2" v-for="(user) in reversedUsersAdded" v-bind:key="user.key" data-cy="addedUserEventsInfo">
           <div class="">
             <span :class="[user.success ? 'text-green-500' : 'text-red-500']" style="font-weight: bolder">

diff --git a/dashboard-prime/src/components/utils/ExistingUserInput.vue b/dashboard-prime/src/components/utils/ExistingUserInput.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useDebounceFn } from '@vueuse/core'
 import { useAppConfig } from '@/common-components/stores/UseAppConfig.js';
 import { useUserInfo } from '@/components/utils/UseUserInfo.js';
@@ -91,8 +91,11 @@ const onHideDropdown = () => {
     currentSelectedUser.value = value.value;
   }
 }
+const onClear = () => {
+  value.value = null;
+}
 const selectCurrentItem = () => {
-  // when the user presses enter search box (not on an option in the dropdown)
+  // when the user presses enter in the search box (not on an option in the dropdown)
   if (typeof currentSelectedUser.value === 'string') {
     let selectedItem = null
     if (currentSelectedUser.value) {
@@ -136,6 +139,9 @@ const suggestUrl = computed(() => {
   }
   return suggestUrl;
 })
+watch(() => props.modelValue, (newValue) => {
+  currentSelectedUser.value = newValue ? newValue.userId : null;
+});
 const getUserIdForDisplay = (user) => {
   if (!user.userIdForDisplay) {
     return user.userId;
@@ -156,7 +162,6 @@ const suggestUsers = (query) => {
         suggestions.value = suggestedUsers.filter((suggestedUser) => !props.excludedSuggestions.includes(suggestedUser.userId));
         suggestions.value = suggestions.value.map((suggestedUser) => {
           if (query === suggestedUser.userId) {
-            console.log(`query [${query}] matches existing user: ${suggestedUser.userId}`);
             queryMatchesExistingUser = true;
           }
           const label = getUserIdForDisplay(suggestedUser);
@@ -191,6 +196,7 @@ const suggestUsers = (query) => {
                     @keydown.enter="selectCurrentItem"
                     @complete="suggestUsersFromEvent"
                     @hide="onHideDropdown"
+                    @clear="onClear"
                     @dropdownClick="onShowDropdown">
         <template #option="slotProps">
           <div v-if="slotProps.option.isNewUser" class="flex flex-wrap align-options-center align-items-center">

diff --git a/dashboard-prime/src/components/utils/SkillsReporterDirective.js b/dashboard-prime/src/components/utils/SkillsReporterDirective.js
@@ -0,0 +1,50 @@
+import { useDebounceFn } from '@vueuse/core'
+import { SkillsReporter, SUCCESS_EVENT, FAILURE_EVENT } from '@skilltree/skills-client-js';
+import { useAppConfig } from '@/common-components/stores/UseAppConfig.js'
+
+export const useSkillsReporterDirective = () => {
+  const eventCache = new WeakMap();
+  const appConfig = useAppConfig()
+  const eventListener = (el, skillId) => useDebounceFn(() => {
+    SkillsReporter.reportSkill(skillId)
+      .then((result) => {
+        const event = new CustomEvent(SUCCESS_EVENT, { detail: result });
+        el.dispatchEvent(event);
+      })
+      .catch((error) => {
+        const event = new CustomEvent(FAILURE_EVENT, { detail: error });
+        el.dispatchEvent(event);
+      });
+  }, appConfig.formFieldDebounceInMs);
+
+  const vSkills = {
+    mounted: (el, binding) => {
+      const eventContext = {
+        name: binding.arg ? binding.arg : 'click',
+        handler: eventListener(el, binding.value),
+      };
+      el.addEventListener(eventContext.name, eventContext.handler);
+      eventCache.set(el, eventContext);
+    },
+    unmounted: (el) => {
+      const eventContext = eventCache.get(el);
+      setTimeout(() => {
+        el.removeEventListener(eventContext.name, eventContext.handler);
+        eventCache.delete(el);
+      });
+    }
+  }
+
+  const vSkillsOnMounted = {
+    mounted: (el, binding) => {
+      const {projectId, subjectId, skillId} = binding.value;
+      const skillsReporter = new SkillsReporter(projectId, subjectId, skillId);
+      skillsReporter.render(el);
+    },
+  }
+
+  return {
+    vSkills,
+    vSkillsOnMounted,
+  }
+}
diff --git a/dashboard-prime/src/main.js b/dashboard-prime/src/main.js
@@ -64,6 +64,7 @@ import SkillsTextarea from '@/components/utils/inputForm/SkillsTextarea.vue'
 import SkillsDropDown from '@/components/utils/inputForm/SkillsDropDown.vue'
 import SkillsDataTable from '@/components/utils/table/SkillsDataTable.vue'
 import SkillsCardHeader from '@/components/utils/cards/SkillsCardHeader.vue'
+import { useSkillsReporterDirective } from '@/components/utils/SkillsReporterDirective.js';
 
 import 'primeflex/primeflex.css'
 import '@fortawesome/fontawesome-free/css/all.css'
@@ -135,6 +136,9 @@ app.component('SkillsDropDown', SkillsDropDown)
 app.component('SkillsDataTable', SkillsDataTable)
 app.component('SkillsCardHeader', SkillsCardHeader)
 
+const skillsReporterDirective = useSkillsReporterDirective();
+app.directive('skills', skillsReporterDirective.vSkills);
+app.directive('skills-onMount', skillsReporterDirective.vSkillsOnMounted);
 app.directive('tooltip', Tooltip);
 app.directive('focustrap', FocusTrap);
 app.directive('badge', BadgeDirective);

diff --git a/e2e-tests/cypress/e2e/skills_spec.js b/e2e-tests/cypress/e2e/skills_spec.js
@@ -376,21 +376,21 @@ describe('Skills Tests', () => {
     cy.get('[data-cy="userIdInput"]').click().type('foo{enter}')
     cy.wait('@suggestUsers')
     cy.get(addButtonSelector).click();
-    // cy.wait('@addSkillEvent')
+    cy.wait('@addSkillEvent')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('Added points for')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('[foo]')
 
     cy.get('[data-cy="userIdInput"]').click().type('{selectall}bar{enter}')
     cy.wait('@suggestUsers')
     cy.get(addButtonSelector).click();
-    // cy.wait('@addSkillEvent')
+    cy.wait('@addSkillEvent')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('Added points for')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('[bar]')
 
     cy.get('[data-cy="userIdInput"]').click().type('{selectall}baz{enter}')
     cy.wait('@suggestUsers')
     cy.get(addButtonSelector).click();
-    // cy.wait('@addSkillEvent')  // TODO: uncomment this line once add v-skills directive back
+    cy.wait('@addSkillEvent')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('Added points for')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('[baz]')
 
@@ -444,7 +444,7 @@ describe('Skills Tests', () => {
     cy.get('.p-datepicker-group-container').contains('10').click()
 
     cy.get(addButtonSelector).click();
-    // cy.wait('@addSkillEvent') // TODO: uncomment this line once add v-skills directive back
+    cy.wait('@addSkillEvent')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('Added points for')
     cy.get('[data-cy="addedUserEventsInfo"]', { timeout: 5 * 1000 }).contains('[foo]')
     cy.get('[data-cy=nav-Users]').click()