Fixed vendor issues + new logos

bodyshop_translations.babel

@@ -24450,6 +24450,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>shop-vendors</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>timetickets</name>
                                         <definition_loaded>false</definition_loaded>

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

@@ -69,6 +69,7 @@ function Header({
     <Menu
       mode="horizontal"
       theme="light"
+      style={{ backgroundColor: "#eee" }}
       className="header-main-menu"
       selectedKeys={[selectedHeader]}
       onClick={handleMenuClick}

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

@@ -1,12 +1,14 @@
 import { DeleteFilled } from "@ant-design/icons";
-import { Button, Form, Input, InputNumber, Select } from "antd";
+import { Button, Form, Input, InputNumber, Select, Space } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import InputNumberCalculator from "../form-input-number-calculator/form-input-number-calculator.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function VendorsFormComponent({
   form,
+  formLoading,
   handleDelete,
   responsibilityCenters,
 }) {
@@ -14,12 +16,91 @@ export default function VendorsFormComponent({
   const { getFieldValue } = form;
   return (
     <div>
-      <Button htmlType="submit" type="primary">
+      <Space>
-        {t("general.actions.save")}
+        <Button
-      </Button>
+          onClick={() => form.submit()}
-      <Button type="danger" onClick={handleDelete}>
+          type="primary"
-        {t("general.actions.delete")}
+          loading={formLoading}
-      </Button>
+        >
+          {t("general.actions.save")}
+        </Button>
+        <Button type="danger" onClick={handleDelete} loading={formLoading}>
+          {t("general.actions.delete")}
+        </Button>
+      </Space>
+      <LayoutFormRow grow>
+        <Form.Item label={t("vendors.fields.name")} name="name">
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("vendors.fields.email")}
+          rules={[
+            {
+              type: "email",
+              message: t("general.validation.invalidemail"),
+            },
+          ]}
+          name="email"
+        >
+          <FormItemEmail email={getFieldValue("email")} />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        <Form.Item label={t("vendors.fields.street1")} name="street1">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("vendors.fields.street2")} name="street2">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("vendors.fields.city")} name="city">
+          <Input />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow grow>
+        {" "}
+        <Form.Item label={t("vendors.fields.state")} name="state">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("vendors.fields.zip")} name="zip">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("vendors.fields.country")} name="country">
+          <Input />
+        </Form.Item>
+      </LayoutFormRow>
+      <LayoutFormRow>
+        <Form.Item label={t("vendors.fields.discount")} name="discount">
+          <InputNumberCalculator />
+        </Form.Item>
+        <Form.Item label={t("vendors.fields.terms")} name="terms">
+          <Input />
+        </Form.Item>
+        <Form.Item label={t("vendors.fields.due_date")} name="due_date">
+          <InputNumber />
+        </Form.Item>
+        <Form.Item label={t("vendors.fields.taxid")} name="taxid">
+          <Input />
+        </Form.Item>
+        <Form.Item
+          label={t("vendors.fields.prompt_discount")}
+          name="prompt_discount"
+        >
+          <InputNumberCalculator />
+        </Form.Item>
+        <Form.Item
+          label={t("vendors.fields.cost_center")}
+          rules={[
+            { required: true, message: t("general.validation.required") },
+          ]}
+          name="cost_center"
+        >
+          <Select style={{ width: "150px" }}>
+            {responsibilityCenters.costs.map((item) => (
+              <Select.Option key={item.name}>{item.name}</Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      </LayoutFormRow>
 
       <Form.List name="favorite">
         {(fields, { add, remove }) => {
@@ -65,72 +146,6 @@ export default function VendorsFormComponent({
           );
         }}
       </Form.List>
-
-      <Form.Item label={t("vendors.fields.zip")} name="zip">
-        <Input />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.terms")} name="terms">
-        <Input />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.taxid")} name="taxid">
-        <Input />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.street1")} name="street1">
-        <Input />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.street2")} name="street2">
-        <Input />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.state")} name="state">
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("vendors.fields.prompt_discount")}
-        name="prompt_discount"
-      >
-        <InputNumberCalculator />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.name")} name="name">
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("vendors.fields.email")}
-        rules={[
-          {
-            type: "email",
-            message: t("general.validation.invalidemail"),
-          },
-        ]}
-        name="email"
-      >
-        <FormItemEmail email={getFieldValue("email")} />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.due_date")} name="due_date">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.display_name")} name="display_name">
-        <Input />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.discount")} name="discount">
-        <InputNumberCalculator />
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.country")} name="country">
-        <Input />
-      </Form.Item>
-      <Form.Item
-        label={t("vendors.fields.cost_center")}
-        rules={[{ required: true, message: t("general.validation.required") }]}
-        name="cost_center"
-      >
-        <Select style={{ width: "150px" }}>
-          {responsibilityCenters.costs.map((item) => (
-            <Select.Option key={item.name}>{item.name}</Select.Option>
-          ))}
-        </Select>
-      </Form.Item>
-      <Form.Item label={t("vendors.fields.city")} name="city">
-        <Input />
-      </Form.Item>
     </div>
   );
 }

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

@@ -1,12 +1,17 @@
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import { Form, notification } from "antd";
 import queryString from "query-string";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import { DELETE_VENDOR, INSERT_NEW_VENDOR, QUERY_VENDOR_BY_ID, UPDATE_VENDOR } from "../../graphql/vendors.queries";
+import {
+  DELETE_VENDOR,
+  INSERT_NEW_VENDOR,
+  QUERY_VENDOR_BY_ID,
+  UPDATE_VENDOR,
+} from "../../graphql/vendors.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -19,7 +24,7 @@ const mapStateToProps = createStructuredSelector({
 function VendorsFormContainer({ refetch, bodyshop }) {
   const search = queryString.parse(useLocation().search);
   const { selectedvendor } = search;
-
+  const [formLoading, setFormLoading] = useState(false);
   const [form] = Form.useForm();
   const { t } = useTranslation();
   const { loading, error, data } = useQuery(QUERY_VENDOR_BY_ID, {
@@ -32,6 +37,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
   const [insertvendor] = useMutation(INSERT_NEW_VENDOR);
   const [deleteVendor] = useMutation(DELETE_VENDOR);
   const handleDelete = () => {
+    setFormLoading(true);
     deleteVendor({ variables: { id: selectedvendor } })
       .then((r) => {
         notification["success"]({
@@ -45,9 +51,11 @@ function VendorsFormContainer({ refetch, bodyshop }) {
           message: t("vendors.errors.deleting"),
         });
       });
+    setFormLoading(false);
   };
 
   const handleFinish = (values) => {
+    setFormLoading(true);
     if (selectedvendor && selectedvendor !== "new") {
       //It's a vendor to update.
       updateVendor({
@@ -85,6 +93,7 @@ function VendorsFormContainer({ refetch, bodyshop }) {
           });
         });
     }
+    setFormLoading(false);
   };
 
   useEffect(() => {
@@ -92,16 +101,19 @@ function VendorsFormContainer({ refetch, bodyshop }) {
   }, [data, form, selectedvendor]);
 
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
   return (
     <Form
       onFinish={handleFinish}
       form={form}
-      autoComplete='new-password'
+      layout="vertical"
-      initialValues={data ? data.vendors_by_pk : null}>
+      autoComplete="new-password"
+      initialValues={data ? data.vendors_by_pk : null}
+    >
       {selectedvendor ? (
         <VendorsFormComponent
           form={form}
+          formLoading={formLoading}
           handleDelete={handleDelete}
           responsibilityCenters={bodyshop.md_responsibility_centers || null}
         />

client/src/graphql/vendors.queries.js

@@ -14,7 +14,6 @@ export const QUERY_VENDOR_BY_ID = gql`
       favorite
       email
       due_date
-      display_name
       discount
       country
       cost_center

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

@@ -158,7 +158,7 @@ export function Manage({ match, conflict }) {
 
   return (
     <Layout className="layout-container">
-      <Header style={{ background: "#fff" }}>
+      <Header style={{ background: "azure" }}>
         <HeaderContainer />
       </Header>
       <Content className="content-container">

client/src/pages/shop-vendor/shop-vendor.page.component.jsx

@@ -1,12 +1,28 @@
+import { Col, Row } from "antd";
 import React from "react";
-import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
 import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
+import VendorsListContainer from "../../components/vendors-list/vendors-list.container";
+
+const listSpan = {
+  md: { span: 24 },
+  lg: { span: 8 },
+};
+const formSapn = {
+  md: { span: 24 },
+  lg: { span: 16 },
+};
 
 export default function ShopVendorPageComponent() {
   return (
     <div>
-      <VendorsListContainer />
+      <Row gutter={[16, 16]}>
-      <VendorsFormContainer />
+        <Col {...listSpan}>
+          <VendorsListContainer />
+        </Col>
+        <Col {...formSapn}>
+          <VendorsFormContainer />
+        </Col>
+      </Row>
     </div>
   );
 }

client/src/translations/en_us/common.json

@@ -1514,6 +1514,7 @@
 				"shop": "Manage my Shop ({{shopname}})",
 				"shop-csi": "CSI Responses",
 				"shop-templates": "Shop Templates",
+				"shop-vendors": "Vendors",
 				"timetickets": "Time Tickets",
 				"vehicle-details": "Vehicle: {{vehicle}}",
 				"vehicles": "Vehicles"

client/src/translations/es/common.json

@@ -1514,6 +1514,7 @@
 				"shop": "",
 				"shop-csi": "",
 				"shop-templates": "",
+				"shop-vendors": "",
 				"timetickets": "",
 				"vehicle-details": "",
 				"vehicles": ""

client/src/translations/fr/common.json

@@ -1514,6 +1514,7 @@
 				"shop": "",
 				"shop-csi": "",
 				"shop-templates": "",
+				"shop-vendors": "",
 				"timetickets": "",
 				"vehicle-details": "",
 				"vehicles": ""

hasura/migrations/1601941700206_alter_table_public_vendors_drop_column_display_name/down.yaml

@@ -0,0 +1,10 @@
+- args:
+    cascade: false
+    read_only: false
+    sql: ALTER TABLE "public"."vendors" ADD COLUMN "display_name" text;
+  type: run_sql
+- args:
+    cascade: false
+    read_only: false
+    sql: ALTER TABLE "public"."vendors" ALTER COLUMN "display_name" DROP NOT NULL;
+  type: run_sql

hasura/migrations/1601941700206_alter_table_public_vendors_drop_column_display_name/up.yaml

@@ -0,0 +1,5 @@
+- args:
+    cascade: true
+    read_only: false
+    sql: ALTER TABLE "public"."vendors" DROP COLUMN "display_name" CASCADE;
+  type: run_sql