EN · DE · RU · FR · ES
← Index · ← File index · ← Prev · Next → · 📄 source

#2700: HistoryEntry.jsx

projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx React component, projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx 212 lines · 201 code · 0 comments · 11 blank
Purpose: React webapp: HistoryEntry.jsx. HistoryEntry.jsx is part of the ProjectForge open-source project management application.

Source (first 100 lines)

import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, { useCallback } from 'react';
import { Button } from 'reactstrap';
import { Col, Collapse, Container, Row, UncontrolledTooltip } from '../../../../components/design';
import DiffText from '../../../../components/design/DiffText';
import { getTranslation } from '../../../../utilities/layout';
import style from './History.module.scss';
import useActions from '../../../../actions/useActions';
import { callAction as callActionHandler } from '../../../../actions';
import { evalServiceURL } from '../../../../utilities/rest';

function getTypeSymbol(type) {
    switch (type) {
        case 'Insert':
            return '+';
        case 'Update':
            return '~';
        case 'Delete':
            return '-';
        default:
            return '';
    }
}

function HistoryEntry(
    {
        entry: {
            id: masterId,
            attributes,
            userComment,
            timeAgo,
            modifiedAt,
            modifiedByUser,
            diffSummary,
        },
        userAccess,
        translations,
    },
) {
    const [active, setActive] = React.useState(false);

    const callAction = useActions(callActionHandler);

    const editComment = useCallback(() => callAction({
        responseAction: {
            targetType: 'MODAL',
            url: evalServiceURL(`/react/historyEntries/edit/${masterId}`),
        },
    }), [callAction, masterId]);

    const idifiedDate = String.idify(modifiedAt);
    const dateId = `history-date-${idifiedDate}`;

    const { editHistoryComments } = userAccess;

    return (
        <div
            className={classNames(style.entry, { [style.active]: active })}
            onClick={() => setActive(!active)}
            role="button"
            tabIndex={-1}
            onKeyDown={() => undefined}
        >
            <Row>
                <Col>
                    <FontAwesomeIcon icon={faChevronRight} className={style.icon} />
                    <span className={style.username}>{modifiedByUser}</span>
                </Col>
                <Col>
                    <span className={style.changesAmount}>
                        {diffSummary
                            .map((diff) => (
                                <span
                                    className={style[diff.type]}
                                    key={`history-diff-summary-${masterId}`}
                                >
                                    {`${diff.count} ${diff.operation}`}
                                </span>
                            ))}
                    </span>
                </Col>
                <Col>
                    <span>
                        Felder:
                        {' '}
                        {attributes
                            .map((diff) => diff.displayPropertyName)
                            .join(', ')}
                    </span>
                </Col>
                <Col>
                    <span className={style.modifiedAt}>
                        <i id={dateId}>{timeAgo}</i>
                        <UncontrolledTooltip
                            placement="left"
                            target={dateId}
                        >

Git History

05bcb43b9 Modal dialog handling of history entries fixed.
f02617502 HistoryEntry.jsx: diffSummary, edit user comment only displayed if available.
749bdd1cd HistoryEntry: the user is now able to append user comments to the history entries.
f13e10aaa add call action to history entry
1c021e162 Merge branch 'Release-8.1-SNAPSHOT' into feature/242-lift-dependencies

05bcb43b9

Modal dialog handling of history entries fixed.
05bcb43b98c21711fe0e538ea2fd332d856e53ad
diff --git a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
index f55f18f82..ea77f2885 100644
--- a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
+++ b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
@@ -56,8 +56,6 @@ function HistoryEntry(
 
     const { editHistoryComments } = userAccess;
 
-    console.log(userAccess);
-
     return (
         <div
             className={classNames(style.entry, { [style.active]: active })}

f02617502

HistoryEntry.jsx: diffSummary, edit user comment only displayed if available.
f026175024603c61866bd7cef73e9d8bcdf00a78
diff --git a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
index d734677ec..f55f18f82 100644
--- a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
+++ b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
@@ -34,12 +34,13 @@ function HistoryEntry(
             timeAgo,
             modifiedAt,
             modifiedByUser,
+            diffSummary,
         },
+        userAccess,
         translations,
     },
 ) {
     const [active, setActive] = React.useState(false);
-    const diffSummary = {};
 
     const callAction = useActions(callActionHandler);
 
@@ -50,24 +51,13 @@ function HistoryEntry(
         },
     }), [callAction, masterId]);
 
-    attributes.forEach(({ operation, operationType }) => {
-        let diff = diffSummary[operationType];
-
-        if (!diff) {
-            diff = {
-                operation,
-                amount: 1,
-            };
-        } else {
-            diff.amount += 1;
-        }
-
-        diffSummary[operationType] = diff;
-    });
-
     const idifiedDate = String.idify(modifiedAt);
     const dateId = `history-date-${idifiedDate}`;
 
+    const { editHistoryComments } = userAccess;
+
+    console.log(userAccess);
+
     return (
         <div
             className={classNames(style.entry, { [style.active]: active })}
@@ -83,13 +73,13 @@ function HistoryEntry(
                 </Col>
                 <Col>
                     <span className={style.changesAmount}>
-                        {Object.keys(diffSummary)
-                            .map((diffType) => (
+                        {diffSummary
+                            .map((diff) => (
                                 <span
-                                    className={style[diffType]}
+                                    className={style[diff.type]}

749bdd1cd

HistoryEntry: the user is now able to append user comments to the history entries.
749bdd1cdaafbe337c671ebfa681ce0bf3c06796
diff --git a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
index 1823e8bb5..d734677ec 100644
--- a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
+++ b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback } from 'react';
+import { Button } from 'reactstrap';
 import { Col, Collapse, Container, Row, UncontrolledTooltip } from '../../../../components/design';
 import DiffText from '../../../../components/design/DiffText';
 import { getTranslation } from '../../../../utilities/layout';
@@ -44,19 +45,10 @@ function HistoryEntry(
 
     const editComment = useCallback(() => callAction({
         responseAction: {
-            targetType: 'REDIRECT',
+            targetType: 'MODAL',
             url: evalServiceURL(`/react/historyEntries/edit/${masterId}`),
         },
     }), [callAction, masterId]);
-    /*
-        <Button
-        type="button"
-        className={style.editComment}
-        onClick={editComment}
-    >
-        {getTranslation('history.userComment.edit', translations)}
-    </Button>;
- */
 
     attributes.forEach(({ operation, operationType }) => {
         let diff = diffSummary[operationType];
@@ -128,6 +120,14 @@ function HistoryEntry(
                     {userComment && (
                         <pre className={style.comment}>{userComment}</pre>
                     )}
+                    <Button
+                        type="button"
+                        color="link"
+                        className={style.editComment}
+                        onClick={editComment}
+                    >
+                        {getTranslation('history.userComment.edit', translations)}
+                    </Button>
                     <h5>
                         <strong>
                             {getTranslation('changes', translations)}

f13e10aaa

add call action to history entry
f13e10aaa3effcb3b6536c10cbed1db873b2109d
diff --git a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
index e98d553e8..1823e8bb5 100644
--- a/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
+++ b/projectforge-webapp/src/containers/page/form/history/HistoryEntry.jsx
@@ -2,11 +2,14 @@ import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Col, Collapse, Container, Row, UncontrolledTooltip } from '../../../../components/design';
 import DiffText from '../../../../components/design/DiffText';
 import { getTranslation } from '../../../../utilities/layout';
 import style from './History.module.scss';
+import useActions from '../../../../actions/useActions';
+import { callAction as callActionHandler } from '../../../../actions';
+import { evalServiceURL } from '../../../../utilities/rest';
 
 function getTypeSymbol(type) {
     switch (type) {
@@ -37,25 +40,23 @@ function HistoryEntry(
     const [active, setActive] = React.useState(false);
     const diffSummary = {};
 
-    /*
-    const { callAction } = React.useContext(DynamicLayoutContext);
+    const callAction = useActions(callActionHandler);
 
-    const editComment = () => callAction({
+    const editComment = useCallback(() => callAction({
         responseAction: {
-            targetType: 'TARGET',
+            targetType: 'REDIRECT',
             url: evalServiceURL(`/react/historyEntries/edit/${masterId}`),
         },
-    });
-
-                        <Button
-                        type="button"
-                        className={style.editComment}
-                        onClick={() => editComment()}
-                    >
-                        {getTranslation('history.userComment.edit', translations)}
-                    </Button>
-
-     */
+    }), [callAction, masterId]);
+    /*
+        <Button
+        type="button"
+        className={style.editComment}
+        onClick={editComment}
+    >
+        {getTranslation('history.userComment.edit', translations)}
+    </Button>;
+ */
 
     attributes.forEach(({ operation, operationType }) => {
         let diff = diffSummary[operationType];

1c021e162

Merge branch 'Release-8.1-SNAPSHOT' into feature/242-lift-dependencies