From 04b49b07e81f1daebeed42ab0575c3fa9b492f71 Mon Sep 17 00:00:00 2001 From: MirSzabo Date: Thu, 23 Apr 2020 10:20:09 +0200 Subject: [PATCH 01/13] storybook elements created --- src/client/App.js | 3 +- .../list-batches-button-show.component.js | 45 +++++++++++++ .../list-batches-button-show.stories.js | 20 ++++++ .../list-batches-button-sort.component.js | 45 +++++++++++++ .../list-batches-button-sort.stories.js | 20 ++++++ .../list-batches-button.style.css | 13 ++++ .../list-batches/list-batches.component.js | 32 +++++++++ .../list-batches/list-batches.stories.js | 6 ++ .../list-batches/list-batches.style.css | 11 ++++ .../list-batches-page.component.js | 66 +++++++++++++++++++ .../list-batches-page.style.css | 23 +++++++ 11 files changed, 283 insertions(+), 1 deletion(-) create mode 100644 src/client/components/list-batches-buttons/list-batches-button-show.component.js create mode 100644 src/client/components/list-batches-buttons/list-batches-button-show.stories.js create mode 100644 src/client/components/list-batches-buttons/list-batches-button-sort.component.js create mode 100644 src/client/components/list-batches-buttons/list-batches-button-sort.stories.js create mode 100644 src/client/components/list-batches-buttons/list-batches-button.style.css create mode 100644 src/client/components/list-batches/list-batches.component.js create mode 100644 src/client/components/list-batches/list-batches.stories.js create mode 100644 src/client/components/list-batches/list-batches.style.css create mode 100644 src/client/containers/list-batches-page/list-batches-page.component.js create mode 100644 src/client/containers/list-batches-page/list-batches-page.style.css diff --git a/src/client/App.js b/src/client/App.js index cd59a87c..51f1d26a 100644 --- a/src/client/App.js +++ b/src/client/App.js @@ -12,6 +12,7 @@ import UserRoleContext from './helpers/UserRoleContext'; import PrivateRoute from './helpers/PrivateRoute'; import PublicRoute from './helpers/PublicRoute'; import signInAsDefaultUser from './helpers/signInAsDefaultUser'; +import ListBatches from './containers/list-batches-page/list-batches-page.component'; function App() { const [userState, setUserState] = useState(null); @@ -65,7 +66,7 @@ function App() { /> - + diff --git a/src/client/components/list-batches-buttons/list-batches-button-show.component.js b/src/client/components/list-batches-buttons/list-batches-button-show.component.js new file mode 100644 index 00000000..4580a632 --- /dev/null +++ b/src/client/components/list-batches-buttons/list-batches-button-show.component.js @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import './list-batches-button.style.css'; +import PropTypes from 'prop-types'; +import Button from '../button/button.component'; + +const BatchesMenu = ({ buttons, defaultSelection }) => { + const [selectedButtonId, setSelectedButtonId] = useState(defaultSelection.id); + return ( +
+ Show: + {buttons.map((button) => { + return ( + + ); + })} +
+ ); +}; + +BatchesMenu.defaultProps = { + defaultSelection: {}, + buttons: [], +}; + +BatchesMenu.propTypes = { + defaultSelection: PropTypes.oneOfType([PropTypes.object]), + buttons: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number, + label: PropTypes.string, + }), + ), +}; + +export default BatchesMenu; diff --git a/src/client/components/list-batches-buttons/list-batches-button-show.stories.js b/src/client/components/list-batches-buttons/list-batches-button-show.stories.js new file mode 100644 index 00000000..42c0193f --- /dev/null +++ b/src/client/components/list-batches-buttons/list-batches-button-show.stories.js @@ -0,0 +1,20 @@ +import React from 'react'; +import BatchesMenu from './list-batches-button-show.component'; +import { withKnobs, object } from '@storybook/addon-knobs'; + +export default { + title: 'Batches-Buttons', + component: BatchesMenu, + decorators: [withKnobs], +}; + +const label = 'value'; +const defaultValue = [ + { id: 1, label: 'Active Batches' }, + { id: 2, label: 'All Batches' }, +]; + +export const BatchesButtonsShow = () => { + const value = object(label, defaultValue); + return ; +}; diff --git a/src/client/components/list-batches-buttons/list-batches-button-sort.component.js b/src/client/components/list-batches-buttons/list-batches-button-sort.component.js new file mode 100644 index 00000000..5c032a0a --- /dev/null +++ b/src/client/components/list-batches-buttons/list-batches-button-sort.component.js @@ -0,0 +1,45 @@ +import React, { useState } from 'react'; +import './list-batches-button.style.css'; +import PropTypes from 'prop-types'; +import Button from '../button/button.component'; + +const BatchesMenu = ({ buttons, defaultSelection }) => { + const [selectedButtonId, setSelectedButtonId] = useState(defaultSelection.id); + return ( +
+ Sort by: + {buttons.map((button) => { + return ( + + ); + })} +
+ ); +}; + +BatchesMenu.defaultProps = { + defaultSelection: {}, + buttons: [], +}; + +BatchesMenu.propTypes = { + defaultSelection: PropTypes.oneOfType([PropTypes.object]), + buttons: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number, + label: PropTypes.string, + }), + ), +}; + +export default BatchesMenu; diff --git a/src/client/components/list-batches-buttons/list-batches-button-sort.stories.js b/src/client/components/list-batches-buttons/list-batches-button-sort.stories.js new file mode 100644 index 00000000..93866dbd --- /dev/null +++ b/src/client/components/list-batches-buttons/list-batches-button-sort.stories.js @@ -0,0 +1,20 @@ +import React from 'react'; +import BatchesMenu from './list-batches-button-sort.component'; +import { withKnobs, object } from '@storybook/addon-knobs'; + +export default { + title: 'Batches-Buttons', + component: BatchesMenu, + decorators: [withKnobs], +}; + +const label = 'value'; +const defaultValue = [ + { id: 1, label: 'Customer Name' }, + { id: 2, label: 'Seeding Date' }, +]; + +export const BatchesButtonsSort = () => { + const value = object(label, defaultValue); + return ; +}; diff --git a/src/client/components/list-batches-buttons/list-batches-button.style.css b/src/client/components/list-batches-buttons/list-batches-button.style.css new file mode 100644 index 00000000..0df6967a --- /dev/null +++ b/src/client/components/list-batches-buttons/list-batches-button.style.css @@ -0,0 +1,13 @@ +.batches-button-wrapper { + background: var(--light-grey); + color: var(--dark-blue); + display: flex; + flex-direction: row; + text-align: center; + justify-content: flex-start; + padding: 0.5em 0; + transition: none; + width: 100%; + outline: none; + position: relative; +} diff --git a/src/client/components/list-batches/list-batches.component.js b/src/client/components/list-batches/list-batches.component.js new file mode 100644 index 00000000..12d69aa5 --- /dev/null +++ b/src/client/components/list-batches/list-batches.component.js @@ -0,0 +1,32 @@ +import React from 'react'; +import './list-batches.style.css'; + +const headings = [ + 'BATCH#', + 'CROP NAME', + 'CUSTOMER', + 'STATUS', + 'CURRENT STAGE', + 'SEEDING POTS', + 'SEEDING DATE', +]; + +export default function ListBatches() { + const columns = headings.map((column) => { + return {column}; + }); + + const rows = headings.map((row) => { + return {row}; + }); + return ( + + + {columns} + + + {rows} + +
+ ); +} diff --git a/src/client/components/list-batches/list-batches.stories.js b/src/client/components/list-batches/list-batches.stories.js new file mode 100644 index 00000000..f9bd18b4 --- /dev/null +++ b/src/client/components/list-batches/list-batches.stories.js @@ -0,0 +1,6 @@ +import React from 'react'; +import ListBatches from './list-batches.component'; + +export default { title: 'ListBatches' }; + +export const ListBatchesTable = () => ; diff --git a/src/client/components/list-batches/list-batches.style.css b/src/client/components/list-batches/list-batches.style.css new file mode 100644 index 00000000..7ff25c8a --- /dev/null +++ b/src/client/components/list-batches/list-batches.style.css @@ -0,0 +1,11 @@ +table { + border-collapse: collapse; + width: 100%; + background-color: var(--white); + text-align: center; +} + +table, th, td { + border: 1px solid black; + height: 50px; +} diff --git a/src/client/containers/list-batches-page/list-batches-page.component.js b/src/client/containers/list-batches-page/list-batches-page.component.js new file mode 100644 index 00000000..0c850367 --- /dev/null +++ b/src/client/containers/list-batches-page/list-batches-page.component.js @@ -0,0 +1,66 @@ +import React, { useState, useEffect, useContext } from 'react'; +import UserRoleContext from '../../helpers/UserRoleContext'; +import { getTokenWithHeaders } from '../../firebase/getTokenWithHeaders'; + +import SidebarMenu from '../../components/side-navigation/sidebar.component'; +import Button from '../../components/button/button.component'; +import ShowButtons from '../../components/list-batches-buttons/list-batches-button-show.component'; +import SortButtons from '../../components/list-batches-buttons/list-batches-button-sort.component'; +import ListBatches from '../../components/list-batches/list-batches.component'; +import FormTitle from '../../components/form-title/form-title.component'; +import Footer from '../../components/footer/footer.component'; +import LoaderAnimation from '../../components/loader-animation/loader-animation.component'; +import './list-batches-page.style.css'; + +const ListBatchesPage = () => { + const { userRole, userName } = useContext(UserRoleContext); + + const [loading, setLoading] = useState(true); + const [ListBatchData, setListBatchData] = useState(null); + + const fetchData = async () => { + const headers = await getTokenWithHeaders(); + + const fetchBatchesData = async (endpoint, setBatchesData) => { + const batchesData = await fetch(endpoint, { + method: 'GET', + headers, + }).then((data) => data.json()); + setBatchesData(batchesData); + }; + + fetchBatchesData('/api/batches/all', setListBatchData); + }; + + useEffect(() => { + fetchData(); + }, []); + + useEffect(() => { + if (userRole && userName && ListBatchData) setLoading(false); + }, [userRole, userName, ListBatchData]); + + return loading ? ( + + ) : ( +
+
+ +
+
+ +
+ + +
+
+ + +
+
+
+
+ ); +}; + +export default ListBatchesPage; diff --git a/src/client/containers/list-batches-page/list-batches-page.style.css b/src/client/containers/list-batches-page/list-batches-page.style.css new file mode 100644 index 00000000..e504965c --- /dev/null +++ b/src/client/containers/list-batches-page/list-batches-page.style.css @@ -0,0 +1,23 @@ +.batch-list { + display: flex; + justify-content: flex-start; + min-height: 100vh; +} + +.batch-list .content { + display: flex; + flex-direction: column; + height: 100vh; + justify-content: flex-start; + margin-left: 130px; + width: 100%; +} + +main { + display: flex; + flex-direction: column; +} + +.buttons { + display: flex; +} From 460c7fb0cd425144e884a41a61e77b3572054624 Mon Sep 17 00:00:00 2001 From: MirSzabo Date: Thu, 23 Apr 2020 16:58:20 +0200 Subject: [PATCH 02/13] css updated --- .../list-batches-button.style.css | 1 + .../list-batches/list-batches.style.css | 8 +++++--- .../list-batches-page/list-batches-page.style.css | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/client/components/list-batches-buttons/list-batches-button.style.css b/src/client/components/list-batches-buttons/list-batches-button.style.css index 0df6967a..1f15c6c0 100644 --- a/src/client/components/list-batches-buttons/list-batches-button.style.css +++ b/src/client/components/list-batches-buttons/list-batches-button.style.css @@ -1,6 +1,7 @@ .batches-button-wrapper { background: var(--light-grey); color: var(--dark-blue); + box-sizing: border-box; display: flex; flex-direction: row; text-align: center; diff --git a/src/client/components/list-batches/list-batches.style.css b/src/client/components/list-batches/list-batches.style.css index 7ff25c8a..e7639796 100644 --- a/src/client/components/list-batches/list-batches.style.css +++ b/src/client/components/list-batches/list-batches.style.css @@ -1,11 +1,13 @@ table { border-collapse: collapse; + border-style: hidden; + border-radius: var(--border-radius-low); width: 100%; background-color: var(--white); text-align: center; } -table, th, td { - border: 1px solid black; +th, td { height: 50px; -} + border: 1px solid var(--grey); +} \ No newline at end of file diff --git a/src/client/containers/list-batches-page/list-batches-page.style.css b/src/client/containers/list-batches-page/list-batches-page.style.css index e504965c..8cb99b49 100644 --- a/src/client/containers/list-batches-page/list-batches-page.style.css +++ b/src/client/containers/list-batches-page/list-batches-page.style.css @@ -13,6 +13,16 @@ width: 100%; } +.batch-list header { + padding: 1em 1em 0; +} + +.batch-list header h1 { + font-size: 1.3em; + margin: 1em 0 0; + padding: 0 1em; +} + main { display: flex; flex-direction: column; @@ -20,4 +30,9 @@ main { .buttons { display: flex; + flex-direction: row; + margin: 1em 0 0; + padding: 1em 1em 0; } + + From 456258659ca5d5abeb5377beab83a5a291c3bf88 Mon Sep 17 00:00:00 2001 From: MirSzabo Date: Thu, 23 Apr 2020 16:59:51 +0200 Subject: [PATCH 03/13] fetch function added --- .../list-batches/list-batches.component.js | 11 ++++-- .../list-batches-page.component.js | 37 ++++++++++++++----- 2 files changed, 36 insertions(+), 12 deletions(-) diff --git a/src/client/components/list-batches/list-batches.component.js b/src/client/components/list-batches/list-batches.component.js index 12d69aa5..0f27be81 100644 --- a/src/client/components/list-batches/list-batches.component.js +++ b/src/client/components/list-batches/list-batches.component.js @@ -1,5 +1,6 @@ import React from 'react'; import './list-batches.style.css'; +import PropTypes from 'prop-types'; const headings = [ 'BATCH#', @@ -11,12 +12,12 @@ const headings = [ 'SEEDING DATE', ]; -export default function ListBatches() { +export default function ListBatches({ batchData }) { const columns = headings.map((column) => { return {column}; }); - const rows = headings.map((row) => { + const rows = batchData.map((row) => { return {row}; }); return ( @@ -25,8 +26,12 @@ export default function ListBatches() { {columns} - {rows} + {rows.id} ); } + +ListBatches.propTypes = { + batchData: PropTypes.oneOfType([PropTypes.array]).isRequired, +}; diff --git a/src/client/containers/list-batches-page/list-batches-page.component.js b/src/client/containers/list-batches-page/list-batches-page.component.js index 0c850367..f5e31457 100644 --- a/src/client/containers/list-batches-page/list-batches-page.component.js +++ b/src/client/containers/list-batches-page/list-batches-page.component.js @@ -1,20 +1,24 @@ import React, { useState, useEffect, useContext } from 'react'; import UserRoleContext from '../../helpers/UserRoleContext'; import { getTokenWithHeaders } from '../../firebase/getTokenWithHeaders'; +import { useHistory } from 'react-router-dom'; +import Firebase from '../../firebase/index'; import SidebarMenu from '../../components/side-navigation/sidebar.component'; +import Logout from '../../components/logout/logout.component'; import Button from '../../components/button/button.component'; import ShowButtons from '../../components/list-batches-buttons/list-batches-button-show.component'; import SortButtons from '../../components/list-batches-buttons/list-batches-button-sort.component'; import ListBatches from '../../components/list-batches/list-batches.component'; -import FormTitle from '../../components/form-title/form-title.component'; import Footer from '../../components/footer/footer.component'; import LoaderAnimation from '../../components/loader-animation/loader-animation.component'; import './list-batches-page.style.css'; -const ListBatchesPage = () => { +export default function ListBatchesPage() { + const history = useHistory(); const { userRole, userName } = useContext(UserRoleContext); + const [logoutModal, setLogoutModal] = useState(false); const [loading, setLoading] = useState(true); const [ListBatchData, setListBatchData] = useState(null); @@ -29,7 +33,7 @@ const ListBatchesPage = () => { setBatchesData(batchesData); }; - fetchBatchesData('/api/batches/all', setListBatchData); + fetchBatchesData('/api/batches?detailed=true', setListBatchData); }; useEffect(() => { @@ -45,22 +49,37 @@ const ListBatchesPage = () => { ) : (
- + history.push('/dashboard')} + showBatchDetails={() => history.push('/batch-details')} + showAddBatch={() => history.push('/add-batch')} + logout={() => setLogoutModal(true)} + /> + setLogoutModal(false)} + logoutFunc={() => Firebase.signOut()} + />
- +
+

BATCH LIST

+
- +
); -}; - -export default ListBatchesPage; +} From 49d18f3f7a9a02a88a3cebe4dd5cbad44640ef51 Mon Sep 17 00:00:00 2001 From: MirSzabo Date: Thu, 23 Apr 2020 22:04:13 +0200 Subject: [PATCH 04/13] changed to fit new endpoint --- .../list-batches-button-sort.component.js | 1 + .../list-batches/list-batches.component.js | 38 +++++++++++++------ .../list-batches/list-batches.style.css | 7 ++-- .../list-batches-page.component.js | 20 +++++----- .../list-batches-page.style.css | 4 +- 5 files changed, 41 insertions(+), 29 deletions(-) diff --git a/src/client/components/list-batches-buttons/list-batches-button-sort.component.js b/src/client/components/list-batches-buttons/list-batches-button-sort.component.js index 5c032a0a..b8cbb755 100644 --- a/src/client/components/list-batches-buttons/list-batches-button-sort.component.js +++ b/src/client/components/list-batches-buttons/list-batches-button-sort.component.js @@ -5,6 +5,7 @@ import Button from '../button/button.component'; const BatchesMenu = ({ buttons, defaultSelection }) => { const [selectedButtonId, setSelectedButtonId] = useState(defaultSelection.id); + return (
Sort by: diff --git a/src/client/components/list-batches/list-batches.component.js b/src/client/components/list-batches/list-batches.component.js index 0f27be81..fbff5fdd 100644 --- a/src/client/components/list-batches/list-batches.component.js +++ b/src/client/components/list-batches/list-batches.component.js @@ -16,19 +16,33 @@ export default function ListBatches({ batchData }) { const columns = headings.map((column) => { return {column}; }); - - const rows = batchData.map((row) => { - return {row}; - }); return ( - - - {columns} - - - {rows.id} - -
+ <> + + + {columns} + + + {batchData.length > 0 ? ( + batchData.map((data) => ( + + + + + + + + + + )) + ) : ( + + + + )} + +
Batch #{data.id}{data.name}{data.customer_name}{data.status}{data.current_stage.stage}{data.number_of_seeded_pots}{data.seeding_date.slice(0, 10)}
No data available
+ ); } diff --git a/src/client/components/list-batches/list-batches.style.css b/src/client/components/list-batches/list-batches.style.css index e7639796..50751013 100644 --- a/src/client/components/list-batches/list-batches.style.css +++ b/src/client/components/list-batches/list-batches.style.css @@ -2,12 +2,13 @@ table { border-collapse: collapse; border-style: hidden; border-radius: var(--border-radius-low); - width: 100%; + width: 80%; background-color: var(--white); text-align: center; } -th, td { +th, +td { height: 50px; border: 1px solid var(--grey); -} \ No newline at end of file +} diff --git a/src/client/containers/list-batches-page/list-batches-page.component.js b/src/client/containers/list-batches-page/list-batches-page.component.js index f5e31457..bad05cf7 100644 --- a/src/client/containers/list-batches-page/list-batches-page.component.js +++ b/src/client/containers/list-batches-page/list-batches-page.component.js @@ -25,15 +25,11 @@ export default function ListBatchesPage() { const fetchData = async () => { const headers = await getTokenWithHeaders(); - const fetchBatchesData = async (endpoint, setBatchesData) => { - const batchesData = await fetch(endpoint, { - method: 'GET', - headers, - }).then((data) => data.json()); - setBatchesData(batchesData); - }; - - fetchBatchesData('/api/batches?detailed=true', setListBatchData); + const batchesData = await fetch('/api/batches?detailed=true', { + method: 'GET', + headers, + }).then((data) => data.json()); + setListBatchData(batchesData); }; useEffect(() => { @@ -70,13 +66,15 @@ export default function ListBatchesPage() {

BATCH LIST

-
+
- +
+ +
diff --git a/src/client/containers/list-batches-page/list-batches-page.style.css b/src/client/containers/list-batches-page/list-batches-page.style.css index 8cb99b49..1fc15328 100644 --- a/src/client/containers/list-batches-page/list-batches-page.style.css +++ b/src/client/containers/list-batches-page/list-batches-page.style.css @@ -28,11 +28,9 @@ main { flex-direction: column; } -.buttons { +.filter-buttons { display: flex; flex-direction: row; margin: 1em 0 0; padding: 1em 1em 0; } - - From 5df390e0583d4a100307fa4ad84d238aa1e646fd Mon Sep 17 00:00:00 2001 From: MirSzabo Date: Fri, 24 Apr 2020 10:20:05 +0200 Subject: [PATCH 05/13] table and buttons formating --- .../list-batches-button-show.component.js | 1 - .../list-batches-button-sort.component.js | 1 - .../components/list-batches/batch-data.json | 43 +++++++++++++++++++ .../list-batches/list-batches.component.js | 25 +++++++---- .../list-batches/list-batches.stories.js | 3 +- .../list-batches-page.component.js | 38 ++++++++++++---- .../list-batches-page.style.css | 29 +++++++++++-- 7 files changed, 117 insertions(+), 23 deletions(-) create mode 100644 src/client/components/list-batches/batch-data.json diff --git a/src/client/components/list-batches-buttons/list-batches-button-show.component.js b/src/client/components/list-batches-buttons/list-batches-button-show.component.js index 4580a632..6f1b8445 100644 --- a/src/client/components/list-batches-buttons/list-batches-button-show.component.js +++ b/src/client/components/list-batches-buttons/list-batches-button-show.component.js @@ -7,7 +7,6 @@ const BatchesMenu = ({ buttons, defaultSelection }) => { const [selectedButtonId, setSelectedButtonId] = useState(defaultSelection.id); return (
- Show: {buttons.map((button) => { return (