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.

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

Cm/remove remove location button #308

Merged
merged 5 commits into from
Apr 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions assets/css/dashboard/configure-screens-workflow-page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@
td,
th {
padding: 10px 24px;
color: $text-primary;
background-color: transparent;
}

.screen-id {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ interface BottomActionBarProps {
onBack?: () => void;
onForward?: () => void;
onCancel?: () => void;
forwardButtonDisabled?: boolean;
}

const BottomActionBar: ComponentType<BottomActionBarProps> = ({
Expand All @@ -19,7 +18,6 @@ const BottomActionBar: ComponentType<BottomActionBarProps> = ({
onBack,
onForward,
onCancel,
forwardButtonDisabled,
}: BottomActionBarProps) => {
return (
<Navbar variant="dark" data-bs-theme="dark">
Expand All @@ -36,11 +34,7 @@ const BottomActionBar: ComponentType<BottomActionBarProps> = ({
</Button>
)}
{forwardButtonLabel && (
<Button
onClick={onForward}
disabled={forwardButtonDisabled}
className="forward"
>
<Button onClick={onForward} className="forward">
{forwardButtonLabel}
<ArrowRight className="bottom-action-bar-container__icon" />
</Button>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable react/no-unescaped-entities */
import React, {
ComponentType,
ForwardedRef,
Expand Down Expand Up @@ -59,7 +58,6 @@ interface ConfigureScreensWorkflowPageProps {
setPlacesAndScreensToUpdate: React.Dispatch<
React.SetStateAction<PlaceIdsAndNewScreens>
>;
handleRemoveLocation: (place: Place) => void;
setConfigVersion: React.Dispatch<React.SetStateAction<string>>;
isEditing: boolean;
}
Expand All @@ -69,7 +67,6 @@ const ConfigureScreensWorkflowPage: ComponentType<
> = ({
selectedPlaces,
setPlacesAndScreensToUpdate,
handleRemoveLocation,
setConfigVersion,
isEditing,
}: ConfigureScreensWorkflowPageProps) => {
Expand Down Expand Up @@ -116,31 +113,19 @@ const ConfigureScreensWorkflowPage: ComponentType<
});
};

let layout;
if (selectedPlaces.length) {
layout = selectedPlaces.map((place) => {
return (
<ConfigurePlaceCard
key={place.id}
place={place}
existingScreens={existingScreens[place.id]}
setPlacesAndScreensToUpdate={setPlacesAndScreensToUpdate}
handleRemoveLocation={() => handleRemoveLocation(place)}
/>
);
});
} else {
layout = (
<div>
All locations have been removed. Select "Back" to select new locations.
</div>
);
}

return (
<Container className="workflow-container">
<div className="h3 text-white mb-5">{getTitle()}</div>
{layout}
{selectedPlaces.map((place) => {
return (
<ConfigurePlaceCard
key={place.id}
place={place}
existingScreens={existingScreens[place.id]}
setPlacesAndScreensToUpdate={setPlacesAndScreensToUpdate}
/>
);
})}
</Container>
);
};
Expand All @@ -151,14 +136,12 @@ interface ConfigurePlaceCardProps {
setPlacesAndScreensToUpdate: React.Dispatch<
React.SetStateAction<PlaceIdsAndNewScreens>
>;
handleRemoveLocation: () => void;
}

const ConfigurePlaceCard: ComponentType<ConfigurePlaceCardProps> = ({
place,
existingScreens,
setPlacesAndScreensToUpdate,
handleRemoveLocation,
}: ConfigurePlaceCardProps) => {
const [existingPendingScreens, setExistingPendingScreens] = useState<{
[screen_id: string]: ScreenConfiguration;
Expand Down Expand Up @@ -325,14 +308,6 @@ const ConfigurePlaceCard: ComponentType<ConfigurePlaceCardProps> = ({
<Row className="header">
<Col className="h5 my-auto header-name">{place.name.toUpperCase()}</Col>
<Col className="body--medium my-auto">Station ID: {place.id}</Col>
<Col className="d-flex">
<Button
className="remove-location-button"
onClick={handleRemoveLocation}
>
Remove Location
</Button>
</Col>
</Row>
{hasRows && (
<Row className="screens-table-container">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import ConfigureScreensWorkflowPage, {
import BottomActionBar from "../../BottomActionBar";
import { useLocation, useNavigate } from "react-router-dom";
import StationSelectPage from "./StationSelectPage";
import { Place } from "../../../../../models/place";
import { Alert, Button, Modal } from "react-bootstrap";
import { ExclamationCircleFill } from "react-bootstrap-icons";
import {
Expand Down Expand Up @@ -63,24 +62,6 @@ const GlEinkWorkflow: ComponentType = () => {
}
}, [location]);

const handleRemoveLocation = (place: Place) => {
const newSelectedPlaces = new Set(selectedPlaces);
newSelectedPlaces.delete(place.id);
delete newScreenValidationErrors[place.id];
delete pendingScreenValidationErrors[place.id];
dispatch({
type: "SET_VALIDATION_ERRORS",
newScreenValidationErrors,
pendingScreenValidationErrors,
});
setSelectedPlaces(newSelectedPlaces);
setPlacesAndScreensToUpdate((placesAndScreens) => {
const { [place.id]: _discarded, ...newPlacesAndScreens } =
placesAndScreens;
return newPlacesAndScreens;
});
};

const generateErrorMessage = (errorSet: Set<string>) => {
if (errorSet.size === 0) {
return "";
Expand Down Expand Up @@ -213,7 +194,6 @@ const GlEinkWorkflow: ComponentType = () => {
let onForward;
let onCancel;
let layout;
const forwardButtonDisabled = selectedPlaces.size === 0;
switch (configStep) {
case 0:
cancelButtonLabel = "Cancel";
Expand Down Expand Up @@ -314,7 +294,6 @@ const GlEinkWorkflow: ComponentType = () => {
selectedPlaces.has(place.id),
)}
setPlacesAndScreensToUpdate={setPlacesAndScreensToUpdate}
handleRemoveLocation={handleRemoveLocation}
setConfigVersion={setConfigVersion}
isEditing={isEditing}
/>
Expand Down Expand Up @@ -350,7 +329,6 @@ const GlEinkWorkflow: ComponentType = () => {
onCancel={onCancel}
onBack={onBack}
onForward={onForward}
forwardButtonDisabled={forwardButtonDisabled}
/>
</div>
</>
Expand Down
Loading