Merge branch 'LB-222' into 'master'

Lb 222: update filter

See merge request platform-one/products/bullhorn/launchboard-fe!122

package-lock.json

@@ -3800,16 +3800,36 @@
       }
     },
     "@vue/cli-plugin-e2e-cypress": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-cypress/-/cli-plugin-e2e-cypress-4.5.11.tgz",
-      "integrity": "sha512-0SjUlNpjXHyZRdBMrOSsSuWDIi4DyRVmJhkkBLUpGHJt1SSyWOY70NRfemhef2yJZVWyFA4GjN9Mn6xYAH6z/w==",
+      "version": "4.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-cypress/-/cli-plugin-e2e-cypress-4.5.13.tgz",
+      "integrity": "sha512-7AyqCgDqgCj93QxkJYJG5YuXW07enHAYCdGZHPBHZKniIiq8VfvA6/ZT6TTU7DRr2/QxoIbXtbGnmNyDF/Urww==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.5.11",
+        "@vue/cli-shared-utils": "^4.5.13",
         "cypress": "^3.8.3",
         "eslint-plugin-cypress": "^2.10.3"
       },
       "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "4.5.13",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.13.tgz",
+          "integrity": "sha512-HpnOrkLg42RFUsQGMJv26oTG3J3FmKtO2WSRhKIIL+1ok3w9OjGCtA3nMMXN27f9eX14TqO64M36DaiSZ1fSiw==",
+          "dev": true,
+          "requires": {
+            "@hapi/joi": "^15.0.1",
+            "chalk": "^2.4.2",
+            "execa": "^1.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^5.1.1",
+            "node-ipc": "^9.1.1",
+            "open": "^6.3.0",
+            "ora": "^3.4.0",
+            "read-pkg": "^5.1.1",
+            "request": "^2.88.2",
+            "semver": "^6.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
         "bluebird": {
           "version": "3.5.0",
           "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.0.tgz",
@@ -3863,35 +3883,6 @@
             "yauzl": "2.10.0"
           },
           "dependencies": {
-            "lodash": {
-              "version": "4.17.21",
-              "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-              "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-              "dev": true
-            },
-            "minimist": {
-              "version": "1.2.5",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-              "dev": true
-            },
-            "moment": {
-              "version": "2.24.0",
-              "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-              "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
-              "dev": true
-            }
-          }
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
             "execa": {
               "version": "0.10.0",
               "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
@@ -3907,16 +3898,16 @@
                 "strip-eof": "^1.0.0"
               }
             },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+            "lodash": {
+              "version": "4.17.21",
+              "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+              "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
               "dev": true
             },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+            "minimist": {
+              "version": "1.2.5",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
               "dev": true
             },
             "request": {
@@ -3946,6 +3937,46 @@
                 "tunnel-agent": "^0.6.0",
                 "uuid": "^3.3.2"
               }
+            }
+          }
+        },
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "get-stream": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
+          "dev": true
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "moment": {
+          "version": "2.24.0",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+          "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+          "dev": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         },
         "tough-cookie": {
           "version": "2.4.3",
@@ -6231,6 +6262,15 @@
             "to-regex-range": "^5.0.1"
           }
         },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
         "is-number": {
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -6978,13 +7018,12 @@
           }
         },
         "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
           "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
+            "is-glob": "^4.0.1"
           },
           "dependencies": {
             "is-glob": {
@@ -9151,6 +9190,15 @@
             "estraverse": "^4.1.1"
           }
         },
+        "glob-parent": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
         "globals": {
           "version": "12.4.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
@@ -9264,9 +9312,9 @@
       }
     },
     "eslint-plugin-cypress": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.2.tgz",
-      "integrity": "sha512-1SergF1sGbVhsf7MYfOLiBhdOg6wqyeV9pXUAIDIffYTGMN3dTBQS9nFAzhLsHhO+Bn0GaVM1Ecm71XUidQ7VA==",
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.3.tgz",
+      "integrity": "sha512-hOoAid+XNFtpvOzZSNWP5LDrQBEJwbZwjib4XJ1KcRYKjeVj0mAmPmucG4Egli4j/aruv+Ow/acacoloWWCl9Q==",
       "dev": true,
       "requires": {
         "globals": "^11.12.0"
@@ -9774,6 +9822,11 @@
             "pend": "~1.2.0"
           }
         },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        },
         "mkdirp": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -9841,13 +9894,12 @@
       },
       "dependencies": {
         "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
           "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
+            "is-glob": "^4.0.1"
           },
           "dependencies": {
             "is-glob": {
@@ -10306,15 +10358,6 @@
         "path-is-absolute": "^1.0.0"
       }
     },
-    "glob-parent": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
-      "dev": true,
-      "requires": {
-        "is-glob": "^4.0.1"
-      }
-    },
     "glob-to-regexp": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
@@ -11634,8 +11677,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
     },
     "is-finite": {
       "version": "1.1.0",
@@ -14944,12 +14986,6 @@
       "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==",
       "dev": true
     },
-    "path-dirname": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-      "dev": true
-    },
     "path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -18984,6 +19020,17 @@
             "merge2": "^1.3.0",
             "micromatch": "^4.0.2",
             "picomatch": "^2.2.1"
+          },
+          "dependencies": {
+            "glob-parent": {
+              "version": "5.1.2",
+              "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+              "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+              "dev": true,
+              "requires": {
+                "is-glob": "^4.0.1"
+              }
+            }
           }
         },
         "file-entry-cache": {
@@ -20908,6 +20955,18 @@
             "path-is-absolute": "^1.0.0",
             "readdirp": "^2.2.1",
             "upath": "^1.1.1"
+          },
+          "dependencies": {
+            "glob-parent": {
+              "version": "5.1.2",
+              "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+              "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "is-glob": "^4.0.1"
+              }
+            }
           }
         },
         "fsevents": {
@@ -20922,22 +20981,17 @@
           }
         },
         "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-          "dev": true,
-          "optional": true,
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
+            "is-glob": "^4.0.1"
           },
           "dependencies": {
             "is-glob": {
               "version": "3.1.0",
               "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
               "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-              "dev": true,
-              "optional": true,
               "requires": {
                 "is-extglob": "^2.1.0"
               }
@@ -21232,6 +21286,17 @@
             "path-is-absolute": "^1.0.0",
             "readdirp": "^2.2.1",
             "upath": "^1.1.1"
+          },
+          "dependencies": {
+            "glob-parent": {
+              "version": "5.1.2",
+              "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+              "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+              "dev": true,
+              "requires": {
+                "is-glob": "^4.0.1"
+              }
+            }
           }
         },
         "fsevents": {
@@ -21246,20 +21311,17 @@
           }
         },
         "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-          "dev": true,
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
+            "is-glob": "^4.0.1"
           },
           "dependencies": {
             "is-glob": {
               "version": "3.1.0",
               "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
               "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-              "dev": true,
               "requires": {
                 "is-extglob": "^2.1.0"
               }

package.json

@@ -34,7 +34,7 @@
     "@babel/plugin-transform-strict-mode": "^7.12.13",
     "@mdi/font": "^5.9.55",
     "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.11",
+    "@vue/cli-plugin-e2e-cypress": "^4.5.13",
     "@vue/cli-plugin-eslint": "^4.5.11",
     "@vue/cli-plugin-router": "^4.5.11",
     "@vue/cli-plugin-unit-jest": "^4.5.11",
@@ -151,7 +151,9 @@
     "ajv": "^6.12.6",
     "css-what": "^5.0.1",
     "browserslist": "^4.16.5",
+    "dns-packet": "^5.2.2",
     "faye-websocket": "^0.11.3",
+    "glob-parent": "^5.1.2",
     "http-proxy": "^1.18.1",
     "hosted-git-info": "^3.0.8",
     "ini": "^1.3.6",
@@ -159,14 +161,13 @@
     "lodash": "^4.17.20",
     "minimist": "^1.2.5",
     "node-notifier": "^9.0.0",
+    "normalize-url": "^4.5.1",
     "serialize-javascript": "^3.1.0",
     "sockjs": "^0.3.21",
     "ssri": "^8.0.1",
     "trim-newlines": "^3.0.0",
     "y18n": "^5.0.5",
     "yargs-parser": "^18.1.3",
-    "ws": "^7.4.6",
-    "dns-packet": "^5.2.2",
-    "normalize-url": "^4.5.1"
+    "ws": "^7.4.6"
   }
 }

src/scss/custom.scss

@@ -61,6 +61,12 @@ body {
       text-decoration: none;
     }
   }
+  .v-date-picker-table--month td .v-btn {
+    min-width: 40px !important;
+  }
+  .v-autocomplete.v-select--is-menu-active .v-input__icon--append .v-icon {
+    transform: none;
+  }
 
   .v-btn {
     height: 40px;

src/views/super-admin/Training.vue

@@ -4,7 +4,6 @@
       <v-skeleton-loader
         :loading="loading"
         type="table-heading,table-thead, table-tbody"
-        class="py-2"
       >
         <v-data-table
           id="training-table"
@@ -24,14 +23,17 @@
           :hide-default-footer="courses.length === 0"
         >
           <template v-slot:top>
-            <v-container id="training-table-header" class="py-0">
+            <v-container id="training-table-header">
               <v-row>
-                <h4 class="subhead pa-0">Filter</h4>
+                <h4 class="pl-0 pb-2 mb-0">Filter</h4>
               </v-row>
               <v-row>
-                <v-col cols="12" md="9" class="pl-0 pr-0 pr-sm-2">
-                  <v-row>
-                    <v-col cols="12" sm="4" class="filter-input">
+                <v-col
+                  cols="12"
+                  sm="4"
+                  md="3"
+                  class="filter-input px-0 pr-sm-2 py-1"
+                >
                   <v-select
                     :items="filter.courseTypes"
                     @change="fetchDebounced()"
@@ -40,9 +42,15 @@
                     flat
                     single-line
                     hide-details
+                    class="px-0"
                   ></v-select>
                 </v-col>
-                    <v-col cols="12" sm="4" class="filter-input">
+                <v-col
+                  cols="12"
+                  sm="4"
+                  md="3"
+                  class="filter-input px-0 px-sm-2 py-1"
+                >
                   <v-menu
                     light
                     v-model="show.filterDate"
@@ -51,7 +59,6 @@
                     min-width="auto"
                     transition="scale-transition"
                     offset-y
-                        class="mt-4 pb-6 custom-label-color"
                   >
                     <template v-slot:activator="{ on, attrs }" light>
                       <v-text-field
@@ -61,7 +68,7 @@
                         placeholder="By Date"
                         append-icon="mdi-menu-down"
                         readonly
-                            :clearable="filter.date"
+                        clearable
                         single-line
                         hide-details
                         @click:append="
@@ -71,10 +78,12 @@
                         @input="fetchDebounced()"
                         v-bind="attrs"
                         v-on="on"
+                        class="px-0"
                       ></v-text-field>
                     </template>
                     <v-date-picker
                       v-model="filter.date"
+                      type="month"
                       @input="
                         show.filterDate = false;
                         fetchDebounced();
@@ -83,22 +92,34 @@
                     ></v-date-picker>
                   </v-menu>
                 </v-col>
-                    <v-col cols="12" sm="4" class="filter-input pr-sm-1">
-                      <v-text-field
+                <v-col
+                  cols="12"
+                  sm="4"
+                  md="3"
+                  class="filter-input px-0 pl-sm-2 pr-md-4 py-1"
+                >
+                  <v-autocomplete
                     v-model="filter.search"
+                    :items="coursesNames"
                     ref="filterSearch"
                     append-icon="mdi-magnify"
-                        @keyup="fetchDebounced"
-                        @click:append="setInputElementFocus($refs.filterSearch)"
+                    :search-input.sync="search"
                     placeholder="Search"
                     clearable
+                    :hide-no-data="
+                      fetchingSearch || search === null || search.length === 0
+                    "
                     single-line
                     hide-details
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
+                    class="px-0"
+                    :loading="fetchingSearch"
+                  ></v-autocomplete>
                 </v-col>
-                <v-col cols="12" md="3" class="text-right pr-0">
+                <v-col
+                  cols="12"
+                  md="3"
+                  class="px-0 pr-md-1 pt-4 pt-md-1 text-center text-sm-right"
+                >
                   <v-btn
                     color="primary"
                     :disabled="state.isUndoingDelete"
@@ -112,9 +133,7 @@
                 </v-col>
               </v-row>
               <v-row>
-                <v-col class="pl-0">
-                  <h2 class="text-left px-0">Courses</h2>
-                </v-col>
+                <h2 class="text-left pl-0 pt-4 pt-sm-0">Courses</h2>
               </v-row>
             </v-container>
 
@@ -287,12 +306,14 @@ import {
 } from "@/config/table-constants";
 import { createDefaultPaginationParams } from "@/utils/tableHelpers";
 import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
+import moment from "moment";
 
 export default {
   components: {
     AddCourse,
   },
   data: () => ({
+    search: null,
     darkMode: null,
     initialLoad: true,
     lastOptions: null,
@@ -302,6 +323,7 @@ export default {
       filterDate: false,
     },
     fetchingData: false,
+    fetchingSearch: false,
     footerProps: DEFAULT_FOOTER_PROPS,
     params: DEFAULT_PAGINATION_PARAMS,
     options: DEFAULT_TABLE_OPTIONS,
@@ -316,6 +338,7 @@ export default {
       ],
     },
     courses: [],
+    coursesNames: [],
     total: 0,
     loading: false,
     snackbars: {
@@ -361,6 +384,9 @@ export default {
       },
       deep: true,
     },
+    async search(val) {
+      this.fetchSearchDebounced(val);
+    },
     filter: {
       handler() {
         this.fetchDebounced();
@@ -378,31 +404,64 @@ export default {
     fetchDebounced() {
       // cancel pending call
       clearTimeout(this._timerId);
-
       this.fetchingData = true;
       // delay new call
       this._timerId = setTimeout(() => {
         this.fetchData();
       }, debounceTimeout);
     },
+    fetchSearchDebounced(val) {
+      // cancel pending call
+      clearTimeout(this._timerSearchId);
+      this.fetchingSearch = true;
+      // delay new call
+      this._timerSearchId = setTimeout(() => {
+        this.fetchSearchData(val);
+      }, debounceTimeout);
+    },
+    async fetchSearchData(val) {
+      const params = {
+        ...DEFAULT_PAGINATION_PARAMS,
+        sortBy: "name",
+        q: val,
+      };
+      try {
+        const response = await TrainingService.getCourses(params);
+        this.coursesNames = response.courses.map(function (course) {
+          return course.name;
+        });
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
+        this.$store.commit(SET_ERROR_DIALOG, true);
+        console.error("!training error!", error);
+      } finally {
+        this.fetchingSearch = false;
+      }
+    },
     async fetchData() {
       if (this.initialLoad) {
         this.loading = true;
         this.initialLoad = false;
       }
-
-      this.params = {
+      const endDate = new moment(this.filter.date)
+        .endOf("month")
+        .format("YYYY-MM-DD");
+      let params = {
         ...this.params,
         registeredCount: true,
         instructors: true,
-        dateFrom: this.filter.date,
-        dateTo: this.filter.date,
         q: this.filter.search,
         courseType: this.filter.courseType,
       };
-
+      if (this.filter.date !== null) {
+        params = {
+          ...params,
+          dateFrom: this.filter.date + "-01",
+          dateTo: endDate,
+        };
+      }
       try {
-        const response = await TrainingService.getCourses(this.params);
+        const response = await TrainingService.getCourses(params);
         this.courses = response.courses;
         this.total = response.meta.total;
       } catch (error) {
@@ -509,13 +568,5 @@ export default {
       display: none;
     }
   }
-
-  .v-picker--date {
-    button.v-btn {
-      min-width: unset !important;
-      box-shadow: none !important;
-      border: none !important;
-    }
-  }
 }
 </style>

tests/unit/views/super-admin/Training.spec.js

@@ -11,14 +11,16 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("Training", () => {
-  const mockCoursesResult = { courses: [], meta: { total: 0 } };
+  const mockCoursesResult = {
+    courses: [{ name: "mock 1" }, { name: "mock 2" }],
+    meta: { total: 0 },
+  };
   afterEach(() => {
     jest.restoreAllMocks();
   });
 
   it("should debounce getCourses", async () => {
     TrainingService.getCourses = jest.fn().mockResolvedValue(mockCoursesResult);
-
     const wrapper = shallowMount(Training, {
       created() {
         this.$vuetify.lang = {
@@ -47,6 +49,44 @@ describe("Training", () => {
     });
     expect(TrainingService.getCourses).toHaveBeenCalledTimes(2);
   });
+  it("should handle error on getCourses", async () => {
+    console.error = jest.fn(); // mock console.error when expecting error messages
+    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
+
+    const wrapper = shallowMount(
+      Training,
+      {
+        created() {
+          this.$vuetify.lang = {
+            t: () => {},
+          };
+          this.$vuetify.theme = { dark: true };
+        },
+        mocks: {
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      },
+      localVue
+    );
+    wrapper.vm.fetchData();
+
+    // wait for debounce to trigger
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500);
+    });
+
+    expect(wrapper.vm.loading).toEqual(false);
+    expect(wrapper.vm.fetchingData).toEqual(false);
+    expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(
+      SET_ERROR_MESSAGE,
+      "mock error"
+    );
+  });
 
   it("should handle error on getCourses", async () => {
     console.error = jest.fn(); // mock console.error when expecting error messages