IO-2604 Add vendor tags to search select & vendor edit screen.

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -52,6 +52,7 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
             >
               {label}
             </div>
+
             {discount && discount !== 0 ? <Tag color="green">{`${discount * 100}%`}</Tag> : null}
           </div>
         );
@@ -116,6 +117,11 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
                 {o.name}
               </div>
               <Space style={{ marginLeft: "1rem" }}>
+                {o.tags?.map((tag, idx) => (
+                  <Tag key={idx} style={{ marginLeft: "0.5rem" }}>
+                    {tag}
+                  </Tag>
+                ))}
                 {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
                 {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
               </Space>

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

@@ -1,7 +1,7 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, Divider, Form, Input, InputNumber, Space, Switch } from "antd";
+import { Button, Divider, Form, Input, InputNumber, Select, Space, Switch } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -179,6 +179,18 @@ export function VendorsFormComponent({
         }
       </LayoutFormRow>
 
+      <Form.Item
+        name="tags"
+        label={t("vendor.fields.tags")}
+        rules={[
+          {
+            //message: t("general.validation.required"),
+            type: "array"
+          }
+        ]}
+      >
+        <Select mode="tags" />
+      </Form.Item>
       {DmsAp.treatment === "on" && (
         <Form.Item label={t("vendors.fields.dmsid")} name="dmsid">
           <Input />

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

@@ -1,5 +1,5 @@
 import { SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, Space, Table } from "antd";
+import { Button, Card, Input, Space, Table, Tag } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -38,6 +38,18 @@ export default function VendorsListComponent({ handleNewVendor, loading, handleO
       title: t("vendors.fields.city"),
       dataIndex: "city",
       key: "city"
+    },
+    {
+      title: t("vendors.fields.tags"),
+      dataIndex: "tags",
+      key: "tags",
+      render: (text, record) => (
+        <Space>
+          {record?.tags?.map((tag, idx) => (
+            <Tag key={idx}>{tag}</Tag>
+          ))}
+        </Space>
+      )
     }
   ];
 

client/src/graphql/vendors.queries.js

@@ -19,6 +19,7 @@ export const QUERY_VENDOR_BY_ID = gql`
       active
       phone
       dmsid
+      tags
     }
   }
 `;
@@ -54,6 +55,7 @@ export const QUERY_ALL_VENDORS = gql`
       city
       phone
       active
+      tags
     }
   }
 `;
@@ -89,6 +91,7 @@ export const QUERY_ALL_VENDORS_FOR_ORDER = gql`
       email
       active
       phone
+      tags
     }
     jobs(where: { id: { _eq: $jobId } }) {
       v_make_desc
@@ -105,6 +108,7 @@ export const SEARCH_VENDOR_AUTOCOMPLETE = gql`
       cost_center
       active
       favorite
+      tags
     }
   }
 `;
@@ -124,6 +128,7 @@ export const SEARCH_VENDOR_AUTOCOMPLETE_WITH_ADDR = gql`
       email
       state
       active
+      tags
     }
   }
 `;

client/src/utils/RenderTemplate.js

@@ -48,24 +48,24 @@ export default async function RenderTemplate(
       ...(renderAsHtml
         ? {}
         : {
-            recipe: "chrome-pdf",
+          recipe: "chrome-pdf",
-            ...(!ignoreCustomMargins && {
+          ...(!ignoreCustomMargins && {
-              chrome: {
+            chrome: {
-                marginTop:
+              marginTop:
-                  bodyshop.logo_img_path &&
+                bodyshop.logo_img_path &&
                   bodyshop.logo_img_path.headerMargin &&
                   bodyshop.logo_img_path.headerMargin > 36
-                    ? bodyshop.logo_img_path.headerMargin
+                  ? bodyshop.logo_img_path.headerMargin
-                    : "36px",
+                  : "36px",
-                marginBottom:
+              marginBottom:
-                  bodyshop.logo_img_path &&
+                bodyshop.logo_img_path &&
                   bodyshop.logo_img_path.footerMargin &&
                   bodyshop.logo_img_path.footerMargin > 50
-                    ? bodyshop.logo_img_path.footerMargin
+                  ? bodyshop.logo_img_path.footerMargin
-                    : "50px"
+                  : "50px"
-              }
+            }
-            })
+          })
-          }),
+        }),
       ...(renderAsExcel ? { recipe: "html-to-xlsx" } : {}),
       ...(renderAsText ? { recipe: "text" } : {})
     },
@@ -100,14 +100,14 @@ export default async function RenderTemplate(
               chrome: {
                 marginTop:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.headerMargin &&
+                    bodyshop.logo_img_path.headerMargin &&
-                  bodyshop.logo_img_path.headerMargin > 36
+                    bodyshop.logo_img_path.headerMargin > 36
                     ? bodyshop.logo_img_path.headerMargin
                     : "36px",
                 marginBottom:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.footerMargin &&
+                    bodyshop.logo_img_path.footerMargin &&
-                  bodyshop.logo_img_path.footerMargin > 50
+                    bodyshop.logo_img_path.footerMargin > 50
                     ? bodyshop.logo_img_path.footerMargin
                     : "50px"
               }
@@ -182,22 +182,22 @@ export async function RenderTemplates(templateObjects, bodyshop, renderAsHtml =
       ...(renderAsHtml
         ? {}
         : {
-            recipe: "chrome-pdf",
+          recipe: "chrome-pdf",
-            chrome: {
+          chrome: {
-              marginTop:
+            marginTop:
-                bodyshop.logo_img_path &&
+              bodyshop.logo_img_path &&
                 bodyshop.logo_img_path.headerMargin &&
                 bodyshop.logo_img_path.headerMargin > 36
-                  ? bodyshop.logo_img_path.headerMargin
+                ? bodyshop.logo_img_path.headerMargin
-                  : "36px",
+                : "36px",
-              marginBottom:
+            marginBottom:
-                bodyshop.logo_img_path &&
+              bodyshop.logo_img_path &&
                 bodyshop.logo_img_path.footerMargin &&
                 bodyshop.logo_img_path.footerMargin > 50
-                  ? bodyshop.logo_img_path.footerMargin
+                ? bodyshop.logo_img_path.footerMargin
-                  : "50px"
+                : "50px"
-            }
+          }
-          }),
+        }),
       pdfOperations: [
         {
           template: {
@@ -213,14 +213,14 @@ export async function RenderTemplates(templateObjects, bodyshop, renderAsHtml =
               chrome: {
                 marginTop:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.headerMargin &&
+                    bodyshop.logo_img_path.headerMargin &&
-                  bodyshop.logo_img_path.headerMargin > 36
+                    bodyshop.logo_img_path.headerMargin > 36
                     ? bodyshop.logo_img_path.headerMargin
                     : "36px",
                 marginBottom:
                   bodyshop.logo_img_path &&
-                  bodyshop.logo_img_path.footerMargin &&
+                    bodyshop.logo_img_path.footerMargin &&
-                  bodyshop.logo_img_path.footerMargin > 50
+                    bodyshop.logo_img_path.footerMargin > 50
                     ? bodyshop.logo_img_path.footerMargin
                     : "50px"
               },
@@ -302,7 +302,6 @@ export const fetchFilterData = async ({ name }) => {
     const jsReportFilters = await cleanAxios.get(`${server}/odata/assets?$filter=name eq '${name}.filters'`, {
       headers: { Authorization: jsrAuth }
     });
-    console.log("🚀 ~ fetchFilterData ~ jsReportFilters:", jsReportFilters);
 
     let parsedFilterData;
     let useShopSpecificTemplate = false;

hasura/metadata/tables.yaml

@@ -4909,6 +4909,7 @@
           - critical
           - id
           - jobid
+          - pinned
           - private
           - text
           - type
@@ -4923,6 +4924,7 @@
           - critical
           - id
           - jobid
+          - pinned
           - private
           - text
           - type
@@ -4947,6 +4949,7 @@
           - critical
           - id
           - jobid
+          - pinned
           - private
           - text
           - type
@@ -7120,6 +7123,7 @@
           - state
           - street1
           - street2
+          - tags
           - updated_at
           - zip
   select_permissions:
@@ -7143,6 +7147,7 @@
           - state
           - street1
           - street2
+          - tags
           - updated_at
           - zip
         filter:
@@ -7176,6 +7181,7 @@
           - state
           - street1
           - street2
+          - tags
           - updated_at
           - zip
         filter:

hasura/migrations/1753201013074_alter_table_public_vendors_add_column_tags/down.sql

@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."vendors" add column "tags" jsonb
+--  not null default jsonb_build_array();

hasura/migrations/1753201013074_alter_table_public_vendors_add_column_tags/up.sql

@@ -0,0 +1,2 @@
+alter table "public"."vendors" add column "tags" jsonb
+ not null default jsonb_build_array();