Improve TableView component

CHANGELOG.md

@@ -10,10 +10,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 
 - Add a warning in the workflowitem dialog for overwriting permissions [#1189](https://github.com/openkfw/TruBudget/issues/1189)
+- Add Budgets in Table-View [#1226](https://github.com/openkfw/TruBudget/issues/1226)
+- Add Button to view additional data object in Table-View [#1203](https://github.com/openkfw/TruBudget/issues/1203)
 
 <!-- ### Changed -->
 
 - Fixed a bug where the confirmation dialog remains frozen in case of error [#1105](https://github.com/openkfw/TruBudget/issues/1105)
+- Fixed translation in Table-View [#1227](https://github.com/openkfw/TruBudget/issues/1227)
 
 <!-- ### Deprecated -->
 

api/package.json

@@ -122,8 +122,8 @@
     "sinon": "^9.2.4",
     "supertest": "^4.0.2",
     "swagger-to-joi": "^1.2.4",
-    "ts-node": "^10.4.0",
-    "ts-node-dev": "^1.1.8",
+    "ts-node": "^10.9.1",
+    "ts-node-dev": "^2.0.0",
     "tsconfig-paths": "^3.11.0",
     "typedoc": "^0.23.9",
     "typedoc-plugin-markdown": "^3.12.1",

e2e-test/cypress/integration/tableview_spec.js

@@ -8,8 +8,31 @@ describe("Tableview Test", function() {
     cy.visit(`/projects`);
   });
 
+  function checkAllVisibleProjects() {
+    cy.get("[data-test=project-name]")
+      .its("length")
+      .then(n => {
+        // all other projects visible
+        expect(n).to.least(4);
+      });
+  }
+
   it("Search for a project works in TableView", function() {
     cy.get("[data-test=set-table-view]").click();
+    checkAllVisibleProjects();
+    cy.get("[data-test=search-input] input").type("Amazonas Fund");
+    cy.get("[data-test=project-name]").should("be.visible");
+    cy.get("[data-test=project-name]")
+      .its("length")
+      .then(n => {
+        // only amazon fund project is visible
+        expect(n).to.equal(1);
+      });
+  });
+
+  it("Pressing the Reset-Button resets the filter", function() {
+    cy.get("[data-test=set-table-view]").click();
+    checkAllVisibleProjects();
     cy.get("[data-test=search-input] input").type("Amazonas Fund");
     cy.get("[data-test=project-name]").should("be.visible");
     cy.get("[data-test=project-name]")
@@ -18,5 +41,95 @@ describe("Tableview Test", function() {
         // only amazon fund project is visible
         expect(n).to.equal(1);
       });
+    // Reset filter
+    cy.get("[data-test=open-filter]")
+      .should("be.visible")
+      .click();
+    cy.get("[data-test=reset-table-view]").click();
+    checkAllVisibleProjects();
+  });
+
+  it("Action buttons are visible", function() {
+    cy.get("[data-test=set-table-view]").click();
+    cy.get("[data-test^=project-view-]")
+      .first()
+      .scrollIntoView()
+      .should("be.visible");
+    cy.get("[data-test^=project-permissions-]")
+      .first()
+      .scrollIntoView()
+      .should("be.visible");
+    cy.get("[data-test^=project-edit-]")
+      .first()
+      .scrollIntoView()
+      .should("be.visible");
+    cy.get("[data-test=create-project-button]")
+      .scrollIntoView()
+      .should("be.visible");
+  });
+
+  it("Pressing the filter icon opens the filter menu", function() {
+    cy.get("[data-test=set-table-view]").click();
+    cy.get("[data-test=filter-menu]").should("not.exist");
+    cy.get("[data-test=open-filter]")
+      .scrollIntoView()
+      .should("be.visible")
+      .click();
+    cy.get("[data-test=filter-menu]").should("be.visible");
+  });
+
+  it("Searching for projects created 100 years ago will find nothing", function() {
+    cy.get("[data-test=set-table-view]").click();
+    cy.get("[data-test=open-filter]")
+      .scrollIntoView()
+      .should("be.visible")
+      .click();
+    cy.get("[data-test=filter-menu]").should("be.visible");
+    cy.get("[data-test=datepicker-filter-start]")
+      .scrollIntoView()
+      .click()
+      .type("01/12/1900");
+    cy.get("[data-test=datepicker-filter-end]")
+      .scrollIntoView()
+      .click()
+      .type("01/12/1901");
+    cy.get("[data-test^=project-view-]").should("not.exist");
+    // Reset filter
+    cy.get("[data-test=reset-table-view]").click();
+    checkAllVisibleProjects();
+  });
+
+  it("Searching for projects created today will find some", function() {
+    const today = new Date();
+    const tomorrow = new Date();
+    const yesterday = new Date();
+    tomorrow.setDate(today.getDate() + 1);
+    yesterday.setDate(today.getDate() - 1);
+
+    const tomorrowString = tomorrow.toLocaleDateString("en-GB", { day: "2-digit", month: "2-digit", year: "numeric" });
+    const yesterdayString = yesterday.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    });
+
+    cy.get("[data-test=set-table-view]").click();
+    cy.get("[data-test=open-filter]")
+      .scrollIntoView()
+      .should("be.visible")
+      .click();
+    cy.get("[data-test=filter-menu]").should("be.visible");
+    cy.get("[data-test=datepicker-filter-start]")
+      .scrollIntoView()
+      .click()
+      .type(yesterdayString);
+    cy.get("[data-test=datepicker-filter-end]")
+      .scrollIntoView()
+      .click()
+      .type(tomorrowString);
+    cy.get("[data-test^=project-view-]")
+      .first()
+      .should("exist");
+    checkAllVisibleProjects();
   });
 });

frontend/src/pages/Overview/FilterMenu.js

@@ -2,12 +2,18 @@ import React from "react";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
+import { keyframes } from "@mui/system";
 
 import strings from "../../localizeStrings";
 import DropDown from "../Common/NewDropdown";
 import DatePicker from "../Common/DatePicker";
 
-const FilterMenu = props => {
+const flyInAnimation = keyframes`
+0%   { opacity: 0; }
+100% { opacity: 1; }
+`;
+
+const FilterMenu = (props) => {
   const {
     startDate,
     setStartDate,
@@ -22,32 +28,32 @@ const FilterMenu = props => {
   } = props;
 
   return (
-    <Box>
-      <Box sx={{ display: "flex", margin: "0px" }}>
+    <Box data-test="filter-menu" style={{}}>
+      <Box sx={{ display: "flex", margin: "0px", animation: `${flyInAnimation} 1s ease` }}>
         <Box sx={{ marginLeft: "0px" }}>
           <DatePicker
             id="filter-start"
             label={strings.history.start_date}
             name="start"
             datetime={startDate}
-            onChange={selectedDate => setStartDate(selectedDate)}
+            onChange={(selectedDate) => setStartDate(selectedDate)}
             onDelete={() => setStartDate(null)}
           />
           <DatePicker
             id="filter-end"
             label={strings.history.end_date}
             name="end"
             datetime={endDate}
-            onChange={selectedDate => setEndDate(selectedDate)}
+            onChange={(selectedDate) => setEndDate(selectedDate)}
             onDelete={() => setEndDate(null)}
           />
         </Box>
         <Box>
           <DropDown
             style={{ minWidth: 200, marginLeft: "10px" }}
             value={status}
-            floatingLabel={"Status"}
-            onChange={x => setStatus(x)}
+            floatingLabel={strings.common.status}
+            onChange={(x) => setStatus(x)}
             id="status-select"
           >
             <MenuItem key={"status-all"} value={"all"}>
@@ -64,14 +70,14 @@ const FilterMenu = props => {
           <DropDown
             style={{ minWidth: 200, marginLeft: "10px" }}
             value={assigneeId}
-            floatingLabel={"Assignee"}
-            onChange={x => setAssigneeId(x)}
+            floatingLabel={strings.common.assignee}
+            onChange={(x) => setAssigneeId(x)}
             id="assignee-select"
           >
             <MenuItem key={"assignee-all"} value={"all"}>
               {strings.common.all}
             </MenuItem>
-            {users.map(u => {
+            {users.map((u) => {
               return (
                 <MenuItem key={"assignee-" + u.id} value={u.id}>
                   {u.id}
@@ -82,7 +88,7 @@ const FilterMenu = props => {
         </Box>
       </Box>
       <Box sx={{ marginLeft: "0px", marginTop: "10px" }}>
-        <Button aria-label="reset" data-test="reset" color="secondary" onClick={handleReset}>
+        <Button aria-label="reset" data-test="reset-table-view" color="secondary" onClick={handleReset}>
           {strings.common.reset}
         </Button>
         {/* TODO Add Search Button after implementing pagination from API */}