Skip to content

Commit 0c8ec5e

Browse files
collins-selfCollins Self
collins-self
authored and
Collins Self
committed
Tooltip and button disable
1 parent 6747284 commit 0c8ec5e

1 file changed

Lines changed: 90 additions & 75 deletions

File tree

  • Source/Applications/SystemCenter/wwwroot/Scripts/TSX/SystemCenter/Meter/PropertyUI

‎Source/Applications/SystemCenter/wwwroot/Scripts/TSX/SystemCenter/Meter/PropertyUI/LocationDrawings.tsx‎

Lines changed: 90 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import { BtnDropdown, LoadingIcon, Modal, ToolTip } from '@gpa-gemstone/react-in
2929
import { ReactTable } from '@gpa-gemstone/react-table';
3030
import { useAppDispatch, useAppSelector } from '../../hooks';
3131
import { CreateGuid } from '@gpa-gemstone/helper-functions';
32+
import { CrossMark } from '@gpa-gemstone/gpa-symbols';
3233

3334
interface IProps {
3435
Locations: OpenXDA.Types.Location[];
@@ -48,32 +49,44 @@ const LocationDrawings = (props: IProps) => {
4849
const [showDrawings, setShowDrawings] = React.useState<boolean>(false);
4950
const [showDropdown, setShowDropdown] = React.useState<boolean>();
5051
const [disableButton, setDisableButton] = React.useState<boolean>(false);
52+
const [errors, setErrors] = React.useState<string[]>([]);
5153
const [hover, setHover] = React.useState<'none' | 'drawings'>('none');
5254

5355
React.useEffect(() => {
56+
if (drawingStatus == 'unintiated' || drawingStatus == 'changed' || drawingParentID != selectedLocation)
57+
dispatch(LocationDrawingSlice.Fetch(selectedLocation));
58+
}, [props.Locations, drawingStatus, drawingParentID, selectedLocation]);
59+
60+
React.useEffect(() => {
61+
let e = [];
62+
5463
if (props.Locations.length == 0
55-
|| (props.Locations[0].Alias == "" // Empty Location is default in NMW
64+
|| (props.Locations[0].Alias == ""
5665
&& props.Locations[0].Description == ""
5766
&& props.Locations[0].ID == 0
5867
&& props.Locations[0].Latitude == null
5968
&& props.Locations[0].LocationKey == ""
6069
&& props.Locations[0].Longitude == null
6170
&& props.Locations[0].Name == ""
6271
))
63-
setDisableButton(true);
64-
else setDisableButton(false);
65-
}, [props.Locations])
72+
e.push('No location selected.');
73+
else if (drawingData.length == 0
74+
&& props.Locations.length != 0)
75+
e.push('No drawings associated with selected location.');
76+
77+
setErrors(e);
78+
}, [props.Locations, drawingData]);
6679

6780
React.useEffect(() => {
68-
if (drawingStatus == 'unintiated' || drawingStatus == 'changed' || drawingParentID != selectedLocation)
69-
dispatch(LocationDrawingSlice.Fetch(selectedLocation));
70-
}, [drawingStatus, drawingParentID, selectedLocation]);
81+
setDisableButton(errors.length > 0);
82+
}, [errors]);
7183

7284
React.useEffect(() => {
85+
setSelectedLocation(props.Locations[0].ID);
7386
setShowDropdown(props.Locations.length > 1);
74-
}, [props.Locations])
87+
}, [props.Locations]);
7588

76-
function dropdownOptions(): { Label: string; Callback: () => void; Disabled: boolean; }[] {
89+
function dropdownOptions() {
7790
const options: { Label: string; Callback: () => void; Disabled: boolean; }[] = [];
7891
const labels: string[] = props.Locations.map(loc => loc.Name);
7992
labels.forEach((label, index) => {
@@ -112,79 +125,81 @@ const LocationDrawings = (props: IProps) => {
112125
setShowDrawings(true);
113126
}
114127
}}
115-
>Open Drawing(s)
128+
>Open Drawings {props.Locations[0].Name}
116129
</button>
117130
}
118-
<ToolTip Show={hover === 'drawings' && (disableButton)}
131+
<ToolTip
132+
Show={hover === 'drawings' && (disableButton)}
119133
Theme={'dark'} Position={'top'} Target={guid.current} Zindex={9999}>
120-
<p>No substation.</p>
134+
{errors.map((e, i) => <p key={i}>{CrossMark} {e}</p>)}
121135
</ToolTip>
122-
<Modal Show={showDrawings} Title={'Drawings'} ShowX={true} Size={'lg'} CallBack={() => setShowDrawings(false)} ShowCancel={false} ConfirmText={'Done'}>
136+
<Modal
137+
Show={showDrawings}
138+
Title={'Drawings'}
139+
ShowX={true} Size={'lg'}
140+
CallBack={() => setShowDrawings(false)}
141+
ShowCancel={false}
142+
ConfirmText={'Done'}>
123143
<div className="row">
124144
<div className="col" style={{ width: '100%' }}>
125145
<LoadingIcon Show={drawingStatus == 'loading'} />
126-
{drawingData.length == 0 ? // TODO: Replace with a search of all drawings and just disable button
127-
<div className={`alert alert-primary`}>
128-
No Drawings associated with this location.
129-
</div>
130-
: <ReactTable.Table<SystemCenter.Types.LocationDrawing>
131-
TableClass="table table-hover"
132-
Data={drawingData}
133-
SortKey={drawingSortKey}
134-
Ascending={drawingAscending}
135-
OnSort={(d) => {
136-
dispatch(LocationDrawingSlice.Sort({ SortField: d.colField, Ascending: d.ascending }));
137-
}}
138-
OnClick={(d) => window.open(d.row.Link, '_blank')}
139-
TheadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
140-
TbodyStyle={{ display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }}
141-
RowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
142-
Selected={(item) => false}
143-
KeySelector={(item) => item.ID}
144-
>
145-
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
146-
Key={'Name'}
147-
AllowSort={true}
148-
Field={'Name'}
149-
HeaderStyle={{ width: 'auto' }}
150-
RowStyle={{ width: 'auto' }}
151-
> Name
152-
</ReactTable.Column>
153-
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
154-
Key={'Description'}
155-
AllowSort={true}
156-
Field={'Description'}
157-
HeaderStyle={{ width: 'auto' }}
158-
RowStyle={{ width: 'auto' }}
159-
> Description
160-
</ReactTable.Column>
161-
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
162-
Key={'Link'}
163-
AllowSort={true}
164-
Field={'Link'}
165-
HeaderStyle={{ width: 'auto' }}
166-
RowStyle={{ width: 'auto' }}
167-
Content={({ item, key }) => <a href={item[key] as string} target='_blank'>{item[key]}</a>}
168-
> Link
169-
</ReactTable.Column>
170-
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
171-
Key={'Number'}
172-
AllowSort={true}
173-
Field={'Number'}
174-
HeaderStyle={{ width: '15%' }}
175-
RowStyle={{ width: '15%' }}
176-
> Number
177-
</ReactTable.Column>
178-
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
179-
Key={'Category'}
180-
AllowSort={true}
181-
Field={'Category'}
182-
HeaderStyle={{ width: '15%' }}
183-
RowStyle={{ width: '15%' }}
184-
> Category
185-
</ReactTable.Column>
186-
</ReactTable.Table>
187-
}
146+
<ReactTable.Table<SystemCenter.Types.LocationDrawing>
147+
TableClass="table table-hover"
148+
Data={drawingData}
149+
SortKey={drawingSortKey}
150+
Ascending={drawingAscending}
151+
OnSort={(d) => {
152+
dispatch(LocationDrawingSlice.Sort({ SortField: d.colField, Ascending: d.ascending }));
153+
}}
154+
OnClick={(d) => window.open(d.row.Link, '_blank')}
155+
TheadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
156+
TbodyStyle={{ display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }}
157+
RowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
158+
Selected={(item) => false}
159+
KeySelector={(item) => item.ID}
160+
>
161+
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
162+
Key={'Name'}
163+
AllowSort={true}
164+
Field={'Name'}
165+
HeaderStyle={{ width: 'auto' }}
166+
RowStyle={{ width: 'auto' }}
167+
> Name
168+
</ReactTable.Column>
169+
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
170+
Key={'Description'}
171+
AllowSort={true}
172+
Field={'Description'}
173+
HeaderStyle={{ width: 'auto' }}
174+
RowStyle={{ width: 'auto' }}
175+
> Description
176+
</ReactTable.Column>
177+
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
178+
Key={'Link'}
179+
AllowSort={true}
180+
Field={'Link'}
181+
HeaderStyle={{ width: 'auto' }}
182+
RowStyle={{ width: 'auto' }}
183+
Content={({ item, key }) => <a href={item[key] as string} target='_blank'>{item[key]}</a>}
184+
> Link
185+
</ReactTable.Column>
186+
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
187+
Key={'Number'}
188+
AllowSort={true}
189+
Field={'Number'}
190+
HeaderStyle={{ width: '15%' }}
191+
RowStyle={{ width: '15%' }}
192+
> Number
193+
</ReactTable.Column>
194+
<ReactTable.Column<SystemCenter.Types.LocationDrawing>
195+
Key={'Category'}
196+
AllowSort={true}
197+
Field={'Category'}
198+
HeaderStyle={{ width: '15%' }}
199+
RowStyle={{ width: '15%' }}
200+
> Category
201+
</ReactTable.Column>
202+
</ReactTable.Table>
188203
</div>
189204
</div>
190205
</Modal>

0 commit comments

Comments
 (0)