Dave Richer
@@ -1,52 +1,52 @@
|
||||
import { Checkbox, Col, Row } from "antd";
|
||||
import React, { useContext } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {Checkbox, Col, Row} from "antd";
|
||||
import React, {useContext} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import JobsCreateOwnerInfoNewComponent from "./jobs-create-owner-info.new.component";
|
||||
import JobsCreateOwnerInfoSearchComponent from "./jobs-create-owner-info.search.component";
|
||||
|
||||
const colSpan = {
|
||||
sm: { span: 24 },
|
||||
lg: { span: 12 },
|
||||
sm: {span: 24},
|
||||
lg: {span: 12},
|
||||
};
|
||||
|
||||
export default function JobsCreateOwnerInfoComponent({ loading, owners }) {
|
||||
const { t } = useTranslation();
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
export default function JobsCreateOwnerInfoComponent({loading, owners}) {
|
||||
const {t} = useTranslation();
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<Checkbox
|
||||
defaultChecked={state.owner.new}
|
||||
checked={state.owner.new}
|
||||
onChange={() => {
|
||||
setState({
|
||||
...state,
|
||||
owner: {
|
||||
...state.owner,
|
||||
new: !state.owner.new,
|
||||
selectedid: null,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("jobs.labels.create.newowner")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={24}>
|
||||
<Checkbox
|
||||
defaultChecked={state.owner.new}
|
||||
checked={state.owner.new}
|
||||
onChange={() => {
|
||||
setState({
|
||||
...state,
|
||||
owner: {
|
||||
...state.owner,
|
||||
new: !state.owner.new,
|
||||
selectedid: null,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
{t("jobs.labels.create.newowner")}
|
||||
</Checkbox>
|
||||
</Col>
|
||||
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateOwnerInfoSearchComponent
|
||||
loading={loading}
|
||||
owners={owners}
|
||||
/>
|
||||
</Col>
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateOwnerInfoSearchComponent
|
||||
loading={loading}
|
||||
owners={owners}
|
||||
/>
|
||||
</Col>
|
||||
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateOwnerInfoNewComponent />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
<Col {...colSpan}>
|
||||
<JobsCreateOwnerInfoNewComponent/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
import { useQuery } from "@apollo/client";
|
||||
import React, { useContext } from "react";
|
||||
import { QUERY_SEARCH_OWNER_BY_IDX } from "../../graphql/owners.queries";
|
||||
import {useQuery} from "@apollo/client";
|
||||
import React, {useContext} from "react";
|
||||
import {QUERY_SEARCH_OWNER_BY_IDX} from "../../graphql/owners.queries";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import JobsCreateOwnerInfoComponent from "./jobs-create-owner-info.component";
|
||||
|
||||
export default function JobsCreateOwnerContainer() {
|
||||
const [state] = useContext(JobCreateContext);
|
||||
const { loading, error, data } = useQuery(QUERY_SEARCH_OWNER_BY_IDX, {
|
||||
variables: { search: `%${state.owner.search}%` },
|
||||
skip: !state.owner.search,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
const [state] = useContext(JobCreateContext);
|
||||
const {loading, error, data} = useQuery(QUERY_SEARCH_OWNER_BY_IDX, {
|
||||
variables: {search: `%${state.owner.search}%`},
|
||||
skip: !state.owner.search,
|
||||
fetchPolicy: "network-only",
|
||||
nextFetchPolicy: "network-only",
|
||||
});
|
||||
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
return (
|
||||
<JobsCreateOwnerInfoComponent
|
||||
loading={loading}
|
||||
owners={data ? data.search_owners : null}
|
||||
/>
|
||||
);
|
||||
if (error) return <AlertComponent message={error.message} type="error"/>;
|
||||
return (
|
||||
<JobsCreateOwnerInfoComponent
|
||||
loading={loading}
|
||||
owners={data ? data.search_owners : null}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,180 +1,178 @@
|
||||
import { Form, Input, Switch } from "antd";
|
||||
import React, { useContext } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {Form, Input, Switch} from "antd";
|
||||
import React, {useContext} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import FormItemEmail from "../form-items-formatted/email-form-item.component";
|
||||
import FormItemPhone, {
|
||||
PhoneItemFormatterValidation,
|
||||
} from "../form-items-formatted/phone-form-item.component";
|
||||
import FormItemPhone, {PhoneItemFormatterValidation,} from "../form-items-formatted/phone-form-item.component";
|
||||
import LayoutFormRow from "../layout-form-row/layout-form-row.component";
|
||||
|
||||
export default function JobsCreateOwnerInfoNewComponent() {
|
||||
const [state] = useContext(JobCreateContext);
|
||||
const [state] = useContext(JobCreateContext);
|
||||
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow header={t("owners.forms.name")} grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ln")}
|
||||
name={["owner", "data", "ownr_ln"]}
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
required:
|
||||
state.owner.new &&
|
||||
(!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
|
||||
getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
|
||||
//message: t("general.validation.required"),
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_fn")}
|
||||
name={["owner", "data", "ownr_fn"]}
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
required:
|
||||
state.owner.new &&
|
||||
(!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
|
||||
getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
|
||||
//message: t("general.validation.required"),
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
const {t} = useTranslation();
|
||||
return (
|
||||
<div>
|
||||
<LayoutFormRow header={t("owners.forms.name")} grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ln")}
|
||||
name={["owner", "data", "ownr_ln"]}
|
||||
rules={[
|
||||
({getFieldValue}) => ({
|
||||
required:
|
||||
state.owner.new &&
|
||||
(!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
|
||||
getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
|
||||
//message: t("general.validation.required"),
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_fn")}
|
||||
name={["owner", "data", "ownr_fn"]}
|
||||
rules={[
|
||||
({getFieldValue}) => ({
|
||||
required:
|
||||
state.owner.new &&
|
||||
(!getFieldValue(["owner", "data", "ownr_co_nm"]) ||
|
||||
getFieldValue(["owner", "data", "ownr_co_nm"]) === ""),
|
||||
//message: t("general.validation.required"),
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_title")}
|
||||
name={["owner", "data", "ownr_title"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_co_nm")}
|
||||
name={["owner", "data", "ownr_co_nm"]}
|
||||
rules={[
|
||||
({ getFieldValue }) => ({
|
||||
required:
|
||||
state.owner.new &&
|
||||
(!getFieldValue(["owner", "data", "ownr_ln"]) ||
|
||||
!getFieldValue(["owner", "data", "ownr_fn"]) ||
|
||||
getFieldValue(["owner", "data", "ownr_ln"]) === "" ||
|
||||
getFieldValue(["owner", "data", "ownr_fn"]) === ""),
|
||||
//message: t("general.validation.required"),
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_title")}
|
||||
name={["owner", "data", "ownr_title"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_co_nm")}
|
||||
name={["owner", "data", "ownr_co_nm"]}
|
||||
rules={[
|
||||
({getFieldValue}) => ({
|
||||
required:
|
||||
state.owner.new &&
|
||||
(!getFieldValue(["owner", "data", "ownr_ln"]) ||
|
||||
!getFieldValue(["owner", "data", "ownr_fn"]) ||
|
||||
getFieldValue(["owner", "data", "ownr_ln"]) === "" ||
|
||||
getFieldValue(["owner", "data", "ownr_fn"]) === ""),
|
||||
//message: t("general.validation.required"),
|
||||
}),
|
||||
]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow header={t("owners.forms.address")} grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_addr1")}
|
||||
name={["owner", "data", "ownr_addr1"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_addr2")}
|
||||
name={["owner", "data", "ownr_addr2"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow header={t("owners.forms.address")} grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_addr1")}
|
||||
name={["owner", "data", "ownr_addr1"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_addr2")}
|
||||
name={["owner", "data", "ownr_addr2"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_city")}
|
||||
name={["owner", "data", "ownr_city"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_st")}
|
||||
name={["owner", "data", "ownr_st"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_zip")}
|
||||
name={["owner", "data", "ownr_zip"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ctry")}
|
||||
name={["owner", "data", "ownr_ctry"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_city")}
|
||||
name={["owner", "data", "ownr_city"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_st")}
|
||||
name={["owner", "data", "ownr_st"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_zip")}
|
||||
name={["owner", "data", "ownr_zip"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ctry")}
|
||||
name={["owner", "data", "ownr_ctry"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
|
||||
<LayoutFormRow header={t("owners.forms.contact")} grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ea")}
|
||||
rules={[
|
||||
{
|
||||
type: "email",
|
||||
message: "This is not a valid email address.",
|
||||
},
|
||||
]}
|
||||
name={["owner", "data", "ownr_ea"]}
|
||||
>
|
||||
<FormItemEmail
|
||||
//email={form.getFieldValue("ownr_ea")}
|
||||
disabled={!state.owner.new}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ph1")}
|
||||
name={["owner", "data", "ownr_ph1"]}
|
||||
rules={[
|
||||
({ getFieldValue }) =>
|
||||
PhoneItemFormatterValidation(
|
||||
getFieldValue,
|
||||
"owner.data.ownr_ph1"
|
||||
),
|
||||
]}
|
||||
>
|
||||
<FormItemPhone disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ph2")}
|
||||
name={["owner", "data", "ownr_ph2"]}
|
||||
rules={[
|
||||
({ getFieldValue }) =>
|
||||
PhoneItemFormatterValidation(
|
||||
getFieldValue,
|
||||
"owner.data.ownr_ph2"
|
||||
),
|
||||
]}
|
||||
>
|
||||
<FormItemPhone disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.preferred_contact")}
|
||||
name={["owner", "data", "preferred_contact"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.allow_text_message")}
|
||||
valuePropName="checked"
|
||||
name={["owner", "data", "allow_text_message"]}
|
||||
>
|
||||
<Switch disabled={!state.owner.new} />
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</div>
|
||||
);
|
||||
<LayoutFormRow header={t("owners.forms.contact")} grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ea")}
|
||||
rules={[
|
||||
{
|
||||
type: "email",
|
||||
message: "This is not a valid email address.",
|
||||
},
|
||||
]}
|
||||
name={["owner", "data", "ownr_ea"]}
|
||||
>
|
||||
<FormItemEmail
|
||||
//email={form.getFieldValue("ownr_ea")}
|
||||
disabled={!state.owner.new}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ph1")}
|
||||
name={["owner", "data", "ownr_ph1"]}
|
||||
rules={[
|
||||
({getFieldValue}) =>
|
||||
PhoneItemFormatterValidation(
|
||||
getFieldValue,
|
||||
"owner.data.ownr_ph1"
|
||||
),
|
||||
]}
|
||||
>
|
||||
<FormItemPhone disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.ownr_ph2")}
|
||||
name={["owner", "data", "ownr_ph2"]}
|
||||
rules={[
|
||||
({getFieldValue}) =>
|
||||
PhoneItemFormatterValidation(
|
||||
getFieldValue,
|
||||
"owner.data.ownr_ph2"
|
||||
),
|
||||
]}
|
||||
>
|
||||
<FormItemPhone disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
<LayoutFormRow grow>
|
||||
<Form.Item
|
||||
label={t("owners.fields.preferred_contact")}
|
||||
name={["owner", "data", "preferred_contact"]}
|
||||
>
|
||||
<Input disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("owners.fields.allow_text_message")}
|
||||
valuePropName="checked"
|
||||
name={["owner", "data", "allow_text_message"]}
|
||||
>
|
||||
<Switch disabled={!state.owner.new}/>
|
||||
</Form.Item>
|
||||
</LayoutFormRow>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,165 +1,165 @@
|
||||
import { Card, Input, Table } from "antd";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {Card, Input, Table} from "antd";
|
||||
import React, {useContext, useState} from "react";
|
||||
import {useTranslation} from "react-i18next";
|
||||
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
|
||||
import PhoneFormatter from "../../utils/PhoneFormatter";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import {alphaSort} from "../../utils/sorters";
|
||||
|
||||
export default function JobsCreateOwnerInfoSearchComponent({
|
||||
loading,
|
||||
owners,
|
||||
}) {
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
const [tableState, setTableState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: { text: "" },
|
||||
});
|
||||
loading,
|
||||
owners,
|
||||
}) {
|
||||
const [state, setState] = useContext(JobCreateContext);
|
||||
const [tableState, setTableState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: {text: ""},
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
const {t} = useTranslation();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("owners.fields.ownr_ln"),
|
||||
dataIndex: "ownr_ln",
|
||||
key: "ownr_ln",
|
||||
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ln" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_fn"),
|
||||
dataIndex: "ownr_fn",
|
||||
key: "ownr_fn",
|
||||
sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_fn" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_co_nm"),
|
||||
dataIndex: "ownr_co_nm",
|
||||
key: "ownr_co_nm",
|
||||
sorter: (a, b) => alphaSort(a.ownr_co_nm, b.ownr_co_nm),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_co_nm" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_addr1"),
|
||||
dataIndex: "ownr_addr1",
|
||||
key: "ownr_addr1",
|
||||
sorter: (a, b) => alphaSort(a.ownr_addr1, b.ownr_addr1),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_addr1" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_city"),
|
||||
dataIndex: "ownr_city",
|
||||
key: "ownr_city",
|
||||
sorter: (a, b) => alphaSort(a.ownr_city, b.ownr_city),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_city" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ea"),
|
||||
dataIndex: "ownr_ea",
|
||||
key: "ownr_ea",
|
||||
sorter: (a, b) => alphaSort(a.ownr_ea, b.ownr_ea),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ea" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ph1"),
|
||||
dataIndex: "ownr_ph1",
|
||||
key: "ownr_ph1",
|
||||
render: (text, record) => (
|
||||
<PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
|
||||
),
|
||||
sorter: (a, b) => alphaSort(a.ownr_ph1, b.ownr_ph1),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ph1" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ph2"),
|
||||
dataIndex: "ownr_ph2",
|
||||
key: "ownr_ph2",
|
||||
render: (text, record) => (
|
||||
<PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>
|
||||
),
|
||||
sorter: (a, b) => alphaSort(a.ownr_ph2, b.ownr_ph2),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ph2" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
];
|
||||
const columns = [
|
||||
{
|
||||
title: t("owners.fields.ownr_ln"),
|
||||
dataIndex: "ownr_ln",
|
||||
key: "ownr_ln",
|
||||
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ln" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_fn"),
|
||||
dataIndex: "ownr_fn",
|
||||
key: "ownr_fn",
|
||||
sorter: (a, b) => alphaSort(a.ownr_fn, b.ownr_fn),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_fn" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_co_nm"),
|
||||
dataIndex: "ownr_co_nm",
|
||||
key: "ownr_co_nm",
|
||||
sorter: (a, b) => alphaSort(a.ownr_co_nm, b.ownr_co_nm),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_co_nm" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_addr1"),
|
||||
dataIndex: "ownr_addr1",
|
||||
key: "ownr_addr1",
|
||||
sorter: (a, b) => alphaSort(a.ownr_addr1, b.ownr_addr1),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_addr1" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_city"),
|
||||
dataIndex: "ownr_city",
|
||||
key: "ownr_city",
|
||||
sorter: (a, b) => alphaSort(a.ownr_city, b.ownr_city),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_city" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ea"),
|
||||
dataIndex: "ownr_ea",
|
||||
key: "ownr_ea",
|
||||
sorter: (a, b) => alphaSort(a.ownr_ea, b.ownr_ea),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ea" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ph1"),
|
||||
dataIndex: "ownr_ph1",
|
||||
key: "ownr_ph1",
|
||||
render: (text, record) => (
|
||||
<PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>
|
||||
),
|
||||
sorter: (a, b) => alphaSort(a.ownr_ph1, b.ownr_ph1),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ph1" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ph2"),
|
||||
dataIndex: "ownr_ph2",
|
||||
key: "ownr_ph2",
|
||||
render: (text, record) => (
|
||||
<PhoneFormatter>{record.ownr_ph2}</PhoneFormatter>
|
||||
),
|
||||
sorter: (a, b) => alphaSort(a.ownr_ph2, b.ownr_ph2),
|
||||
sortOrder:
|
||||
tableState.sortedInfo.columnKey === "ownr_ph2" &&
|
||||
tableState.sortedInfo.order,
|
||||
},
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setTableState({ ...tableState, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setTableState({...tableState, filteredInfo: filters, sortedInfo: sorter});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
extra={
|
||||
<Input.Search
|
||||
placeholder={t("general.labels.search")}
|
||||
onSearch={(value) => {
|
||||
setState({
|
||||
...state,
|
||||
owner: { ...state.owner, search: value },
|
||||
});
|
||||
}}
|
||||
enterButton
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
loading={loading}
|
||||
scroll={{ x: true }}
|
||||
pagination={{ position: "top" }}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
dataSource={owners}
|
||||
onChange={handleTableChange}
|
||||
rowSelection={{
|
||||
onSelect: (props) => {
|
||||
setState({
|
||||
...state,
|
||||
owner: { ...state.owner, new: false, selectedid: props.id },
|
||||
});
|
||||
},
|
||||
type: "radio",
|
||||
selectedRowKeys: [state.owner.selectedid],
|
||||
}}
|
||||
onRow={(record, rowIndex) => {
|
||||
return {
|
||||
onClick: (event) => {
|
||||
if (record) {
|
||||
if (record.id) {
|
||||
setState({
|
||||
...state,
|
||||
owner: {
|
||||
...state.owner,
|
||||
new: false,
|
||||
selectedid: record.id,
|
||||
return (
|
||||
<Card
|
||||
extra={
|
||||
<Input.Search
|
||||
placeholder={t("general.labels.search")}
|
||||
onSearch={(value) => {
|
||||
setState({
|
||||
...state,
|
||||
owner: {...state.owner, search: value},
|
||||
});
|
||||
}}
|
||||
enterButton
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
loading={loading}
|
||||
scroll={{x: true}}
|
||||
pagination={{position: "top"}}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
dataSource={owners}
|
||||
onChange={handleTableChange}
|
||||
rowSelection={{
|
||||
onSelect: (props) => {
|
||||
setState({
|
||||
...state,
|
||||
owner: {...state.owner, new: false, selectedid: props.id},
|
||||
});
|
||||
},
|
||||
});
|
||||
type: "radio",
|
||||
selectedRowKeys: [state.owner.selectedid],
|
||||
}}
|
||||
onRow={(record, rowIndex) => {
|
||||
return {
|
||||
onClick: (event) => {
|
||||
if (record) {
|
||||
if (record.id) {
|
||||
setState({
|
||||
...state,
|
||||
owner: {
|
||||
...state.owner,
|
||||
new: false,
|
||||
selectedid: record.id,
|
||||
},
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
setState({
|
||||
...state,
|
||||
owner: { ...state.owner, selectedid: null },
|
||||
});
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
return;
|
||||
}
|
||||
}
|
||||
setState({
|
||||
...state,
|
||||
owner: {...state.owner, selectedid: null},
|
||||
});
|
||||
},
|
||||
};
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user