EditEntityModal

Basic

Entity : Company

Let's say you want to create a simple EditCompanyModal. So let's take an example how you do it, check it out below.

create a file at components/asgard/companies/EditCompanyModal.tsx

components/asgard/companies/EditCompanyModal.tsx

const EditCompanyModal: FC<ModalProps> = ({ isVisible, onClose, onSuccess, data }) => {
    //Methods
    const onSubmit = async (values: ICompany) => {
        try {
            console.log("VALUES: ", values);
            const respCount = await queryStore.getCount('Company', { where: { code: values.code, 'id !=': values.id, is_deleted: 0 } });
            console.log("RESPONSE: ", respCount);
            if (respCount.success && respCount.data > 0) {
                return toast.error('Company code is already exists!');
            }

            const resp = await queryStore.save('Company', values);
            if (resp.success) {
                toast.success(`Company '${values.name}' successfully updated.`);
                onSuccess();
            }

        } catch (error) {
            
        }
    }
    return (
        <Modal
            isVisible={isVisible}
            onClose={onClose}
            title={'Edit Company'}
            containerStyle={{ maxHeight: 510 }}
        >
            <AForm
                values={data}
                onSubmit={(values: ICompany) => onSubmit(values)}
            >
                <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                    <div>
                        <AFormInput name='name' label='Company Name' type='text' validation={'required'} validationName={'Company Name'} />
                    </div>
                    <div>
                        <AFormInput name='code' label='Company Code' type='text' validation={'required'} validationName={'Company Code'} />
                    </div>
                    <div>
                        <AFormInput name='email' label='Email' type='email' validation={'required|email'} validationName={'Email'}/>
                    </div>
                    <div>
                        <AFormInput name='website' label='Website' type='url' validation='url' hint='http://example.com'/>
                    </div>
                    <div>
                        <AFormInput name='mobile' label='Mobile' type='text' validation='number|max:10|min:10' />
                    </div>
                    <div>
                        <AFormInput name='registration_no' label='Registration No.' type='text'/>
                    </div>

                    <div>
                        <AFormInput name='tax_registration_no' label='Tax Registration No.' type='text' />
                    </div>
                    <div>
                        <AFormInput name='address' label='Address' type='text' />
                    </div>
                    
                    <div className='col-span-2'>
                        <AFormInput name='Edit Company' type='submit' />
                    </div>

                </div>
            </AForm>
        </Modal>
    )
}

The above code will render EditCompanyModal like this.