Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactoring POE page #830

Merged
merged 1 commit into from
Jun 23, 2021
+165 −143
Merged

Refactoring POE page #830

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -241,6 +241,7 @@ const App = props => {
roles={[ROLE.ADMIN, ROLE.LKOUTMGR, ROLE.LKOUTVWR]}
>
<POE path="/"></POE>
{NF404Default}
</RoleAuthenticator>
<RoleAuthenticator
path="vetting"
158 changes: 17 additions & 141 deletions src/components/kanban/Kanban.js
View file
Original file line number Diff line number Diff line change
@@ -2,113 +2,40 @@
//
// Please see license.txt for details.

import React, { useState } from "react";
import React, {useEffect, useState} from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import CountdownBadge from "../../components/countdownBadge/CountdownBadge";
import { CardDeck, Col } from "react-bootstrap";
import { addMinutes, asArray, hasData, randomIntOfLength } from "../../utils/utils";
import Xl8 from "../../components/xl8/Xl8";
import { asArray, hasData } from "../../utils/utils";

import "./Kanban.css";
import { poe } from "../../services/serviceWrapper";
import SidenavContainer from "../sidenavContainer/SidenavContainer";
import FilterForm from "../filterForm2/FilterForm";
import LabelledInput from "../labelledInput/LabelledInput";
import Main from "../../components/main/Main";
import Title from "../title/Title";
import Loading from "../../components/loading/Loading";
import {LK} from "../../utils/constants";
import ToolTipWrapper from "../tooltipWrapper/TooltipWrapper";

const Kanban = props => {
let startDate = new Date();
let endDate = new Date();
endDate.setDate(endDate.getDate() + 4);
startDate.setHours(startDate.getHours() - 6);
const [poeTiles, setPoeTiles] = useState([]);
const [showDateTimePicker, setShowDateTimePicker] = useState(false);
const [filterFormKey, setFilterFormKey] = useState(0);
const [showPending, setShowPending] = useState(true);
const cb = () => {};
const [showPending, setIsPending] = useState(false);

const toggleDateTimePicker = () => {
setShowDateTimePicker(value => !value);
setFilterFormKey(filterFormKey + 1);
};

const initialParamState = {
etaStart: startDate,
etaEnd: addMinutes(endDate, 1)
};

const getInitialState = () => {
setShowDateTimePicker(false);
setShowPending(true);
setFilterFormKey(filterFormKey + 1);
return initialParamState;
};

const setDataWrapper = tileRes => {
setShowPending(true);
useEffect( () =>{
const tiles = [];
const lanes = {};

asArray(tileRes).map(tile => {
tiles.push(createPOETile(tile)); //creates tile, adds to tile array
});
//THEN fetch and create all lanes, feeding tiles to each lane to calc if they belong base on poeStatus
poe.get.getAllLanes().then(laneRes => {
asArray(laneRes).map(lane => {
lanes[lane.ord] = createPOELane(lane, tiles); //creates lane, adds to lane object
if(hasData(props.tiles)){
asArray(props.tiles).map(tile =>{
tiles.push(createPOETile(tile)); //creates tile, adds to tile array
});
//After lanes AND tiles have both been created , set the constants
setColumns(lanes);
setPoeTiles(tiles);
setShowPending(false);
});
};

const parameterAdapter = fields => {
let paramObject = {};
const fieldscopy = Object.assign([], fields);
delete fieldscopy["showDateTimePicker"];

if (!showDateTimePicker) {
//passed range values insted of date
const startRange = fields["startHourRange"] || 6; // default to -6 hours
const endRange = fields["endHourRange"] || 96;
let etaEnd = new Date();
let etaStart = new Date();

etaEnd.setHours(etaEnd.getHours() + +endRange);
etaStart.setHours(etaStart.getHours() - +startRange);

paramObject["etaStart"] = etaStart;
paramObject["etaEnd"] = addMinutes(etaEnd, 1);

delete fieldscopy["startHourRange"];
delete fieldscopy["endHourRange"];
}

const fieldNames = Object.keys(fieldscopy);
fieldNames.forEach(name => {
if (name === "etaStart") {
const date = new Date(fields[name]);
paramObject[name] = date.toISOString();
}

if (name === "etaEnd") {
const date = addMinutes(new Date(fields[name]), 1);
paramObject[name] = date.toISOString();
}

if (hasData(fields[name])) {
paramObject[name] = fields[name];
}
});

return "?requestDto=" + encodeURIComponent(JSON.stringify(paramObject));
};
if(hasData(props.lanes)){
asArray(props.lanes).map(lane =>{
lanes[lane.ord] = createPOELane(lane, tiles); //creates lane, associates tile, adds to lane object
});
}
setColumns(lanes);
setPoeTiles(tiles);
setIsPending(false);
},[])

const convertTileToData = (tile, status) => {
const req = {
@@ -218,57 +145,7 @@ const Kanban = props => {

return (
<>
<SidenavContainer>
<Col className="notopmargin">
<FilterForm
service={poe.get.getAllTiles}
callback={setDataWrapper}
paramCallback={parameterAdapter}
key={filterFormKey}
getInitialState={getInitialState}
>
<LabelledInput
labelText={<Xl8 xid="poe0005">Hour Range (Start)</Xl8>}
inputtype="select"
name="startHourRange"
inputval="6"
inputStyle="form-select"
datafield="startHourRange"
options={[
{ value: "0", label: "0 hour" },
{ value: "6", label: "-6 hours" },
{ value: "12", label: "-12 hours" },
{ value: "24", label: "-24 hours" },
{ value: "48", label: "-48 hours" },
{ value: "96", label: "-96 hours" }
]}
callback={cb}
alt="Hour range (Start)"
/>
<LabelledInput
labelText={<Xl8 xid="poe0006">Hour Range (End)</Xl8>}
inputtype="select"
name="endHourRange"
inputval="96"
inputStyle="form-select"
datafield="endHourRange"
options={[
{ value: "0", label: "0 hour" },
{ value: "6", label: "+6 hours" },
{ value: "12", label: "+12 hours" },
{ value: "24", label: "+24 hours" },
{ value: "48", label: "+48 hours" },
{ value: "96", label: "+96 hours" }
]}
callback={cb}
alt="Hour range (End)"
/>
</FilterForm>
</Col>
</SidenavContainer>
<Main>
<Title title={<Xl8 xid="poe0007">Port Of Entry Lookout</Xl8>} uri={props.uri} />
{showPending && <Loading></Loading>}
{(props.isLoading || showPending) && <Loading></Loading>}
<CardDeck className="poe-page-deck">
<DragDropContext onDragEnd={result => onDragEnd(result, columns, setColumns)}>
{Object.entries(columns).map(([columnId, column], index) => {
@@ -327,7 +204,6 @@ const Kanban = props => {
})}
</DragDropContext>
</CardDeck>
</Main>
</>
);
};
149 changes: 147 additions & 2 deletions src/pages/poe/POE.js
View file
Original file line number Diff line number Diff line change
@@ -2,14 +2,159 @@
//
// Please see license.txt for details.

import React from "react";
import React, {useState} from "react";
import Kanban from "../../components/kanban/Kanban";
import Title from "../../components/title/Title";
import Main from "../../components/main/Main";
import Xl8 from "../../components/xl8/Xl8";
import {Col} from "react-bootstrap";
import FilterForm from "../../components/filterForm2/FilterForm";
import {poe} from "../../services/serviceWrapper";
import LabelledInput from "../../components/labelledInput/LabelledInput";
import SidenavContainer from "../../components/sidenavContainer/SidenavContainer";
import {addMinutes, asArray, hasData} from "../../utils/utils";

const POE = props => {
return <Kanban />;
let startDate = new Date();
let endDate = new Date();
endDate.setDate(endDate.getDate() + 4);
startDate.setHours(startDate.getHours() - 6);
const [poeTiles, setPoeTiles] = useState([]);
const [poeLanes, setPoeLanes] = useState([]);
const [showDateTimePicker, setShowDateTimePicker] = useState(false);
const [filterFormKey, setFilterFormKey] = useState(0);
const [poeKey, setPoeKey] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const cb = () => {};

const initialParamState = {
etaStart: startDate,
etaEnd: addMinutes(endDate, 1)
};

const getInitialState = () => {
setShowDateTimePicker(false);
setIsLoading(true);
setFilterFormKey(filterFormKey + 1);
return initialParamState;
};

const parameterAdapter = fields => {
let paramObject = {};
const fieldscopy = Object.assign([], fields);
delete fieldscopy["showDateTimePicker"];

if (!showDateTimePicker) {
//passed range values insted of date
const startRange = fields["startHourRange"] || 6; // default to -6 hours
const endRange = fields["endHourRange"] || 96;
let etaEnd = new Date();
let etaStart = new Date();

etaEnd.setHours(etaEnd.getHours() + +endRange);
etaStart.setHours(etaStart.getHours() - +startRange);

paramObject["etaStart"] = etaStart;
paramObject["etaEnd"] = addMinutes(etaEnd, 1);

delete fieldscopy["startHourRange"];
delete fieldscopy["endHourRange"];
}

const fieldNames = Object.keys(fieldscopy);
fieldNames.forEach(name => {
if (name === "etaStart") {
const date = new Date(fields[name]);
paramObject[name] = date.toISOString();
}

if (name === "etaEnd") {
const date = addMinutes(new Date(fields[name]), 1);
paramObject[name] = date.toISOString();
}

if (hasData(fields[name])) {
paramObject[name] = fields[name];
}
});

return "?requestDto=" + encodeURIComponent(JSON.stringify(paramObject));
};

const setDataWrapper = tileRes => {
setIsLoading(true);

poe.get.getAllLanes().then(laneRes => {
setPoeLanes(laneRes);
setPoeTiles(tileRes);
setIsLoading(false);
setPoeKey(poeKey+1);
});
};


return (
<>
<SidenavContainer>
<Col className="notopmargin">
<FilterForm
service={poe.get.getAllTiles}
callback={setDataWrapper}
paramCallback={parameterAdapter}
key={filterFormKey}
getInitialState={getInitialState}
>
<LabelledInput
labelText={<Xl8 xid="poe0005">Hour Range (Start)</Xl8>}
inputtype="select"
name="startHourRange"
inputval="6"
inputStyle="form-select"
datafield="startHourRange"
options={[
{ value: "0", label: "0 hour" },
{ value: "6", label: "-6 hours" },
{ value: "12", label: "-12 hours" },
{ value: "24", label: "-24 hours" },
{ value: "48", label: "-48 hours" },
{ value: "96", label: "-96 hours" }
]}
callback={cb}
alt="Hour range (Start)"
/>
<LabelledInput
labelText={<Xl8 xid="poe0006">Hour Range (End)</Xl8>}
inputtype="select"
name="endHourRange"
inputval="96"
inputStyle="form-select"
datafield="endHourRange"
options={[
{ value: "0", label: "0 hour" },
{ value: "6", label: "+6 hours" },
{ value: "12", label: "+12 hours" },
{ value: "24", label: "+24 hours" },
{ value: "48", label: "+48 hours" },
{ value: "96", label: "+96 hours" }
]}
callback={cb}
alt="Hour range (End)"
/>
</FilterForm>
</Col>
</SidenavContainer>
<Main>
<Title title={<Xl8 xid="poe0007">Port Of Entry Lookout</Xl8>} uri={props.uri} />
<Kanban
lanes={poeLanes}
tiles={poeTiles}
key={poeKey}
isLoading={isLoading}
>
</Kanban>
</Main>
</>
)
};

export default POE;