WIP Vendors list table + order parts.

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

@@ -0,0 +1,107 @@
+import { Input, Table } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alphaSort } from "../../utils/sorters";
+export default function VendorsListComponent({
+  selectedVendor,
+  setSelectedVendor,
+  loading,
+  refetch,
+  vendors
+}) {
+  const [state, setState] = useState({
+    sortedInfo: {},
+    filteredInfo: { text: "" }
+  });
+
+  const { t } = useTranslation();
+
+  const columns = [
+    {
+      title: t("vendors.fields.name"),
+      dataIndex: "name",
+      key: "name",
+      sorter: (a, b) => alphaSort(a.name, b.name),
+      sortOrder: state.sortedInfo.columnKey === "name" && state.sortedInfo.order
+    },
+    {
+      title: t("vendors.fields.favorite"),
+      dataIndex: "favorite",
+      key: "favorite"
+    },
+    {
+      title: t("vendors.fields.cost_center"),
+      dataIndex: "cost_center",
+      key: "cost_center",
+      sorter: (a, b) => alphaSort(a.cost_center, b.cost_center),
+      sortOrder:
+        state.sortedInfo.columnKey === "cost_center" && state.sortedInfo.order
+    },
+    {
+      title: t("vendors.fields.street1"),
+      dataIndex: "street1",
+      key: "street1",
+      width: "10%",
+      sorter: (a, b) => alphaSort(a.street1, b.street1),
+      sortOrder:
+        state.sortedInfo.columnKey === "street1" && state.sortedInfo.order
+    },
+    {
+      title: t("vendors.fields.city"),
+      dataIndex: "city",
+      key: "city"
+    }
+  ];
+
+  const handleTableChange = (pagination, filters, sorter) => {
+    setState({ ...state, filteredInfo: filters, sortedInfo: sorter });
+  };
+
+  const handleOnRowClick = record => {
+    if (record) {
+      setSelectedVendor(record);
+      return;
+    }
+    setSelectedVendor(null);
+  };
+
+  //TODO Implement search
+  return (
+    <div>
+      <Table
+        loading={loading}
+        title={() => {
+          return (
+            <Input.Search
+              placeholder={t("general.labels.search")}
+              onSearch={value => {
+                console.log(value);
+              }}
+              enterButton
+            />
+          );
+        }}
+        size="small"
+        pagination={{ position: "top" }}
+        columns={columns.map(item => ({ ...item }))}
+        rowKey="id"
+        onChange={handleTableChange}
+        dataSource={vendors}
+        rowSelection={{
+          onSelect: record => {
+            setSelectedVendor(record);
+          },
+          type: "radio",
+          selectedRowKeys: selectedVendor.id || null
+        }}
+        onRow={(record, rowIndex) => {
+          return {
+            onClick: event => {
+              handleOnRowClick(record);
+            }
+          };
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { useQuery } from "react-apollo";
+import AlertComponent from "../../components/alert/alert.component";
+import { QUERY_ALL_VENDORS, QUERY_VENDOR_BY_ID } from "../../graphql/vendors.queries";
+import VendorsListComponent from "./vendors-list.component";
+
+export default function VendorsListContainer({ selectedVendorState }) {
+  const [selectedVendor, setSelectedVendor] = selectedVendorState;
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_VENDORS, {
+    fetchPolicy: "network-only"
+  });
+
+  const vendorDetail = useQuery(QUERY_VENDOR_BY_ID, {
+    fetchPolicy: "network-only",
+    variables: { id: selectedVendor.id },
+    skip: !selectedVendor.id
+  });
+
+  if (error) return <AlertComponent message={error.message} type="error" />;
+  return (
+    <div>
+      <VendorsListComponent
+        selectedVendor={selectedVendor}
+        setSelectedVendor={setSelectedVendor}
+        loading={loading}
+        refetch={refetch}
+        vendors={data ? data.vendors : null}
+      />
+      {JSON.stringify(vendorDetail && vendorDetail.data)}
+    </div>
+  );
+}