1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-27 21:54:27 +01:00

(front) export form component to angular

This commit is contained in:
Sylvain 2022-04-04 11:55:14 +02:00
parent f68c8a492e
commit 1a8dc390f3

View File

@ -1,6 +1,12 @@
import React from 'react'; import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form'; import { useForm, SubmitHandler } from 'react-hook-form';
import { react2angular } from 'react2angular';
import { AuthenticationProvider } from '../../models/authentication-provider'; import { AuthenticationProvider } from '../../models/authentication-provider';
import { Loader } from '../base/loader';
import { IApplication } from '../../models/application';
import { RHFInput } from '../base/rhf-input';
declare const Application: IApplication;
interface ProviderFormProps { interface ProviderFormProps {
provider?: AuthenticationProvider, provider?: AuthenticationProvider,
@ -9,7 +15,7 @@ interface ProviderFormProps {
} }
export const ProviderForm: React.FC<ProviderFormProps> = ({ provider, onError, onSuccess }) => { export const ProviderForm: React.FC<ProviderFormProps> = ({ provider, onError, onSuccess }) => {
const { handleSubmit } = useForm<AuthenticationProvider>({ defaultValues: { ...provider } }); const { handleSubmit, register } = useForm<AuthenticationProvider>({ defaultValues: { ...provider } });
const onSubmit: SubmitHandler<AuthenticationProvider> = (data: AuthenticationProvider) => { const onSubmit: SubmitHandler<AuthenticationProvider> = (data: AuthenticationProvider) => {
if (data) { if (data) {
@ -21,7 +27,17 @@ export const ProviderForm: React.FC<ProviderFormProps> = ({ provider, onError, o
return ( return (
<form className="provider-form" onSubmit={handleSubmit(onSubmit)}> <form className="provider-form" onSubmit={handleSubmit(onSubmit)}>
<RHFInput id="provider_name" register={register} />
</form> </form>
); );
}; };
const ProviderFormWrapper: React.FC<ProviderFormProps> = ({ provider, onError, onSuccess }) => {
return (
<Loader>
<ProviderForm provider={provider} onError={onError} onSuccess={onSuccess} />
</Loader>
);
};
Application.Components.component('providerForm', react2angular(ProviderFormWrapper, ['provider', 'onSuccess', 'onError']));