Added base owners list page.
This commit is contained in:
Patrick Fic
@@ -1,4 +1,4 @@
|
||||
<babeledit_project version="1.2" be_version="2.6.1">
|
||||
<babeledit_project be_version="2.6.1" version="1.2">
|
||||
<!--
|
||||
|
||||
BabelEdit project file
|
||||
@@ -4697,6 +4697,27 @@
|
||||
<folder_node>
|
||||
<name>fields</name>
|
||||
<children>
|
||||
<concept_node>
|
||||
<name>address</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>allow_text_message</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
@@ -4718,6 +4739,27 @@
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>name</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
<description></description>
|
||||
<comment></comment>
|
||||
<default_text></default_text>
|
||||
<translations>
|
||||
<translation>
|
||||
<language>en-US</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>es-MX</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
<translation>
|
||||
<language>fr-CA</language>
|
||||
<approved>false</approved>
|
||||
</translation>
|
||||
</translations>
|
||||
</concept_node>
|
||||
<concept_node>
|
||||
<name>ownr_addr1</name>
|
||||
<definition_loaded>false</definition_loaded>
|
||||
|
||||
89
client/src/components/owners-list/owners-list.component.jsx
Normal file
89
client/src/components/owners-list/owners-list.component.jsx
Normal file
@@ -0,0 +1,89 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { alphaSort } from "../../utils/sorters";
|
||||
import { Link } from "react-router-dom";
|
||||
import PhoneFormatter from "../../utils/PhoneFormatter";
|
||||
import { Table, Icon, Input } from "antd";
|
||||
|
||||
export default function OwnersListComponent({ loading, owners, refetch }) {
|
||||
const [state, setState] = useState({
|
||||
sortedInfo: {},
|
||||
filteredInfo: { text: "" }
|
||||
});
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: t("owners.fields.name"),
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
// onFilter: (value, record) => record.ro_number.includes(value),
|
||||
// filteredValue: state.filteredInfo.text || null,
|
||||
sorter: (a, b) => alphaSort(a.ownr_ln, b.ownr_ln),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "name" && state.sortedInfo.order,
|
||||
|
||||
render: (text, record) => (
|
||||
<Link to={"/manage/owners/" + record.id}>
|
||||
{`${record.ownr_fn} ${record.ownr_ln}`}
|
||||
</Link>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ph1"),
|
||||
dataIndex: "ownr_ph1",
|
||||
key: "ownr_ph1",
|
||||
sorter: (a, b) => alphaSort(a.ownr_ph1, b.ownr_ph1),
|
||||
sortOrder:
|
||||
state.sortedInfo.columnKey === "ownr_ph1" && state.sortedInfo.order,
|
||||
render: (text, record) => {
|
||||
return <PhoneFormatter>{record.ownr_ph1}</PhoneFormatter>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.ownr_ea"),
|
||||
dataIndex: "ownr_ea",
|
||||
key: "ownr_ea"
|
||||
},
|
||||
{
|
||||
title: t("owners.fields.address"),
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<div>{`${record.ownr_addr1 || ""} ${record.ownr_addr2 ||
|
||||
""} ${record.ownr_city || ""} ${record.ownr_st ||
|
||||
""} ${record.ownr_zip || ""}`}</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const handleTableChange = (pagination, filters, sorter) => {
|
||||
setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
|
||||
};
|
||||
//TODO Implement searching & pagination
|
||||
return (
|
||||
<Table
|
||||
loading={loading}
|
||||
title={() => {
|
||||
return (
|
||||
<Input.Search
|
||||
placeholder="Search..."
|
||||
onSearch={value => {
|
||||
console.log(value);
|
||||
}}
|
||||
enterButton
|
||||
/>
|
||||
);
|
||||
}}
|
||||
size="small"
|
||||
pagination={{ position: "top" }}
|
||||
columns={columns.map(item => ({ ...item }))}
|
||||
rowKey="id"
|
||||
dataSource={owners}
|
||||
onChange={handleTableChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
20
client/src/components/owners-list/owners-list.container.jsx
Normal file
20
client/src/components/owners-list/owners-list.container.jsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import React from "react";
|
||||
import OwnersListComponent from "./owners-list.component";
|
||||
import { useQuery } from "react-apollo";
|
||||
import AlertComponent from "../alert/alert.component";
|
||||
import { QUERY_ALL_OWNERS } from "../../graphql/owners.queries";
|
||||
|
||||
export default function OwnersListContainer() {
|
||||
const { loading, error, data, refetch } = useQuery(QUERY_ALL_OWNERS, {
|
||||
fetchPolicy: "network-only"
|
||||
});
|
||||
|
||||
if (error) return <AlertComponent message={error.message} type="error" />;
|
||||
return (
|
||||
<OwnersListComponent
|
||||
loading={loading}
|
||||
owners={data ? data.owners : null}
|
||||
refetch={refetch}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -65,3 +65,28 @@ export const UPDATE_OWNER = gql`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const QUERY_ALL_OWNERS = gql`
|
||||
query QUERY_ALL_OWNERS {
|
||||
owners {
|
||||
id
|
||||
allow_text_message
|
||||
created_at
|
||||
ownr_addr1
|
||||
ownr_addr2
|
||||
ownr_co_nm
|
||||
ownr_city
|
||||
ownr_ctry
|
||||
ownr_ea
|
||||
ownr_fn
|
||||
ownr_ph1
|
||||
ownr_ln
|
||||
ownr_ph2
|
||||
ownr_st
|
||||
ownr_title
|
||||
ownr_zip
|
||||
preferred_contact
|
||||
updated_at
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
import OwnersListContainer from "../../components/owners-list/owners-list.container";
|
||||
|
||||
export default function OwnersPageComponent() {
|
||||
return (
|
||||
<div>
|
||||
Owners Page
|
||||
</div>
|
||||
)
|
||||
return <OwnersListContainer />;
|
||||
}
|
||||
|
||||
@@ -295,7 +295,9 @@
|
||||
"noaccess": "The record does not exist or you do not have access to it. "
|
||||
},
|
||||
"fields": {
|
||||
"address": "Address",
|
||||
"allow_text_message": "Permission to Text?",
|
||||
"name": "Name",
|
||||
"ownr_addr1": "Address",
|
||||
"ownr_addr2": "Address 2",
|
||||
"ownr_city": "City",
|
||||
|
||||
@@ -295,7 +295,9 @@
|
||||
"noaccess": "El registro no existe o no tiene acceso a él."
|
||||
},
|
||||
"fields": {
|
||||
"address": "Dirección",
|
||||
"allow_text_message": "Permiso de texto?",
|
||||
"name": "Nombre",
|
||||
"ownr_addr1": "Dirección",
|
||||
"ownr_addr2": "Dirección 2",
|
||||
"ownr_city": "ciudad",
|
||||
|
||||
@@ -295,7 +295,9 @@
|
||||
"noaccess": "L'enregistrement n'existe pas ou vous n'y avez pas accès."
|
||||
},
|
||||
"fields": {
|
||||
"address": "Adresse",
|
||||
"allow_text_message": "Autorisation de texte?",
|
||||
"name": "Prénom",
|
||||
"ownr_addr1": "Adresse",
|
||||
"ownr_addr2": "Adresse 2 ",
|
||||
"ownr_city": "Ville",
|
||||
|
||||
Reference in New Issue
Block a user