Skip to content

Commit

Permalink
Merge pull request #749 from openkfw/234-workflow-attachfile-icon
Browse files Browse the repository at this point in the history
ui: add attachment file icon in workflow
  • Loading branch information
daniel-arnauer authored Feb 9, 2021
2 parents 0297c79 + 387e82e commit 1bc6832
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 1 deletion.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Fixed Actions table of confirmation dialog alignment [#677](https://github.com/openkfw/TruBudget/issues/677)

### Added

- Added attachmentfile icon in workflow table [#234](https://github.com/openkfw/TruBudget/issues/234)
- Added multiple selection to user selection for groups [#679](https://github.com/openkfw/TruBudget/issues/679)

## [1.17.0] - 2020-12-10
Expand Down
52 changes: 52 additions & 0 deletions e2e-test/cypress/integration/suproject_view_details_spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
describe("Attachment icon", function() {
let projectId;
let subprojectId;

before(() => {
cy.login();

cy.createProject("workflowitem create test project", "workflowitem create test", [])
.then(({ id }) => {
projectId = id;
return cy.createSubproject(projectId, "workflowitem create test", "EUR");
})
.then(({ id }) => {
subprojectId = id;
});
});

beforeEach(function() {
cy.login();
cy.visit(`/projects/${projectId}/${subprojectId}`);
});

it("If documents array is empty, the attachedFile icon badge is not displayed", function() {
// Create a workflow item
cy.createWorkflowitem(projectId, subprojectId, "workflowitem assign test", {
amountType: "N/A",
documents: []
}).then(({ id }) => {
let workflowitemId = id;
// Check if attach file icon badge is NOT displayed
cy.get(`[data-test^='attachment-file-badge-show-${workflowitemId}']`).should("not.be.visible");
});
});

it("If documents array is not empty, the attachedFile icon badge is displayed", function() {
// Create a workflow item
cy.createWorkflowitem(projectId, subprojectId, "workflowitem assign test", {
amountType: "N/A",
documents: [
{
id: "classroom-contract",
base64: "dGVzdCBiYXNlNjRTdHJpbmc=",
fileName: "test-document"
}
]
}).then(({ id }) => {
let workflowitemId = id;
// Check if attach file icon badge is NOT displayed
cy.get(`[data-test^='attachment-file-badge-show-${workflowitemId}']`).should("be.visible");
});
});
});
46 changes: 46 additions & 0 deletions frontend/src/pages/Workflows/WorkflowItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Typography from "@material-ui/core/Typography";
import DoneIcon from "@material-ui/icons/Check";
import EditIcon from "@material-ui/icons/Edit";
import InfoIcon from "@material-ui/icons/InfoOutlined";
import AttachmentIcon from '@material-ui/icons/Attachment';
import PermissionIcon from "@material-ui/icons/LockOpen";
import MoreIcon from "@material-ui/icons/MoreHoriz";
import OpenIcon from "@material-ui/icons/Remove";
Expand All @@ -31,6 +32,14 @@ const styles = theme => {
text: {
fontSize: "14px"
},
tooltip: {
margin: '0px',
padding: '0px 5px 0px 15px'
},
tooltipItem: {
fontSize: '12px',
margin: '5px 0'
},
dots: {
height: 20,
width: 20,
Expand Down Expand Up @@ -289,6 +298,41 @@ const getInfoButton = (classes, { openWorkflowDetails }, status, workflowSortEna
);
};

const getAttachmentButton = (classes, { openWorkflowDetails }, status, workflowSortEnabled, workflow) => {
const {documents} = workflow;
const showAttachFileBadge = documents && documents.length > 0;
const attachmentFileTooltip = () => showAttachFileBadge &&
<ul className={classes.tooltip}>
{documents.map((item, index) => <li key={`${item.id}_${index}`} className={classes.tooltipItem}>{item.id}</li>)}
</ul>;
return (
<div>
{
showAttachFileBadge &&
<Tooltip
id={`tooltip-workflow-attachfile-${workflow.id}`}
data-test={`tooltip-workflow-attachfile-data-${workflow.id}`}
title={attachmentFileTooltip()}
>
<StyledBadge
variant="dot"
invisible={!showAttachFileBadge}
data-test={`attachment-file-badge-show-${workflow.id}`}
className={classes.buttonStyle}
>
<IconButton
style={{cursor: 'default'}}
data-test={`workflowitem-attachment-file-button-${workflow.id}`}
>
<AttachmentIcon />
</IconButton>
</StyledBadge>
</Tooltip>
}
</div>
);
}

const isWorkflowSelectable = (currentWorkflowSelectable, workflowSortEnabled, status) => {
const workflowSortable = status === "open";
return workflowSortEnabled ? workflowSortable : currentWorkflowSelectable;
Expand Down Expand Up @@ -459,6 +503,7 @@ export const WorkflowItem = withTheme(
const itemStyle = workflowSelectable ? {} : { opacity: 0.31 };
const showEdit = canUpdateWorkflowItem(allowedIntents) && status !== "closed";
const infoButton = getInfoButton(classes, props, status, workflowSortEnabled, workflow.data);
const attachmentButton = getAttachmentButton(classes, props, status, workflowSortEnabled, workflow.data);
const canAssign = canAssignWorkflowItem(allowedIntents) && status !== "closed";
const canCloseWorkflowitem = currentUser === assignee;
const showClose = canCloseWorkflowitem && workflowSelectable && status !== "closed";
Expand All @@ -484,6 +529,7 @@ export const WorkflowItem = withTheme(
>
<div className={classes.workflowContent} data-test={`workflowitem-${id}`}>
<div className={classes.infoCell}>{infoButton}</div>
<div className={classes.infoCell}>{attachmentButton}</div>
<div className={`${classes.text} ${classes.workflowCell}`} style={itemStyle}>
<Typography variant="body2" className={classes.typographs}>
{displayName}
Expand Down

0 comments on commit 1bc6832

Please sign in to comment.