sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added a date range widget to frontend w/ burnettk (#392) 

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
This commit is contained in:
jasquat 2023-07-14 06:16:34 -04:00 committed by GitHub
parent 8cfdcf4212
commit bc8efc54a3
6 changed files with 278 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
spiffworkflow-frontend/package-lock.json generated
View File

@ -12,7 +12,7 @@
"@babel/plugin-transform-react-jsx": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"@carbon/icons-react": "^11.10.0",
"@carbon/react": "^1.27.0",
"@carbon/react": "^1.33.0",
"@carbon/styles": "^1.16.0",
"@casl/ability": "^6.3.2",
"@casl/react": "^3.1.0",
@ -2133,35 +2133,35 @@
"integrity": "sha512-umeLoy8erTiFCG92Z29kJ8VH6fHfFE+75HwQH/WwIRqa2AvNYrkSCNpXtTGwW/EjnyvGA6VcfqirZhibuuHMaA=="
},
"node_modules/@carbon/colors": {
"version": "11.14.0",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.14.0.tgz",
"integrity": "sha512-SkjAmmUwdLEvu/JKPOcslbx+mrvqp+ZSvBvFP/7tjv0HYC0Khs3ltjYeSiusg/KpCoSyFM+fzEJm2qdURxC1+w=="
"version": "11.17.1",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.17.1.tgz",
"integrity": "sha512-Q2VlMaZcl3U9Qc1RQbhuf4M4SVuJIeE+NIIDExPCRFaWeuN/5EIUYxEkPgDqvkLU91QTu6lH8TqxFPZORlRvDA=="
},
"node_modules/@carbon/feature-flags": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.13.0.tgz",
"integrity": "sha512-nca4aTE8Ss5NzjjK6fxR+mM63e0hDmH3nT3zDZ2pRQ23QoJzcmhZmaWQoLGd6ONa52vAuPWcVPPg/bynN07Q9w=="
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.15.0.tgz",
"integrity": "sha512-pUuJ+iQ+jkrfP4+nFgsBqM3qNsgKY59y0dZX1y2amjROFOo6fn5s/L1ZqAXkLWvmtssOiR1VWbYg1zk4IMTv+g=="
},
"node_modules/@carbon/grid": {
"version": "11.13.0",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.13.0.tgz",
"integrity": "sha512-Jb2QaG22BXd1zvnXwkQMYxyF3Us1cY46pWzRYAy0dKQCJYaW3ii2kD1Z2aE8Ea3UYmg5CR13D7+shB/idtZG5g==",
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.16.1.tgz",
"integrity": "sha512-xrnySc/9jRebcVyATn6ArO9kQsgUcUDwrUrWPH5yt4AU7lDvzfpsxbO5NehRekURxPJjplr0DOhPAwC4qbuaaw==",
"dependencies": {
"@carbon/layout": "^11.13.0"
"@carbon/layout": "^11.16.1"
}
},
"node_modules/@carbon/icon-helpers": {
"version": "10.39.0",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.39.0.tgz",
"integrity": "sha512-iFWIfjKABjusb+gUz6s0FdEBHe8Ms63CKDxozhtiSZ9LfF9X5QQztO8df3szqcNsmw30pYhSnm+zJwifO9tdRw=="
"version": "10.42.1",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.42.1.tgz",
"integrity": "sha512-LsXHvoi/RAxYQz1GC7Ae7WOwJE4HKOXYmSOWuDEtSEW94Adz/1w968pje/7Gfr7nsJ/GcP6lNcQoSpYq9iDSpQ=="
},
"node_modules/@carbon/icons-react": {
"version": "11.18.0",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.18.0.tgz",
"integrity": "sha512-gmlepMoPX1rGW8v4q/c0sD76rIWdxq3KyJ+NMtqqNsT93PjoKUxX/ROxQ4E7HMksRdU4GEJoLD29mAi73gUTUA==",
"version": "11.22.1",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.22.1.tgz",
"integrity": "sha512-yBbx6pAzo78V/6Z004KXNoC1w6kW/ttm/FF02s9LnOwTDYcOP7tn97YlgO+hyeMsk4Xld5GrjJ5lZI/ss8qaug==",
"hasInstallScript": true,
"dependencies": {
"@carbon/icon-helpers": "^10.39.0",
"@carbon/icon-helpers": "^10.42.1",
"@carbon/telemetry": "0.1.0",
"prop-types": "^15.7.2"
},
@ -2170,26 +2170,26 @@
}
},
"node_modules/@carbon/layout": {
"version": "11.13.0",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.13.0.tgz",
"integrity": "sha512-MWVyk9NdWEpvfMSqEy1aBS9QA0Km3ADyEWW7D5c8r8+ZMrhPpJnmuCRMbBOkJYtZDfs4+7EuuKcacJ/kY51x7w=="
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.16.1.tgz",
"integrity": "sha512-uUJmNrB7GKJzR/ZEzVxqGNb7US8UB1jL0X3lia3pnyqQ8Rcxq3y1RNmj/bfuI6LWC9GA0lLrsKRdKOpdLyqJMQ=="
},
"node_modules/@carbon/motion": {
"version": "11.10.0",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.10.0.tgz",
"integrity": "sha512-eKQTBvfgTI+txk4BjRTjObOnQ9/uWSRurzIQK4qXsRJZuxvyJTChw+0pKMjohfpzOOnv5E1XxyfM3MWURaGe6Q=="
"version": "11.13.1",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.13.1.tgz",
"integrity": "sha512-ohpfl9qVCEZzvr6cqDDEskqeTS797FSCLqADwZufbLjOBcUlRr2mq1rftTJcizLdNXutODvmFt0LJOGDOENHZg=="
},
"node_modules/@carbon/react": {
"version": "1.27.0",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.27.0.tgz",
"integrity": "sha512-kzXmBsbiDexOzq7ljeBKjW0ym6u1uAkU5EMOs08kF/qCVo4hx3GELmmm2F4AsKG/ltdt4JQo9VlVrnr+aobFBQ==",
"version": "1.33.2",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.33.2.tgz",
"integrity": "sha512-WHJ+zv32gEerpXgPXmsdyDCOXWHTQu4Yff8VA96CNjEw7kVwDlvWVpbxm6GDnj1xdxB1bTZyXGPy//mxcj6psw==",
"hasInstallScript": true,
"dependencies": {
"@babel/runtime": "^7.18.3",
"@carbon/feature-flags": "^0.13.0",
"@carbon/icons-react": "^11.18.0",
"@carbon/layout": "^11.13.0",
"@carbon/styles": "^1.27.0",
"@carbon/feature-flags": "^0.15.0",
"@carbon/icons-react": "^11.22.1",
"@carbon/layout": "^11.16.1",
"@carbon/styles": "^1.33.1",
"@carbon/telemetry": "0.1.0",
"classnames": "2.3.2",
"copy-to-clipboard": "^3.3.1",
@ -2214,21 +2214,26 @@
}
},
"node_modules/@carbon/styles": {
"version": "1.27.0",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.27.0.tgz",
"integrity": "sha512-a+4lclMjL5Ipo7yCmkymdh3opqRmbeYeiUNfeFZOjPjvjEn3PgMsKWn1FNZszaiT/6eySJThvUtJcSXwFac1jg==",
"version": "1.33.1",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.33.1.tgz",
"integrity": "sha512-KnccrmaFTVLVvtvietjGD1UcelMur5JHpVAcWt1Qsk+XsgLgJ3tPU4Rf13sTz9wo0B7fP7AGlpVstWV/W+6r9Q==",
"dependencies": {
"@carbon/colors": "^11.14.0",
"@carbon/feature-flags": "^0.13.0",
"@carbon/grid": "^11.13.0",
"@carbon/layout": "^11.13.0",
"@carbon/motion": "^11.10.0",
"@carbon/themes": "^11.18.0",
"@carbon/type": "^11.17.0",
"@carbon/colors": "^11.17.1",
"@carbon/feature-flags": "^0.15.0",
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1",
"@carbon/motion": "^11.13.1",
"@carbon/themes": "^11.21.1",
"@carbon/type": "^11.20.1",
"@ibm/plex": "6.0.0-next.6"
},
"peerDependencies": {
"sass": "^1.33.0"
},
"peerDependenciesMeta": {
"sass": {
"optional": true
}
}
},
"node_modules/@carbon/telemetry": {
@ -2240,23 +2245,23 @@
}
},
"node_modules/@carbon/themes": {
"version": "11.18.0",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.18.0.tgz",
"integrity": "sha512-PuMb7F9fooLYCS+8zALN656x8rv2NgjMw53Q4W8PoEh9RwDKpEihh9AwaKzNV432Ie8mOqwTZTvpAg6ZaWc4+w==",
"version": "11.21.1",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.21.1.tgz",
"integrity": "sha512-WMcx+RSXTSGxuqSG+6WHCCTeZ8mSaDWDOJsdp6p+bandc6OsvmrqbJDDgjE6YRucDThQYspLxRQF8i8/5mJ0sg==",
"dependencies": {
"@carbon/colors": "^11.14.0",
"@carbon/layout": "^11.13.0",
"@carbon/type": "^11.17.0",
"@carbon/colors": "^11.17.1",
"@carbon/layout": "^11.16.1",
"@carbon/type": "^11.20.1",
"color": "^4.0.0"
}
},
"node_modules/@carbon/type": {
"version": "11.17.0",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.17.0.tgz",
"integrity": "sha512-zQMaR1PHUY8HBlo0zRPcwEli+rD0ndejKKXGXSVVkCBX9qOr6Rp55J723Z3Fl+QNFxamhy/d0jVqRoKTUttnRQ==",
"version": "11.20.1",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.20.1.tgz",
"integrity": "sha512-CZSDN//3M7DhiMEzwNjDXpJ3Iqcaetu/hiFghxSACOuz88jni36Qj/qOg0ELZNrsswGk5GwnJx/IN1u40TAieA==",
"dependencies": {
"@carbon/grid": "^11.13.0",
"@carbon/layout": "^11.13.0"
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1"
}
},
"node_modules/@casl/ability": {
@ -33666,58 +33671,58 @@
"integrity": "sha512-umeLoy8erTiFCG92Z29kJ8VH6fHfFE+75HwQH/WwIRqa2AvNYrkSCNpXtTGwW/EjnyvGA6VcfqirZhibuuHMaA=="
},
"@carbon/colors": {
"version": "11.14.0",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.14.0.tgz",
"integrity": "sha512-SkjAmmUwdLEvu/JKPOcslbx+mrvqp+ZSvBvFP/7tjv0HYC0Khs3ltjYeSiusg/KpCoSyFM+fzEJm2qdURxC1+w=="
"version": "11.17.1",
"resolved": "https://registry.npmjs.org/@carbon/colors/-/colors-11.17.1.tgz",
"integrity": "sha512-Q2VlMaZcl3U9Qc1RQbhuf4M4SVuJIeE+NIIDExPCRFaWeuN/5EIUYxEkPgDqvkLU91QTu6lH8TqxFPZORlRvDA=="
},
"@carbon/feature-flags": {
"version": "0.13.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.13.0.tgz",
"integrity": "sha512-nca4aTE8Ss5NzjjK6fxR+mM63e0hDmH3nT3zDZ2pRQ23QoJzcmhZmaWQoLGd6ONa52vAuPWcVPPg/bynN07Q9w=="
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/@carbon/feature-flags/-/feature-flags-0.15.0.tgz",
"integrity": "sha512-pUuJ+iQ+jkrfP4+nFgsBqM3qNsgKY59y0dZX1y2amjROFOo6fn5s/L1ZqAXkLWvmtssOiR1VWbYg1zk4IMTv+g=="
},
"@carbon/grid": {
"version": "11.13.0",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.13.0.tgz",
"integrity": "sha512-Jb2QaG22BXd1zvnXwkQMYxyF3Us1cY46pWzRYAy0dKQCJYaW3ii2kD1Z2aE8Ea3UYmg5CR13D7+shB/idtZG5g==",
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/grid/-/grid-11.16.1.tgz",
"integrity": "sha512-xrnySc/9jRebcVyATn6ArO9kQsgUcUDwrUrWPH5yt4AU7lDvzfpsxbO5NehRekURxPJjplr0DOhPAwC4qbuaaw==",
"requires": {
"@carbon/layout": "^11.13.0"
"@carbon/layout": "^11.16.1"
}
},
"@carbon/icon-helpers": {
"version": "10.39.0",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.39.0.tgz",
"integrity": "sha512-iFWIfjKABjusb+gUz6s0FdEBHe8Ms63CKDxozhtiSZ9LfF9X5QQztO8df3szqcNsmw30pYhSnm+zJwifO9tdRw=="
"version": "10.42.1",
"resolved": "https://registry.npmjs.org/@carbon/icon-helpers/-/icon-helpers-10.42.1.tgz",
"integrity": "sha512-LsXHvoi/RAxYQz1GC7Ae7WOwJE4HKOXYmSOWuDEtSEW94Adz/1w968pje/7Gfr7nsJ/GcP6lNcQoSpYq9iDSpQ=="
},
"@carbon/icons-react": {
"version": "11.18.0",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.18.0.tgz",
"integrity": "sha512-gmlepMoPX1rGW8v4q/c0sD76rIWdxq3KyJ+NMtqqNsT93PjoKUxX/ROxQ4E7HMksRdU4GEJoLD29mAi73gUTUA==",
"version": "11.22.1",
"resolved": "https://registry.npmjs.org/@carbon/icons-react/-/icons-react-11.22.1.tgz",
"integrity": "sha512-yBbx6pAzo78V/6Z004KXNoC1w6kW/ttm/FF02s9LnOwTDYcOP7tn97YlgO+hyeMsk4Xld5GrjJ5lZI/ss8qaug==",
"requires": {
"@carbon/icon-helpers": "^10.39.0",
"@carbon/icon-helpers": "^10.42.1",
"@carbon/telemetry": "0.1.0",
"prop-types": "^15.7.2"
}
},
"@carbon/layout": {
"version": "11.13.0",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.13.0.tgz",
"integrity": "sha512-MWVyk9NdWEpvfMSqEy1aBS9QA0Km3ADyEWW7D5c8r8+ZMrhPpJnmuCRMbBOkJYtZDfs4+7EuuKcacJ/kY51x7w=="
"version": "11.16.1",
"resolved": "https://registry.npmjs.org/@carbon/layout/-/layout-11.16.1.tgz",
"integrity": "sha512-uUJmNrB7GKJzR/ZEzVxqGNb7US8UB1jL0X3lia3pnyqQ8Rcxq3y1RNmj/bfuI6LWC9GA0lLrsKRdKOpdLyqJMQ=="
},
"@carbon/motion": {
"version": "11.10.0",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.10.0.tgz",
"integrity": "sha512-eKQTBvfgTI+txk4BjRTjObOnQ9/uWSRurzIQK4qXsRJZuxvyJTChw+0pKMjohfpzOOnv5E1XxyfM3MWURaGe6Q=="
"version": "11.13.1",
"resolved": "https://registry.npmjs.org/@carbon/motion/-/motion-11.13.1.tgz",
"integrity": "sha512-ohpfl9qVCEZzvr6cqDDEskqeTS797FSCLqADwZufbLjOBcUlRr2mq1rftTJcizLdNXutODvmFt0LJOGDOENHZg=="
},
"@carbon/react": {
"version": "1.27.0",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.27.0.tgz",
"integrity": "sha512-kzXmBsbiDexOzq7ljeBKjW0ym6u1uAkU5EMOs08kF/qCVo4hx3GELmmm2F4AsKG/ltdt4JQo9VlVrnr+aobFBQ==",
"version": "1.33.2",
"resolved": "https://registry.npmjs.org/@carbon/react/-/react-1.33.2.tgz",
"integrity": "sha512-WHJ+zv32gEerpXgPXmsdyDCOXWHTQu4Yff8VA96CNjEw7kVwDlvWVpbxm6GDnj1xdxB1bTZyXGPy//mxcj6psw==",
"requires": {
"@babel/runtime": "^7.18.3",
"@carbon/feature-flags": "^0.13.0",
"@carbon/icons-react": "^11.18.0",
"@carbon/layout": "^11.13.0",
"@carbon/styles": "^1.27.0",
"@carbon/feature-flags": "^0.15.0",
"@carbon/icons-react": "^11.22.1",
"@carbon/layout": "^11.16.1",
"@carbon/styles": "^1.33.1",
"@carbon/telemetry": "0.1.0",
"classnames": "2.3.2",
"copy-to-clipboard": "^3.3.1",
@ -33737,17 +33742,17 @@
}
},
"@carbon/styles": {
"version": "1.27.0",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.27.0.tgz",
"integrity": "sha512-a+4lclMjL5Ipo7yCmkymdh3opqRmbeYeiUNfeFZOjPjvjEn3PgMsKWn1FNZszaiT/6eySJThvUtJcSXwFac1jg==",
"version": "1.33.1",
"resolved": "https://registry.npmjs.org/@carbon/styles/-/styles-1.33.1.tgz",
"integrity": "sha512-KnccrmaFTVLVvtvietjGD1UcelMur5JHpVAcWt1Qsk+XsgLgJ3tPU4Rf13sTz9wo0B7fP7AGlpVstWV/W+6r9Q==",
"requires": {
"@carbon/colors": "^11.14.0",
"@carbon/feature-flags": "^0.13.0",
"@carbon/grid": "^11.13.0",
"@carbon/layout": "^11.13.0",
"@carbon/motion": "^11.10.0",
"@carbon/themes": "^11.18.0",
"@carbon/type": "^11.17.0",
"@carbon/colors": "^11.17.1",
"@carbon/feature-flags": "^0.15.0",
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1",
"@carbon/motion": "^11.13.1",
"@carbon/themes": "^11.21.1",
"@carbon/type": "^11.20.1",
"@ibm/plex": "6.0.0-next.6"
}
},
@ -33757,23 +33762,23 @@
"integrity": "sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg=="
},
"@carbon/themes": {
"version": "11.18.0",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.18.0.tgz",
"integrity": "sha512-PuMb7F9fooLYCS+8zALN656x8rv2NgjMw53Q4W8PoEh9RwDKpEihh9AwaKzNV432Ie8mOqwTZTvpAg6ZaWc4+w==",
"version": "11.21.1",
"resolved": "https://registry.npmjs.org/@carbon/themes/-/themes-11.21.1.tgz",
"integrity": "sha512-WMcx+RSXTSGxuqSG+6WHCCTeZ8mSaDWDOJsdp6p+bandc6OsvmrqbJDDgjE6YRucDThQYspLxRQF8i8/5mJ0sg==",
"requires": {
"@carbon/colors": "^11.14.0",
"@carbon/layout": "^11.13.0",
"@carbon/type": "^11.17.0",
"@carbon/colors": "^11.17.1",
"@carbon/layout": "^11.16.1",
"@carbon/type": "^11.20.1",
"color": "^4.0.0"
}
},
"@carbon/type": {
"version": "11.17.0",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.17.0.tgz",
"integrity": "sha512-zQMaR1PHUY8HBlo0zRPcwEli+rD0ndejKKXGXSVVkCBX9qOr6Rp55J723Z3Fl+QNFxamhy/d0jVqRoKTUttnRQ==",
"version": "11.20.1",
"resolved": "https://registry.npmjs.org/@carbon/type/-/type-11.20.1.tgz",
"integrity": "sha512-CZSDN//3M7DhiMEzwNjDXpJ3Iqcaetu/hiFghxSACOuz88jni36Qj/qOg0ELZNrsswGk5GwnJx/IN1u40TAieA==",
"requires": {
"@carbon/grid": "^11.13.0",
"@carbon/layout": "^11.13.0"
"@carbon/grid": "^11.16.1",
"@carbon/layout": "^11.16.1"
}
},
"@casl/ability": {

2
spiffworkflow-frontend/package.json
View File

@ -7,7 +7,7 @@
"@babel/plugin-transform-react-jsx": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"@carbon/icons-react": "^11.10.0",
"@carbon/react": "^1.27.0",
"@carbon/react": "^1.33.0",
"@carbon/styles": "^1.16.0",
"@casl/ability": "^6.3.2",
"@casl/react": "^3.1.0",

1
spiffworkflow-frontend/src/config.tsx
View File

@ -105,5 +105,6 @@ export const TIME_FORMAT_HOURS_MINUTES = 'HH:mm';
export const DATE_FORMAT = generalDateFormat;
export const DATE_FORMAT_CARBON = carbonDateFormat;
export const DATE_FORMAT_FOR_DISPLAY = generalDateFormat.toLowerCase();
export const DATE_RANGE_DELIMITER = ':::';
export const SPIFF_ENVIRONMENT = spiffEnvironment;

136
spiffworkflow-frontend/src/rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget.tsx Normal file
View File

@ -0,0 +1,136 @@
import React, { useCallback } from 'react';
import { DatePickerInput, DatePicker } from '@carbon/react';
import {
DATE_FORMAT_CARBON,
DATE_FORMAT_FOR_DISPLAY,
DATE_RANGE_DELIMITER,
} from '../../../config';
import {
convertDateObjectToFormattedString,
convertStringToDate,
} from '../../../helpers';
interface widgetArgs {
id: string;
value: any;
schema?: any;
uiSchema?: any;
disabled?: boolean;
readonly?: boolean;
rawErrors?: any;
onChange?: any;
autofocus?: any;
label?: string;
}
// NOTE: To properly validate that both start and end dates are specified
// use this pattern in schemaJson for that field:
// "pattern": "\\d{4}-\\d{2}-\\d{2}:::\\d{4}-\\d{2}-\\d{2}"
// eslint-disable-next-line sonarjs/cognitive-complexity
export default function DateRangePickerWidget({
id,
value,
schema,
uiSchema,
disabled,
readonly,
onChange,
autofocus,
label,
rawErrors = [],
}: widgetArgs) {
let invalid = false;
let errorMessageForField = null;
let labelToUse = label;
if (uiSchema && uiSchema['ui:title']) {
labelToUse = uiSchema['ui:title'];
} else if (schema && schema.title) {
labelToUse = schema.title;
}
const onChangeLocal = useCallback(
(dateRange: Date[]) => {
let dateRangeString;
const startDate = convertDateObjectToFormattedString(dateRange[0]);
if (startDate) {
const endDate = convertDateObjectToFormattedString(dateRange[1]);
dateRangeString = startDate;
if (endDate) {
dateRangeString = `${dateRangeString}${DATE_RANGE_DELIMITER}${endDate}`;
}
}
onChange(dateRangeString);
},
[onChange]
);
let helperText = null;
if (uiSchema && uiSchema['ui:help']) {
helperText = uiSchema['ui:help'];
}
if (!invalid && rawErrors && rawErrors.length > 0) {
invalid = true;
if ('validationErrorMessage' in schema) {
errorMessageForField = (schema as any).validationErrorMessage;
} else {
errorMessageForField = `${(labelToUse || '').replace(/\*$/, '')} ${
rawErrors[0]
}`;
}
}
let dateValue: (Date | null)[] | null = value;
const dateRegex = new RegExp(DATE_RANGE_DELIMITER);
if (value && dateRegex.test(value)) {
const [startDateString, endDateString] = value.split(DATE_RANGE_DELIMITER);
let startDate = null;
let endDate = null;
try {
startDate = convertStringToDate(startDateString);
// eslint-disable-next-line no-empty
} catch (RangeError) {}
try {
endDate = convertStringToDate(endDateString);
// eslint-disable-next-line no-empty
} catch (RangeError) {}
dateValue = [startDate, endDate];
}
return (
<DatePicker
className="date-input"
datePickerType="range"
dateFormat={DATE_FORMAT_CARBON}
onChange={onChangeLocal}
value={dateValue}
>
<DatePickerInput
id={`${id}-start`}
placeholder={DATE_FORMAT_FOR_DISPLAY}
helperText={helperText}
type="text"
size="md"
disabled={disabled || readonly}
invalid={invalid}
invalidText={errorMessageForField}
autoFocus={autofocus}
pattern={null}
/>
<DatePickerInput
id={`${id}-end`}
placeholder={DATE_FORMAT_FOR_DISPLAY}
helperText={helperText}
type="text"
size="md"
disabled={disabled || readonly}
invalid={invalid}
autoFocus={autofocus}
pattern={null}
/>
</DatePicker>
);
}

19
spiffworkflow-frontend/src/routes/SecretList.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
// @ts-ignore
import { Button, Table } from '@carbon/react';
import { Button, Table, DatePicker, DatePickerInput } from '@carbon/react';
import { MdDelete } from 'react-icons/md';
import PaginationForTable from '../components/PaginationForTable';
import HttpService from '../services/HttpService';
@ -10,6 +10,8 @@ import { getPageInfoFromSearchParams } from '../helpers';
export default function SecretList() {
const [searchParams] = useSearchParams();
const [dateRange, setDateRange] = useState([]);
const [secrets, setSecrets] = useState([]);
const [pagination, setPagination] = useState(null);
@ -95,6 +97,21 @@ export default function SecretList() {
return (
<div>
<h1>Secrets</h1>
<DatePicker
onChange={(selectedDates: any) => {
setDateRange(selectedDates);
}}
value={dateRange}
dateFormat="Y-m-d"
datePickerType="range"
>
<DatePickerInput
id="from"
placeholder="yyyy-mm-dd"
labelText="from"
/>
<DatePickerInput id="to" placeholder="yyyy-mm-dd" labelText="to" />
</DatePicker>
{SecretsDisplayArea()}
<Button href="/admin/configuration/secrets/new">Add a secret</Button>
</div>

19
spiffworkflow-frontend/src/routes/TaskShow.tsx
View File

@ -25,6 +25,8 @@ import { ErrorForDisplay, EventDefinition, Task } from '../interfaces';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import InstructionsForEndUser from '../components/InstructionsForEndUser';
import TypeaheadWidget from '../rjsf/custom_widgets/TypeaheadWidget/TypeaheadWidget';
import DateRangePickerWidget from '../rjsf/custom_widgets/DateRangePicker/DateRangePickerWidget';
import { DATE_RANGE_DELIMITER } from '../config';
export default function TaskShow() {
const [task, setTask] = useState<Task | null>(null);
@ -39,6 +41,11 @@ export default function TaskShow() {
const { addError, removeError } = useAPIError();
const rjsfWidgets = {
typeahead: TypeaheadWidget,
'date-range': DateRangePickerWidget,
};
// if a user can complete a task then the for-me page should
// always work for them so use that since it will work in all cases
const navigateToInterstitial = (myTask: Task) => {
@ -308,8 +315,12 @@ export default function TaskShow() {
errors: any,
jsonSchema: any
) => {
const dateString = formData[propertyKey];
let dateString = formData[propertyKey];
if (dateString) {
if (typeof dateString === 'string') {
// in the case of date ranges, just take the start date and check that
[dateString] = dateString.split(DATE_RANGE_DELIMITER);
}
const formattedDateString = formatDateString(dateString);
const minimumDateChecks = propertyMetadata.minimumDate.split(',');
minimumDateChecks.forEach((mdc: string) => {
@ -469,8 +480,6 @@ export default function TaskShow() {
return getFieldsWithDateValidations(jsonSchema, formData, errors);
};
const widgets = { typeahead: TypeaheadWidget };
// we are using two forms here so we can have one that validates data and one that does not.
// this allows us to autosave form data without extra attributes and without validations
// but still requires validations when the user submits the form that they can edit.
@ -488,7 +497,7 @@ export default function TaskShow() {
onSubmit={handleFormSubmit}
schema={jsonSchema}
uiSchema={formUiSchema}
widgets={widgets}
widgets={rjsfWidgets}
validator={validator}
customValidate={customValidate}
omitExtraData
@ -501,7 +510,7 @@ export default function TaskShow() {
onSubmit={handleAutosaveFormSubmit}
schema={jsonSchema}
uiSchema={formUiSchema}
widgets={widgets}
widgets={rjsfWidgets}
validator={validator}
noValidate
omitExtraData