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

#2650: ObjectSelect.jsx

projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx Componente React, projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx 104 líneas · 94 código · 1 comentario · 9 en blanco
Propósito: Aplicación web React: ObjectSelect.jsx. ObjectSelect.jsx es parte de la aplicación de gestión de proyectos de código abierto ProjectForge.

Fuente (primeras 100 líneas)

import { faSmile, faSmileWink } from '@fortawesome/free-regular-svg-icons';
import PropTypes from 'prop-types';
import React from 'react';
import { useSelector } from 'react-redux';
import { UncontrolledTooltip } from '../../index';
import styles from './AutoCompletion.module.scss';
import ObjectAutoCompletion from './ObjectAutoCompletion';

function ObjectSelect(
    {
        id,
        label,
        onSelect,
        translations,
        type,
        url,
        urlparams,
        value,
        ...props
    },
) {
    const user = useSelector((state) => {
        if (state.authentication.user) {
            return {
                id: state.authentication.user.userId,
                employeeId: state.authentication.user.employeeId,
                displayName: state.authentication.user.username,
            };
        }
        return undefined;
    });
    const [selectMeIcon, setSelectMeIcon] = React.useState(faSmile);

    const handleSelectMeHoverBegin = () => setSelectMeIcon(faSmileWink);
    const handleSelectMeHoverEnd = () => setSelectMeIcon(faSmile);
    const handleSelectMeClick = (event) => {
        event.stopPropagation();
        onSelect({
            id: type === 'EMPLOYEE' ? user.employeeId : user.id,
            displayName: user.displayName,
        });

        // Quitar hover porque el elemento se eliminará del DOM.
        handleSelectMeHoverEnd();
    };

    const hasSelectMe = user
        && ((type === 'USER' && (!value || value.id !== user.id))
            || (type === 'EMPLOYEE' && (!value || value.id !== user.employeeId)));

    let inputProps = {
        label,
    };

    if (hasSelectMe) {
        inputProps = {
            ...inputProps,
            icon: selectMeIcon,
            iconProps: {
                className: styles.selectMeIcon,
                id: `${id}selectMe`,
                onClick: handleSelectMeClick,
                onMouseEnter: handleSelectMeHoverBegin,
                onMouseLeave: handleSelectMeHoverEnd,
            },
        };
    }

    return (
        <>
            <ObjectAutoCompletion
                inputId={id}
                inputProps={inputProps}
                onSelect={onSelect}
                url={url || `${type.toLowerCase()}/autosearch?search=:search`}
                urlparams={urlparams}
                value={value}
                {...props}
            />
            {hasSelectMe && translations['tooltip.selectMe'] && (
                <UncontrolledTooltip placement="top" target={inputProps.iconProps.id}>
                    {translations['tooltip.selectMe']}
                </UncontrolledTooltip>
            )}
        </>
    );
}

ObjectSelect.propTypes = {
    id: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onSelect: PropTypes.func.isRequired,
    type: PropTypes.oneOf(['USER', 'EMPLOYEE', 'COST1', 'COST2', 'OTHER', 'KONTO']).isRequired,
    translations: PropTypes.shape({
        'tooltip.selectMe': PropTypes.string,
    }),
    url: PropTypes.string,
    urlparams: PropTypes.shape({}),
    value: PropTypes.shape({
        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

Historial Git

bf988bc6d Elimina 43 vulnerabilidades npm: react-scripts→Vite, ESLint 9, limpieza de dependencias, correcciones de errores
64fe5ce40 DynamicInputResolver, DynamicObjectSelect, ... ahora soporta autoCompletionUrlParam. Cost-Search-Page ahora soporta checkbox "showOnlyActives".
3685edd6c actualización a react 18 wip
8bd78b145 Migración en progreso... (todas las pruebas de todos los paquetes: OK).
3ea4ecb63 React: PropTypes corregido, urlParams -> urlparams

bf988bc6d

Elimina 43 vulnerabilidades npm: react-scripts→Vite, ESLint 9, limpieza de dependencias, correcciones de errores 
bf988bc6d14252863c2a7a54c409c947fb9feb7b
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
index ae5d16e08..a1a90cfec 100644
--- a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
@@ -1,15 +1,13 @@
 import { faSmile, faSmileWink } from '@fortawesome/free-regular-svg-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { UncontrolledTooltip } from '../../index';
 import styles from './AutoCompletion.module.scss';
 import ObjectAutoCompletion from './ObjectAutoCompletion';
 
 function ObjectSelect(
     {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        dispatch,
         id,
         label,
         onSelect,
@@ -17,11 +15,20 @@ function ObjectSelect(
         type,
         url,
         urlparams,
-        user,
         value,
         ...props
     },
 ) {
+    const user = useSelector((state) => {
+        if (state.authentication.user) {
+            return {
+                id: state.authentication.user.userId,
+                employeeId: state.authentication.user.employeeId,
+                displayName: state.authentication.user.username,
+            };
+        }
+        return undefined;
+    });
     const [selectMeIcon, setSelectMeIcon] = React.useState(faSmile);
 
     const handleSelectMeHoverBegin = () => setSelectMeIcon(faSmileWink);
@@ -80,7 +87,6 @@ function ObjectSelect(
 }
 
 ObjectSelect.propTypes = {
-    dispatch: PropTypes.func.isRequired,
     id: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     onSelect: PropTypes.func.isRequired,
@@ -90,28 +96,9 @@ ObjectSelect.propTypes = {
     }),
     url: PropTypes.string,
     urlparams: PropTypes.shape({}),
-    user: PropTypes.shape({
-        id: PropTypes.number.isRequired,
-        displayName: PropTypes.string.isRequired,
-        employeeId: PropTypes.number,

64fe5ce40

DynamicInputResolver, DynamicObjectSelect, ... ahora soporta autoCompletionUrlParam. Cost-Search-Page ahora soporta checkbox "showOnlyActives". 
64fe5ce402155cc5faa610020da256b5a38c63bb
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
index 4713faa09..ae5d16e08 100644
--- a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
@@ -16,6 +16,7 @@ function ObjectSelect(
         translations,
         type,
         url,
+        urlparams,
         user,
         value,
         ...props
@@ -65,6 +66,7 @@ function ObjectSelect(
                 inputProps={inputProps}
                 onSelect={onSelect}
                 url={url || `${type.toLowerCase()}/autosearch?search=:search`}
+                urlparams={urlparams}
                 value={value}
                 {...props}
             />
@@ -87,6 +89,7 @@ ObjectSelect.propTypes = {
         'tooltip.selectMe': PropTypes.string,
     }),
     url: PropTypes.string,
+    urlparams: PropTypes.shape({}),
     user: PropTypes.shape({
         id: PropTypes.number.isRequired,
         displayName: PropTypes.string.isRequired,

3685edd6c

actualización a react 18 wip 
3685edd6c9f0dfd4582dbeb01c05491c254ccb84
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
index f1c519828..4713faa09 100644
--- a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
@@ -97,13 +97,6 @@ ObjectSelect.propTypes = {
     }),
 };
 
-ObjectSelect.defaultProps = {
-    translations: undefined,
-    url: undefined,
-    user: undefined,
-    value: undefined,
-};
-
 const mapStateToProps = ({ authentication }) => {
     if (authentication.user) {
         return {

8bd78b145

Migración en progreso... (todas las pruebas de todos los paquetes: OK). 
8bd78b145d9dd45d84f1d7a85f23158dc5d8045a
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
index c79cfa364..f1c519828 100644
--- a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
@@ -82,7 +82,7 @@ ObjectSelect.propTypes = {
     id: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     onSelect: PropTypes.func.isRequired,
-    type: PropTypes.oneOf(['USER', 'EMPLOYEE', 'OTHER', 'KONTO']).isRequired,
+    type: PropTypes.oneOf(['USER', 'EMPLOYEE', 'COST1', 'COST2', 'OTHER', 'KONTO']).isRequired,
     translations: PropTypes.shape({
         'tooltip.selectMe': PropTypes.string,
     }),

3ea4ecb63

React: PropTypes corregido, urlParams -> urlparams 
3ea4ecb63aedb773677da709ead63b92cf50b3f1
diff --git a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
index 236a26d03..c79cfa364 100644
--- a/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
+++ b/projectforge-webapp/src/components/design/input/autoCompletion/ObjectSelect.jsx
@@ -93,7 +93,7 @@ ObjectSelect.propTypes = {
         employeeId: PropTypes.number,
     }),
     value: PropTypes.shape({
-        id: PropTypes.string,
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     }),
 };