Use Controller in Meter, User, UserGroup, and ValueListGroup components.

Source/Applications/SystemCenter/package.json

@@ -27,11 +27,11 @@
     "webpack-cli": "4.7.2"
   },
   "dependencies": {
-    "@gpa-gemstone/react-graph": "1.0.113",
+    "@gpa-gemstone/react-graph": "1.0.115",
     "@turf/turf": "7.4.0",
     "@arcgis/core": "5.1.17",
     "proj4leaflet": "^1.0.2",
-    "@gpa-gemstone/common-pages": "0.0.185",
+    "@gpa-gemstone/common-pages": "0.0.189",
     "@reduxjs/toolkit": "1.8.3",
     "assert": "2.0.0",
     "buffer": "6.0.3",

Source/Applications/SystemCenter/wwwroot/Scripts/TSX/SystemCenter/CommonComponents/ControllerSelectPopup.tsx

@@ -0,0 +1,171 @@
+// ******************************************************************************************************
+//  ControllerSelectPopup.tsx - Gbtc
+//
+//  Copyright � 2026, Grid Protection Alliance.  All Rights Reserved.
+//
+//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
+//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+//  file except in compliance with the License. You may obtain a copy of the License at:
+//
+//      http://opensource.org/licenses/MIT
+//
+//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
+//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+//  License for the specific language governing permissions and limitations.
+//
+//  Code Modification History:
+//  ----------------------------------------------------------------------------------------------------
+//  08/12/2026 - Natalie Beatty
+//       Generated original version of source code.
+// ******************************************************************************************************
+
+import { Table, Column, FilterableColumn, ConfigurableColumn } from "@gpa-gemstone/react-table";
+import * as React from 'react';
+import { Modal, GenericController, Search } from "@gpa-gemstone/react-interactive";
+import * as _ from "lodash";
+import { ReactIcons } from "@gpa-gemstone/gpa-symbols";
+
+interface U { ID: number | string }
+
+interface IProps<T extends U> {
+    Controller: GenericController<T>,
+    Selection: T[],
+    OnClose: (selected: T[], conf: boolean) => void
+    Show: boolean,
+    Searchbar: (children: React.ReactNode, setFilters: (filters: Search.IFilter<T>[]) => void) => React.ReactNode,
+    Type?: 'single' | 'multiple',
+    Title: string,
+    MinSelection?: number,
+    children?: React.ReactNode
+}
+
+
+export default function ControllerSelectPopup<T extends U>(props: IProps<T>) {
+    const [filters, setFilters] = React.useState<Search.IFilter<T>[]>([]);
+    const [sortField, setSortField] = React.useState<keyof T>('ID')
+    const [ascending, setAscending] = React.useState<boolean>(true);
+    const [data, setData] = React.useState<T[]>([]);
+
+    const [selectedData, setSelectedData] = React.useState<T[]>(props.Selection);
+
+    const [sortKeySelected, setSortKeySelected] = React.useState<string>('');
+    const [ascendingSelected, setAscendingSelected] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        const handle = props.Controller.DBSearch(filters, sortField, ascending);
+        handle.done((d) => setData(d));
+        return () => { if (handle != null && handle.abort != null) handle.abort() }
+    }, [props.Controller, ascending, sortField, filters])
+
+    React.useEffect(() => {
+        setSelectedData(props.Selection);
+    }, [props.Selection])
+
+    React.useEffect(() => {
+        setFilters([]); // initialize filter list, which should add additional filters
+    }, [])
+
+    function AddCurrentList() {
+        const updatedData = selectedData.concat(data);
+        setSelectedData(_.uniqBy(updatedData, (d) => d.ID));
+    }
+
+    return (<>
+        <Modal Show={props.Show} Title={props.Title} ShowX={true} Size={'xlg'} CallBack={(conf) => props.OnClose(selectedData, conf)}
+            DisableConfirm={props.MinSelection !== undefined && selectedData.length < props.MinSelection}
+            ConfirmShowToolTip={props.MinSelection !== undefined && selectedData.length < props.MinSelection}
+            ConfirmToolTipContent={<p><ReactIcons.CrossMark /> At least {props.MinSelection} items must be selected. </p>}
+        >
+            <div className="row">
+                <div className="col">
+                    {props.Searchbar(
+                        <>
+                            {props.Type === 'multiple' ? <li className="nav-item" style={{ width: '20%', paddingRight: 10 }}>
+                                <fieldset className="border" style={{ padding: '10px', height: '100%' }}>
+                                    <legend className="w-auto" style={{ fontSize: 'large' }}>Quick Selects:</legend>
+                                    <form>
+                                        <div className="form-group">
+                                            <div className="btn btn-primary" onClick={(event) => { event.preventDefault(); AddCurrentList(); }}>Add Current List to Selection</div>
+                                        </div>
+                                        <div className="form-group">
+                                            <div className="btn btn-danger" onClick={(event) => { event.preventDefault(); setSelectedData([]) }}>Remove All</div>
+                                        </div>
+                                    </form>
+                                </fieldset>
+                            </li> : null}
+                            {React.Children.map(props.children, (e) => {
+                                if (React.isValidElement(e)) {
+                                    if (((e as React.ReactElement).type === FilterableColumn) ||
+                                        ((e as React.ReactElement).type === Column) ||
+                                        ((e as React.ReactElement).type === ConfigurableColumn)
+                                    ) return null;
+                                    return e;
+                                }
+                                return null;
+                            })}
+                        </>, setFilters)}
+                </div>
+            </div>
+            <div className="row">
+                <div className="col" style={{ width: (props.Type === undefined || props.Type === 'single' ? '100%' : '60%') }}>
+                    <Table<T>
+                        TableClass="table table-hover"
+                        Data={data}
+                        SortKey={sortField as string}
+                        Ascending={ascending}
+                        OnSort={(d) => {
+                            if (d.colKey === "Scroll")
+                                return;
+                            if (d.colKey === sortField)
+                                setAscending(asc => !asc);
+                            else {
+                                setSortField(d.colKey as keyof T)
+                                setAscending(true);
+                            }
+                        }}
+                        OnClick={(d) => {
+                            if (props.Type === undefined || props.Type === 'single')
+                                setSelectedData([d.row])
+                            else
+                                setSelectedData((s) => [...s.filter(item => item.ID !== d.row.ID), d.row])
+                        }}
+                        Selected={(item) => selectedData.findIndex(d => d.ID === item.ID) > -1}
+                        KeySelector={item => item.ID}
+                    >
+                        {props.children}
+                    </Table>
+                </div>
+                {props.Type === 'multiple' ? <div className="col" style={{ width: '40%' }}>
+                    <div style={{ width: '100%' }}>
+                        <h3> Current Selection </h3>
+                    </div>
+                    <Table<T>
+                        TableClass="table table-hover"
+                        Data={selectedData}
+                        SortKey={sortKeySelected}
+                        Ascending={ascendingSelected}
+                        OnSort={(d) => {
+                            if (d.colKey === sortKeySelected) {
+                                const ordered = _.orderBy<T[]>(selectedData, [d.colKey], [(!ascendingSelected ? "asc" : "desc")]) as T[];
+                                setAscendingSelected(!ascendingSelected);
+                                setSelectedData(ordered);
+                            }
+                            else {
+                                const ordered = _.orderBy(selectedData, [d.colKey], ["asc"]) as T[];
+                                setAscendingSelected(!ascendingSelected);
+                                setSelectedData(ordered);
+                                setSortKeySelected(d.colKey);
+                            }
+                        }}
+                        OnClick={(d) => setSelectedData([...selectedData.filter(item => item.ID !== d.row.ID)])}
+                        Selected={() => false}
+                        KeySelector={item => item.ID}
+                    >
+                        {props.children}
+                    </Table>
+                </div> : null}
+            </div>
+        </Modal>
+    </>)
+}