@@ -18,7 +18,7 @@ interface SuggestionHistoryProps {
1818 suggestions ?: Suggestion [ ] ;
1919 editedSuggestions : EditedSuggestions ;
2020 onEdit ?: ( id : number , changes : Partial < Suggestion > ) => void ;
21- showNewOnly ?: boolean ;
21+ showOpenOnly ?: boolean ;
2222 confirmationErrors ?: Record < string , string > ;
2323}
2424
@@ -29,12 +29,14 @@ function formatDate(dateStr?: string) {
2929 return date . toISOString ( ) . slice ( 0 , 10 ) ;
3030}
3131
32+ const OPEN_SUGGESTION_STATUS_IDS = [ 1 , 2 ] ;
33+
3234export default function SuggestionHistory ( {
3335 tabPage = 0 ,
3436 suggestions = [ ] ,
3537 editedSuggestions,
3638 onEdit,
37- showNewOnly = false ,
39+ showOpenOnly = false ,
3840} : SuggestionHistoryProps ) {
3941 const handleInputChange = (
4042 id : number ,
@@ -46,111 +48,115 @@ export default function SuggestionHistory({
4648
4749 const safeSuggestions = Array . isArray ( suggestions ) ? suggestions : [ ] ;
4850
49- const filteredSuggestions = showNewOnly
51+ const filteredSuggestions = showOpenOnly
5052 ? safeSuggestions . filter (
51- ( suggestion ) => suggestion . suggestionStatusId === 1
53+ ( suggestion ) =>
54+ suggestion . suggestionStatusId !== undefined &&
55+ OPEN_SUGGESTION_STATUS_IDS . includes ( suggestion . suggestionStatusId )
5256 )
5357 : safeSuggestions ;
5458
55- if ( showNewOnly && filteredSuggestions . length === 0 ) return null ;
59+ if ( showOpenOnly && filteredSuggestions . length === 0 ) return null ;
5660
57- return (
58- < TabPanel value = { tabPage } index = { showNewOnly ? - 1 : 6 } >
59- < Stack spacing = { 3 } >
60- { filteredSuggestions . map ( ( suggestion ) => (
61- < Paper
62- key = { suggestion . id }
63- sx = { ( theme : any ) => ( {
64- backgroundColor : theme . palette . primary . extralight ,
65- px : 4 ,
66- py : 2 ,
67- } ) }
61+ const content = (
62+ < Stack spacing = { 3 } >
63+ { filteredSuggestions . map ( ( suggestion ) => (
64+ < Paper
65+ key = { suggestion . id }
66+ sx = { ( theme : any ) => ( {
67+ backgroundColor : theme . palette . primary . extralight ,
68+ px : 4 ,
69+ py : 2 ,
70+ } ) }
71+ >
72+ < Typography variant = "subtitle1" gutterBottom >
73+ Suggestion ({ formatDate ( suggestion . createdDate ) }
74+ { suggestion . tipsterName && < > | { suggestion . tipsterName } </ > }
75+ { suggestion . tipsterEmail && < > | { suggestion . tipsterEmail } </ > }
76+ { suggestion . tipsterPhone && < > | { suggestion . tipsterPhone } </ > } )
77+ </ Typography >
78+ < Typography variant = "body1" sx = { { mb : 1 } } >
79+ { suggestion . notes }
80+ </ Typography >
81+ < Stack
82+ direction = { { xs : "column" , sm : "row" } }
83+ spacing = { 2 }
84+ alignItems = "center"
6885 >
69- < Typography variant = "subtitle1" gutterBottom >
70- Suggestion ({ formatDate ( suggestion . createdDate ) }
71- { suggestion . tipsterName && < > | { suggestion . tipsterName } </ > }
72- { suggestion . tipsterEmail && < > | { suggestion . tipsterEmail } </ > }
73- { suggestion . tipsterPhone && < > | { suggestion . tipsterPhone } </ > } )
74- </ Typography >
75- < Typography variant = "body1" sx = { { mb : 1 } } >
76- { suggestion . notes }
77- </ Typography >
7886 < Stack
79- direction = { { xs : "column" , sm : " row" } }
87+ direction = " row"
8088 spacing = { 2 }
81- alignItems = "center"
89+ sx = { { mb : 1 , width : "100%" } }
90+ flex = { 1 }
8291 >
83- < Stack
84- direction = "row"
85- spacing = { 2 }
86- sx = { { mb : 1 , width : "100%" } }
87- flex = { 1 }
92+ < InputLabel
93+ htmlFor = { `suggestionAdminNotes-${ suggestion . id } ` }
94+ sx = { { minWidth : "fit-content" } }
8895 >
89- < InputLabel
90- htmlFor = { `suggestionAdminNotes-${ suggestion . id } ` }
91- sx = { { minWidth : "fit-content" } }
92- >
93- Note:
94- </ InputLabel >
95- < Textarea
96- placeholder = "Admin Notes"
97- id = { `suggestionAdminNotes-${ suggestion . id } ` }
98- name = { `suggestionAdminNotes-${ suggestion . id } ` }
99- fullWidth
100- value = {
101- editedSuggestions [ suggestion . id ] ?. adminNotes ??
102- suggestion . adminNotes ??
103- ""
104- }
105- onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) =>
106- handleInputChange (
107- suggestion . id ,
108- "adminNotes" ,
109- e . target . value
110- )
111- }
112- />
113- </ Stack >
114- < Box sx = { { minWidth : 200 } } >
115- < RadioGroup
116- value = {
117- editedSuggestions [ suggestion . id ] ?. suggestionStatusId ??
118- suggestion . suggestionStatusId ??
119- ""
120- }
121- onChange = { ( e ) =>
122- handleInputChange (
123- suggestion . id ,
124- "suggestionStatusId" ,
125- Number ( e . target . value )
126- )
127- }
128- >
129- { FILTERS . map ( ( status : { id : number ; name : string } ) => (
130- < FormControlLabel
131- key = { status . id }
132- value = { status . id }
133- control = {
134- < Radio
135- sx = { ( theme ) => ( {
136- "&.Mui-checked" : {
137- color : theme . palette . secondary . main ,
138- } ,
139- } ) }
140- />
141- }
142- label = { status . name }
143- />
144- ) ) }
145- </ RadioGroup >
146- </ Box >
96+ Note:
97+ </ InputLabel >
98+ < Textarea
99+ placeholder = "Admin Notes"
100+ id = { `suggestionAdminNotes-${ suggestion . id } ` }
101+ name = { `suggestionAdminNotes-${ suggestion . id } ` }
102+ fullWidth
103+ value = {
104+ editedSuggestions [ suggestion . id ] ?. adminNotes ??
105+ suggestion . adminNotes ??
106+ ""
107+ }
108+ onChange = { ( e : React . ChangeEvent < HTMLInputElement > ) =>
109+ handleInputChange ( suggestion . id , "adminNotes" , e . target . value )
110+ }
111+ />
147112 </ Stack >
148- </ Paper >
149- ) ) }
150- { filteredSuggestions . length === 0 && (
151- < Typography > No suggestions found.</ Typography >
152- ) }
153- </ Stack >
113+ < Box sx = { { minWidth : 200 } } >
114+ < RadioGroup
115+ value = {
116+ editedSuggestions [ suggestion . id ] ?. suggestionStatusId ??
117+ suggestion . suggestionStatusId ??
118+ ""
119+ }
120+ onChange = { ( e ) =>
121+ handleInputChange (
122+ suggestion . id ,
123+ "suggestionStatusId" ,
124+ Number ( e . target . value )
125+ )
126+ }
127+ >
128+ { FILTERS . map ( ( status : { id : number ; name : string } ) => (
129+ < FormControlLabel
130+ key = { status . id }
131+ value = { status . id }
132+ control = {
133+ < Radio
134+ sx = { ( theme ) => ( {
135+ "&.Mui-checked" : {
136+ color : theme . palette . secondary . main ,
137+ } ,
138+ } ) }
139+ />
140+ }
141+ label = { status . name }
142+ />
143+ ) ) }
144+ </ RadioGroup >
145+ </ Box >
146+ </ Stack >
147+ </ Paper >
148+ ) ) }
149+ { filteredSuggestions . length === 0 && (
150+ < Typography > No suggestions found.</ Typography >
151+ ) }
152+ </ Stack >
153+ ) ;
154+
155+ if ( showOpenOnly ) return < Box sx = { { m : 3 } } > { content } </ Box > ;
156+
157+ return (
158+ < TabPanel value = { tabPage } index = { 6 } >
159+ { content }
154160 </ TabPanel >
155161 ) ;
156162}
0 commit comments