From 844505a0bea637b893f70022420a7a846d18e89b Mon Sep 17 00:00:00 2001
From: Hunter Congress <hunter.congress@darkwolfsolutions.com>
Date: Tue, 8 Jun 2021 13:31:10 +0000
Subject: [PATCH] Lb 222: update filter

---
 package-lock.json                             | 256 +++++++++++-------
 package.json                                  |   9 +-
 src/scss/custom.scss                          |   6 +
 src/views/super-admin/Training.vue            | 221 +++++++++------
 tests/unit/views/super-admin/Training.spec.js |  44 ++-
 5 files changed, 348 insertions(+), 188 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 643e93a..9b03dae 100644
--- a/package-lock.json
+++ b/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,6 +3883,21 @@
             "yauzl": "2.10.0"
           },
           "dependencies": {
+            "execa": {
+              "version": "0.10.0",
+              "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
+              "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
+              "dev": true,
+              "requires": {
+                "cross-spawn": "^6.0.0",
+                "get-stream": "^3.0.0",
+                "is-stream": "^1.1.0",
+                "npm-run-path": "^2.0.0",
+                "p-finally": "^1.0.0",
+                "signal-exit": "^3.0.0",
+                "strip-eof": "^1.0.0"
+              }
+            },
             "lodash": {
               "version": "4.17.21",
               "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3875,11 +3910,33 @@
               "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
+            "request": {
+              "version": "2.88.0",
+              "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+              "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+              "dev": true,
+              "requires": {
+                "aws-sign2": "~0.7.0",
+                "aws4": "^1.8.0",
+                "caseless": "~0.12.0",
+                "combined-stream": "~1.0.6",
+                "extend": "~3.0.2",
+                "forever-agent": "~0.6.1",
+                "form-data": "~2.3.2",
+                "har-validator": "~5.1.0",
+                "http-signature": "~1.2.0",
+                "is-typedarray": "~1.0.0",
+                "isstream": "~0.1.2",
+                "json-stringify-safe": "~5.0.1",
+                "mime-types": "~2.1.19",
+                "oauth-sign": "~0.9.0",
+                "performance-now": "^2.1.0",
+                "qs": "~6.5.2",
+                "safe-buffer": "^5.1.2",
+                "tough-cookie": "~2.4.3",
+                "tunnel-agent": "^0.6.0",
+                "uuid": "^3.3.2"
+              }
             }
           }
         },
@@ -3892,60 +3949,34 @@
             "ms": "^2.1.1"
           }
         },
-        "execa": {
-          "version": "0.10.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
-          "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^6.0.0",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "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=",
           "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
         },
-        "request": {
-          "version": "2.88.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-          "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
-          "dev": true,
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.0",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.4.3",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-          }
+        "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"
               }
diff --git a/package.json b/package.json
index 24d49e2..5791499 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 61767c9..fd20a7b 100644
--- a/src/scss/custom.scss
+++ b/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;
diff --git a/src/views/super-admin/Training.vue b/src/views/super-admin/Training.vue
index 2288f81..d7004aa 100644
--- a/src/views/super-admin/Training.vue
+++ b/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,81 +23,103 @@
           :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-select
-                        :items="filter.courseTypes"
-                        @change="fetchDebounced()"
-                        v-model="filter.courseType"
-                        light
-                        flat
-                        single-line
-                        hide-details
-                      ></v-select>
-                    </v-col>
-                    <v-col cols="12" sm="4" class="filter-input">
-                      <v-menu
-                        light
-                        v-model="show.filterDate"
-                        elevation="0"
-                        :close-on-content-click="false"
-                        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
-                            light
-                            v-model="filter.date"
-                            ref="filterDate"
-                            placeholder="By Date"
-                            append-icon="mdi-menu-down"
-                            readonly
-                            :clearable="filter.date"
-                            single-line
-                            hide-details
-                            @click:append="
-                              setInputElementFocus($refs.filterDate);
-                              show.filterDate = true;
-                            "
-                            @input="fetchDebounced()"
-                            v-bind="attrs"
-                            v-on="on"
-                          ></v-text-field>
-                        </template>
-                        <v-date-picker
-                          v-model="filter.date"
-                          @input="
-                            show.filterDate = false;
-                            fetchDebounced();
-                          "
-                          color="primary"
-                        ></v-date-picker>
-                      </v-menu>
-                    </v-col>
-                    <v-col cols="12" sm="4" class="filter-input pr-sm-1">
+                <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()"
+                    v-model="filter.courseType"
+                    light
+                    flat
+                    single-line
+                    hide-details
+                    class="px-0"
+                  ></v-select>
+                </v-col>
+                <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"
+                    elevation="0"
+                    :close-on-content-click="false"
+                    min-width="auto"
+                    transition="scale-transition"
+                    offset-y
+                  >
+                    <template v-slot:activator="{ on, attrs }" light>
                       <v-text-field
-                        v-model="filter.search"
-                        ref="filterSearch"
-                        append-icon="mdi-magnify"
-                        @keyup="fetchDebounced"
-                        @click:append="setInputElementFocus($refs.filterSearch)"
-                        placeholder="Search"
+                        light
+                        v-model="filter.date"
+                        ref="filterDate"
+                        placeholder="By Date"
+                        append-icon="mdi-menu-down"
+                        readonly
                         clearable
                         single-line
                         hide-details
+                        @click:append="
+                          setInputElementFocus($refs.filterDate);
+                          show.filterDate = true;
+                        "
+                        @input="fetchDebounced()"
+                        v-bind="attrs"
+                        v-on="on"
+                        class="px-0"
                       ></v-text-field>
-                    </v-col>
-                  </v-row>
+                    </template>
+                    <v-date-picker
+                      v-model="filter.date"
+                      type="month"
+                      @input="
+                        show.filterDate = false;
+                        fetchDebounced();
+                      "
+                      color="primary"
+                    ></v-date-picker>
+                  </v-menu>
                 </v-col>
-                <v-col cols="12" md="3" class="text-right pr-0">
+                <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"
+                    :search-input.sync="search"
+                    placeholder="Search"
+                    clearable
+                    :hide-no-data="
+                      fetchingSearch || search === null || search.length === 0
+                    "
+                    single-line
+                    hide-details
+                    class="px-0"
+                    :loading="fetchingSearch"
+                  ></v-autocomplete>
+                </v-col>
+                <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>
diff --git a/tests/unit/views/super-admin/Training.spec.js b/tests/unit/views/super-admin/Training.spec.js
index a5dd02d..40d62a2 100644
--- a/tests/unit/views/super-admin/Training.spec.js
+++ b/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
-- 
GitLab