Added some additional save indiactors BOD-134

This commit is contained in:
Patrick Fic
2020-08-21 17:17:36 -07:00
parent 4a92ef03cc
commit dd1016eef3
13 changed files with 127 additions and 81 deletions

View File

@@ -6,35 +6,37 @@ import FormItemEmail from "../form-items-formatted/email-form-item.component";
import FormItemPhone from "../form-items-formatted/phone-form-item.component";
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
export default function OwnerDetailFormComponent({ form }) {
export default function OwnerDetailFormComponent({ form, loading }) {
const { t } = useTranslation();
const { getFieldValue } = form;
return (
<div>
<div className='imex-flex-row imex-flex-row__flex-space-around'>
<div className="imex-flex-row imex-flex-row__flex-space-around">
<Button
className='imex-flex-row__margin-large'
type='primary'
key='submit'
htmlType='submit'>
className="imex-flex-row__margin-large"
type="primary"
key="submit"
loading={loading}
htmlType="submit"
>
{t("general.actions.save")}
</Button>
<div className='imex-flex-row__grow imex-flex-row__margin-large'>
<div className="imex-flex-row__grow imex-flex-row__margin-large">
<FormFieldsChanged form={form} />
</div>
</div>
<LayoutFormRow header={t("owners.forms.name")}>
<Form.Item label={t("owners.fields.ownr_title")} name='ownr_title'>
<Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_ln")} name='ownr_ln'>
<Form.Item label={t("owners.fields.ownr_ln")} name="ownr_ln">
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_fn")} name='ownr_fn'>
<Form.Item label={t("owners.fields.ownr_fn")} name="ownr_fn">
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_co_nm")} name='ownr_co_nm'>
<Form.Item label={t("owners.fields.ownr_co_nm")} name="ownr_co_nm">
<Input />
</Form.Item>
</LayoutFormRow>
@@ -42,52 +44,56 @@ export default function OwnerDetailFormComponent({ form }) {
<LayoutFormRow header={t("owners.forms.address")}>
<Form.Item
label={t("owners.fields.ownr_addr1")}
name='ownr_addr1'
name="ownr_addr1"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_addr2")} name='ownr_addr2'>
<Form.Item label={t("owners.fields.ownr_addr2")} name="ownr_addr2">
<Input />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_city")}
name='ownr_city'
name="ownr_city"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_st")}
name='ownr_st'
name="ownr_st"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_zip")}
name='ownr_zip'
name="ownr_zip"
rules={[
{
required: true,
message: t("general.validation.required"),
},
]}>
]}
>
<Input />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_ctry")} name='ownr_ctry'>
<Form.Item label={t("owners.fields.ownr_ctry")} name="ownr_ctry">
<Input />
</Form.Item>
</LayoutFormRow>
@@ -95,27 +101,30 @@ export default function OwnerDetailFormComponent({ form }) {
<LayoutFormRow header={t("owners.forms.contact")}>
<Form.Item
label={t("owners.fields.allow_text_message")}
name='allow_text_message'
valuePropName='checked'>
name="allow_text_message"
valuePropName="checked"
>
<Switch />
</Form.Item>
<Form.Item
label={t("owners.fields.ownr_ea")}
name='ownr_ea'
name="ownr_ea"
rules={[
{
type: "email",
message: "This is not a valid email address.",
},
]}>
]}
>
<FormItemEmail email={getFieldValue("ownr_ea")} />
</Form.Item>
<Form.Item label={t("owners.fields.ownr_ph1")} name='ownr_ph1'>
<Form.Item label={t("owners.fields.ownr_ph1")} name="ownr_ph1">
<FormItemPhone customInput={Input} />
</Form.Item>
<Form.Item
label={t("owners.fields.preferred_contact")}
name='preferred_contact'>
name="preferred_contact"
>
<Input />
</Form.Item>
</LayoutFormRow>

View File

@@ -1,5 +1,5 @@
import { Form, notification } from "antd";
import React from "react";
import React, { useState } from "react";
import { useMutation } from "@apollo/react-hooks";
import { useTranslation } from "react-i18next";
import { UPDATE_OWNER } from "../../graphql/owners.queries";
@@ -8,10 +8,11 @@ import OwnerDetailFormComponent from "./owner-detail-form.component";
function OwnerDetailFormContainer({ owner, refetch }) {
const { t } = useTranslation();
const [form] = Form.useForm();
const [loading, setLoading] = useState(false);
const [updateOwner] = useMutation(UPDATE_OWNER);
const handleFinish = async (values) => {
setLoading(true);
const result = await updateOwner({
variables: { ownerId: owner.id, owner: values },
});
@@ -32,6 +33,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
if (refetch) await refetch();
form.resetFields();
form.resetFields();
setLoading(false);
};
return (
@@ -42,7 +44,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
layout="vertical"
initialValues={owner}
>
<OwnerDetailFormComponent form={form} />
<OwnerDetailFormComponent loading={loading} form={form} />
</Form>
);
}