|
| 1 | + |
| 2 | +import React from "react"; |
| 3 | + |
| 4 | +import { Button } from 'primereact/button'; |
| 5 | +import { Toolbar } from 'primereact/toolbar'; |
| 6 | + |
| 7 | +import { ApiCallState, TApiCallState } from "../../../../utils/ApiCallState"; |
| 8 | +import { APSClientOpenApi } from "../../../../utils/APSClientOpenApi"; |
| 9 | +import APAdminPortalApiProductsDisplayService, { TAPAdminPortalApiProductDisplay } from "../../../displayServices/APAdminPortalApiProductsDisplayService"; |
| 10 | +import { TAPApiProductDisplay_Documentation } from "../../../../displayServices/APApiProductsDisplayService"; |
| 11 | +import { ButtonLabel_Cancel, ButtonLabel_Save, EAction, E_CALL_STATE_ACTIONS } from "../ManageApiProductsCommon"; |
| 12 | +import { UserContext } from "../../../../components/APContextProviders/APUserContextProvider"; |
| 13 | +import { EditNewDocumentationForm } from "./EditNewDocumentationForm"; |
| 14 | + |
| 15 | +import '../../../../components/APComponents.css'; |
| 16 | +import "../ManageApiProducts.css"; |
| 17 | + |
| 18 | +export interface IEditDocumentationProps { |
| 19 | + organizationId: string; |
| 20 | + apAdminPortalApiProductDisplay: TAPAdminPortalApiProductDisplay; |
| 21 | + onError: (apiCallState: TApiCallState) => void; |
| 22 | + onSaveSuccess: (apiCallState: TApiCallState) => void; |
| 23 | + onCancel: () => void; |
| 24 | + onLoadingChange: (isLoading: boolean) => void; |
| 25 | +} |
| 26 | + |
| 27 | +export const EditDocumentation: React.FC<IEditDocumentationProps> = (props: IEditDocumentationProps) => { |
| 28 | + const ComponentName = 'EditDocumentation'; |
| 29 | + |
| 30 | + type TManagedObject = TAPApiProductDisplay_Documentation; |
| 31 | + |
| 32 | + const FormId = `ManageApiProducts_EditNewApiProduct_${ComponentName}`; |
| 33 | + |
| 34 | + const [managedObject, setManagedObject] = React.useState<TManagedObject>(); |
| 35 | + const [apiCallStatus, setApiCallStatus] = React.useState<TApiCallState | null>(null); |
| 36 | + const [userContext] = React.useContext(UserContext); |
| 37 | + |
| 38 | + // * Api Calls * |
| 39 | + |
| 40 | + const apiUpdateManagedObject = async(mo: TManagedObject): Promise<TApiCallState> => { |
| 41 | + const funcName = 'apiUpdateManagedObject'; |
| 42 | + const logName = `${ComponentName}.${funcName}()`; |
| 43 | + let callState: TApiCallState = ApiCallState.getInitialCallState(E_CALL_STATE_ACTIONS.API_UPDATE_API_PRODUCT, `update api product: ${mo.apEntityId.displayName}`); |
| 44 | + try { |
| 45 | + await APAdminPortalApiProductsDisplayService.apiUpdate_ApApiProductDisplay({ |
| 46 | + organizationId: props.organizationId, |
| 47 | + apApiProductDisplay: APAdminPortalApiProductsDisplayService.set_ApiProductDisplay_Documentation({ |
| 48 | + apApiProductDisplay: props.apAdminPortalApiProductDisplay, |
| 49 | + apApiProductDisplay_Documentation: mo |
| 50 | + }), |
| 51 | + userId: userContext.apLoginUserDisplay.apEntityId.id, |
| 52 | + }); |
| 53 | + } catch(e: any) { |
| 54 | + APSClientOpenApi.logError(logName, e); |
| 55 | + callState = ApiCallState.addErrorToApiCallState(e, callState); |
| 56 | + } |
| 57 | + setApiCallStatus(callState); |
| 58 | + return callState; |
| 59 | + } |
| 60 | + |
| 61 | + const doInitialize = async () => { |
| 62 | + setManagedObject(APAdminPortalApiProductsDisplayService.get_ApiProductDisplay_Documentation({ apApiProductDisplay: props.apAdminPortalApiProductDisplay })); |
| 63 | + } |
| 64 | + |
| 65 | + // * useEffect Hooks * |
| 66 | + |
| 67 | + React.useEffect(() => { |
| 68 | + // alert(`${ComponentName}.React.useEffect([]): ${JSON.stringify(props.apAdminPortalApiProductDisplay.apVersionInfo, null, 2)}`) |
| 69 | + doInitialize(); |
| 70 | + }, []); /* eslint-disable-line react-hooks/exhaustive-deps */ |
| 71 | + |
| 72 | + React.useEffect(() => { |
| 73 | + if (apiCallStatus !== null) { |
| 74 | + if(!apiCallStatus.success) props.onError(apiCallStatus); |
| 75 | + else { |
| 76 | + props.onSaveSuccess(apiCallStatus); |
| 77 | + } |
| 78 | + } |
| 79 | + }, [apiCallStatus]); /* eslint-disable-line react-hooks/exhaustive-deps */ |
| 80 | + |
| 81 | + const doSubmitManagedObject = async (mo: TManagedObject) => { |
| 82 | + props.onLoadingChange(true); |
| 83 | + await apiUpdateManagedObject(mo); |
| 84 | + props.onLoadingChange(false); |
| 85 | + } |
| 86 | + |
| 87 | + const onSubmit = (mo: TManagedObject) => { |
| 88 | + doSubmitManagedObject(mo); |
| 89 | + } |
| 90 | + |
| 91 | + const onCancelManagedObjectForm = () => { |
| 92 | + props.onCancel(); |
| 93 | + } |
| 94 | + |
| 95 | + const managedObjectFormFooterRightToolbarTemplate = () => { |
| 96 | + return ( |
| 97 | + <React.Fragment> |
| 98 | + <Button type="button" label={ButtonLabel_Cancel} className="p-button-text p-button-plain" onClick={onCancelManagedObjectForm} /> |
| 99 | + <Button key={ComponentName+ButtonLabel_Save} form={FormId} type="submit" label={ButtonLabel_Save} icon="pi pi-save" className="p-button-text p-button-plain p-button-outlined" /> |
| 100 | + </React.Fragment> |
| 101 | + ); |
| 102 | + } |
| 103 | + |
| 104 | + const renderManagedObjectFormFooter = (): JSX.Element => { |
| 105 | + return ( |
| 106 | + <Toolbar className="p-mb-4" right={managedObjectFormFooterRightToolbarTemplate} /> |
| 107 | + ) |
| 108 | + } |
| 109 | + |
| 110 | + const renderManagedObjectForm = (mo: TManagedObject) => { |
| 111 | + return ( |
| 112 | + <div className="card p-mt-4"> |
| 113 | + <div className="p-fluid"> |
| 114 | + <EditNewDocumentationForm |
| 115 | + formId={FormId} |
| 116 | + organizationId={props.organizationId} |
| 117 | + action={EAction.EDIT} |
| 118 | + apApiProductDisplay_Documentation={mo} |
| 119 | + onError={props.onError} |
| 120 | + onLoadingChange={props.onLoadingChange} |
| 121 | + onSubmit={onSubmit} |
| 122 | + /> |
| 123 | + {/* footer */} |
| 124 | + { renderManagedObjectFormFooter() } |
| 125 | + </div> |
| 126 | + </div> |
| 127 | + ); |
| 128 | + } |
| 129 | + |
| 130 | + |
| 131 | + return ( |
| 132 | + <div className="manage-api-products"> |
| 133 | + |
| 134 | + { managedObject && renderManagedObjectForm(managedObject) } |
| 135 | + |
| 136 | + </div> |
| 137 | + ); |
| 138 | +} |
0 commit comments