WIP Vendors list table + order parts.

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -5,7 +5,11 @@ import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
 import { notification } from "antd";
 
-export default function AllocationsAssignmentContainer({ jobLineId, hours }) {
+export default function AllocationsAssignmentContainer({
+  jobLineId,
+  hours,
+  refetch
+}) {
   const visibilityState = useState(false);
   const { t } = useTranslation();
   const [assignment, setAssignment] = useState({
@@ -22,7 +26,7 @@ export default function AllocationsAssignmentContainer({ jobLineId, hours }) {
       });
       //TODO: Better way to reset the field decorators?
       visibilityState[1](false);
-      //refetch().then(r => form.resetFields());
+      if (refetch) refetch();
     });
   };
 

client/src/components/header/header.component.jsx

@@ -71,12 +71,16 @@ export default ({
               </Link>
             </Menu.Item>
           </Menu.SubMenu>
-
-          <Menu.Item key="shop">
-          <Link to="/manage/shop">
-            {t("menus.header.shop")}
-          </Link>
-        </Menu.Item>
+          <Menu.SubMenu title={t("menus.header.shop")}>
+            <Menu.Item key="shop">
+              <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
+            </Menu.Item>
+            <Menu.Item key="shop-vendors">
+              <Link to="/manage/shop/vendors">
+                {t("menus.header.shop_vendors")}
+              </Link>
+            </Menu.Item>
+          </Menu.SubMenu>
 
           <Menu.SubMenu
             title={

client/src/components/job-detail-lines/job-lines.component.jsx

@@ -8,6 +8,8 @@ import AllocationsAssignmentContainer from "../allocations-assignment/allocation
 import PartsOrderModalContainer from "../parts-order-modal/parts-order-modal.container";
 
 export default function JobLinesComponent({
+  loading,
+  refetch,
   jobLines,
   setSearchText,
   selectedLines,
@@ -18,7 +20,7 @@ export default function JobLinesComponent({
     sortedInfo: {}
   });
   const { t } = useTranslation();
-  const [partsModalVisible, setPartsModalVisible] = partsOrderModalVisible;
+  const setPartsModalVisible = partsOrderModalVisible[1];
   const columns = [
     {
       title: t("joblines.fields.unq_seq"),
@@ -126,6 +128,7 @@ export default function JobLinesComponent({
             : null}
           <AllocationsAssignmentContainer
             key={record.id}
+            refetch={refetch}
             jobLineId={record.id}
             hours={record.mod_lb_hrs}
           />
@@ -187,6 +190,7 @@ export default function JobLinesComponent({
           );
         }}
         {...formItemLayout}
+        loading={loading}
         size="small"
         pagination={{ position: "bottom", defaultPageSize: 50 }}
         rowSelection={{

client/src/components/job-detail-lines/job-lines.container.jsx

@@ -8,7 +8,7 @@ import JobLinesComponent from "./job-lines.component";
 //export default Form.create({ name: "JobsDetailJobLines" })(
 
 export default function JobLinesContainer({ jobId }) {
-  const { loading, error, data } = useQuery(GET_JOB_LINES_BY_PK, {
+  const { loading, error, data, refetch } = useQuery(GET_JOB_LINES_BY_PK, {
     variables: { id: jobId },
     fetchPolicy: "network-only"
   });
@@ -21,6 +21,7 @@ export default function JobLinesContainer({ jobId }) {
   return (
     <JobLinesComponent
       loading={loading}
+      refetch={refetch}
       jobLines={
         data && data.joblines
           ? searchText

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -5,7 +5,7 @@ export default function PartsOrderModalContainer({
   partsOrderModalVisible,
   linesToOrder
 }) {
-  console.log("partsord", partsOrderModalVisible);
+
   const [modalVisible, setModalVisible] = partsOrderModalVisible;
   return (
     <Modal visible={modalVisible} onCancel={() => setModalVisible(false)}>

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