Added base owners list page.

bodyshop_translations.babel

@@ -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>

client/src/components/owners-list/owners-list.component.jsx

@@ -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}
+    />
+  );
+}

client/src/components/owners-list/owners-list.container.jsx

@@ -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}
+    />
+  );
+}

client/src/graphql/owners.queries.js

@@ -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
+    }
+  }
+`;

client/src/pages/owners/owners.page.component.jsx

@@ -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 (
+  return <OwnersListContainer />;
-        <div>
-            Owners Page
-        </div>
-    )
 }

client/src/translations/en_us/common.json

@@ -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",

client/src/translations/es/common.json

@@ -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",

client/src/translations/fr/common.json

@@ -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",