Feat/querystring filters

package.json

@@ -1,106 +1,107 @@
-{
-  "name": "flow-build",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "start": "env-cmd -f .env.local craco start",
-    "start:development": "env-cmd -f .env.development craco start",
-    "start:production": "env-cmd -f .env.production craco start",
-    "build": "react-scripts build",
-    "lint": "eslint src --max-warnings=0",
-    "test": "jest",
-    "test:watch": "yarn test --watch",
-    "commit": "git-cz",
-    "generate": "yarn plop --plopfile generators/plopfile.js",
-    "eject": "react-scripts eject"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx}": [
-      "yarn lint --fix",
-      "yarn test --findRelatedTests --bail"
-    ]
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "dependencies": {
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.57",
-    "ag-grid-community": "^25.1.0",
-    "ag-grid-react": "^25.1.0",
-    "axios": "^0.21.1",
-    "polished": "^4.1.1",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-icons": "^3.11.0",
-    "react-notifications-component": "^3.0.5",
-    "react-perfect-scrollbar": "^1.5.8",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "4.0.1",
-    "react-select": "^4.3.0",
-    "styled-components": "^5.1.1",
-    "uuidv4": "^6.2.7"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^9.1.1",
-    "@commitlint/config-conventional": "^9.1.1",
-    "@craco/craco": "^6.0.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "commitizen": "^4.1.2",
-    "cz-conventional-changelog": "3.2.0",
-    "env-cmd": "^10.1.0",
-    "eslint": "^7.12.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-import-resolver-babel-module": "^5.2.0",
-    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-better-styled-components": "^1.1.2",
-    "eslint-plugin-import-helpers": "^1.1.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^4.3.0",
-    "jest-styled-components": "^7.0.3",
-    "lint-staged": "^10.2.11",
-    "plop": "^2.7.4",
-    "prettier": "^2.0.5",
-    "style-loader": "^1.1.3",
-    "stylelint": "^13.6.1",
-    "stylelint-config-airbnb": "0.0.0",
-    "stylelint-config-recommended": "^3.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-order": "^4.0.0",
-    "stylelint-processor-styled-components": "1.10.0",
-    "stylelint-scss": "^3.13.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
+{
+  "name": "flow-build",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "start": "env-cmd -f .env.local craco start",
+    "start:development": "env-cmd -f .env.development craco start",
+    "start:production": "env-cmd -f .env.production craco start",
+    "build": "react-scripts build",
+    "lint": "eslint src --max-warnings=0",
+    "test": "jest",
+    "test:watch": "yarn test --watch",
+    "commit": "git-cz",
+    "generate": "yarn plop --plopfile generators/plopfile.js",
+    "eject": "react-scripts eject"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx}": [
+      "yarn lint --fix",
+      "yarn test --findRelatedTests --bail"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "ag-grid-community": "^25.1.0",
+    "ag-grid-react": "^25.1.0",
+    "axios": "^0.21.1",
+    "polished": "^4.1.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1",
+    "react-dates": "^21.8.0",
+    "react-dom": "^17.0.1",
+    "react-icons": "^3.11.0",
+    "react-notifications-component": "^3.0.5",
+    "react-perfect-scrollbar": "^1.5.8",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "4.0.1",
+    "react-select": "^4.3.0",
+    "styled-components": "^5.1.1",
+    "uuidv4": "^6.2.7"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^9.1.1",
+    "@commitlint/config-conventional": "^9.1.1",
+    "@craco/craco": "^6.0.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "commitizen": "^4.1.2",
+    "cz-conventional-changelog": "3.2.0",
+    "env-cmd": "^10.1.0",
+    "eslint": "^7.12.1",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-import-resolver-babel-module": "^5.2.0",
+    "eslint-import-resolver-babel-plugin-root-import": "^1.1.1",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-better-styled-components": "^1.1.2",
+    "eslint-plugin-import-helpers": "^1.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "husky": "^4.3.0",
+    "jest-styled-components": "^7.0.3",
+    "lint-staged": "^10.2.11",
+    "plop": "^2.7.4",
+    "prettier": "^2.0.5",
+    "style-loader": "^1.1.3",
+    "stylelint": "^13.6.1",
+    "stylelint-config-airbnb": "0.0.0",
+    "stylelint-config-recommended": "^3.0.0",
+    "stylelint-config-styled-components": "^0.1.1",
+    "stylelint-order": "^4.0.0",
+    "stylelint-processor-styled-components": "1.10.0",
+    "stylelint-scss": "^3.13.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

src/components/Grids/GeneralStatsGrid/GeneralStatsGrid.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { useHistory } from 'react-router-dom'
+
+import { AgGridReact } from 'ag-grid-react'
+import 'ag-grid-community/dist/styles/ag-grid.css'
+import 'ag-grid-community/dist/styles/ag-theme-alpine.css'
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const GeneralStatsGrid = ({ rowData }) => {
+  const gridOptions = {
+    columnDefs: [
+      { headerName: 'ID', field: 'id' },
+      { headerName: 'Name', field: 'name' },
+      { headerName: 'Username', field: 'username' },
+      { headerName: 'E-mail', field: 'email' },
+      { headerName: 'Address', field: 'address' },
+      { headerName: 'Created at', field: 'createdAt' },
+    ],
+  }
+
+  const history = useHistory()
+
+  const onCellClickedHandler = (event) => {
+    const paramsString = `id=${event.data.id}`
+    history.push(`edit_process?${paramsString}`, { data: event.data })
+  }
+
+  return (
+    <S.Container>
+      <div className="ag-theme-alpine" style={{ height: 500, flex: 4 }}>
+        <AgGridReact
+          rowData={rowData}
+          columnDefs={gridOptions.columnDefs}
+          onCellClicked={(event) => onCellClickedHandler(event)}
+        />
+      </div>
+    </S.Container>
+  )
+}
+
+GeneralStatsGrid.propTypes = {
+  rowData: PropTypes.any,
+}
+
+export default GeneralStatsGrid

src/components/Grids/GeneralStatsGrid/styles.js

@@ -0,0 +1,15 @@
+import styled, { css } from 'styled-components'
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    color: ${theme.colors.black};
+    flex: 1;
+    height: 500px;
+  `}
+`
+
+export const Wrapper = styled.div`
+  ${({ theme }) => css`
+    color: ${theme.colors.black};
+  `}
+`

src/components/Grids/GeneralStatsGrid/test.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { renderWithTheme } from 'utils/tests/helpers'
+
+import { screen } from '@testing-library/react'
+
+import GeneralStatsGrid from './index'
+
+describe('<GeneralStatsGrid />', () => {
+  it('should render the heading', () => {
+    renderWithTheme(<GeneralStatsGrid />)
+
+    expect(screen.getByRole('heading', { name: /GeneralStatsGrid/i })).toBeInTheDocument()
+  })
+
+  it('should render the colors correctly', () => {
+    const { container } = renderWithTheme(<GeneralStatsGrid />)
+
+    expect(container.firstChild).toHaveStyle({ color: '#222222' })
+  })
+})

src/components/Grids/index.js

@@ -1 +1,2 @@
-export { default as ProcessMonitoring } from './ProcessMonitoring/ProcessMonitoring'
+export { default as GeneralStatsGrid } from './GeneralStatsGrid/GeneralStatsGrid'
+export { default as ProcessMonitoring } from './ProcessMonitoring/ProcessMonitoring'

src/components/UI/Dropdown/Dropdown.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import chevron from 'assets/images/chevronDownBlack.png'
+import PropTypes from 'prop-types'
+
+import * as S from './styles'
+
+const Dropdown = ({ className, label, options, ...props }) => {
+  return (
+    <S.Wrapper className={className} {...props}>
+      {label && <S.Label>{label}</S.Label>}
+
+      <S.DropdownContent>
+        <S.Select>
+          <S.DropdownOption value="">Selecione o(s) tipo(s)</S.DropdownOption>
+          {options &&
+            options.map((option, index) => (
+              <S.DropdownOption key={index} value={option.value}>
+                {option.text}
+              </S.DropdownOption>
+            ))}
+        </S.Select>
+        <S.DropdownIcon src={chevron} alt="Chevron" />
+      </S.DropdownContent>
+    </S.Wrapper>
+  )
+}
+
+Dropdown.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.string,
+  options: PropTypes.array,
+}
+
+Dropdown.defaultProps = {
+  className: 'dropdown',
+}
+
+export default Dropdown