@@ -42,13 +42,18 @@ const CippStandardDialog = ({
4242
4343 const handleSearchQueryChange = useCallback (
4444 debounce ( ( query ) => {
45- setSearchQuery ( query ) ;
45+ setSearchQuery ( query . trim ( ) ) ;
4646 } , 50 ) ,
4747 [ ]
4848 ) ;
4949
5050 return (
51- < Dialog open = { dialogOpen } onClose = { handleCloseDialog } maxWidth = "xxl" >
51+ < Dialog open = { dialogOpen } onClose = { handleCloseDialog } maxWidth = "xxl"
52+ PaperProps = { {
53+ sx : {
54+ minWidth : "720px" ,
55+ } ,
56+ } } >
5257 < DialogTitle > Select a Standard to Add</ DialogTitle >
5358 < DialogContent sx = { { backgroundColor : "background.default" } } >
5459 < TextField
@@ -58,105 +63,128 @@ const CippStandardDialog = ({
5863 onChange = { ( e ) => handleSearchQueryChange ( e . target . value . toLowerCase ( ) ) }
5964 />
6065 < Grid container spacing = { 3 } >
61- { Object . keys ( categories ) . map ( ( category ) =>
62- filterStandards ( categories [ category ] ) . map ( ( standard ) => (
63- < Grid item xs = { 12 } md = { 3 } key = { standard . name } >
64- < Card
65- sx = { {
66- display : "flex" ,
67- flexDirection : "column" ,
68- height : "100%" ,
69- } }
70- >
71- < CardContent sx = { { flexGrow : 1 } } >
72- < Typography variant = "h6" gutterBottom >
73- { standard . label }
74- </ Typography >
75- { standard . helpText && (
76- < >
77- < Typography variant = "subtitle2" sx = { { mt : 2 } } >
78- Description:
79- </ Typography >
80- < Typography variant = "body2" color = "textSecondary" paragraph >
81- { standard . helpText }
82- </ Typography >
83- </ >
84- ) }
85- < Typography variant = "subtitle2" sx = { { mt : 2 } } >
86- Category:
87- </ Typography >
88- < Chip label = { category } size = "small" color = "primary" sx = { { mt : 1 , mb : 2 } } />
89- { standard . tag ?. filter ( ( tag ) => ! tag . toLowerCase ( ) . includes ( "impact" ) ) . length >
90- 0 && (
91- < >
92- < Typography variant = "subtitle2" sx = { { mt : 2 } } >
93- Tags:
94- </ Typography >
95- < Box sx = { { display : "flex" , flexWrap : "wrap" , mb : 2 } } >
96- { standard . tag
97- . filter ( ( tag ) => ! tag . toLowerCase ( ) . includes ( "impact" ) )
98- . map ( ( tag , idx ) => (
99- < Chip
100- key = { idx }
101- label = { tag }
102- size = "small"
103- color = "info"
104- sx = { { mr : 1 , mt : 1 } }
105- />
106- ) ) }
107- </ Box >
108- </ >
109- ) }
110- < Typography variant = "subtitle2" sx = { { mt : 2 } } >
111- Impact:
112- </ Typography >
113- < Chip
114- label = { standard . impact }
115- size = "small"
116- color = {
117- standard . impact === "High Impact"
118- ? "error"
119- : standard . impact === "Medium Impact"
120- ? "warning"
121- : "info"
122- }
123- />
124- { standard . recommendedBy ?. length > 0 && (
125- < >
126- < Typography variant = "subtitle2" sx = { { mt : 2 } } >
127- Recommended By:
128- </ Typography >
129- < Typography variant = "body2" color = "textSecondary" paragraph >
130- { standard . recommendedBy . join ( ", " ) }
131- </ Typography >
132- </ >
133- ) }
134- </ CardContent >
135-
136- < CardContent >
137- { standard . multiple ? (
138- < IconButton
66+ { Object . keys ( categories ) . every (
67+ ( category ) => filterStandards ( categories [ category ] ) . length === 0
68+ ) ? (
69+ < Typography
70+ variant = "h6"
71+ color = "textSecondary"
72+ sx = { { mt : 4 , textAlign : "center" , width : "100%" } }
73+ >
74+ Search returned no results
75+ </ Typography >
76+ ) : (
77+ Object . keys ( categories ) . map ( ( category ) =>
78+ filterStandards ( categories [ category ] ) . map ( ( standard ) => (
79+ < Grid item xs = { 12 } md = { 3 } key = { standard . name } >
80+ < Card
81+ sx = { {
82+ display : "flex" ,
83+ flexDirection : "column" ,
84+ height : "100%" ,
85+ } }
86+ >
87+ < CardContent sx = { { flexGrow : 1 } } >
88+ < Typography variant = "h6" gutterBottom >
89+ { standard . label }
90+ </ Typography >
91+ { standard . helpText && (
92+ < >
93+ < Typography variant = "subtitle2" sx = { { mt : 2 } } >
94+ Description:
95+ </ Typography >
96+ < Typography variant = "body2" color = "textSecondary" paragraph >
97+ { standard . helpText }
98+ </ Typography >
99+ </ >
100+ ) }
101+ < Typography variant = "subtitle2" sx = { { mt : 2 } } >
102+ Category:
103+ </ Typography >
104+ < Chip
105+ label = { category }
106+ size = "small"
139107 color = "primary"
140- disabled = { isButtonDisabled }
141- onClick = { ( ) => handleAddClick ( standard . name ) }
142- >
143- < Add />
144- </ IconButton >
145- ) : (
146- < FormControlLabel
147- control = {
148- < Switch
149- checked = { ! ! selectedStandards [ standard . name ] }
150- onChange = { ( ) => handleToggleSingleStandard ( standard . name ) }
151- />
108+ sx = { { mt : 1 , mb : 2 } }
109+ />
110+ { standard . tag ?. filter ( ( tag ) => ! tag . toLowerCase ( ) . includes ( "impact" ) ) . length >
111+ 0 && (
112+ < >
113+ < Typography variant = "subtitle2" sx = { { mt : 2 } } >
114+ Tags:
115+ </ Typography >
116+ < Box sx = { { display : "flex" , flexWrap : "wrap" , mb : 2 } } >
117+ { standard . tag
118+ . filter ( ( tag ) => ! tag . toLowerCase ( ) . includes ( "impact" ) )
119+ . map ( ( tag , idx ) => (
120+ < Chip
121+ key = { idx }
122+ label = { tag }
123+ size = "small"
124+ color = "info"
125+ sx = { { mr : 1 , mt : 1 } }
126+ />
127+ ) ) }
128+ </ Box >
129+ </ >
130+ ) }
131+ < Typography variant = "subtitle2" sx = { { mt : 2 } } >
132+ Impact:
133+ </ Typography >
134+ < Chip
135+ label = { standard . impact }
136+ size = "small"
137+ color = {
138+ standard . impact === "High Impact"
139+ ? "error"
140+ : standard . impact === "Medium Impact"
141+ ? "warning"
142+ : "info"
152143 }
153- label = "Add this standard to the template"
154144 />
155- ) }
156- </ CardContent >
157- </ Card >
158- </ Grid >
159- ) )
145+ { standard . recommendedBy ?. length > 0 && (
146+ < >
147+ < Typography variant = "subtitle2" sx = { { mt : 2 } } >
148+ Recommended By:
149+ </ Typography >
150+ < Typography
151+ variant = "body2"
152+ color = "textSecondary"
153+ paragraph
154+ >
155+ { standard . recommendedBy . join ( ", " ) }
156+ </ Typography >
157+ </ >
158+ ) }
159+ </ CardContent >
160+
161+ < CardContent >
162+ { standard . multiple ? (
163+ < IconButton
164+ color = "primary"
165+ disabled = { isButtonDisabled }
166+ onClick = { ( ) => handleAddClick ( standard . name ) }
167+ >
168+ < Add />
169+ </ IconButton >
170+ ) : (
171+ < FormControlLabel
172+ control = {
173+ < Switch
174+ checked = { ! ! selectedStandards [ standard . name ] }
175+ onChange = { ( ) =>
176+ handleToggleSingleStandard ( standard . name )
177+ }
178+ />
179+ }
180+ label = "Add this standard to the template"
181+ />
182+ ) }
183+ </ CardContent >
184+ </ Card >
185+ </ Grid >
186+ ) )
187+ )
160188 ) }
161189 </ Grid >
162190 </ DialogContent >
0 commit comments