From 2973227bb055112630de80a1a1bad3a708b312db Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Thu, 14 Jul 2022 20:18:41 +0200
Subject: [PATCH] feat: implement task dialog nested route component

---
 package-lock.json                        | 268 ++++++++++++++++-------
 package.json                             |   2 +
 src/graphql/queries/task.query.gql       |   8 +
 src/pages/boards/[id].vue                |   2 +
 src/pages/boards/[id]/tasks/[taskId].vue |  82 +++++++
 5 files changed, 288 insertions(+), 74 deletions(-)
 create mode 100644 src/graphql/queries/task.query.gql
 create mode 100644 src/pages/boards/[id]/tasks/[taskId].vue

diff --git a/package-lock.json b/package-lock.json
index 320c580..800734d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@apollo/client": "^3.6.9",
+        "@progress/kendo-drawing": "^1.16.3",
+        "@progress/kendo-vue-dateinputs": "^3.4.3",
         "@twicpics/components": "^0.8.2",
         "@vue/apollo-composable": "^4.0.0-alpha.18",
         "@vueuse/core": "^8.9.2",
@@ -856,18 +858,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@progress/kendo-date-math": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-date-math/-/kendo-date-math-1.5.1.tgz",
+      "integrity": "sha512-/PsYT6heUHpMOu5hKC9AcF4U4cRNFLSUAyVVAkFEm6w7OsqlCA7XQjVmnxL3+439qFPe0JZ1QEw3CwGAqn9njQ==",
+      "dependencies": {
+        "tslib": "^1.7.0"
+      }
+    },
+    "node_modules/@progress/kendo-date-math/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
     "node_modules/@progress/kendo-draggable": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-draggable/-/kendo-draggable-3.0.1.tgz",
-      "integrity": "sha512-majYTdBVcUafWco/cN+HUuoDmu36bIpTKqrWYRaEOO1FcSZan+p7+lapIzn+D3IIeKcAIws7xKmng6ruh2svRg==",
-      "dev": true
+      "integrity": "sha512-majYTdBVcUafWco/cN+HUuoDmu36bIpTKqrWYRaEOO1FcSZan+p7+lapIzn+D3IIeKcAIws7xKmng6ruh2svRg=="
     },
     "node_modules/@progress/kendo-drawing": {
       "version": "1.16.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-drawing/-/kendo-drawing-1.16.3.tgz",
       "integrity": "sha512-zUh0EjffezxJy4osPVeHflbosdlMk971hYj3zJ8mAHiswUei5UTIn7aAxfHDXu3Fpw2d9WyRi/LkI0xKWNmDRA==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "@progress/pako-esm": "^1.0.1"
       }
@@ -920,14 +932,12 @@
     "node_modules/@progress/kendo-intl": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-intl/-/kendo-intl-3.0.2.tgz",
-      "integrity": "sha512-EL6H2oDGtUi64BUNXSUL0yVdKOPqtLDZjXz4vOaIoc5So7tAqJTMFZ0WLBfqHIlj7lkYfzonl6qDjbwIzkA7qg==",
-      "dev": true
+      "integrity": "sha512-EL6H2oDGtUi64BUNXSUL0yVdKOPqtLDZjXz4vOaIoc5So7tAqJTMFZ0WLBfqHIlj7lkYfzonl6qDjbwIzkA7qg=="
     },
     "node_modules/@progress/kendo-licensing": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-licensing/-/kendo-licensing-1.2.2.tgz",
       "integrity": "sha512-DUGwVHmaIFrGkKdO2NjajfNBrLc0Jo0o11WTmo9AkqWzMT+zAOu0D5aghnWGPkPg3e8+T5m9dEZvWPw4eJP4Sw==",
-      "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "jsonwebtoken": "^8.5.1"
@@ -939,8 +949,7 @@
     "node_modules/@progress/kendo-popup-common": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-popup-common/-/kendo-popup-common-1.9.1.tgz",
-      "integrity": "sha512-oG3rCW50MR3lNwila/bvXPm5wBT0X44MVqtd1Kd1nRn3a0Vag1v3uUzKeKEosR9AysKB8F5IrLFuUds4aVzbwA==",
-      "dev": true
+      "integrity": "sha512-oG3rCW50MR3lNwila/bvXPm5wBT0X44MVqtd1Kd1nRn3a0Vag1v3uUzKeKEosR9AysKB8F5IrLFuUds4aVzbwA=="
     },
     "node_modules/@progress/kendo-theme-default": {
       "version": "5.5.0",
@@ -988,6 +997,87 @@
         "vue": "^2.6.12 || ^3.0.2"
       }
     },
+    "node_modules/@progress/kendo-vue-dateinputs": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-vue-dateinputs/-/kendo-vue-dateinputs-3.4.3.tgz",
+      "integrity": "sha512-18xz1aW99VSyJ8WAnqAnSO+JV84sEpBfpzkr6WXB4LLfJRqWgYXQgbUxnfPM+OtYwifrCOwHnUhsKdUqU7iukQ==",
+      "dependencies": {
+        "@progress/kendo-date-math": "1.5.1",
+        "@progress/kendo-vue-buttons": "3.4.3",
+        "@progress/kendo-vue-common": "3.4.3",
+        "@progress/kendo-vue-labels": "3.4.3",
+        "@progress/kendo-vue-popup": "3.4.3"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.1.0",
+        "@progress/kendo-vue-intl": "^3.2.0",
+        "vue": "^2.6.12 || ^3.0.2"
+      }
+    },
+    "node_modules/@progress/kendo-vue-dateinputs/node_modules/@progress/kendo-vue-animation": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-vue-animation/-/kendo-vue-animation-3.4.3.tgz",
+      "integrity": "sha512-3bXY4Ina72y9fMLIZc1SOpONBXorJe/w8TdV/ZlDftOnXycfjfxd/P+H2Trdtp5sEkuK//2BIoNXX8iLNlcQXA==",
+      "dependencies": {
+        "@progress/kendo-vue-common": "3.4.3"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.1.0",
+        "vue": "^2.6.12 || ^3.0.2"
+      }
+    },
+    "node_modules/@progress/kendo-vue-dateinputs/node_modules/@progress/kendo-vue-buttons": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-vue-buttons/-/kendo-vue-buttons-3.4.3.tgz",
+      "integrity": "sha512-qX2JUENzcr/Qx6BNW00efWTOyT+SGCryechklOSNaKGbKO3iS7UFcGpazVqXsL94DOycDLPUnoKCarZGh/SJBA==",
+      "dependencies": {
+        "@progress/kendo-vue-common": "3.4.3",
+        "@progress/kendo-vue-popup": "3.4.3"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.1.0",
+        "vue": "^2.6.12 || ^3.0.2"
+      }
+    },
+    "node_modules/@progress/kendo-vue-dateinputs/node_modules/@progress/kendo-vue-common": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-vue-common/-/kendo-vue-common-3.4.3.tgz",
+      "integrity": "sha512-oDUh1EM4r03OVfPwgiTFuDCuXoVjXk1N2qP8xiBhf+FqHq34x2PDDX8t3LNEgZwvgF3vMeNJYS6YENwvf4urbw==",
+      "dependencies": {
+        "@progress/kendo-draggable": "^3.0.1"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.1.0",
+        "vue": "^2.6.12 || ^3.0.2"
+      }
+    },
+    "node_modules/@progress/kendo-vue-dateinputs/node_modules/@progress/kendo-vue-labels": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-vue-labels/-/kendo-vue-labels-3.4.3.tgz",
+      "integrity": "sha512-fTdZckGlkeXdDFkYgTI/YJ2hrHRf6777o4xEtNvFGYatW6nLU0+c/POPClQkDKc43iCuIVeaHC8ggqYXiF+2HQ==",
+      "dependencies": {
+        "@progress/kendo-vue-common": "3.4.3"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.1.0",
+        "@progress/kendo-vue-intl": "^3.2.0",
+        "vue": "^2.6.12 || ^3.0.2"
+      }
+    },
+    "node_modules/@progress/kendo-vue-dateinputs/node_modules/@progress/kendo-vue-popup": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-vue-popup/-/kendo-vue-popup-3.4.3.tgz",
+      "integrity": "sha512-h6WFkJb6Er2V6G81GElBr5/1HanR15rdg+vOay/inhfzPciNWWpxD6w0l0ZLW10I44vJ+mmrceLCHxcYYxvCPg==",
+      "dependencies": {
+        "@progress/kendo-popup-common": "^1.6.1",
+        "@progress/kendo-vue-animation": "3.4.3",
+        "@progress/kendo-vue-common": "3.4.3"
+      },
+      "peerDependencies": {
+        "@progress/kendo-licensing": "^1.1.0",
+        "vue": "^2.6.12 || ^3.0.2"
+      }
+    },
     "node_modules/@progress/kendo-vue-dialogs": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-vue-dialogs/-/kendo-vue-dialogs-3.4.1.tgz",
@@ -1090,7 +1180,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-vue-intl/-/kendo-vue-intl-3.4.3.tgz",
       "integrity": "sha512-T+KOrP32PZQdTweUKWDtOohOuNfh+CuRfcbvRJ4/XsdToRBSxUcQt9jMSEalgBgzOIPSzEsq5gvy5wFU0an6dg==",
-      "dev": true,
       "dependencies": {
         "@progress/kendo-intl": "^3.0.2",
         "@progress/kendo-vue-common": "3.4.3"
@@ -1104,7 +1193,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-vue-common/-/kendo-vue-common-3.4.3.tgz",
       "integrity": "sha512-oDUh1EM4r03OVfPwgiTFuDCuXoVjXk1N2qP8xiBhf+FqHq34x2PDDX8t3LNEgZwvgF3vMeNJYS6YENwvf4urbw==",
-      "dev": true,
       "dependencies": {
         "@progress/kendo-draggable": "^3.0.1"
       },
@@ -1218,9 +1306,7 @@
     "node_modules/@progress/pako-esm": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@progress/pako-esm/-/pako-esm-1.0.1.tgz",
-      "integrity": "sha512-O4A3b1EuE9Xe1pC3Xz9Tcn1M/CYrL71f4y/5TXeytOVTkmkzBgYW97fYP2f+54H0e0erWRaqV/kUUB/a8Uxfbw==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-O4A3b1EuE9Xe1pC3Xz9Tcn1M/CYrL71f4y/5TXeytOVTkmkzBgYW97fYP2f+54H0e0erWRaqV/kUUB/a8Uxfbw=="
     },
     "node_modules/@rollup/plugin-graphql": {
       "version": "1.1.0",
@@ -2679,8 +2765,7 @@
     "node_modules/buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "dev": true
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
     },
     "node_modules/cachedir": {
       "version": "2.3.0",
@@ -3325,7 +3410,6 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
       "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "dev": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -5588,7 +5672,6 @@
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
       "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
-      "dev": true,
       "dependencies": {
         "jws": "^3.2.2",
         "lodash.includes": "^4.3.0",
@@ -5610,7 +5693,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -5634,7 +5716,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
       "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-      "dev": true,
       "dependencies": {
         "buffer-equal-constant-time": "1.0.1",
         "ecdsa-sig-formatter": "1.0.11",
@@ -5645,7 +5726,6 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
       "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "dev": true,
       "dependencies": {
         "jwa": "^1.4.1",
         "safe-buffer": "^5.0.1"
@@ -5764,38 +5844,32 @@
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "dev": true
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
     },
     "node_modules/lodash.isboolean": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "dev": true
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
     },
     "node_modules/lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "dev": true
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
     },
     "node_modules/lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "dev": true
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
     },
     "node_modules/lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "dev": true
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -5806,8 +5880,7 @@
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "dev": true
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
     },
     "node_modules/log-symbols": {
       "version": "4.1.0",
@@ -7221,7 +7294,6 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -9255,18 +9327,30 @@
         "fastq": "^1.6.0"
       }
     },
+    "@progress/kendo-date-math": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-date-math/-/kendo-date-math-1.5.1.tgz",
+      "integrity": "sha512-/PsYT6heUHpMOu5hKC9AcF4U4cRNFLSUAyVVAkFEm6w7OsqlCA7XQjVmnxL3+439qFPe0JZ1QEw3CwGAqn9njQ==",
+      "requires": {
+        "tslib": "^1.7.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-draggable": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-draggable/-/kendo-draggable-3.0.1.tgz",
-      "integrity": "sha512-majYTdBVcUafWco/cN+HUuoDmu36bIpTKqrWYRaEOO1FcSZan+p7+lapIzn+D3IIeKcAIws7xKmng6ruh2svRg==",
-      "dev": true
+      "integrity": "sha512-majYTdBVcUafWco/cN+HUuoDmu36bIpTKqrWYRaEOO1FcSZan+p7+lapIzn+D3IIeKcAIws7xKmng6ruh2svRg=="
     },
     "@progress/kendo-drawing": {
       "version": "1.16.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-drawing/-/kendo-drawing-1.16.3.tgz",
       "integrity": "sha512-zUh0EjffezxJy4osPVeHflbosdlMk971hYj3zJ8mAHiswUei5UTIn7aAxfHDXu3Fpw2d9WyRi/LkI0xKWNmDRA==",
-      "dev": true,
-      "peer": true,
       "requires": {
         "@progress/pako-esm": "^1.0.1"
       }
@@ -9321,14 +9405,12 @@
     "@progress/kendo-intl": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-intl/-/kendo-intl-3.0.2.tgz",
-      "integrity": "sha512-EL6H2oDGtUi64BUNXSUL0yVdKOPqtLDZjXz4vOaIoc5So7tAqJTMFZ0WLBfqHIlj7lkYfzonl6qDjbwIzkA7qg==",
-      "dev": true
+      "integrity": "sha512-EL6H2oDGtUi64BUNXSUL0yVdKOPqtLDZjXz4vOaIoc5So7tAqJTMFZ0WLBfqHIlj7lkYfzonl6qDjbwIzkA7qg=="
     },
     "@progress/kendo-licensing": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@progress/kendo-licensing/-/kendo-licensing-1.2.2.tgz",
       "integrity": "sha512-DUGwVHmaIFrGkKdO2NjajfNBrLc0Jo0o11WTmo9AkqWzMT+zAOu0D5aghnWGPkPg3e8+T5m9dEZvWPw4eJP4Sw==",
-      "dev": true,
       "requires": {
         "jsonwebtoken": "^8.5.1"
       }
@@ -9336,8 +9418,7 @@
     "@progress/kendo-popup-common": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-popup-common/-/kendo-popup-common-1.9.1.tgz",
-      "integrity": "sha512-oG3rCW50MR3lNwila/bvXPm5wBT0X44MVqtd1Kd1nRn3a0Vag1v3uUzKeKEosR9AysKB8F5IrLFuUds4aVzbwA==",
-      "dev": true
+      "integrity": "sha512-oG3rCW50MR3lNwila/bvXPm5wBT0X44MVqtd1Kd1nRn3a0Vag1v3uUzKeKEosR9AysKB8F5IrLFuUds4aVzbwA=="
     },
     "@progress/kendo-theme-default": {
       "version": "5.5.0",
@@ -9373,6 +9454,63 @@
         "@progress/kendo-draggable": "^3.0.1"
       }
     },
+    "@progress/kendo-vue-dateinputs": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-vue-dateinputs/-/kendo-vue-dateinputs-3.4.3.tgz",
+      "integrity": "sha512-18xz1aW99VSyJ8WAnqAnSO+JV84sEpBfpzkr6WXB4LLfJRqWgYXQgbUxnfPM+OtYwifrCOwHnUhsKdUqU7iukQ==",
+      "requires": {
+        "@progress/kendo-date-math": "1.5.1",
+        "@progress/kendo-vue-buttons": "3.4.3",
+        "@progress/kendo-vue-common": "3.4.3",
+        "@progress/kendo-vue-labels": "3.4.3",
+        "@progress/kendo-vue-popup": "3.4.3"
+      },
+      "dependencies": {
+        "@progress/kendo-vue-animation": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/@progress/kendo-vue-animation/-/kendo-vue-animation-3.4.3.tgz",
+          "integrity": "sha512-3bXY4Ina72y9fMLIZc1SOpONBXorJe/w8TdV/ZlDftOnXycfjfxd/P+H2Trdtp5sEkuK//2BIoNXX8iLNlcQXA==",
+          "requires": {
+            "@progress/kendo-vue-common": "3.4.3"
+          }
+        },
+        "@progress/kendo-vue-buttons": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/@progress/kendo-vue-buttons/-/kendo-vue-buttons-3.4.3.tgz",
+          "integrity": "sha512-qX2JUENzcr/Qx6BNW00efWTOyT+SGCryechklOSNaKGbKO3iS7UFcGpazVqXsL94DOycDLPUnoKCarZGh/SJBA==",
+          "requires": {
+            "@progress/kendo-vue-common": "3.4.3",
+            "@progress/kendo-vue-popup": "3.4.3"
+          }
+        },
+        "@progress/kendo-vue-common": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/@progress/kendo-vue-common/-/kendo-vue-common-3.4.3.tgz",
+          "integrity": "sha512-oDUh1EM4r03OVfPwgiTFuDCuXoVjXk1N2qP8xiBhf+FqHq34x2PDDX8t3LNEgZwvgF3vMeNJYS6YENwvf4urbw==",
+          "requires": {
+            "@progress/kendo-draggable": "^3.0.1"
+          }
+        },
+        "@progress/kendo-vue-labels": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/@progress/kendo-vue-labels/-/kendo-vue-labels-3.4.3.tgz",
+          "integrity": "sha512-fTdZckGlkeXdDFkYgTI/YJ2hrHRf6777o4xEtNvFGYatW6nLU0+c/POPClQkDKc43iCuIVeaHC8ggqYXiF+2HQ==",
+          "requires": {
+            "@progress/kendo-vue-common": "3.4.3"
+          }
+        },
+        "@progress/kendo-vue-popup": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/@progress/kendo-vue-popup/-/kendo-vue-popup-3.4.3.tgz",
+          "integrity": "sha512-h6WFkJb6Er2V6G81GElBr5/1HanR15rdg+vOay/inhfzPciNWWpxD6w0l0ZLW10I44vJ+mmrceLCHxcYYxvCPg==",
+          "requires": {
+            "@progress/kendo-popup-common": "^1.6.1",
+            "@progress/kendo-vue-animation": "3.4.3",
+            "@progress/kendo-vue-common": "3.4.3"
+          }
+        }
+      }
+    },
     "@progress/kendo-vue-dialogs": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/@progress/kendo-vue-dialogs/-/kendo-vue-dialogs-3.4.1.tgz",
@@ -9439,7 +9577,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/@progress/kendo-vue-intl/-/kendo-vue-intl-3.4.3.tgz",
       "integrity": "sha512-T+KOrP32PZQdTweUKWDtOohOuNfh+CuRfcbvRJ4/XsdToRBSxUcQt9jMSEalgBgzOIPSzEsq5gvy5wFU0an6dg==",
-      "dev": true,
       "requires": {
         "@progress/kendo-intl": "^3.0.2",
         "@progress/kendo-vue-common": "3.4.3"
@@ -9449,7 +9586,6 @@
           "version": "3.4.3",
           "resolved": "https://registry.npmjs.org/@progress/kendo-vue-common/-/kendo-vue-common-3.4.3.tgz",
           "integrity": "sha512-oDUh1EM4r03OVfPwgiTFuDCuXoVjXk1N2qP8xiBhf+FqHq34x2PDDX8t3LNEgZwvgF3vMeNJYS6YENwvf4urbw==",
-          "dev": true,
           "requires": {
             "@progress/kendo-draggable": "^3.0.1"
           }
@@ -9530,9 +9666,7 @@
     "@progress/pako-esm": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@progress/pako-esm/-/pako-esm-1.0.1.tgz",
-      "integrity": "sha512-O4A3b1EuE9Xe1pC3Xz9Tcn1M/CYrL71f4y/5TXeytOVTkmkzBgYW97fYP2f+54H0e0erWRaqV/kUUB/a8Uxfbw==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-O4A3b1EuE9Xe1pC3Xz9Tcn1M/CYrL71f4y/5TXeytOVTkmkzBgYW97fYP2f+54H0e0erWRaqV/kUUB/a8Uxfbw=="
     },
     "@rollup/plugin-graphql": {
       "version": "1.1.0",
@@ -10596,8 +10730,7 @@
     "buffer-equal-constant-time": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
-      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "dev": true
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA=="
     },
     "cachedir": {
       "version": "2.3.0",
@@ -11100,7 +11233,6 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
       "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -12648,7 +12780,6 @@
       "version": "8.5.1",
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
       "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
-      "dev": true,
       "requires": {
         "jws": "^3.2.2",
         "lodash.includes": "^4.3.0",
@@ -12665,8 +12796,7 @@
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
         }
       }
     },
@@ -12686,7 +12816,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
       "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
-      "dev": true,
       "requires": {
         "buffer-equal-constant-time": "1.0.1",
         "ecdsa-sig-formatter": "1.0.11",
@@ -12697,7 +12826,6 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
       "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
-      "dev": true,
       "requires": {
         "jwa": "^1.4.1",
         "safe-buffer": "^5.0.1"
@@ -12786,38 +12914,32 @@
     "lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
-      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "dev": true
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w=="
     },
     "lodash.isboolean": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
-      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "dev": true
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg=="
     },
     "lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
-      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "dev": true
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA=="
     },
     "lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
-      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "dev": true
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw=="
     },
     "lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA=="
     },
     "lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
-      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "dev": true
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw=="
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -12828,8 +12950,7 @@
     "lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
-      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "dev": true
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg=="
     },
     "log-symbols": {
       "version": "4.1.0",
@@ -13849,8 +13970,7 @@
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
     },
     "safer-buffer": {
       "version": "2.1.2",
diff --git a/package.json b/package.json
index 6e867bd..aa8e50d 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.9",
+    "@progress/kendo-drawing": "^1.16.3",
+    "@progress/kendo-vue-dateinputs": "^3.4.3",
     "@twicpics/components": "^0.8.2",
     "@vue/apollo-composable": "^4.0.0-alpha.18",
     "@vueuse/core": "^8.9.2",
diff --git a/src/graphql/queries/task.query.gql b/src/graphql/queries/task.query.gql
new file mode 100644
index 0000000..473c019
--- /dev/null
+++ b/src/graphql/queries/task.query.gql
@@ -0,0 +1,8 @@
+query getTask($id: ID!) {
+  task(id: $id) {
+    id
+    title
+    description
+    dueAt
+  }
+}
diff --git a/src/pages/boards/[id].vue b/src/pages/boards/[id].vue
index 004031c..3bfa644 100644
--- a/src/pages/boards/[id].vue
+++ b/src/pages/boards/[id].vue
@@ -121,6 +121,8 @@ onDoneCreatingTask((res) => {
       @update="updateBoard"
       :addTask="addTask"
     />
+
+    <RouterView />
   </div>
   <AppLoader v-if="loadingBoard" :overlay="true" />
 </template>
diff --git a/src/pages/boards/[id]/tasks/[taskId].vue b/src/pages/boards/[id]/tasks/[taskId].vue
new file mode 100644
index 0000000..c9814b9
--- /dev/null
+++ b/src/pages/boards/[id]/tasks/[taskId].vue
@@ -0,0 +1,82 @@
+<template>
+  <KDialog v-if="task" :title="taskResult?.task?.title" @close="onCloseClicked">
+    <div class="grid grid-cols-3 gap-4">
+      <div class="col-span-2 space-y-3">
+        <div class="flex flex-col">
+          <p class="text-gray-600 text-sm font-medium">Title</p>
+          <KInput v-model="task.title" />
+        </div>
+
+        <div class="flex flex-col">
+          <p class="text-gray-600 text-sm font-medium">Description</p>
+          <KInput v-model="task.description" />
+        </div>
+      </div>
+
+      <KCalendar v-model="task.dueAt" />
+    </div>
+
+    <KDialogActionsBar>
+      <KButton @click="onCloseClicked">Close</KButton>
+      <KButton>Save</KButton>
+    </KDialogActionsBar>
+  </KDialog>
+</template>
+
+<script lang="ts" setup>
+import {
+  Dialog as KDialog,
+  DialogActionsBar as KDialogActionsBar,
+} from "@progress/kendo-vue-dialogs";
+import { Input as KInput } from "@progress/kendo-vue-inputs";
+import { Calendar as KCalendar } from "@progress/kendo-vue-dateinputs";
+import { Button as KButton } from "@progress/kendo-vue-buttons";
+import getTaskQuery from "@/graphql/queries/task.query.gql";
+import { useRoute, useRouter } from "vue-router";
+import { useQuery } from "@vue/apollo-composable";
+import { ref } from "vue";
+import { parseDate } from "@progress/kendo-intl";
+
+const router = useRouter();
+const route = useRoute();
+
+const {
+  loading,
+  result: taskResult,
+  onResult: onTaskLoaded,
+} = useQuery(
+  getTaskQuery,
+  {
+    id: route.params.taskId,
+  },
+  {
+    fetchPolicy: "cache-and-network",
+  }
+);
+
+const task = ref<null | {
+  id: string;
+  title: string;
+  description: string | null;
+  dueAt: null | Date;
+}>(null);
+
+onTaskLoaded((result) => {
+  const data = result.data?.task;
+  if (!data) {
+    task.value = null;
+    return;
+  }
+
+  task.value = {
+    id: data.id,
+    title: data.title,
+    description: data.description,
+    dueAt: data.dueAt ? parseDate(data.dueAt, "yyyy-MM-dd") : null,
+  };
+});
+
+function onCloseClicked() {
+  router.push(`/boards/${route.params.id}`);
+}
+</script>