@@ -17,6 +17,8 @@ import {
1717 TAPApiDisplayList
1818} from "../../../../displayServices/APApisDisplayService" ;
1919import APAdminPortalApisDisplayService from "../../../displayServices/APAdminPortalApisDisplayService" ;
20+ import { OrganizationContext } from "../../../../components/APContextProviders/APOrganizationContextProvider" ;
21+ import APOrganizationsDisplayService from "../../../../displayServices/APOrganizationsDisplayService/APOrganizationsDisplayService" ;
2022
2123import '../../../../components/APComponents.css' ;
2224import "../ManageApiProducts.css" ;
@@ -36,14 +38,21 @@ export const SearchSelectApis: React.FC<ISearchSelectApisProps> = (props: ISearc
3638 type TManagedObject = TAPApiDisplay ;
3739 type TManagedObjectList = Array < TManagedObject > ;
3840
39- const DialogHeader = 'Search & Select API(s):' ;
41+ const DialogHeaderPlural = 'Search & Select API(s):' ;
42+ const DialogHeaderSingular = 'Search & Select one API:' ;
4043 const MessageNoManagedObjectsFound = "No APIs found."
4144 const MessageNoManagedObjectsFoundWithFilter = 'No APIs found for filter' ;
4245 // const GlobalSearchPlaceholder = 'Enter search word list separated by <space> ...';
4346 const GlobalSearchPlaceholder = 'search...' ;
4447
48+ const [ organizationContext ] = React . useContext ( OrganizationContext ) ;
49+
50+ const isSingleSelection : boolean = organizationContext . apMaxNumApis_Per_ApiProduct === 1 ;
51+
52+ const [ isMaxExceeded , setIsMaxExceeded ] = React . useState < boolean > ( false ) ;
4553 const [ managedObjectList , setManagedObjectList ] = React . useState < TManagedObjectList > ( ) ;
4654 const [ selectedManagedObjectList , setSelectedManagedObjectList ] = React . useState < TManagedObjectList > ( ) ;
55+ const [ selectedManagedObject , setSelectedManagedObject ] = React . useState < TManagedObject > ( ) ;
4756 const [ isInitialialized , setIsInitialized ] = React . useState < boolean > ( false ) ;
4857 const [ apiCallStatus , setApiCallStatus ] = React . useState < TApiCallState | null > ( null ) ;
4958 const [ globalFilter , setGlobalFilter ] = React . useState < string > ( ) ; // * Data Table *
@@ -79,16 +88,18 @@ export const SearchSelectApis: React.FC<ISearchSelectApisProps> = (props: ISearc
7988
8089 React . useEffect ( ( ) => {
8190 if ( managedObjectList === undefined ) return ;
82- setSelectedManagedObjectList ( APEntityIdsService . create_ApDisplayObjectList_FilteredBy_EntityIdList ( {
91+ const selectedList : TAPApiDisplayList = APEntityIdsService . create_ApDisplayObjectList_FilteredBy_EntityIdList ( {
8392 apDisplayObjectList : managedObjectList ,
8493 filterByEntityIdList : props . selectedApiEntityIdList
85- } ) ) ;
94+ } ) ;
95+ if ( isSingleSelection && selectedList . length > 0 ) setSelectedManagedObject ( selectedList [ 0 ] ) ;
96+ setSelectedManagedObjectList ( selectedList ) ;
8697 } , [ managedObjectList ] ) ; /* eslint-disable-line react-hooks/exhaustive-deps */
8798
8899 React . useEffect ( ( ) => {
89100 if ( selectedManagedObjectList === undefined ) return ;
90101 setIsInitialized ( true ) ;
91- } , [ selectedManagedObjectList ] ) ; /* eslint-disable-line react-hooks/exhaustive-deps */
102+ } , [ selectedManagedObjectList , selectedManagedObject ] ) ; /* eslint-disable-line react-hooks/exhaustive-deps */
92103
93104 React . useEffect ( ( ) => {
94105 if ( apiCallStatus !== null ) {
@@ -101,8 +112,13 @@ export const SearchSelectApis: React.FC<ISearchSelectApisProps> = (props: ISearc
101112 const onSaveSelectedApis = ( ) => {
102113 const funcName = 'onSaveSelectedApis' ;
103114 const logName = `${ ComponentName } ${ funcName } ;
104- if ( selectedManagedObjectList === undefined ) throw new Error ( `${ logName } ) ;
105- props . onSave ( selectedManagedObjectList ) ;
115+ if ( isSingleSelection ) {
116+ if ( selectedManagedObject === undefined ) throw new Error ( `${ logName } ) ;
117+ props . onSave ( [ selectedManagedObject ] ) ;
118+ } else {
119+ if ( selectedManagedObjectList === undefined ) throw new Error ( `${ logName } ) ;
120+ props . onSave ( selectedManagedObjectList ) ;
121+ }
106122 }
107123
108124 // * Data Table *
@@ -115,7 +131,8 @@ export const SearchSelectApis: React.FC<ISearchSelectApisProps> = (props: ISearc
115131 const funcName = 'renderDataTableHeader' ;
116132 const logName = `${ ComponentName } ${ funcName } ;
117133 if ( selectedManagedObjectList === undefined ) throw new Error ( `${ logName } ) ;
118- const isSaveDisabled : boolean = selectedManagedObjectList . length === 0 ;
134+ // const isSaveDisabled: boolean = selectedManagedObjectList.length === 0;
135+ const isSaveDisabled : boolean = isSingleSelection ? selectedManagedObject === undefined : selectedManagedObjectList . length === 0 ;
119136 return (
120137 < div className = "table-header" >
121138 < div style = { { whiteSpace : "nowrap" } } >
@@ -137,69 +154,141 @@ export const SearchSelectApis: React.FC<ISearchSelectApisProps> = (props: ISearc
137154 ) ;
138155 }
139156
140- const onSelectionChange = ( event : any ) : void => {
141- setSelectedManagedObjectList ( event . value ) ;
157+ const onListSelectionChange = ( event : any ) : void => {
158+ const moList : TManagedObjectList = event . value ;
159+ if ( APOrganizationsDisplayService . is_NumApis_Per_ApiProduct_Limited ( organizationContext . apMaxNumApis_Per_ApiProduct ) ) {
160+ if ( moList . length > organizationContext . apMaxNumApis_Per_ApiProduct ) setIsMaxExceeded ( true ) ;
161+ else {
162+ setIsMaxExceeded ( false ) ;
163+ setSelectedManagedObjectList ( event . value ) ;
164+ }
165+ } else {
166+ setIsMaxExceeded ( false ) ;
167+ setSelectedManagedObjectList ( event . value ) ;
168+ }
169+ }
170+
171+ const onSingleSelectionChange = ( event : any ) : void => {
172+ setSelectedManagedObject ( event . value ) ;
142173 }
143174
144175 const renderManagedObjectTableEmptyMessage = ( ) => {
145176 if ( globalFilter && globalFilter !== '' ) return `${ MessageNoManagedObjectsFoundWithFilter } ${ globalFilter } ;
146177 else return MessageNoManagedObjectsFound ;
147178 }
148179
149- const renderManagedObjectDataTable = ( ) : JSX . Element => {
180+ const renderManagedObjectDataTableMultiple = ( ) : JSX . Element => {
150181 const dataKey = APAdminPortalApisDisplayService . nameOf_ApEntityId ( 'id' ) ;
151182 const sortField = APAdminPortalApisDisplayService . nameOf_ApEntityId ( 'displayName' ) ;
152183 return (
153- < div className = "card" >
154- < DataTable
155- ref = { dt }
156- className = "p-datatable-sm"
157- autoLayout = { true }
158- resizableColumns
159- columnResizeMode = "fit"
160- showGridlines = { false }
161- header = { renderDataTableHeader ( ) }
162- value = { managedObjectList }
163- globalFilter = { globalFilter }
164- scrollable
165- scrollHeight = "800px"
166- dataKey = { dataKey }
167- emptyMessage = { renderManagedObjectTableEmptyMessage ( ) }
168- // selection
169- selection = { selectedManagedObjectList }
170- onSelectionChange = { onSelectionChange }
171- // sorting
172- sortMode = 'single'
173- sortField = { sortField }
174- sortOrder = { 1 }
175- >
176- < Column selectionMode = "multiple" style = { { width :'3em' } } />
177- < Column header = "Name" field = { sortField } filterField = "apSearchContent" sortable />
178- < Column header = "Service Name" field = "connectorEnvironmentResponse.serviceName" sortable />
179- < Column header = "Msg Vpn Name" field = "connectorEnvironmentResponse.msgVpnName" sortable />
180- < Column header = "Datacenter Provider" field = "connectorEnvironmentResponse.datacenterProvider" sortable />
181- { /* <Column header="Description" field="connectorEnvironmentResponse.description" /> */ }
184+ < div className = "card p-mt-2 " >
185+ < DataTable
186+ ref = { dt }
187+ className = "p-datatable-sm"
188+ autoLayout = { true }
189+ resizableColumns
190+ columnResizeMode = "fit"
191+ showGridlines = { false }
192+ header = { renderDataTableHeader ( ) }
193+ value = { managedObjectList }
194+ globalFilter = { globalFilter }
195+ scrollable
196+ scrollHeight = "800px"
197+ dataKey = { dataKey }
198+ emptyMessage = { renderManagedObjectTableEmptyMessage ( ) }
199+ // selection
200+ selection = { selectedManagedObjectList }
201+ onSelectionChange = { onListSelectionChange }
202+ // sorting
203+ sortMode = 'single'
204+ sortField = { sortField }
205+ sortOrder = { 1 }
206+ >
207+ < Column selectionMode = "multiple" style = { { width :'3em' } } />
208+ < Column header = "Name" field = { sortField } filterField = "apSearchContent" sortable />
209+ < Column header = "Service Name" field = "connectorEnvironmentResponse.serviceName" sortable />
210+ < Column header = "Msg Vpn Name" field = "connectorEnvironmentResponse.msgVpnName" sortable />
211+ < Column header = "Datacenter Provider" field = "connectorEnvironmentResponse.datacenterProvider" sortable />
212+ { /* <Column header="Description" field="connectorEnvironmentResponse.description" /> */ }
182213 </ DataTable >
183214 </ div >
184215 ) ;
185216 }
186217
218+ const renderManagedObjectDataTableSingle = ( ) : JSX . Element => {
219+ const dataKey = APAdminPortalApisDisplayService . nameOf_ApEntityId ( 'id' ) ;
220+ const sortField = APAdminPortalApisDisplayService . nameOf_ApEntityId ( 'displayName' ) ;
221+ return (
222+ < div className = "card p-mt-2" >
223+ < DataTable
224+ ref = { dt }
225+ className = "p-datatable-sm"
226+ autoLayout = { true }
227+ resizableColumns
228+ columnResizeMode = "fit"
229+ showGridlines = { false }
230+ header = { renderDataTableHeader ( ) }
231+ value = { managedObjectList }
232+ globalFilter = { globalFilter }
233+ scrollable
234+ scrollHeight = "800px"
235+ dataKey = { dataKey }
236+ emptyMessage = { renderManagedObjectTableEmptyMessage ( ) }
237+ // selection
238+ selectionMode = "single"
239+ selection = { selectedManagedObject }
240+ onSelectionChange = { onSingleSelectionChange }
241+ // sorting
242+ sortMode = 'single'
243+ sortField = { sortField }
244+ sortOrder = { 1 }
245+ >
246+ < Column header = "Name" field = { sortField } filterField = "apSearchContent" sortable />
247+ < Column header = "Service Name" field = "connectorEnvironmentResponse.serviceName" sortable />
248+ < Column header = "Msg Vpn Name" field = "connectorEnvironmentResponse.msgVpnName" sortable />
249+ < Column header = "Datacenter Provider" field = "connectorEnvironmentResponse.datacenterProvider" sortable />
250+ { /* <Column header="Description" field="connectorEnvironmentResponse.description" /> */ }
251+ </ DataTable >
252+ </ div >
253+ ) ;
254+ }
255+
256+ const renderManagedObjectDataTable = ( ) : JSX . Element => {
257+ if ( isSingleSelection ) return renderManagedObjectDataTableSingle ( ) ;
258+ else return renderManagedObjectDataTableMultiple ( ) ;
259+ }
260+
261+ const renderHeader = ( ) => {
262+ if ( isSingleSelection ) {
263+ return (
264+ < APComponentHeader header = { DialogHeaderSingular } />
265+ ) ;
266+ } else {
267+ return (
268+ < APComponentHeader header = { DialogHeaderPlural } />
269+ ) ;
270+ }
271+ }
272+
273+ const renderMaxExceededMessage = ( ) => {
274+ return (
275+ < div style = { { color : 'red' } } >
276+ Max number of APIs per API Product exceeded. Max: { organizationContext . apMaxNumApis_Per_ApiProduct } .
277+ </ div >
278+ )
279+ }
280+
187281 return (
188282 < div className = "manage-api-products" >
189283
190- < APComponentHeader header = { DialogHeader } />
284+ { renderHeader ( ) }
285+
286+ { isMaxExceeded && renderMaxExceededMessage ( ) }
191287
192288 < ApiCallStatusError apiCallStatus = { apiCallStatus } />
193289
194290 { isInitialialized && renderManagedObjectDataTable ( ) }
195291
196- { /* DEBUG */ }
197- { /* {managedObjectTableDataList.length > 0 && selectedManagedObjectTableDataList &&
198- <pre style={ { fontSize: '12px' }} >
199- {JSON.stringify(selectedManagedObjectTableDataList, null, 2)}
200- </pre>
201- } */ }
202-
203292 </ div >
204293 ) ;
205294}
0 commit comments