readonly select stations and zones

mbta · Jan 24, 2025 · 46441fa · 46441fa
1 parent 0854af6
commit 46441fa
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 13 deletions.
diff --git a/assets/css/dashboard/new-pa-message/select-zones-page.scss b/assets/css/dashboard/new-pa-message/select-zones-page.scss
@@ -127,6 +127,12 @@
           .btn {
             padding: 6px 12px;
             height: fit-content;
+
+            &:disabled:not(.button-active) {
+              background-color: inherit;
+              border-color: inherit;
+              color: $text-secondary;
+            }
           }
         }
       }
@@ -222,6 +228,12 @@
           .btn {
             padding: 6px 12px;
             height: fit-content;
+
+            &:disabled:not(.button-active) {
+              background-color: inherit;
+              border-color: inherit;
+              color: $text-secondary;
+            }
           }
         }
       }

diff --git a/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/PlaceZonesRow.tsx b/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/PlaceZonesRow.tsx
@@ -17,6 +17,7 @@ interface PlaceZonesRow {
   rightZones: Screen[];
   route: string;
   branches?: string[];
+  disabled?: boolean;
 }
 
 const PlaceZonesRow = ({
@@ -29,6 +30,7 @@ const PlaceZonesRow = ({
   rightZones,
   route,
   branches = [],
+  disabled = false,
 }: PlaceZonesRow) => {
   if (allSignsForRouteAtPlace.length === 0) return null;
 
@@ -76,6 +78,7 @@ const PlaceZonesRow = ({
               );
             }
           }}
+          disabled={disabled}
         >
           All
         </Button>
@@ -86,13 +89,15 @@ const PlaceZonesRow = ({
           onSignButtonClick={onSignButtonClick}
           leftIcon={<ArrowLeftShort />}
           allSelectedSigns={allSelectedSigns}
+          disabled={disabled}
         />
       </td>
       <td className="cell middle-cell">
         <SignButtonGroup
           signs={middleZones}
           onSignButtonClick={onSignButtonClick}
           allSelectedSigns={allSelectedSigns}
+          disabled={disabled}
         />
       </td>
       <td className="cell right-cell">
@@ -101,6 +106,7 @@ const PlaceZonesRow = ({
           onSignButtonClick={onSignButtonClick}
           rightIcon={<ArrowRightShort />}
           allSelectedSigns={allSelectedSigns}
+          disabled={disabled}
         />
       </td>
     </tr>

diff --git a/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/RouteColumn.tsx b/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/RouteColumn.tsx
@@ -12,6 +12,7 @@ const RouteColumn = ({
   value,
   onChange,
   reverse = false,
+  disabled = false,
 }: {
   label: string;
   routeIds: string[];
@@ -20,6 +21,7 @@ const RouteColumn = ({
   value: string[];
   onChange: (signIds: string[]) => void;
   reverse?: boolean;
+  disabled?: boolean;
 }) => {
   const signsIdsAtRoutes = places.flatMap((place) =>
     place.screens
@@ -46,6 +48,7 @@ const RouteColumn = ({
             }
           }}
           checked={signsIdsAtRoutes.every((signId) => value.includes(signId))}
+          disabled={disabled}
         />
       </div>
       <div className="col-content">
@@ -74,6 +77,7 @@ const RouteColumn = ({
                 checked={value.some((signId) =>
                   signIdsAtPlace.includes(signId),
                 )}
+                disabled={disabled}
               />
             </div>
           );

diff --git a/...s/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectStationsAndZones.tsx b/...s/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectStationsAndZones.tsx
@@ -13,6 +13,7 @@ interface Props {
   page: Page;
   busRoutes: string[];
   onError: (message: string | null) => void;
+  isReadOnly?: boolean;
 }
 
 const SelectStationsAndZones = ({
@@ -23,6 +24,7 @@ const SelectStationsAndZones = ({
   page,
   busRoutes,
   onError,
+  isReadOnly = false,
 }: Props) => {
   const dispatch = useScreenplayDispatchContext();
   const [signIds, setSignIds] = useState(value);
@@ -41,6 +43,7 @@ const SelectStationsAndZones = ({
       onChange={setSignIds}
       busRoutes={busRoutes}
       onError={onError}
+      isReadOnly={isReadOnly}
     />
   ) : (
     <SelectZonesPage
@@ -49,6 +52,7 @@ const SelectStationsAndZones = ({
       onChange={setSignIds}
       places={places}
       onSubmit={onChange}
+      isReadOnly={isReadOnly}
     />
   );
 };

diff --git a/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectStationsPage.tsx b/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectStationsPage.tsx
@@ -36,6 +36,7 @@ interface Props {
   navigateTo: (page: Page) => void;
   busRoutes: string[];
   onError: (message: string | null) => void;
+  isReadOnly?: boolean;
 }
 
 const SelectStationsPage = ({
@@ -45,6 +46,7 @@ const SelectStationsPage = ({
   navigateTo,
   busRoutes,
   onError,
+  isReadOnly = false,
 }: Props) => {
   const routeNameToRouteIds = useRouteToRouteIDsMap();
 
@@ -85,13 +87,13 @@ const SelectStationsPage = ({
   return (
     <div className="select-stations-page">
       <div className="header">
-        <div>Select Stations</div>
+        <div>{isReadOnly ? "Stations" : "Select Stations"}</div>
         <div className="buttons">
           <Button
             className="cancel-button"
             onClick={() => navigateTo(Page.MAIN)}
           >
-            Cancel
+            {isReadOnly ? "Back" : "Cancel"}
           </Button>
           <Button
             className="submit-button button-primary"
@@ -112,6 +114,7 @@ const SelectStationsPage = ({
         value={value}
         onChange={onChange}
         busRoutes={busRoutes}
+        isReadOnly={isReadOnly}
       />
       <Container fluid>
         <div className="station-groups-col col">
@@ -127,6 +130,7 @@ const SelectStationsPage = ({
                 stations={GL_CENTRAL_SUBWAY}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <StationGroupCheckbox
                 title="GL D Branch"
@@ -136,6 +140,7 @@ const SelectStationsPage = ({
                 stations={GL_D_BRANCH}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <StationGroupCheckbox
                 title="GL E Branch"
@@ -145,6 +150,7 @@ const SelectStationsPage = ({
                 stations={GL_E_BRANCH}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <StationGroupCheckbox
                 title="GLX"
@@ -154,6 +160,7 @@ const SelectStationsPage = ({
                 stations={GLX}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <hr />
             </div>
@@ -167,6 +174,7 @@ const SelectStationsPage = ({
                 stations={RED_BRAINTREE_BRANCH}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <StationGroupCheckbox
                 title="Ashmont Branch"
@@ -176,6 +184,7 @@ const SelectStationsPage = ({
                 stations={RED_ASHMONT_BRANCH}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <StationGroupCheckbox
                 title="Red Line Trunk"
@@ -185,6 +194,7 @@ const SelectStationsPage = ({
                 stations={RED_TRUNK}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <hr />
             </div>
@@ -198,6 +208,7 @@ const SelectStationsPage = ({
                 stations={ORANGE_NORTH}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
               <StationGroupCheckbox
                 title="South"
@@ -207,6 +218,7 @@ const SelectStationsPage = ({
                 stations={ORANGE_SOUTH}
                 value={value}
                 onChange={onChange}
+                disabled={isReadOnly}
               />
             </div>
           </div>
@@ -225,6 +237,7 @@ const SelectStationsPage = ({
               }
             }}
             checked={greenLineSignIds.every((signId) => value.includes(signId))}
+            disabled={isReadOnly}
           />
 
           <div className="branches-col">
@@ -241,6 +254,7 @@ const SelectStationsPage = ({
                   places={placesByRoute[route]}
                   value={value}
                   onChange={onChange}
+                  disabled={isReadOnly}
                 />
               );
             })}
@@ -260,6 +274,7 @@ const SelectStationsPage = ({
               value={value}
               onChange={onChange}
               reverse={route === "Blue"}
+              disabled={isReadOnly}
             />
           </div>
         ))}
@@ -271,6 +286,7 @@ const SelectStationsPage = ({
             places={placesByRoute["Bus"]}
             value={value}
             onChange={onChange}
+            disabled={isReadOnly}
           />
         </div>
       </Container>

diff --git a/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectZonesPage.tsx b/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectZonesPage.tsx
@@ -32,6 +32,7 @@ interface Props {
   onSubmit: (signIds: string[]) => void;
   navigateTo: (page: Page) => void;
   places: Place[];
+  isReadOnly?: boolean;
 }
 
 const SelectZonesPage = ({
@@ -40,6 +41,7 @@ const SelectZonesPage = ({
   onSubmit,
   navigateTo,
   places,
+  isReadOnly = false,
 }: Props) => {
   const routeToRouteIDMap = useRouteToRouteIDsMap();
   const getInitialPlacesWithSelectedSigns = () =>
@@ -190,17 +192,19 @@ const SelectZonesPage = ({
               className="edit-button"
               onClick={() => navigateTo(Page.STATIONS)}
             >
-              Edit Stations
+              {isReadOnly ? "Return to Select" : "Edit"} Stations
             </Button>
           </div>
         </div>
         <div className="buttons">
-          <Button
-            className="cancel-button"
-            onClick={() => navigateTo(Page.MAIN)}
-          >
-            Cancel
-          </Button>
+          {!isReadOnly && (
+            <Button
+              className="cancel-button"
+              onClick={() => navigateTo(Page.MAIN)}
+            >
+              Cancel
+            </Button>
+          )}
           <Button
             className="button-primary"
             onClick={() => {
@@ -276,6 +280,7 @@ const SelectZonesPage = ({
                   onClick={() =>
                     onChange(fp.uniq([...value, ...signIDs(allScreens)]))
                   }
+                  disabled={isReadOnly}
                 >
                   {massSelectButtonLabels.left}
                 </Button>
@@ -284,6 +289,7 @@ const SelectZonesPage = ({
                     "button-active": isLeftSelected,
                   })}
                   onClick={() => selectDirectionGroup(0)}
+                  disabled={isReadOnly}
                 >
                   {massSelectButtonLabels.middle}
                 </Button>
@@ -292,6 +298,7 @@ const SelectZonesPage = ({
                     "button-active": isRightSelected,
                   })}
                   onClick={() => selectDirectionGroup(1)}
+                  disabled={isReadOnly}
                 >
                   {massSelectButtonLabels.right}
                 </Button>
@@ -350,6 +357,7 @@ const SelectZonesPage = ({
                         rightZones={signsGroupedByZone.right}
                         route={selectedRouteFilter}
                         branches={branches}
+                        disabled={isReadOnly}
                       />
                       {selectedRouteFilter !== "Bus" && (
                         <PlaceZonesRow
@@ -361,6 +369,7 @@ const SelectZonesPage = ({
                           middleZones={busSignsGroupedByZone.middle}
                           rightZones={busSignsGroupedByZone.right}
                           route={"Bus"}
+                          disabled={isReadOnly}
                         />
                       )}
                     </Fragment>

diff --git a/.../js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectedStationsSummary.tsx b/.../js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectedStationsSummary.tsx
@@ -8,13 +8,15 @@ interface Props {
   onChange: (signIds: string[]) => void;
   places: Place[];
   busRoutes: string[];
+  isReadOnly?: boolean;
 }
 
 const SelectedStationsSummary = ({
   value,
   places,
   busRoutes,
   onChange,
+  isReadOnly = false,
 }: Props) => {
   return (
     <div className="selected-stations-summary">
@@ -29,6 +31,7 @@ const SelectedStationsSummary = ({
             value={value}
             onChange={onChange}
             busRoutes={busRoutes}
+            isReadOnly={isReadOnly}
           />
         </div>
       )}