Batch queue window

src/client/components/batch-queue-alert-window/batch-queue-alert-window.component.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import Popup from 'reactjs-popup';
+import './batch-queue-alert-window.style.css';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+
+export default function BatchQueueAlertWindow({
+  openState,
+  closeAction,
+  batchItem,
+}) {
+  const popupView = () => (
+    <PopupModal title="BATCH QUEUED" closeAction={closeAction}>
+      <AlertContent batchItem={batchItem}>
+        <AlertActions closeAction={closeAction} />
+      </AlertContent>
+    </PopupModal>
+  );
+
+  return (
+    <Popup
+      open={openState}
+      modal
+      overlayStyle={{ background: 'rgba(255,255,255,0.7' }}
+      contentStyle={{ background: 'none', border: 'none', width: 'auto' }}
+    >
+      {popupView}
+    </Popup>
+  );
+}
+
+const PopupModal = ({ closeAction, children, title }) => {
+  return (
+    <div className="modal">
+      <button type="submit" className="close" onClick={closeAction}>
+        &times;
+      </button>
+      <div className="header">{title}</div>
+      {children}
+    </div>
+  );
+};
+
+const AlertContent = ({ batchItem, children }) => {
+  return (
+    <>
+      <div className="content">
+        <p>Batch #{batchItem.id} starts on</p>
+        <p>{moment(batchItem.seeding_date).format('DD MMMM YYYY')}</p>
+      </div>
+      {children}
+    </>
+  );
+};
+
+const AlertActions = ({ closeAction }) => (
+  <div className="actions">
+    <button type="submit" className="okay" onClick={closeAction}>
+      OK
+    </button>
+  </div>
+);
+
+BatchQueueAlertWindow.propTypes = {
+  openState: PropTypes.bool.isRequired,
+  closeAction: PropTypes.func.isRequired,
+  batchItem: PropTypes.oneOfType([PropTypes.object]).isRequired,
+};
+AlertActions.propTypes = {
+  closeAction: PropTypes.func.isRequired,
+};
+AlertContent.propTypes = {
+  batchItem: PropTypes.oneOfType([PropTypes.object]).isRequired,
+  children: PropTypes.oneOfType([PropTypes.object]).isRequired,
+};
+PopupModal.propTypes = {
+  closeAction: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([PropTypes.object]).isRequired,
+  title: PropTypes.string.isRequired,
+};

src/client/components/batch-queue-alert-window/batch-queue-alert-window.stories.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import BatchQueueAlertWindow from './batch-queue-alert-window.component';
+import { action } from '@storybook/addon-actions';
+import { withKnobs } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Batch Queue Alert Window',
+  component: BatchQueueAlertWindow,
+  decorators: [withKnobs],
+};
+
+export const BatchQueueAlertWindowStory = () => {
+  const batchItem = {
+    id: 1,
+    name: 'Lettuce ',
+    plant_variety: 'Asteraceae',
+    customer_name: 'Italian cucine',
+    number_of_seeded_pots: 50,
+    seeding_date: '2020-04-19T22:00:00.000Z',
+    current_stage: {
+      stage: 'propagation',
+      day: 4,
+    },
+    status: 'active',
+  };
+
+  const closeAction = action('close popup');
+
+  return (
+    <BatchQueueAlertWindow
+      batchItem={batchItem}
+      openState={true}
+      closeAction={closeAction}
+    />
+  );
+};

src/client/components/batch-queue-alert-window/batch-queue-alert-window.style.css

@@ -0,0 +1,67 @@
+.modal {
+  background-color: var(--light-grey);
+  border-radius: var(--border-radius-low);
+  box-shadow: var(--embossed-shadow-high);
+  font-size: 1.5em;
+  padding: 1em 0;
+  height: 15em !important;
+  width: 18em !important;
+}
+
+/*styling modal header*/
+.modal > .header {
+  font-size: 1.2em;
+  margin: 1em 0 0.5em 0;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  width: 100%;
+}
+.modal > .content {
+  width: 100%;
+  padding: 1.2em 0;
+  text-align: center;
+  margin-bottom: 2.5rem;
+}
+.modal > .content > p {
+  margin-bottom: 1rem;
+}
+.modal > .actions {
+  width: 100%;
+  padding: 10px 5px;
+  margin: auto;
+  text-align: center;
+}
+
+/*close button on top right corner of pop up window styling*/
+.modal > .close {
+  border: none;
+  background: transparent;
+  color: var(--dark-grey);
+  cursor: pointer;
+  display: block;
+  font-size: 1.8em;
+  line-height: 1em;
+  position: absolute;
+  right: 0.4em;
+  top: 0.3em;
+}
+
+/* Confoirm Logout button on pop up window styling */
+.okay {
+  background: var(--interaction-color);
+  border: var(--border-inputs);
+  border-radius: var(--border-radius-high);
+  box-shadow: var(--embossed-shadow-medium);
+  color: var(--white);
+  font-size: 1.7em;
+  line-height: 1.2em;
+  outline: none;
+  padding: 0.3em 3em;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.sb-show-main .popup-content {
+  position: absolute !important;
+}

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 <BatchesMenu buttons={value} defaultSelection={{ id: 2 }} />;
+};

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 <BatchesMenu buttons={value} defaultSelection={{ id: 2 }} />;
+};

src/client/components/list-batches-buttons/list-batches-button.style.css

@@ -0,0 +1,14 @@
+.batches-button-wrapper {
+  background: var(--light-grey);
+  color: var(--dark-blue);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  justify-content: flex-start;
+  padding: 0.5em 0;
+  transition: none;
+  width: 100%;
+  outline: none;
+  position: relative;
+}

src/client/components/list-batches/batch-data.json

@@ -0,0 +1,43 @@
+{
+  "batchesData": [
+    {
+      "id": 1,
+      "name": "Lettuce ",
+      "plant_variety": "Asteraceae",
+      "customer_name": "Italian cucine",
+      "number_of_seeded_pots": 50,
+      "seeding_date": "2020-04-19T22:00:00.000Z",
+      "current_stage": {
+        "stage": "propagation",
+        "day": 4
+      },
+      "status": "active"
+    },
+    {
+      "id": 2,
+      "name": "Shiso ",
+      "plant_variety": "Lamiaceae",
+      "customer_name": "Mexican tacos",
+      "number_of_seeded_pots": 50,
+      "seeding_date": "2020-04-30T22:00:00.000Z",
+      "current_stage": {
+        "stage": "queued",
+        "day": null
+      },
+      "status": "queued"
+    },
+    {
+      "id": 3,
+      "name": "Lettuce ",
+      "plant_variety": "Asteraceae",
+      "customer_name": "Turkish Kebab",
+      "number_of_seeded_pots": 50,
+      "seeding_date": "2020-05-31T22:00:00.000Z",
+      "current_stage": {
+        "stage": "queued",
+        "day": null
+      },
+      "status": "queued"
+    }
+  ]
+}