bf988bc6d Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugs
3685edd6c migration vers react 18 wip
1767ba690 Toasts : limite à 3 toasts maximum.
bbd81edc3 es-lint, nouvelles versions js.
993957ec7 implémentation des actions toast
bf988bc6d
Élimination de 43 vulnérabilités npm : react-scripts→Vite, ESLint 9, nettoyage des dépendances, corrections de bugsbf988bc6d14252863c2a7a54c409c947fb9feb7b
diff --git a/projectforge-webapp/src/components/base/Toasts.jsx b/projectforge-webapp/src/components/base/Toasts.jsx
index 5429e6fe2..cc334be06 100644
--- a/projectforge-webapp/src/components/base/Toasts.jsx
+++ b/projectforge-webapp/src/components/base/Toasts.jsx
@@ -1,11 +1,16 @@
import PropTypes from 'prop-types';
import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
import { clearAllToasts, removeToast } from '../../actions';
import { colorPropType } from '../../utilities/propTypes';
import { Toast, ToastBody, ToastHeader } from '../design';
-function Toasts({ onClear, onToastRemove, toasts }) {
+function Toasts() {
+ const toasts = useSelector((state) => state.toasts);
+ const dispatch = useDispatch();
+ const onClear = () => dispatch(clearAllToasts());
+ const onToastRemove = (id) => dispatch(removeToast(id));
+
const handleDismissClick = (id) => (event) => {
if (event.shiftKey) {
onClear();
@@ -39,21 +44,4 @@ function Toasts({ onClear, onToastRemove, toasts }) {
);
}
-Toasts.propTypes = {
- onClear: PropTypes.func.isRequired,
- onToastRemove: PropTypes.func.isRequired,
- toasts: PropTypes.arrayOf(PropTypes.shape({
- id: PropTypes.string,
- message: PropTypes.string,
- color: colorPropType,
- })).isRequired,
-};
-
-const mapStateToProps = ({ toasts }) => ({ toasts });
-
-const actions = {
- onToastRemove: removeToast,
- onClear: clearAllToasts,
-};
-
-export default connect(mapStateToProps, actions)(Toasts);
+export default Toasts; 3685edd6c
migration vers react 18 wip3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/components/base/Toasts.jsx b/projectforge-webapp/src/components/base/Toasts.jsx
index fda8ef86f..5429e6fe2 100644
--- a/projectforge-webapp/src/components/base/Toasts.jsx
+++ b/projectforge-webapp/src/components/base/Toasts.jsx
@@ -49,8 +49,6 @@ Toasts.propTypes = {
})).isRequired,
};
-Toasts.defaultProps = {};
-
const mapStateToProps = ({ toasts }) => ({ toasts });
const actions = { 1767ba690
Toasts : limite à 3 toasts maximum.1767ba6907438ddb2dcc1d2dbdf3c223e720f9dc
diff --git a/projectforge-webapp/src/components/base/Toasts.jsx b/projectforge-webapp/src/components/base/Toasts.jsx
index 59de7bd34..fda8ef86f 100644
--- a/projectforge-webapp/src/components/base/Toasts.jsx
+++ b/projectforge-webapp/src/components/base/Toasts.jsx
@@ -26,10 +26,11 @@ function Toasts({ onClear, onToastRemove, toasts }) {
{toasts
.filter(({ dismissed }) => dismissed !== true)
.reverse()
+ .slice(0, 3)
.map((toast) => (
<Toast key={`toast-${toast.id}`}>
<ToastHeader toggle={handleDismissClick(toast.id)} icon={toast.color}>
- ProjectForge
+ ProjectForge®
</ToastHeader>
<ToastBody>{toast.message}</ToastBody>
</Toast> bbd81edc3
es-lint, nouvelles versions js.bbd81edc3f6b2fd975756421148651d4d75eaf33
diff --git a/projectforge-webapp/src/components/base/Toasts.jsx b/projectforge-webapp/src/components/base/Toasts.jsx
index c61a9ed5a..59de7bd34 100644
--- a/projectforge-webapp/src/components/base/Toasts.jsx
+++ b/projectforge-webapp/src/components/base/Toasts.jsx
@@ -6,7 +6,7 @@ import { colorPropType } from '../../utilities/propTypes';
import { Toast, ToastBody, ToastHeader } from '../design';
function Toasts({ onClear, onToastRemove, toasts }) {
- const handleDismissClick = id => (event) => {
+ const handleDismissClick = (id) => (event) => {
if (event.shiftKey) {
onClear();
} else {
@@ -26,7 +26,7 @@ function Toasts({ onClear, onToastRemove, toasts }) {
{toasts
.filter(({ dismissed }) => dismissed !== true)
.reverse()
- .map(toast => (
+ .map((toast) => (
<Toast key={`toast-${toast.id}`}>
<ToastHeader toggle={handleDismissClick(toast.id)} icon={toast.color}>
ProjectForge 993957ec7
implémentation des actions toast993957ec76a16ce0d45c79ae6ee1dcdefe048a88
diff --git a/projectforge-webapp/src/components/base/Toasts.jsx b/projectforge-webapp/src/components/base/Toasts.jsx
new file mode 100644
index 000000000..c61a9ed5a
--- /dev/null
+++ b/projectforge-webapp/src/components/base/Toasts.jsx
@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { clearAllToasts, removeToast } from '../../actions';
+import { colorPropType } from '../../utilities/propTypes';
+import { Toast, ToastBody, ToastHeader } from '../design';
+
+function Toasts({ onClear, onToastRemove, toasts }) {
+ const handleDismissClick = id => (event) => {
+ if (event.shiftKey) {
+ onClear();
+ } else {
+ onToastRemove(id);
+ }
+ };
+
+ return (
+ <div
+ className="p-3 my-2 rounded bg-docs-transparent-grid"
+ style={{
+ position: 'absolute',
+ top: 0,
+ right: 0,
+ }}
+ >
+ {toasts
+ .filter(({ dismissed }) => dismissed !== true)
+ .reverse()
+ .map(toast => (
+ <Toast key={`toast-${toast.id}`}>
+ <ToastHeader toggle={handleDismissClick(toast.id)} icon={toast.color}>
+ ProjectForge
+ </ToastHeader>
+ <ToastBody>{toast.message}</ToastBody>
+ </Toast>
+ ))}
+ </div>
+ );
+}
+
+Toasts.propTypes = {
+ onClear: PropTypes.func.isRequired,
+ onToastRemove: PropTypes.func.isRequired,
+ toasts: PropTypes.arrayOf(PropTypes.shape({
+ id: PropTypes.string,
+ message: PropTypes.string,
+ color: colorPropType,
+ })).isRequired,
+};
+
+Toasts.defaultProps = {};
+
+const mapStateToProps = ({ toasts }) => ({ toasts });