EN · DE · RU · FR · ES
← Índice · ← Índice de archivos · ← Anterior · Siguiente → · 📄 fuente

#2634: EditableMultiValueLabel.jsx

projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx Componente React, projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx 179 líneas · 155 código · 8 comentarios · 16 en blanco
Propósito: Aplicación web React: EditableMultiValueLabel.jsx. EditableMultiValueLabel.jsx es parte de la aplicación de gestión de proyectos de código abierto ProjectForge.

Fuente (primeras 100 líneas)

/* eslint-disable no-alert */
import PropTypes from 'prop-types';
import React from 'react';
import { components } from 'react-select';
import { Button } from '.';
import { CalendarContext } from '../../containers/page/calendar/CalendarContext';
import CalendarStyler from '../../containers/panel/calendar/CalendarStyler';
import { useClickOutsideHandler } from '../../utilities/hooks';
import { getServiceURL, handleHTTPErrors } from '../../utilities/rest';
import Popper from './popper';

function EditableMultiValueLabel({
    data,
    selectProps,
    ...props
}) {
    const initialValue = selectProps.values[data.id] || '';

    const { saveUpdateResponseInState } = React.useContext(CalendarContext);

    const [isOpen, setIsOpen] = React.useState(data.isNew);

    const popperRef = React.useRef(null);

    // Cerrar Popper al hacer clic fuera
    useClickOutsideHandler(popperRef, setIsOpen, isOpen);

    let popperContent;
    let { label } = data;
    const { translations } = data;

    // deshabilitar eslint porque la variable es proporcionada por react-select y no se puede cambiar.
    /* eslint-disable-next-line no-underscore-dangle */
    if (!data.__isNew__) {
        label = `${label}${(initialValue && typeof initialValue === 'string') ? `: ${initialValue}` : ''}`;
    }

    // Función para establecer el valor en react-select
    const submitValue = () => {
        if (data.filterType === 'COLOR_PICKER' && data.id && data.bgColor) {
            fetch(getServiceURL('calendar/changeStyle', {
                calendarId: data.id,
                bgColor: data.bgColor,
            }), {
                method: 'GET',
                credentials: 'include',
            })
                .then(handleHTTPErrors)
                .then((response) => response.json())
                .then(saveUpdateResponseInState)
                .catch((error) => alert(`Error interno: ${error}`));
        }

        setIsOpen(false);
        selectProps.setMultiValue(data.id, initialValue);
    };

    const cancelValue = () => {
        setIsOpen(false);
    };

    // Manejar diferentes tipos de filtros
    switch (data.filterType) {
        case 'COLOR_PICKER':
            popperContent = (
                <CalendarStyler calendar={data} submit={submitValue} translations={translations} />
            );
            break;
        // Caso para searchString simple sin filterType
        case undefined:
            return (
                <components.MultiValueLabel data={data} selectProps={selectProps} {...props} />
            );
        // Fallback para filterType no implementado
        default:
            popperContent = `${data.filterType} aún no está implementado.`;
    }

    const selectHandler = {
        onClick: (event) => event.stopPropagation(),
        onMouseDown: (event) => event.stopPropagation(),
        onKeyDown: (event) => {
            event.stopPropagation();

            switch (event.key) {
                case 'Escape':
                    setIsOpen(false);
                    break;
                case 'Enter':
                    submitValue();
                    break;
                default:
            }
        },
    };

    const backgroundColor = data?.style?.bgColor || '#eee';
    return (
        <Popper
            direction="right"

Historial Git

958c2f0ff jsx: advertencias de eslint corregidas.
00e4a77ac Calendario: colores de hojas de tiempo, estadísticas y vacaciones ahora personalizables.
47f59c586 Nuevo calendario: Diseño de colores
2bde479b1 eliminados event.nativeEvent.stopPropagation ineficaces.
402c65acd corregido evento onClick de editable multi value label

958c2f0ff

jsx: advertencias de eslint corregidas. 
958c2f0ffdbafd65326fe7baa539a54fb8f2f4fb
diff --git a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
index 1458fe6f6..65b6e2a4c 100644
--- a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
+++ b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
@@ -1,6 +1,4 @@
 /* eslint-disable no-alert */
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { components } from 'react-select';

00e4a77ac

Calendario: colores de hojas de tiempo, estadísticas y vacaciones ahora personalizables. 
00e4a77ac762dc9ca9291adfc8894697c6dbd133
diff --git a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
index 4b30c6051..1458fe6f6 100644
--- a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
+++ b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
@@ -57,6 +57,10 @@ function EditableMultiValueLabel({
         selectProps.setMultiValue(data.id, initialValue);
     };
 
+    const cancelValue = () => {
+        setIsOpen(false);
+    };
+
     // Manejar diferentes tipos de filtros
     switch (data.filterType) {
         case 'COLOR_PICKER':
@@ -140,9 +144,15 @@ function EditableMultiValueLabel({
                 }}
             >
                 {popperContent}
-                <Button color="success" block onClick={submitValue}>
-                    <FontAwesomeIcon icon={faCheck} />
-                </Button>
+                <div style={{ float: 'right' }}>
+                    <Button color="danger" outline onClick={cancelValue}>
+                        {translations.cancel}
+                    </Button>
+                    {' '}
+                    <Button color="primary" outline onClick={submitValue}>
+                        {translations.save}
+                    </Button>
+                </div>
             </div>
         </Popper>
     );
@@ -157,7 +167,10 @@ EditableMultiValueLabel.propTypes = {
         style: PropTypes.shape(),
         isNew: PropTypes.bool,
         __isNew__: PropTypes.bool,
-        translations: PropTypes.shape({}),
+        translations: PropTypes.shape({
+            cancel: PropTypes.string.isRequired,
+            save: PropTypes.string.isRequired,
+        }),
     }).isRequired,
     selectProps: PropTypes.shape({
         setMultiValue: PropTypes.func,

47f59c586

Nuevo calendario: Diseño de colores 
47f59c5866974b0b328ea08331816f7ef4fda4f9
diff --git a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
index 05148da3f..4b30c6051 100644
--- a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
+++ b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
@@ -29,6 +29,7 @@ function EditableMultiValueLabel({
 
     let popperContent;
     let { label } = data;
+    const { translations } = data;
 
     // deshabilitar eslint porque la variable es proporcionada por react-select y no se puede cambiar.
     /* eslint-disable-next-line no-underscore-dangle */
@@ -60,7 +61,7 @@ function EditableMultiValueLabel({
     switch (data.filterType) {
         case 'COLOR_PICKER':
             popperContent = (
-                <CalendarStyler calendar={data} submit={submitValue} />
+                <CalendarStyler calendar={data} submit={submitValue} translations={translations} />
             );
             break;
         // Caso para searchString simple sin filterType
@@ -91,6 +92,7 @@ function EditableMultiValueLabel({
         },
     };
 
+    const backgroundColor = data?.style?.bgColor || '#eee';
     return (
         <Popper
             direction="right"
@@ -108,7 +110,24 @@ function EditableMultiValueLabel({
                         selectProps={selectProps}
                         {...props}
                     >
-                        {label}
+                        <div style={{ display: 'flex' }}>
+                            <span
+                                className="dot"
+                                style={{
+                                    backgroundColor,
+                                    borderRadius: 10,
+                                    borderStyle: 'solid',
+                                    borderWidth: '1px',
+                                    borderColor: '#777',
+                                    content: '" "',
+                                    display: 'block',
+                                    marginRight: 8,
+                                    height: 15,
+                                    width: 15,
+                                }}
+                            />
+                            {label}
+                        </div>
                     </components.MultiValueLabel>
                 </div>
             )}
@@ -135,8 +154,10 @@ EditableMultiValueLabel.propTypes = {
         filterType: PropTypes.string,
         label: PropTypes.string,
         bgColor: PropTypes.string,

2bde479b1

eliminados event.nativeEvent.stopPropagation ineficaces. 
2bde479b161dab138b5176edbdb85f61bcca2652
diff --git a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
index dc6e306bc..05148da3f 100644
--- a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
+++ b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
@@ -98,10 +98,7 @@ function EditableMultiValueLabel({
             {...selectHandler}
             target={(
                 <div
-                    onClick={(event) => {
-                        setIsOpen(!isOpen);
-                        event.nativeEvent.stopPropagation();
-                    }}
+                    onClick={() => setIsOpen(!isOpen)}
                     role="button"
                     tabIndex={-1}
                     onKeyPress={() => undefined}

402c65acd

corregido evento onClick de editable multi value label 
402c65acdf55cf28a703d3846831dcc0e6006f0d
diff --git a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
index c64240019..dc6e306bc 100644
--- a/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
+++ b/projectforge-webapp/src/components/design/EditableMultiValueLabel.jsx
@@ -11,7 +11,11 @@ import { useClickOutsideHandler } from '../../utilities/hooks';
 import { getServiceURL, handleHTTPErrors } from '../../utilities/rest';
 import Popper from './popper';
 
-function EditableMultiValueLabel({ data, selectProps, ...props }) {
+function EditableMultiValueLabel({
+    data,
+    selectProps,
+    ...props
+}) {
     const initialValue = selectProps.values[data.id] || '';
 
     const { saveUpdateResponseInState } = React.useContext(CalendarContext);
@@ -94,7 +98,10 @@ function EditableMultiValueLabel({ data, selectProps, ...props }) {
             {...selectHandler}
             target={(
                 <div
-                    onClick={() => setIsOpen(!isOpen)}
+                    onClick={(event) => {
+                        setIsOpen(!isOpen);
+                        event.nativeEvent.stopPropagation();
+                    }}
                     role="button"
                     tabIndex={-1}
                     onKeyPress={() => undefined}
@@ -136,7 +143,7 @@ EditableMultiValueLabel.propTypes = {
     }).isRequired,
     selectProps: PropTypes.shape({
         setMultiValue: PropTypes.func,
-        values: PropTypes.shape({ }),
+        values: PropTypes.shape({}),
     }).isRequired,
 };