diff --git a/package-lock.json b/package-lock.json index 7dda9ce..980107a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,15 +14,21 @@ "@emotion/styled": "^11.11.5", "@fontsource/material-icons": "^5.0.18", "@fontsource/roboto": "^5.0.13", - "@mui/icons-material": "5.11.16", + "@mui/icons-material": "5.16.5", "@mui/lab": "5.0.0-alpha.119", "@mui/material": "5.16.5", + "@mui/x-date-pickers": "^6.20.2", "@storybook/addon-a11y": "^8.1.10", "@storybook/icons": "^1.2.9", "@svgr/webpack": "^8.1.0", "css-loader": "^7.1.2", "css-mediaquery": "^0.1.2", + "dayjs": "^1.11.13", + "esbuild": "^0.24.0", "install-peers": "^1.0.4", + "moment": "^2.29.4", + "moment-timezone": "^0.5.43", + "momentjs": "^2.0.0", "postcss": "^8.4.38", "sass-loader": "^14.2.1", "style-loader": "^4.0.0" @@ -70,6 +76,9 @@ "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "jest-svg-transformer": "^1.0.0", + "moment": "^2.29.4", + "moment-timezone": "^0.5.43", + "momentjs": "^2.0.0", "prop-types": "^15.8.1", "react": "18.2.0", "react-dom": "18.2.0", @@ -1962,6 +1971,246 @@ "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==", "dev": true }, + "node_modules/@esbuild/aix-ppc64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz", + "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz", + "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz", + "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz", + "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz", + "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz", + "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz", + "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz", + "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz", + "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==", + "cpu": [ + "arm" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz", + "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz", + "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz", + "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==", + "cpu": [ + "loong64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz", + "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==", + "cpu": [ + "mips64el" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz", + "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==", + "cpu": [ + "ppc64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz", + "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==", + "cpu": [ + "riscv64" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz", + "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==", + "cpu": [ + "s390x" + ], + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@esbuild/linux-x64": { "version": "0.23.1", "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz", @@ -1978,6 +2227,111 @@ "node": ">=18" } }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz", + "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-arm64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz", + "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz", + "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz", + "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz", + "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==", + "cpu": [ + "arm64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz", + "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.24.0", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz", + "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", @@ -2956,7 +3310,139 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", - "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@mui/x-date-pickers": { + "version": "6.20.2", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-6.20.2.tgz", + "integrity": "sha512-x1jLg8R+WhvkmUETRfX2wC+xJreMii78EXKLl6r3G+ggcAZlPyt0myID1Amf6hvJb9CtR7CgUo8BwR+1Vx9Ggw==", + "dependencies": { + "@babel/runtime": "^7.23.2", + "@mui/base": "^5.0.0-beta.22", + "@mui/utils": "^5.14.16", + "@types/react-transition-group": "^4.4.8", + "clsx": "^2.0.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.8.6", + "@mui/system": "^5.8.0", + "date-fns": "^2.25.0 || ^3.2.0", + "date-fns-jalali": "^2.13.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, + "node_modules/@mui/x-date-pickers/node_modules/@mui/base": { + "version": "5.0.0-beta.58", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.58.tgz", + "integrity": "sha512-P0E7ZrxOuyYqBvVv9w8k7wm+Xzx/KRu+BGgFcR2htTsGCpJNQJCSUXNUZ50MUmSU9hzqhwbQWNXhV1MBTl6F7A==", + "dependencies": { + "@babel/runtime": "^7.25.0", + "@floating-ui/react-dom": "^2.1.1", + "@mui/types": "^7.2.15", + "@mui/utils": "6.0.0-rc.0", + "@popperjs/core": "^2.11.8", + "clsx": "^2.1.1", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/x-date-pickers/node_modules/@mui/base/node_modules/@mui/utils": { + "version": "6.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.0-rc.0.tgz", + "integrity": "sha512-tBp0ILEXDL0bbDDT8PnZOjCqSm5Dfk2N0Z45uzRw+wVl6fVvloC9zw8avl+OdX1Bg3ubs/ttKn8nRNv17bpM5A==", + "dependencies": { + "@babel/runtime": "^7.25.0", + "@mui/types": "^7.2.15", + "@types/prop-types": "^15.7.12", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/x-date-pickers/node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "engines": { "node": ">=6" } @@ -7061,6 +7547,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dayjs": { + "version": "1.11.13", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", + "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==" + }, "node_modules/debug": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", diff --git a/package.json b/package.json index 63f0f72..76363b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@drt/drt-react-components", - "version": "1.5.3", + "version": "1.5.4", "description": "React components for DRT applications", "main": "dist/cjs/bundle.js", "module": "dist/esm/bundle.js", @@ -67,6 +67,9 @@ "jest": "^29.5.0", "jest-environment-jsdom": "^29.5.0", "jest-svg-transformer": "^1.0.0", + "moment": "^2.29.4", + "moment-timezone": "^0.5.43", + "momentjs": "^2.0.0", "prop-types": "^15.8.1", "react": "18.2.0", "react-dom": "18.2.0", @@ -95,14 +98,20 @@ "@emotion/styled": "^11.11.5", "@fontsource/material-icons": "^5.0.18", "@fontsource/roboto": "^5.0.13", - "@mui/icons-material": "5.11.16", + "@mui/icons-material": "5.16.5", "@mui/lab": "5.0.0-alpha.119", "@mui/material": "5.16.5", + "@mui/x-date-pickers": "^6.20.2", + "moment": "^2.29.4", + "moment-timezone": "^0.5.43", + "momentjs": "^2.0.0", "@storybook/addon-a11y": "^8.1.10", "@storybook/icons": "^1.2.9", "@svgr/webpack": "^8.1.0", "css-loader": "^7.1.2", "css-mediaquery": "^0.1.2", + "dayjs": "^1.11.13", + "esbuild": "^0.24.0", "install-peers": "^1.0.4", "postcss": "^8.4.38", "sass-loader": "^14.2.1", diff --git a/src/components/Staff/StaffUpdateSuccess.stories.tsx b/src/components/Staff/StaffUpdateSuccess.stories.tsx new file mode 100644 index 0000000..cc287c2 --- /dev/null +++ b/src/components/Staff/StaffUpdateSuccess.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { StaffUpdateSuccess as StaffUpdateSuccessComponent } from "./StaffUpdateSuccess"; + +const meta: Meta = { + title: "DRT Components/StaffSuccessComponent", + component: StaffUpdateSuccessComponent, +}; + +export default meta; +type Story = StoryObj; + +export const StaffSuccess: Story = { + args: { + staffNumber: 1, + message: "You updated the staff number for selected date and time", + closeHandler: () => { + console.log("Close handler") + } + } +}; diff --git a/src/components/Staff/StaffUpdateSuccess.tsx b/src/components/Staff/StaffUpdateSuccess.tsx new file mode 100644 index 0000000..a1186d2 --- /dev/null +++ b/src/components/Staff/StaffUpdateSuccess.tsx @@ -0,0 +1,27 @@ +import {Alert, Box, IconButton} from "@mui/material"; +import CheckCircleIcon from "@mui/icons-material/CheckCircle"; +import React from "react"; +import CloseIcon from "@mui/icons-material/Close"; + +export interface IStaffUpdateSuccess { + staffNumber: number | null, + message: string, + closeHandler: () => void +} + +export const StaffUpdateSuccess = ({staffNumber, message, closeHandler}: IStaffUpdateSuccess) => { + return + + + + } + icon={}>{message} {staffNumber} + +} diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx new file mode 100644 index 0000000..2f98e5f --- /dev/null +++ b/src/components/Staff/UpdateStaffForTimeRangeForm.stories.tsx @@ -0,0 +1,34 @@ +import moment from 'moment'; +import type {Meta, StoryObj} from '@storybook/react'; +import type {IUpdateStaffForTimeRangeData} from './UpdateStaffForTimeRangeForm' +import {UpdateStaffForTimeRangeForm as UpdateStaffForTimeRangeFormComponent} from './UpdateStaffForTimeRangeForm' + +const meta: Meta = { + title: "DRT Components/UpdateStaffForTimeRangeFormComponent", + component: UpdateStaffForTimeRangeFormComponent, +}; + +export default meta; + +type Story = StoryObj; + +const ustdForm: IUpdateStaffForTimeRangeData = { + actualStaff: 1, + startDayAt: moment(), + startTimeAt: moment(), + endTimeAt: moment().add(1, 'hour'), + endDayAt: moment().add(1, 'day') +} + +export const UpdateStaffForTimeRangeForm = { + args: { + ustd: ustdForm, + interval: 15, + handleSubmit: (essf: IUpdateStaffForTimeRangeData) => { + console.log('Submit clicked', essf); + }, + cancelHandler: () => { + console.log('Cancel clicked'); + }, + } +}; diff --git a/src/components/Staff/UpdateStaffForTimeRangeForm.tsx b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx new file mode 100644 index 0000000..fbf2c86 --- /dev/null +++ b/src/components/Staff/UpdateStaffForTimeRangeForm.tsx @@ -0,0 +1,206 @@ +import React, {useState} from "react"; +import {Box, Button, IconButton, TextField, TextFieldProps, Typography} from "@mui/material"; +import moment, {Moment} from "moment"; +import {TimePicker} from '@mui/x-date-pickers/TimePicker'; +import {DatePicker} from '@mui/x-date-pickers/DatePicker'; +import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider'; +import CloseIcon from "@mui/icons-material/Close"; +import {AdapterMoment} from "@mui/x-date-pickers/AdapterMoment"; +import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; +import AccessTimeIcon from '@mui/icons-material/AccessTime'; +import PeopleIcon from '@mui/icons-material/People'; + +export type IUpdateStaffForTimeRangeData = { + startDayAt: Moment, + startTimeAt: Moment, + endTimeAt: Moment, + endDayAt: Moment, + actualStaff: number +} + +export interface IUpdateStaffForTimeRangeForm { + ustd: IUpdateStaffForTimeRangeData, + interval: number, + handleSubmit: (ssf: IUpdateStaffForTimeRangeData) => void, + cancelHandler: () => void +} + +export const UpdateStaffForTimeRangeForm = ({ + ustd, + interval, + handleSubmit, + cancelHandler + }: IUpdateStaffForTimeRangeForm) => { + const [startDate, setStartDate] = useState(ustd.startDayAt); + const [startTime, setStartTime] = useState(ustd.startTimeAt.startOf('day')); + const [endTime, setEndTime] = useState(ustd.endTimeAt.startOf('day')); + const [endDate, setEndDate] = useState(ustd.endDayAt); + const [staffNumber, setStaffNumber] = useState(ustd.actualStaff); + const [error, setError] = useState(null); + const handleStartDateChange = (date: Moment | null) => { + setStartDate(date?.startOf('day') || moment()); + setEndDate(date?.startOf('day') || moment()); + }; + + const handleEndDateChange = (date: Moment | null) => { + setEndDate(date?.startOf('day') || moment()); + }; + + const handleStartTimeChange = (date: Moment | null) => { + setStartTime(date?.startOf('minute') || moment()); + if (date && endTime && date.isAfter(endTime)) { + setError("Start time must be less than or equal to end time."); + return; + } + setError(null); + }; + + const handleEndTimeChange = (date: Moment | null) => { + setEndTime(date?.startOf('minute') || moment()); + if (date && startTime && date.isBefore(startTime)) { + setError("End time must be greater than or equal to start time."); + return; + } + setError(null); + }; + + const handleStaffNumberChange = (event: React.ChangeEvent<{ value: unknown }>) => { + setStaffNumber(event.target.value as number); + }; + + const handleSubmitForm = (event: React.ChangeEvent<{ value: unknown }>) => { + const diffInMinutes = (endTime.valueOf() - startTime.valueOf()) / 60000; + console.log("endTime.valueOf", endTime.valueOf()) + console.log("startTime.valueOf", startTime.valueOf()) + console.log("selectedDate", startDate.valueOf()) + console.log("diffInMinutes", diffInMinutes) + console.log("staffNumber", staffNumber) + const ess: IUpdateStaffForTimeRangeData = { + startDayAt: startDate, + startTimeAt: startTime, + endTimeAt: endTime, + endDayAt: endDate, + actualStaff: staffNumber + }; + handleSubmit(ess); + } + const duration = moment.duration(endTime.diff(startTime)); + const hours = Math.floor(duration.asHours()); + const minutes = duration.minutes(); + + return + + Edit staff + + + + + + Date + + + + + + + + + + + + + Time + + + + + + + + + + + Staff + + + + + {error && {error}} + + Summary of Selections: + + + + {startDate.format(startDate.year() === endDate.year() ? 'DD MMM' : 'DD MMM YY')} to {endDate.format('DD MMM YYYY')} + + {endDate.diff(startDate, 'days') + 1} days + + + + + {startTime.format('HH:mm')} to {endTime.format('HH:mm')} + + {hours} hours {minutes !== 0 && ` and ${minutes} minutes`} + + + + + {staffNumber} Staff + + + + + + + + +} diff --git a/src/components/Staff/index.ts b/src/components/Staff/index.ts new file mode 100644 index 0000000..8d04f16 --- /dev/null +++ b/src/components/Staff/index.ts @@ -0,0 +1,4 @@ +export {StaffUpdateSuccess} from './StaffUpdateSuccess' +export type {IStaffUpdateSuccess} from './StaffUpdateSuccess' +export type {IUpdateStaffForTimeRangeData, IUpdateStaffForTimeRangeForm} from './UpdateStaffForTimeRangeForm' +export {UpdateStaffForTimeRangeForm} from './UpdateStaffForTimeRangeForm' diff --git a/src/components/index.ts b/src/components/index.ts index 22dd7ba..22322f5 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,10 +1,16 @@ -export { default as FlightFlagger } from "./FlightFlagger"; +export {default as FlightFlagger} from "./FlightFlagger"; -export { FlightFlaggerFilters, FlightHighlightChip } from "./FlightFlagger"; -export type { IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip } from "./FlightFlagger"; +export {FlightFlaggerFilters, FlightHighlightChip} from "./FlightFlagger"; +export type {IFlightFlagger, IFlightFlaggerFilters, IFlightHighlightChip} from "./FlightFlagger"; -export { StatusTag } from "./StatusTags"; -export type { IStatusTag } from "./StatusTags"; +export {StatusTag} from "./StatusTags"; +export type {IStatusTag} from "./StatusTags"; export {default as Header} from './Header' -export type { IHeader, MenuItem} from './Header'; +export type {IHeader, MenuItem} from './Header'; + +export type {IStaffUpdateSuccess} from './Staff' +export {StaffUpdateSuccess} from './Staff' + +export type {IUpdateStaffForTimeRangeData, IUpdateStaffForTimeRangeForm} from './Staff' +export {UpdateStaffForTimeRangeForm} from './Staff'