From 103598ea6bb554021076871dcdc78fe7a4e23860 Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Wed, 17 Jan 2024 15:38:42 +0530 Subject: [PATCH 01/11] Implemented logic --- package-lock.json | 451 ++++++++++++------ .../EventCalendar/EventCalendar.module.css | 16 +- .../EventCalendar/EventCalendar.tsx | 245 +++++++++- 3 files changed, 560 insertions(+), 152 deletions(-) diff --git a/package-lock.json b/package-lock.json index 313aa812f2..144aefffe6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -74,9 +74,9 @@ "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "cross-env": "^7.0.3", "eslint-config-prettier": "^8.3.0", + "eslint-plugin-import": "^2.29.1", "eslint-plugin-jest": "^25.3.4", "eslint-plugin-prettier": "^3.4.0", - "eslint-plugin-import": "^2.29.1", "eslint-plugin-tsdoc": "^0.2.17", "husky": "^8.0.3", "identity-obj-proxy": "^3.0.0", @@ -6126,15 +6126,19 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/array.prototype.find": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.1.tgz", - "integrity": "sha512-I2ri5Z9uMpMvnsNrHre9l3PaX+z9D0/z6F7Yt2u15q7wt0I62g5kX6xUKR1SJiefgG+u2/gJUmM8B47XRvQR6w==", + "node_modules/array.prototype.findlastindex": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz", + "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==", "dependencies": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4", - "es-shim-unscopables": "^1.0.0" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "es-shim-unscopables": "^1.0.0", + "get-intrinsic": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -15942,10 +15946,10 @@ "jiti": "bin/jiti.js" } }, - "node_modules/jquery": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", - "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==", + "node_modules/jju": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz", + "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==", "dev": true }, "node_modules/js-base64": { @@ -28202,6 +28206,54 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "@microsoft/tsdoc": { + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.14.2.tgz", + "integrity": "sha512-9b8mPpKrfeGRuhFH5iO1iwCLeIIsV6+H1sRfxbkoGXIyQE2BTsPd9zqSqQJ+pv5sJ/hT5M1zvOFL02MnEezFug==", + "dev": true + }, + "@microsoft/tsdoc-config": { + "version": "0.16.2", + "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.16.2.tgz", + "integrity": "sha512-OGiIzzoBLgWWR0UdRJX98oYO+XKGf7tiK4Zk6tQ/E4IJqGCe7dvkTvgDZV5cFJUzLGDOjeAXrnZoA6QkVySuxw==", + "dev": true, + "requires": { + "@microsoft/tsdoc": "0.14.2", + "ajv": "~6.12.6", + "jju": "~1.4.0", + "resolve": "~1.19.0" + }, + "dependencies": { + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "resolve": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz", + "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==", + "dev": true, + "requires": { + "is-core-module": "^2.1.0", + "path-parse": "^1.0.6" + } + } + } + }, "@mui/base": { "version": "5.0.0-beta.17", "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.17.tgz", @@ -30073,14 +30125,14 @@ "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==" }, "array-includes": { - "version": "3.1.6", - "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz", - "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==", + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz", + "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4", - "get-intrinsic": "^1.1.3", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "get-intrinsic": "^1.2.1", "is-string": "^1.0.7" } }, @@ -30107,25 +30159,37 @@ "is-string": "^1.0.7" } }, + "array.prototype.findlastindex": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz", + "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==", + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "es-shim-unscopables": "^1.0.0", + "get-intrinsic": "^1.2.1" + } + }, "array.prototype.flat": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz", - "integrity": "sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz", + "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", "es-shim-unscopables": "^1.0.0" } }, "array.prototype.flatmap": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz", - "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz", + "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", "es-shim-unscopables": "^1.0.0" } }, @@ -30153,6 +30217,20 @@ "get-intrinsic": "^1.1.3" } }, + "arraybuffer.prototype.slice": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz", + "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==", + "requires": { + "array-buffer-byte-length": "^1.0.0", + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "get-intrinsic": "^1.2.1", + "is-array-buffer": "^3.0.2", + "is-shared-array-buffer": "^1.0.2" + } + }, "arrify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", @@ -30858,12 +30936,13 @@ } }, "call-bind": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", - "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz", + "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==", "requires": { - "function-bind": "^1.1.1", - "get-intrinsic": "^1.0.2" + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.1", + "set-function-length": "^1.1.1" } }, "callsites": { @@ -32082,6 +32161,16 @@ "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==", "dev": true }, + "define-data-property": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz", + "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==", + "requires": { + "get-intrinsic": "^1.2.1", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.0" + } + }, "define-lazy-prop": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", @@ -32510,24 +32599,25 @@ } }, "es-abstract": { - "version": "1.21.3", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.3.tgz", - "integrity": "sha512-ZU4miiY1j3sGPFLJ34VJXEqhpmL+HGByCinGHv4HC+Fxl2fI2Z4yR6tl0mORnDr6PA8eihWo4LmSWDbvhALckg==", + "version": "1.22.3", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz", + "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==", "requires": { "array-buffer-byte-length": "^1.0.0", + "arraybuffer.prototype.slice": "^1.0.2", "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", + "call-bind": "^1.0.5", "es-set-tostringtag": "^2.0.1", "es-to-primitive": "^1.2.1", - "function.prototype.name": "^1.1.5", - "get-intrinsic": "^1.2.1", + "function.prototype.name": "^1.1.6", + "get-intrinsic": "^1.2.2", "get-symbol-description": "^1.0.0", "globalthis": "^1.0.3", "gopd": "^1.0.1", - "has": "^1.0.3", "has-property-descriptors": "^1.0.0", "has-proto": "^1.0.1", "has-symbols": "^1.0.3", + "hasown": "^2.0.0", "internal-slot": "^1.0.5", "is-array-buffer": "^3.0.2", "is-callable": "^1.2.7", @@ -32535,20 +32625,23 @@ "is-regex": "^1.1.4", "is-shared-array-buffer": "^1.0.2", "is-string": "^1.0.7", - "is-typed-array": "^1.1.10", + "is-typed-array": "^1.1.12", "is-weakref": "^1.0.2", - "object-inspect": "^1.12.3", + "object-inspect": "^1.13.1", "object-keys": "^1.1.1", "object.assign": "^4.1.4", - "regexp.prototype.flags": "^1.5.0", + "regexp.prototype.flags": "^1.5.1", + "safe-array-concat": "^1.0.1", "safe-regex-test": "^1.0.0", - "string.prototype.trim": "^1.2.7", - "string.prototype.trimend": "^1.0.6", - "string.prototype.trimstart": "^1.0.6", + "string.prototype.trim": "^1.2.8", + "string.prototype.trimend": "^1.0.7", + "string.prototype.trimstart": "^1.0.7", + "typed-array-buffer": "^1.0.0", + "typed-array-byte-length": "^1.0.0", "typed-array-byte-offset": "^1.0.0", "typed-array-length": "^1.0.4", "unbox-primitive": "^1.0.2", - "which-typed-array": "^1.1.10" + "which-typed-array": "^1.1.13" } }, "es-array-method-boxes-properly": { @@ -32814,13 +32907,13 @@ } }, "eslint-import-resolver-node": { - "version": "0.3.7", - "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz", - "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==", + "version": "0.3.9", + "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz", + "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==", "requires": { "debug": "^3.2.7", - "is-core-module": "^2.11.0", - "resolve": "^1.22.1" + "is-core-module": "^2.13.0", + "resolve": "^1.22.4" }, "dependencies": { "debug": { @@ -32861,25 +32954,27 @@ } }, "eslint-plugin-import": { - "version": "2.27.5", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz", - "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==", + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", + "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "requires": { - "array-includes": "^3.1.6", - "array.prototype.flat": "^1.3.1", - "array.prototype.flatmap": "^1.3.1", + "array-includes": "^3.1.7", + "array.prototype.findlastindex": "^1.2.3", + "array.prototype.flat": "^1.3.2", + "array.prototype.flatmap": "^1.3.2", "debug": "^3.2.7", "doctrine": "^2.1.0", - "eslint-import-resolver-node": "^0.3.7", - "eslint-module-utils": "^2.7.4", - "has": "^1.0.3", - "is-core-module": "^2.11.0", + "eslint-import-resolver-node": "^0.3.9", + "eslint-module-utils": "^2.8.0", + "hasown": "^2.0.0", + "is-core-module": "^2.13.1", "is-glob": "^4.0.3", "minimatch": "^3.1.2", - "object.values": "^1.1.6", - "resolve": "^1.22.1", - "semver": "^6.3.0", - "tsconfig-paths": "^3.14.1" + "object.fromentries": "^2.0.7", + "object.groupby": "^1.0.1", + "object.values": "^1.1.7", + "semver": "^6.3.1", + "tsconfig-paths": "^3.15.0" }, "dependencies": { "debug": { @@ -33017,6 +33112,16 @@ "@typescript-eslint/utils": "^5.58.0" } }, + "eslint-plugin-tsdoc": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/eslint-plugin-tsdoc/-/eslint-plugin-tsdoc-0.2.17.tgz", + "integrity": "sha512-xRmVi7Zx44lOBuYqG8vzTXuL6IdGOeF9nHX17bjJ8+VE6fsxpdGem0/SBTmAwgYMKYB1WBkqRJVQ+n8GK041pA==", + "dev": true, + "requires": { + "@microsoft/tsdoc": "0.14.2", + "@microsoft/tsdoc-config": "0.16.2" + } + }, "eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -33937,19 +34042,19 @@ "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==" }, "function.prototype.name": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz", - "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==", + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz", + "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.3", - "es-abstract": "^1.19.0", - "functions-have-names": "^1.2.2" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "functions-have-names": "^1.2.3" } }, "functions-have-names": { @@ -34005,14 +34110,14 @@ "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==" }, "get-intrinsic": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz", - "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz", + "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==", "requires": { - "function-bind": "^1.1.1", - "has": "^1.0.3", + "function-bind": "^1.1.2", "has-proto": "^1.0.1", - "has-symbols": "^1.0.3" + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" } }, "get-own-enumerable-property-symbols": { @@ -34458,6 +34563,14 @@ "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==", "dev": true }, + "hasown": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz", + "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==", + "requires": { + "function-bind": "^1.1.2" + } + }, "he": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", @@ -34997,11 +35110,11 @@ } }, "is-core-module": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz", - "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==", + "version": "2.13.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", + "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", "requires": { - "has": "^1.0.3" + "hasown": "^2.0.0" } }, "is-data-descriptor": { @@ -35195,15 +35308,11 @@ } }, "is-typed-array": { - "version": "1.1.10", - "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz", - "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz", + "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==", "requires": { - "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", - "for-each": "^0.3.3", - "gopd": "^1.0.1", - "has-tostringtag": "^1.0.0" + "which-typed-array": "^1.1.11" } }, "is-typedarray": { @@ -37379,6 +37488,12 @@ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz", "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==" }, + "jju": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz", + "integrity": "sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==", + "dev": true + }, "js-base64": { "version": "2.6.4", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", @@ -39021,9 +39136,9 @@ "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==" }, "object-inspect": { - "version": "1.12.3", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz", - "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==" + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", + "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==" }, "object-is": { "version": "1.1.5", @@ -39070,13 +39185,13 @@ } }, "object.fromentries": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.6.tgz", - "integrity": "sha512-VciD13dswC4j1Xt5394WR4MzmAQmlgN72phd/riNp9vtD7tp4QQWJ0R4wvclXcafgcYK8veHRed2W6XeGBvcfg==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz", + "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" } }, "object.getownpropertydescriptors": { @@ -39091,6 +39206,17 @@ "safe-array-concat": "^1.0.0" } }, + "object.groupby": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz", + "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==", + "requires": { + "call-bind": "^1.0.2", + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1", + "get-intrinsic": "^1.2.1" + } + }, "object.hasown": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz", @@ -39109,13 +39235,13 @@ } }, "object.values": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.6.tgz", - "integrity": "sha512-FVVTkD1vENCsAcwNs9k6jea2uHC/X0+JcjG8YA60FN5CMaJmG95wT9jek/xX9nornqGRrBkKtzuAu2wuHpKqvw==", + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz", + "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" } }, "obuf": { @@ -41073,13 +41199,13 @@ "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==" }, "regexp.prototype.flags": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", - "integrity": "sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", + "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==", "requires": { "call-bind": "^1.0.2", "define-properties": "^1.2.0", - "functions-have-names": "^1.2.3" + "set-function-name": "^2.0.0" } }, "regexpu-core": { @@ -41350,11 +41476,11 @@ "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" }, "resolve": { - "version": "1.22.2", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", - "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", + "version": "1.22.8", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "requires": { - "is-core-module": "^2.11.0", + "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" } @@ -41602,12 +41728,12 @@ } }, "safe-array-concat": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.0.tgz", - "integrity": "sha512-9dVEFruWIsnie89yym+xWTAYASdpw3CJV7Li/6zBewGf9z2i1j31rP6jnY0pHEO4QZh6N0K11bFjWmdR8UGdPQ==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz", + "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==", "requires": { "call-bind": "^1.0.2", - "get-intrinsic": "^1.2.0", + "get-intrinsic": "^1.2.1", "has-symbols": "^1.0.3", "isarray": "^2.0.5" }, @@ -42197,6 +42323,27 @@ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" }, + "set-function-length": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz", + "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==", + "requires": { + "define-data-property": "^1.1.1", + "get-intrinsic": "^1.2.1", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.0" + } + }, + "set-function-name": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz", + "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==", + "requires": { + "define-data-property": "^1.0.1", + "functions-have-names": "^1.2.3", + "has-property-descriptors": "^1.0.0" + } + }, "set-getter": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.1.tgz", @@ -42883,33 +43030,33 @@ } }, "string.prototype.trim": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz", - "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==", + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz", + "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" } }, "string.prototype.trimend": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz", - "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz", + "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" } }, "string.prototype.trimstart": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz", - "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz", + "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==", "requires": { "call-bind": "^1.0.2", - "define-properties": "^1.1.4", - "es-abstract": "^1.20.4" + "define-properties": "^1.2.0", + "es-abstract": "^1.22.1" } }, "stringify-object": { @@ -43569,9 +43716,9 @@ } }, "tsconfig-paths": { - "version": "3.14.2", - "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", - "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==", + "version": "3.15.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", + "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==", "requires": { "@types/json5": "^0.0.29", "json5": "^1.0.2", @@ -43656,6 +43803,27 @@ "mime-types": "~2.1.24" } }, + "typed-array-buffer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz", + "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==", + "requires": { + "call-bind": "^1.0.2", + "get-intrinsic": "^1.2.1", + "is-typed-array": "^1.1.10" + } + }, + "typed-array-byte-length": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz", + "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==", + "requires": { + "call-bind": "^1.0.2", + "for-each": "^0.3.3", + "has-proto": "^1.0.1", + "is-typed-array": "^1.1.10" + } + }, "typed-array-byte-offset": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz", @@ -44334,16 +44502,15 @@ } }, "which-typed-array": { - "version": "1.1.10", - "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.10.tgz", - "integrity": "sha512-uxoA5vLUfRPdjCuJ1h5LlYdmTLbYfums398v3WLkM+i/Wltl2/XyZpQWKbN++ck5L64SR/grOHqtXCUKmlZPNA==", + "version": "1.1.13", + "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz", + "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==", "requires": { "available-typed-arrays": "^1.0.5", - "call-bind": "^1.0.2", + "call-bind": "^1.0.4", "for-each": "^0.3.3", "gopd": "^1.0.1", - "has-tostringtag": "^1.0.0", - "is-typed-array": "^1.1.10" + "has-tostringtag": "^1.0.0" } }, "wide-align": { diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css index 53f02847eb..7b6d4b0ff9 100644 --- a/src/components/EventCalendar/EventCalendar.module.css +++ b/src/components/EventCalendar/EventCalendar.module.css @@ -38,6 +38,15 @@ grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, 1fr); } +.calendar__hours { + display: flex; +} +.calendar__hour { + border-bottom: 1px solid gray; + list-style: none; + display: flex; + border-end-end-radius: 5px; +} .day { background-color: #ffffff; padding-left: 0.3rem; @@ -75,6 +84,11 @@ margin-left: 20px; border: none; } +.selectType { + padding: 10px 10px 10px 10px; + border-radius: 10px; + margin: 0px 5px 0px 5px; +} .btn__more { border: 0px; font-size: 14px; @@ -97,7 +111,7 @@ width: 200px; max-height: 250px; z-index: 10; - position: relative; + position: absolute; left: auto; right: auto; overflow: auto; diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 154f173de8..d96cc6002d 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -39,6 +39,11 @@ enum Role { SUPERADMIN = 'SUPERADMIN', ADMIN = 'ADMIN', } + +enum ViewType { + DAY = 'day', + MONTH = 'month', +} interface InterfaceIEventAttendees { userId: string; user?: string; @@ -71,13 +76,16 @@ const Calendar: React.FC = ({ 'November', 'December', ]; + const hours = Array.from({ length: 24 }, (_, index) => index); const today = new Date(); + const [currentDate, setCurrentDate] = useState(today.getDate()); const [currentMonth, setCurrentMonth] = useState(today.getMonth()); const [currentYear, setCurrentYear] = useState(today.getFullYear()); const [events, setEvents] = useState(null); const [expanded, setExpanded] = useState(-1); const [windowWidth, setWindowWidth] = useState(window.screen.width); + const [viewType, setViewType] = useState(ViewType.MONTH); useEffect(() => { function handleResize(): void { @@ -129,6 +137,10 @@ const Calendar: React.FC = ({ setEvents(data); }, [eventData, orgData, userRole, userId]); + const handleChangeView = (e: React.ChangeEvent): void => { + setViewType(e.target.value); + }; + const handlePrevMonth = (): void => { if (currentMonth === 0) { setCurrentMonth(11); @@ -146,10 +158,206 @@ const Calendar: React.FC = ({ setCurrentMonth(currentMonth + 1); } }; + + const handlePrevDate = (): void => { + if (currentDate > 1) { + setCurrentDate(currentDate - 1); + } else { + if (currentMonth > 0) { + const lastDayOfPrevMonth = new Date( + currentYear, + currentMonth, + 0 + ).getDate(); + setCurrentDate(lastDayOfPrevMonth); + setCurrentMonth(currentMonth - 1); + } else { + setCurrentDate(31); + setCurrentMonth(11); + setCurrentYear(currentYear - 1); + } + } + }; + + const handleNextDate = (): void => { + const lastDayOfCurrentMonth = new Date( + currentYear, + currentMonth - 1, + 0 + ).getDate(); + if (currentDate < lastDayOfCurrentMonth) { + setCurrentDate(currentDate + 1); + } else { + if (currentMonth < 12) { + setCurrentDate(1); + setCurrentMonth(currentMonth + 1); + } else { + setCurrentDate(1); + setCurrentMonth(1); + setCurrentYear(currentYear + 1); + } + } + }; + const handleTodayButton = (): void => { setCurrentYear(today.getFullYear()); setCurrentMonth(today.getMonth()); + setCurrentDate(today.getDate()); + }; + + const renderHours = (): JSX.Element => { + const allDayEventsList: any = events + ?.filter((datas) => { + const currDate = new Date(currentYear, currentMonth, currentDate); + if ( + datas.startTime == undefined && + datas.startDate == dayjs(currDate).format('YYYY-MM-DD') + ) { + return datas; + } + }) + .map((datas: InterfaceEvent) => { + return ( + + ); + }); + + return ( + <> + {allDayEventsList.length > 0 && ( +
+ {allDayEventsList} +
+ )} + {hours.map((hour, index) => { + const toggleExpand = (index: number): void => { + if (expanded === index) { + setExpanded(-1); + } else { + setExpanded(index); + } + }; + + const timeEventsList: any = events + ?.filter((datas) => { + const currDate = new Date(currentYear, currentMonth, currentDate); + if ( + datas.startTime?.slice(0, 2) == + dayjs().hour(hour).format('HH') && + datas.startDate == dayjs(currDate).format('YYYY-MM-DD') + ) { + return datas; + } + }) + .map((datas: InterfaceEvent) => { + return ( + + ); + }); + + return ( +
+
+

{`${hour}:00`}

+
+
+
+
+
+ {expanded === index + ? timeEventsList + : timeEventsList?.slice(0, 1)} +
+ {(timeEventsList?.length > 1 || + (windowWidth <= 700 && timeEventsList?.length > 0)) && ( + + )} +
+
+
+ ); + })} + + ); }; + const renderDays = (): JSX.Element[] => { const monthStart = new Date(currentYear, currentMonth, 1); const monthEnd = new Date(currentYear, currentMonth + 1, 0); @@ -259,18 +467,23 @@ const Calendar: React.FC = ({
+
+ {viewType == ViewType.DAY ? `${currentDate}` : ``}{' '} {months[currentMonth]} {currentYear}
-
@@ -282,16 +495,30 @@ const Calendar: React.FC = ({ Today
+
+
+ +
- -
- {weekdays.map((weekday, index) => ( -
- {weekday} +
+ {viewType == ViewType.MONTH ? ( +
+
+ {weekdays.map((weekday, index) => ( +
+ {weekday} +
+ ))} +
+
{renderDays()}
- ))} + ) : ( +
{renderHours()}
+ )}
-
{renderDays()}
); }; From d3a6ee3b37873b7928d0a60f9920abe7199ebe37 Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Wed, 17 Jan 2024 17:46:20 +0530 Subject: [PATCH 02/11] Done Changes --- .../EventCalendar/EventCalendar.tsx | 68 ++++++++++++++++--- 1 file changed, 57 insertions(+), 11 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index d96cc6002d..ddda0cfac8 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -206,6 +206,14 @@ const Calendar: React.FC = ({ }; const renderHours = (): JSX.Element => { + const toggleExpand = (index: number): void => { + if (expanded === index) { + setExpanded(-1); + } else { + setExpanded(index); + } + }; + const allDayEventsList: any = events ?.filter((datas) => { const currDate = new Date(currentYear, currentMonth, currentDate); @@ -238,26 +246,62 @@ const Calendar: React.FC = ({ return ( <> - {allDayEventsList.length > 0 && ( + {allDayEventsList && (
- {allDayEventsList} +
+
+
+
+
+ {expanded === 1 + ? allDayEventsList + : allDayEventsList?.slice(0, 1)} +
+ {(allDayEventsList?.length > 1 || + (windowWidth <= 700 && allDayEventsList?.length > 0)) && ( + + )} +
+
)} {hours.map((hour, index) => { - const toggleExpand = (index: number): void => { - if (expanded === index) { - setExpanded(-1); - } else { - setExpanded(index); - } - }; - const timeEventsList: any = events ?.filter((datas) => { const currDate = new Date(currentYear, currentMonth, currentDate); @@ -306,6 +350,8 @@ const Calendar: React.FC = ({ display: 'flex', flexDirection: 'row', alignItems: 'flex-end', + borderRight: '1px solid gray', + width: '50px', }} >

Date: Wed, 17 Jan 2024 21:23:44 +0530 Subject: [PATCH 03/11] Added CSS --- .../EventCalendar/EventCalendar.module.css | 39 ++++-- .../EventCalendar/EventCalendar.tsx | 115 +++++++----------- 2 files changed, 76 insertions(+), 78 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css index 7b6d4b0ff9..4e7f292395 100644 --- a/src/components/EventCalendar/EventCalendar.module.css +++ b/src/components/EventCalendar/EventCalendar.module.css @@ -38,14 +38,31 @@ grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, 1fr); } -.calendar__hours { +.calendar_hour_text_container { display: flex; + flex-direction: row; + align-items: flex-end; + border-right: 1px solid gray; + width: 50px; +} +.calendar_hour_text { + top: 20px; + left: -5px; + position: relative; } -.calendar__hour { - border-bottom: 1px solid gray; - list-style: none; +.calendar_hour_block { display: flex; - border-end-end-radius: 5px; + flex-direction: row; + border-bottom: 1px solid gray; + position: relative; + height: 70px; + border-bottom-right-radius: 5px; +} +.event_list_parent { + position: relative; +} +.dummyWidth { + width: 1px; } .day { background-color: #ffffff; @@ -56,6 +73,7 @@ color: #4b4b4b; font-weight: 600; height: 8rem; + position: relative; } .day__outside { background-color: #eeeded; @@ -85,7 +103,7 @@ border: none; } .selectType { - padding: 10px 10px 10px 10px; + padding: 16px 10px 16px 10px; border-radius: 10px; margin: 0px 5px 0px 5px; } @@ -106,7 +124,10 @@ .expand_event_list { display: block; } - +.list_container { + padding: 5px; + width: fit-content; +} .expand_list_container { width: 200px; max-height: 250px; @@ -119,6 +140,10 @@ background-color: rgb(241, 241, 241); border: 1px solid rgb(201, 201, 201); border-radius: 5px; + margin: 5px; +} +.flex_grow { + flex-grow: 1; } @media only screen and (max-width: 700px) { diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index ddda0cfac8..8de64d6cdb 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -4,6 +4,7 @@ import Button from 'react-bootstrap/Button'; import React, { useState, useEffect } from 'react'; import styles from './EventCalendar.module.css'; import { ChevronLeft, ChevronRight } from '@mui/icons-material'; +import { Dropdown } from 'react-bootstrap'; interface InterfaceEvent { _id: string; @@ -41,8 +42,8 @@ enum Role { } enum ViewType { - DAY = 'day', - MONTH = 'month', + DAY = 'Day', + MONTH = 'Month', } interface InterfaceIEventAttendees { userId: string; @@ -137,8 +138,8 @@ const Calendar: React.FC = ({ setEvents(data); }, [eventData, orgData, userRole, userId]); - const handleChangeView = (e: React.ChangeEvent): void => { - setViewType(e.target.value); + const handleChangeView = (item: any): void => { + setViewType(item); }; const handlePrevMonth = (): void => { @@ -246,34 +247,18 @@ const Calendar: React.FC = ({ return ( <> - {allDayEventsList && ( -

-
-
-
+ {allDayEventsList.length > 0 && ( +
+
{``}
+
+
= ({ : styles.event_list } > - {expanded === 1 + {expanded === -100 ? allDayEventsList : allDayEventsList?.slice(0, 1)}
@@ -291,10 +276,10 @@ const Calendar: React.FC = ({ )}
@@ -334,44 +319,19 @@ const Calendar: React.FC = ({ }); return ( -
-
-

{`${hour}:00`}

+
+
+

{`${hour}:00`}

-
-
+
+
= ({ Today
-
+
- + */} + + + {viewType || ViewType.MONTH} + + + + {ViewType.MONTH} + + + {ViewType.DAY} + + +
From a65a287155c42e86dfed792c2e2e909a19ea5f2f Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Wed, 17 Jan 2024 21:29:25 +0530 Subject: [PATCH 04/11] Revert Changes to Package.json --- .../EventCalendar/EventCalendar.module.css | 43 ++- .../EventCalendar/EventCalendar.tsx | 264 +++++++++++++++++- 2 files changed, 296 insertions(+), 11 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css index 53f02847eb..4e7f292395 100644 --- a/src/components/EventCalendar/EventCalendar.module.css +++ b/src/components/EventCalendar/EventCalendar.module.css @@ -38,6 +38,32 @@ grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, 1fr); } +.calendar_hour_text_container { + display: flex; + flex-direction: row; + align-items: flex-end; + border-right: 1px solid gray; + width: 50px; +} +.calendar_hour_text { + top: 20px; + left: -5px; + position: relative; +} +.calendar_hour_block { + display: flex; + flex-direction: row; + border-bottom: 1px solid gray; + position: relative; + height: 70px; + border-bottom-right-radius: 5px; +} +.event_list_parent { + position: relative; +} +.dummyWidth { + width: 1px; +} .day { background-color: #ffffff; padding-left: 0.3rem; @@ -47,6 +73,7 @@ color: #4b4b4b; font-weight: 600; height: 8rem; + position: relative; } .day__outside { background-color: #eeeded; @@ -75,6 +102,11 @@ margin-left: 20px; border: none; } +.selectType { + padding: 16px 10px 16px 10px; + border-radius: 10px; + margin: 0px 5px 0px 5px; +} .btn__more { border: 0px; font-size: 14px; @@ -92,12 +124,15 @@ .expand_event_list { display: block; } - +.list_container { + padding: 5px; + width: fit-content; +} .expand_list_container { width: 200px; max-height: 250px; z-index: 10; - position: relative; + position: absolute; left: auto; right: auto; overflow: auto; @@ -105,6 +140,10 @@ background-color: rgb(241, 241, 241); border: 1px solid rgb(201, 201, 201); border-radius: 5px; + margin: 5px; +} +.flex_grow { + flex-grow: 1; } @media only screen and (max-width: 700px) { diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 154f173de8..8de64d6cdb 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -4,6 +4,7 @@ import Button from 'react-bootstrap/Button'; import React, { useState, useEffect } from 'react'; import styles from './EventCalendar.module.css'; import { ChevronLeft, ChevronRight } from '@mui/icons-material'; +import { Dropdown } from 'react-bootstrap'; interface InterfaceEvent { _id: string; @@ -39,6 +40,11 @@ enum Role { SUPERADMIN = 'SUPERADMIN', ADMIN = 'ADMIN', } + +enum ViewType { + DAY = 'Day', + MONTH = 'Month', +} interface InterfaceIEventAttendees { userId: string; user?: string; @@ -71,13 +77,16 @@ const Calendar: React.FC = ({ 'November', 'December', ]; + const hours = Array.from({ length: 24 }, (_, index) => index); const today = new Date(); + const [currentDate, setCurrentDate] = useState(today.getDate()); const [currentMonth, setCurrentMonth] = useState(today.getMonth()); const [currentYear, setCurrentYear] = useState(today.getFullYear()); const [events, setEvents] = useState(null); const [expanded, setExpanded] = useState(-1); const [windowWidth, setWindowWidth] = useState(window.screen.width); + const [viewType, setViewType] = useState(ViewType.MONTH); useEffect(() => { function handleResize(): void { @@ -129,6 +138,10 @@ const Calendar: React.FC = ({ setEvents(data); }, [eventData, orgData, userRole, userId]); + const handleChangeView = (item: any): void => { + setViewType(item); + }; + const handlePrevMonth = (): void => { if (currentMonth === 0) { setCurrentMonth(11); @@ -146,10 +159,211 @@ const Calendar: React.FC = ({ setCurrentMonth(currentMonth + 1); } }; + + const handlePrevDate = (): void => { + if (currentDate > 1) { + setCurrentDate(currentDate - 1); + } else { + if (currentMonth > 0) { + const lastDayOfPrevMonth = new Date( + currentYear, + currentMonth, + 0 + ).getDate(); + setCurrentDate(lastDayOfPrevMonth); + setCurrentMonth(currentMonth - 1); + } else { + setCurrentDate(31); + setCurrentMonth(11); + setCurrentYear(currentYear - 1); + } + } + }; + + const handleNextDate = (): void => { + const lastDayOfCurrentMonth = new Date( + currentYear, + currentMonth - 1, + 0 + ).getDate(); + if (currentDate < lastDayOfCurrentMonth) { + setCurrentDate(currentDate + 1); + } else { + if (currentMonth < 12) { + setCurrentDate(1); + setCurrentMonth(currentMonth + 1); + } else { + setCurrentDate(1); + setCurrentMonth(1); + setCurrentYear(currentYear + 1); + } + } + }; + const handleTodayButton = (): void => { setCurrentYear(today.getFullYear()); setCurrentMonth(today.getMonth()); + setCurrentDate(today.getDate()); + }; + + const renderHours = (): JSX.Element => { + const toggleExpand = (index: number): void => { + if (expanded === index) { + setExpanded(-1); + } else { + setExpanded(index); + } + }; + + const allDayEventsList: any = events + ?.filter((datas) => { + const currDate = new Date(currentYear, currentMonth, currentDate); + if ( + datas.startTime == undefined && + datas.startDate == dayjs(currDate).format('YYYY-MM-DD') + ) { + return datas; + } + }) + .map((datas: InterfaceEvent) => { + return ( + + ); + }); + + return ( + <> + {allDayEventsList.length > 0 && ( +
+
{``}
+
+
+
+
+ {expanded === -100 + ? allDayEventsList + : allDayEventsList?.slice(0, 1)} +
+ {(allDayEventsList?.length > 1 || + (windowWidth <= 700 && allDayEventsList?.length > 0)) && ( + + )} +
+
+
+ )} + {hours.map((hour, index) => { + const timeEventsList: any = events + ?.filter((datas) => { + const currDate = new Date(currentYear, currentMonth, currentDate); + if ( + datas.startTime?.slice(0, 2) == + dayjs().hour(hour).format('HH') && + datas.startDate == dayjs(currDate).format('YYYY-MM-DD') + ) { + return datas; + } + }) + .map((datas: InterfaceEvent) => { + return ( + + ); + }); + + return ( +
+
+

{`${hour}:00`}

+
+
+
+
+
+ {expanded === index + ? timeEventsList + : timeEventsList?.slice(0, 1)} +
+ {(timeEventsList?.length > 1 || + (windowWidth <= 700 && timeEventsList?.length > 0)) && ( + + )} +
+
+
+ ); + })} + + ); }; + const renderDays = (): JSX.Element[] => { const monthStart = new Date(currentYear, currentMonth, 1); const monthEnd = new Date(currentYear, currentMonth + 1, 0); @@ -259,18 +473,23 @@ const Calendar: React.FC = ({
+
+ {viewType == ViewType.DAY ? `${currentDate}` : ``}{' '} {months[currentMonth]} {currentYear}
-
@@ -282,16 +501,43 @@ const Calendar: React.FC = ({ Today
+
+
+ {/* + + + */} + + + {viewType || ViewType.MONTH} + + + + {ViewType.MONTH} + + + {ViewType.DAY} + + + +
- -
- {weekdays.map((weekday, index) => ( -
- {weekday} +
+ {viewType == ViewType.MONTH ? ( +
+
+ {weekdays.map((weekday, index) => ( +
+ {weekday} +
+ ))} +
+
{renderDays()}
- ))} + ) : ( +
{renderHours()}
+ )}
-
{renderDays()}
); }; From b0354f68bbfecbf59a183637b82443c0cba0e5e5 Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Thu, 18 Jan 2024 21:34:19 +0530 Subject: [PATCH 05/11] Fixed test file for event calender --- src/components/UserPortal/EventCard/EventCard.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/UserPortal/EventCard/EventCard.test.tsx b/src/components/UserPortal/EventCard/EventCard.test.tsx index 8e5079767e..93c2ecee64 100644 --- a/src/components/UserPortal/EventCard/EventCard.test.tsx +++ b/src/components/UserPortal/EventCard/EventCard.test.tsx @@ -11,6 +11,7 @@ import { Provider } from 'react-redux'; import { store } from 'state/store'; import { StaticMockLink } from 'utils/StaticMockLink'; import userEvent from '@testing-library/user-event'; +import { debug } from 'jest-preview'; const MOCKS = [ { @@ -46,8 +47,8 @@ describe('Testing Event Card In User portal', () => { endDate: '2023-04-15', isRegisterable: true, isPublic: true, - endTime: '19:49:12Z', - startTime: '17:49:12Z', + endTime: '19:49:12', + startTime: '17:49:12', recurring: false, allDay: true, creator: { @@ -75,6 +76,7 @@ describe('Testing Event Card In User portal', () => { ); + debug(); await waitFor(() => expect(queryByText('Test Event')).toBeInTheDocument()); await waitFor(() => expect(queryByText('This is a test event')).toBeInTheDocument() From e8e026391fa50c82a81f7d2dd16425111ece3b58 Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Fri, 19 Jan 2024 16:59:37 +0530 Subject: [PATCH 06/11] Changed borders to gray instead of black --- src/components/EventCalendar/EventCalendar.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css index 4e7f292395..19acc95b91 100644 --- a/src/components/EventCalendar/EventCalendar.module.css +++ b/src/components/EventCalendar/EventCalendar.module.css @@ -42,7 +42,7 @@ display: flex; flex-direction: row; align-items: flex-end; - border-right: 1px solid gray; + border-right: 1px solid #8d8d8d55; width: 50px; } .calendar_hour_text { @@ -53,7 +53,7 @@ .calendar_hour_block { display: flex; flex-direction: row; - border-bottom: 1px solid gray; + border-bottom: 1px solid #8d8d8d55; position: relative; height: 70px; border-bottom-right-radius: 5px; From 6c5b51e2eca865d753e52ba4843da0df59f8f8be Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Wed, 24 Jan 2024 23:01:05 +0530 Subject: [PATCH 07/11] Changed colors and text style --- .../EventCalendar/EventCalendar.module.css | 13 +++++-- .../EventCalendar/EventCalendar.tsx | 34 ++++++++++++++++--- 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css index 19acc95b91..348a123f81 100644 --- a/src/components/EventCalendar/EventCalendar.module.css +++ b/src/components/EventCalendar/EventCalendar.module.css @@ -43,19 +43,21 @@ flex-direction: row; align-items: flex-end; border-right: 1px solid #8d8d8d55; - width: 50px; + width: 40px; } .calendar_hour_text { top: 20px; left: -5px; position: relative; + color: #707070; + font-size: 12px; } .calendar_hour_block { display: flex; flex-direction: row; border-bottom: 1px solid #8d8d8d55; position: relative; - height: 70px; + height: 50px; border-bottom-right-radius: 5px; } .event_list_parent { @@ -116,6 +118,7 @@ transition: all 200ms; position: relative; display: block; + margin: 2px; } .btn__more:hover { color: #3ce080; @@ -127,6 +130,12 @@ .list_container { padding: 5px; width: fit-content; + display: flex; + flex-direction: row; +} +.event_list_hour { + display: flex; + flex-direction: row; } .expand_list_container { width: 200px; diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 8de64d6cdb..8d037d2f66 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -77,7 +77,30 @@ const Calendar: React.FC = ({ 'November', 'December', ]; - const hours = Array.from({ length: 24 }, (_, index) => index); + const hours = [ + '12 AM', + '01 AM', + '02 AM', + '03 AM', + '04 AM', + '05 AM', + '06 AM', + '07 AM', + '09 AM', + '10 AM', + '11 AM', + '12 PM', + '01 PM', + '02 PM', + '03 PM', + '04 PM', + '05 PM', + '06 PM', + '07 PM', + '09 PM', + '10 PM', + '11 PM', + ]; const today = new Date(); const [currentDate, setCurrentDate] = useState(today.getDate()); @@ -262,9 +285,9 @@ const Calendar: React.FC = ({ >
{expanded === -100 @@ -289,10 +312,11 @@ const Calendar: React.FC = ({ {hours.map((hour, index) => { const timeEventsList: any = events ?.filter((datas) => { + console.log(dayjs(hour, { format: 'hh A' })); const currDate = new Date(currentYear, currentMonth, currentDate); if ( datas.startTime?.slice(0, 2) == - dayjs().hour(hour).format('HH') && + dayjs(hour, { format: 'hh A' }).format('HH') && datas.startDate == dayjs(currDate).format('YYYY-MM-DD') ) { return datas; @@ -321,7 +345,7 @@ const Calendar: React.FC = ({ return (
-

{`${hour}:00`}

+

{`${hour}`}

From af1094ae98d82ed15a47318ee6006ab2e3beef65 Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Sun, 28 Jan 2024 12:17:35 +0530 Subject: [PATCH 08/11] Requested changes added --- .../CurrentHourIndicator.module.css | 19 ++++++ .../CurrentHourIndicator.test.tsx | 10 ++++ .../CurrentHourIndicator.tsx | 13 ++++ .../EventCalendar/EventCalendar.module.css | 15 ++++- .../EventCalendar/EventCalendar.test.tsx | 59 +++++++++++++++++++ .../EventCalendar/EventCalendar.tsx | 52 ++++++++++++---- 6 files changed, 154 insertions(+), 14 deletions(-) create mode 100644 src/components/CurrentHourIndicator/CurrentHourIndicator.module.css create mode 100644 src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx create mode 100644 src/components/CurrentHourIndicator/CurrentHourIndicator.tsx diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css b/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css new file mode 100644 index 0000000000..d2c250035a --- /dev/null +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.module.css @@ -0,0 +1,19 @@ +.round { + background-color: red; + border-radius: 100%; + width: 15px; + height: 15px; +} +.line { + width: 100%; + height: 1px; + background-color: red; + margin: auto; +} +.container { + position: relative; + display: flex; + flex-direction: row; + top: -8px; + left: -9px; +} diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx new file mode 100644 index 0000000000..47bea7827c --- /dev/null +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx @@ -0,0 +1,10 @@ +import type { Dispatch, SetStateAction } from 'react'; +import React from 'react'; +import { render } from '@testing-library/react'; +import CurrentHourIndicator from './CurrentHourIndicator'; + +describe('Testing Current Hour Indicator', () => { + test('Component Should be rendered properly', async () => { + render(); + }); +}); diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx new file mode 100644 index 0000000000..2d8edfb36b --- /dev/null +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './CurrentHourIndicator.module.css'; + +const CurrentHourIndicator = (): JSX.Element => { + return ( +
+
+
+
+ ); +}; + +export default CurrentHourIndicator; diff --git a/src/components/EventCalendar/EventCalendar.module.css b/src/components/EventCalendar/EventCalendar.module.css index 348a123f81..1229e44a45 100644 --- a/src/components/EventCalendar/EventCalendar.module.css +++ b/src/components/EventCalendar/EventCalendar.module.css @@ -46,12 +46,19 @@ width: 40px; } .calendar_hour_text { - top: 20px; + top: -10px; left: -5px; position: relative; color: #707070; font-size: 12px; } +.calendar_timezone_text { + top: -10px; + left: -11px; + position: relative; + color: #707070; + font-size: 9px; +} .calendar_hour_block { display: flex; flex-direction: row; @@ -62,6 +69,12 @@ } .event_list_parent { position: relative; + width: 100%; +} +.event_list_parent_current { + background-color: #def6e1; + position: relative; + width: 100%; } .dummyWidth { width: 1px; diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx index bd242ea179..d13686d4eb 100644 --- a/src/components/EventCalendar/EventCalendar.test.tsx +++ b/src/components/EventCalendar/EventCalendar.test.tsx @@ -3,6 +3,7 @@ import Calendar from './EventCalendar'; import { render, screen, fireEvent, act } from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; +import { debug } from 'jest-preview'; import { DELETE_EVENT_MUTATION, @@ -11,6 +12,7 @@ import { import i18nForTest from 'utils/i18nForTest'; import { StaticMockLink } from 'utils/StaticMockLink'; import styles from './EventCalendar.module.css'; +import { BrowserRouter } from 'react-router-dom'; const eventData = [ { @@ -272,6 +274,63 @@ describe('Calendar', () => { fireEvent.click(lessButton); expect(screen.queryByText('Event 3')).not.toBeInTheDocument(); }); + // it('Should open the day view calendar', async () => { + // const multipleEventData = [ + // { + // _id: '1', + // title: 'Event 1', + // description: 'This is event 1', + // startDate: new Date().toISOString().split('T')[0], + // endDate: new Date().toISOString().split('T')[0], + // location: 'Los Angeles', + // startTime: '14:00', + // endTime: '16:00', + // allDay: false, + // recurring: false, + // isPublic: true, + // isRegisterable: true, + // }, + // { + // _id: '2', + // title: 'Event 2', + // description: 'This is event 2', + // startDate: new Date().toISOString().split('T')[0], + // endDate: new Date().toISOString().split('T')[0], + // location: 'Los Angeles', + // startTime: '14:00', + // endTime: '16:00', + // allDay: false, + // recurring: false, + // isPublic: true, + // isRegisterable: true, + // }, + // { + // _id: '3', + // title: 'Event 3', + // description: 'This is event 3', + // startDate: new Date().toISOString().split('T')[0], + // endDate: new Date().toISOString().split('T')[0], + // location: 'Los Angeles', + // startTime: '14:00', + // endTime: '16:00', + // allDay: false, + // recurring: false, + // isPublic: true, + // isRegisterable: true, + // }, + // ]; + // act(() => { + // render(< />); + // }); + // const selector = screen.getByText('Month'); + // await act(() => { + // fireEvent.click(selector); + // }); + // act(() => { + // fireEvent.click(getByTestId('selectDay')); + // }); + // debug(); + // }); test('Handles window resize', () => { render( diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 8d037d2f66..a0615963d7 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react'; import styles from './EventCalendar.module.css'; import { ChevronLeft, ChevronRight } from '@mui/icons-material'; import { Dropdown } from 'react-bootstrap'; +import CurrentHourIndicator from 'components/CurrentHourIndicator/CurrentHourIndicator'; interface InterfaceEvent { _id: string; @@ -41,7 +42,7 @@ enum Role { ADMIN = 'ADMIN', } -enum ViewType { +export enum ViewType { DAY = 'Day', MONTH = 'Month', } @@ -86,6 +87,7 @@ const Calendar: React.FC = ({ '05 AM', '06 AM', '07 AM', + '08 AM', '09 AM', '10 AM', '11 AM', @@ -97,6 +99,7 @@ const Calendar: React.FC = ({ '05 PM', '06 PM', '07 PM', + '08 PM', '09 PM', '10 PM', '11 PM', @@ -229,6 +232,13 @@ const Calendar: React.FC = ({ setCurrentDate(today.getDate()); }; + const timezoneString = `UTC${ + new Date().getTimezoneOffset() > 0 ? '-' : '+' + }${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart( + 2, + '0' + )}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, '0')}`; + const renderHours = (): JSX.Element => { const toggleExpand = (index: number): void => { if (expanded === index) { @@ -272,9 +282,17 @@ const Calendar: React.FC = ({ <> {allDayEventsList.length > 0 && (
-
{``}
+
+

{timezoneString}

+
-
+
0 + ? styles.event_list_parent_current + : styles.event_list_parent + } + >
= ({ {hours.map((hour, index) => { const timeEventsList: any = events ?.filter((datas) => { - console.log(dayjs(hour, { format: 'hh A' })); const currDate = new Date(currentYear, currentMonth, currentDate); + if ( - datas.startTime?.slice(0, 2) == - dayjs(hour, { format: 'hh A' }).format('HH') && + datas.startTime?.slice(0, 2) == (index % 24).toString() && datas.startDate == dayjs(currDate).format('YYYY-MM-DD') ) { return datas; @@ -348,7 +365,17 @@ const Calendar: React.FC = ({

{`${hour}`}

-
+
0 + ? styles.event_list_parent_current + : styles.event_list_parent + } + > + {index % 24 == new Date().getHours() && + new Date().getDate() == currentDate && ( + + )}
= ({
- {/* - - - */} {viewType || ViewType.MONTH} - + {ViewType.MONTH} - + {ViewType.DAY} From 26dcb245a433714d997873f6048ce2872f2cc75a Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Sun, 28 Jan 2024 19:14:55 +0530 Subject: [PATCH 09/11] Added tests for the changes --- .../CurrentHourIndicator.test.tsx | 3 +- .../CurrentHourIndicator.tsx | 2 +- .../EventCalendar/EventCalendar.test.tsx | 203 ++++++++++++------ .../EventCalendar/EventCalendar.tsx | 13 +- .../EventListCard/EventListCard.tsx | 4 +- 5 files changed, 153 insertions(+), 72 deletions(-) diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx index 47bea7827c..ef03c02c31 100644 --- a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx @@ -5,6 +5,7 @@ import CurrentHourIndicator from './CurrentHourIndicator'; describe('Testing Current Hour Indicator', () => { test('Component Should be rendered properly', async () => { - render(); + const { getByTestId } = render(); + expect(getByTestId('container')).toBeInTheDocument(); }); }); diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx index 2d8edfb36b..9e4a85454a 100644 --- a/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx @@ -3,7 +3,7 @@ import styles from './CurrentHourIndicator.module.css'; const CurrentHourIndicator = (): JSX.Element => { return ( -
+
diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx index d13686d4eb..9e127a5d86 100644 --- a/src/components/EventCalendar/EventCalendar.test.tsx +++ b/src/components/EventCalendar/EventCalendar.test.tsx @@ -1,6 +1,12 @@ /* eslint-disable react/react-in-jsx-scope */ import Calendar from './EventCalendar'; -import { render, screen, fireEvent, act } from '@testing-library/react'; +import { + render, + screen, + fireEvent, + act, + RenderResult, +} from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; import { debug } from 'jest-preview'; @@ -13,6 +19,7 @@ import i18nForTest from 'utils/i18nForTest'; import { StaticMockLink } from 'utils/StaticMockLink'; import styles from './EventCalendar.module.css'; import { BrowserRouter } from 'react-router-dom'; +import userEvent from '@testing-library/user-event'; const eventData = [ { @@ -137,10 +144,10 @@ describe('Calendar', () => { ); - const prevButton = screen.getByTestId('prevmonth'); + const prevButton = screen.getByTestId('prevmonthordate'); fireEvent.click(prevButton); //testing next month button - const nextButton = screen.getByTestId('nextmonth'); + const nextButton = screen.getByTestId('nextmonthordate'); fireEvent.click(nextButton); //Testing year change for (let index = 0; index < 13; index++) { @@ -150,6 +157,35 @@ describe('Calendar', () => { fireEvent.click(prevButton); } }); + it('Should show prev and next date on clicking < & > buttons in the day view', async () => { + render( + + + + + + ); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + //testing previous date button + const prevButton = screen.getByTestId('prevmonthordate'); + fireEvent.click(prevButton); + //testing next date button + const nextButton = screen.getByTestId('nextmonthordate'); + fireEvent.click(nextButton); + debug(); + //Testing year change and month change + for (let index = 0; index < 366; index++) { + fireEvent.click(prevButton); + } + for (let index = 0; index < 732; index++) { + fireEvent.click(nextButton); + } + }); it('Should render eventlistcard of current day event', () => { const currentDayEventMock = [ { @@ -205,11 +241,11 @@ describe('Calendar', () => { ); //Changing the month - const prevButton = screen.getByTestId('prevmonth'); + const prevButton = screen.getByTestId('prevmonthordate'); fireEvent.click(prevButton); // Clicking today button - const todayButton = screen.getByTestId('nextmonth'); + const todayButton = screen.getByTestId('today'); fireEvent.click(todayButton); // const todayCell = screen.getByText(new Date().getDate().toString()); // expect(todayCell).toHaveClass(styles.day__today); @@ -274,63 +310,106 @@ describe('Calendar', () => { fireEvent.click(lessButton); expect(screen.queryByText('Event 3')).not.toBeInTheDocument(); }); - // it('Should open the day view calendar', async () => { - // const multipleEventData = [ - // { - // _id: '1', - // title: 'Event 1', - // description: 'This is event 1', - // startDate: new Date().toISOString().split('T')[0], - // endDate: new Date().toISOString().split('T')[0], - // location: 'Los Angeles', - // startTime: '14:00', - // endTime: '16:00', - // allDay: false, - // recurring: false, - // isPublic: true, - // isRegisterable: true, - // }, - // { - // _id: '2', - // title: 'Event 2', - // description: 'This is event 2', - // startDate: new Date().toISOString().split('T')[0], - // endDate: new Date().toISOString().split('T')[0], - // location: 'Los Angeles', - // startTime: '14:00', - // endTime: '16:00', - // allDay: false, - // recurring: false, - // isPublic: true, - // isRegisterable: true, - // }, - // { - // _id: '3', - // title: 'Event 3', - // description: 'This is event 3', - // startDate: new Date().toISOString().split('T')[0], - // endDate: new Date().toISOString().split('T')[0], - // location: 'Los Angeles', - // startTime: '14:00', - // endTime: '16:00', - // allDay: false, - // recurring: false, - // isPublic: true, - // isRegisterable: true, - // }, - // ]; - // act(() => { - // render(< />); - // }); - // const selector = screen.getByText('Month'); - // await act(() => { - // fireEvent.click(selector); - // }); - // act(() => { - // fireEvent.click(getByTestId('selectDay')); - // }); - // debug(); - // }); + it('Should open the day view calendar', async () => { + await act(async () => { + render(); + }); + expect(screen.getByText('Month')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + expect(screen.getByText('Day')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + expect(screen.getByText('12 AM')).toBeInTheDocument(); + // debug(); + }); + it('Should Expand and contract when clicked on view all and view less in day view', async () => { + const multipleEventData = [ + { + _id: '1', + title: 'Event 1', + description: 'This is event 1', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: undefined, + endTime: undefined, + allDay: true, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '2', + title: 'Event 2', + description: 'This is event 2', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: undefined, + endTime: undefined, + allDay: true, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '3', + title: 'Event 3', + description: 'This is event 3', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '14:00', + endTime: '16:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '4', + title: 'Event 4', + description: 'This is event 4', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '14:00', + endTime: '16:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + ]; + render( + + + + + + ); + expect(screen.getByText('Month')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + expect(screen.getByText('Day')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + const moreButtons = screen.getAllByText('View all'); + moreButtons.forEach((moreButton) => { + fireEvent.click(moreButton); + expect(screen.getByText('View less')).toBeInTheDocument(); + const lessButton = screen.getByText('View less'); + fireEvent.click(lessButton); + expect(screen.queryByText('View less')).not.toBeInTheDocument(); + }); + + // debug(); + }); test('Handles window resize', () => { render( diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index a0615963d7..2a2696b7a0 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -14,8 +14,8 @@ interface InterfaceEvent { startDate: string; endDate: string; location: string; - startTime: string; - endTime: string; + startTime: string | undefined; + endTime: string | undefined; allDay: boolean; recurring: boolean; registrants?: InterfaceIEventAttendees[]; @@ -313,14 +313,14 @@ const Calendar: React.FC = ({ : allDayEventsList?.slice(0, 1)}
{(allDayEventsList?.length > 1 || - (windowWidth <= 700 && allDayEventsList?.length > 0)) && ( + (windowWidth <= 700 && allDayEventsList?.length > 1)) && ( )}
@@ -525,7 +525,7 @@ const Calendar: React.FC = ({ @@ -540,6 +540,7 @@ const Calendar: React.FC = ({ @@ -547,7 +548,7 @@ const Calendar: React.FC = ({ diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx index 9e663b3b3d..9ed25715a7 100644 --- a/src/components/EventListCard/EventListCard.tsx +++ b/src/components/EventListCard/EventListCard.tsx @@ -22,8 +22,8 @@ interface InterfaceEventListCardProps { eventDescription: string; regDate: string; regEndDate: string; - startTime: string; - endTime: string; + startTime: string | undefined; + endTime: string | undefined; allDay: boolean; recurring: boolean; isPublic: boolean; From 1c01d52c523dc21c4a91e64b67c85aa783e9f88c Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Sun, 28 Jan 2024 19:26:47 +0530 Subject: [PATCH 10/11] Lint fix --- .../CurrentHourIndicator/CurrentHourIndicator.test.tsx | 1 - src/components/EventCalendar/EventCalendar.test.tsx | 10 +--------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx index ef03c02c31..084817dc0d 100644 --- a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx @@ -1,4 +1,3 @@ -import type { Dispatch, SetStateAction } from 'react'; import React from 'react'; import { render } from '@testing-library/react'; import CurrentHourIndicator from './CurrentHourIndicator'; diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx index 9e127a5d86..6a4b8c41a3 100644 --- a/src/components/EventCalendar/EventCalendar.test.tsx +++ b/src/components/EventCalendar/EventCalendar.test.tsx @@ -1,12 +1,6 @@ /* eslint-disable react/react-in-jsx-scope */ import Calendar from './EventCalendar'; -import { - render, - screen, - fireEvent, - act, - RenderResult, -} from '@testing-library/react'; +import { render, screen, fireEvent, act } from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; import { debug } from 'jest-preview'; @@ -18,8 +12,6 @@ import { import i18nForTest from 'utils/i18nForTest'; import { StaticMockLink } from 'utils/StaticMockLink'; import styles from './EventCalendar.module.css'; -import { BrowserRouter } from 'react-router-dom'; -import userEvent from '@testing-library/user-event'; const eventData = [ { From f80f5f2a5d8dfd37b121f290a971938b9076c7b2 Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Mon, 29 Jan 2024 21:26:43 +0530 Subject: [PATCH 11/11] Fixed failing coverage tests --- .../EventCalendar/EventCalendar.test.tsx | 172 ++++++++++++++++-- .../EventCalendar/EventCalendar.tsx | 68 ++++--- 2 files changed, 187 insertions(+), 53 deletions(-) diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx index 6a4b8c41a3..a7b966a519 100644 --- a/src/components/EventCalendar/EventCalendar.test.tsx +++ b/src/components/EventCalendar/EventCalendar.test.tsx @@ -169,7 +169,6 @@ describe('Calendar', () => { //testing next date button const nextButton = screen.getByTestId('nextmonthordate'); fireEvent.click(nextButton); - debug(); //Testing year change and month change for (let index = 0; index < 366; index++) { fireEvent.click(prevButton); @@ -242,6 +241,20 @@ describe('Calendar', () => { // const todayCell = screen.getByText(new Date().getDate().toString()); // expect(todayCell).toHaveClass(styles.day__today); }); + it('Should open the day view calendar', async () => { + await act(async () => { + render(); + }); + expect(screen.getByText('Month')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + expect(screen.getByText('Day')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + expect(screen.getByText('12 AM')).toBeInTheDocument(); + }); it('Should expand and contract when clicked on View all and View less button', () => { const multipleEventData = [ { @@ -302,21 +315,6 @@ describe('Calendar', () => { fireEvent.click(lessButton); expect(screen.queryByText('Event 3')).not.toBeInTheDocument(); }); - it('Should open the day view calendar', async () => { - await act(async () => { - render(); - }); - expect(screen.getByText('Month')).toBeInTheDocument(); - await act(async () => { - fireEvent.click(screen.getByText('Month')); - }); - expect(screen.getByText('Day')).toBeInTheDocument(); - await act(async () => { - fireEvent.click(screen.getByText('Day')); - }); - expect(screen.getByText('12 AM')).toBeInTheDocument(); - // debug(); - }); it('Should Expand and contract when clicked on view all and view less in day view', async () => { const multipleEventData = [ { @@ -375,6 +373,20 @@ describe('Calendar', () => { isPublic: true, isRegisterable: true, }, + { + _id: '5', + title: 'Event 5', + description: 'This is event 5', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '17:00', + endTime: '19:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, ]; render( @@ -399,10 +411,134 @@ describe('Calendar', () => { fireEvent.click(lessButton); expect(screen.queryByText('View less')).not.toBeInTheDocument(); }); - - // debug(); + }); + it('Should check without any all day events', async () => { + const multipleEventData = [ + { + _id: '1', + title: 'Event 1', + description: 'This is event 1', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '17:00', + endTime: '19:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + ]; + render( + + + + + + ); + expect(screen.getByText('Month')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + expect(screen.getByText('Day')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + expect(screen.getByText('Event 1')).toBeInTheDocument(); + debug(); }); + it('Should handle window resize in day view', async () => { + const multipleEventData = [ + { + _id: '1', + title: 'Event 1', + description: 'This is event 1', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: undefined, + endTime: undefined, + allDay: true, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '2', + title: 'Event 2', + description: 'This is event 2', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: undefined, + endTime: undefined, + allDay: true, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '3', + title: 'Event 3', + description: 'This is event 3', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '14:00', + endTime: '16:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '4', + title: 'Event 4', + description: 'This is event 4', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '14:00', + endTime: '16:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '5', + title: 'Event 5', + description: 'This is event 5', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '17:00', + endTime: '19:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + ]; + render( + + + + + + ); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + await act(async () => { + window.innerWidth = 500; + window.dispatchEvent(new Event('resize')); + }); + }); test('Handles window resize', () => { render( diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index 2a2696b7a0..8e79e9099e 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -280,53 +280,51 @@ const Calendar: React.FC = ({ return ( <> - {allDayEventsList.length > 0 && ( -
-
-

{timezoneString}

-
-
+
+
+

{timezoneString}

+
+
+
0 + ? styles.event_list_parent_current + : styles.event_list_parent + } + >
0 - ? styles.event_list_parent_current - : styles.event_list_parent + expanded === -100 + ? styles.expand_list_container + : styles.list_container } + style={{ width: 'fit-content' }} >
-
- {expanded === -100 - ? allDayEventsList - : allDayEventsList?.slice(0, 1)} -
- {(allDayEventsList?.length > 1 || - (windowWidth <= 700 && allDayEventsList?.length > 1)) && ( - - )} + {expanded === -100 + ? allDayEventsList + : allDayEventsList?.slice(0, 1)}
+ {(allDayEventsList?.length > 2 || + (windowWidth <= 700 && allDayEventsList?.length > 0)) && ( + + )}
- )} +
{hours.map((hour, index) => { const timeEventsList: any = events ?.filter((datas) => {