feat: datepicker

package-lock.json

@@ -1,15 +1,16 @@
 {
-  "name": "jobs-file",
+  "name": "jobs-worker-service",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "jobs-file",
+      "name": "jobs-worker-service",
       "version": "0.0.1",
       "dependencies": {
         "@quasar/extras": "^1.16.9",
         "@tato30/vue-pdf": "^1.9.5",
+        "@vuepic/vue-datepicker": "^8.4.0",
         "axios": "^1.6.8",
         "keycloak-js": "^24.0.2",
         "mime": "^4.0.1",
@@ -23,6 +24,7 @@
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
+        "@iconify/vue": "^4.1.1",
         "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@quasar/app-vite": "2.0.0-beta.2",
         "@types/node": "^20.11.30",
@@ -562,6 +564,27 @@
       "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
+      "integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@intlify/bundle-utils": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-8.0.0.tgz",
@@ -1582,6 +1605,20 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
       "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.4.0.tgz",
+      "integrity": "sha512-Twgvqwd5GrQf3JT2DvAQ/Ku0+sM51zsH1OkQKoRwYqJyF+EugItS8I0CveYmcI3Gbu92RZ9C3DMutvkaiuDzAQ==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -2555,6 +2592,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@quasar/extras": "^1.16.9",
     "@tato30/vue-pdf": "^1.9.5",
+    "@vuepic/vue-datepicker": "^8.4.0",
     "axios": "^1.6.8",
     "keycloak-js": "^24.0.2",
     "mime": "^4.0.1",

src/boot/components.ts

@@ -1,8 +1,11 @@
 import { boot } from 'quasar/wrappers';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
 import GlobalDialog from 'components/GlobalDialog.vue';
 import GlobalLoading from 'components/GlobalLoading.vue';
 
 export default boot(({ app }) => {
   app.component('global-dialog', GlobalDialog);
   app.component('global-loading', GlobalLoading);
+  app.component('VueDatePicker', VueDatePicker);
 });