Added deleting of custom templates for BOD-85.

client/src/components/shop-template-add/shop-template-add.component.jsx

@@ -0,0 +1,78 @@
+import { DownOutlined } from "@ant-design/icons";
+import { useMutation } from "@apollo/react-hooks";
+import { Dropdown, Menu } from "antd";
+import queryString from "query-string";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { INSERT_TEMPLATE } from "../../graphql/templates.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { TemplateList } from "../../utils/constants";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
+
+export default connect(mapStateToProps, null)(ShopTemplateAddComponent);
+
+export function ShopTemplateAddComponent({
+  bodyshop,
+  shopTemplateList,
+  refetch,
+}) {
+  const { t } = useTranslation();
+  const search = queryString.parse(useLocation().search);
+  const history = useHistory();
+  const [insertTemplate] = useMutation(INSERT_TEMPLATE);
+
+  const shopTemplateKeys = shopTemplateList.map((template) => template.name);
+  const availableTemplateKeys = Object.keys(TemplateList).filter(
+    (tkey) => !shopTemplateKeys.includes(tkey)
+  );
+
+  const handleAdd = async (item) => {
+    const result = await insertTemplate({
+      variables: {
+        template: {
+          name: item.key,
+          bodyshopid: bodyshop.id,
+          html: `<div>Insert your custom template here.</div>`,
+          query: `query JOBS {
+            jobs{
+              id
+              ro_number
+            }
+          }`,
+        },
+      },
+    });
+
+    const returningId = result.data.insert_templates.returning[0].id;
+    search.customTemplateId = returningId;
+    history.push({ search: queryString.stringify(search) });
+    if (!!refetch) refetch();
+  };
+
+  const menu = (
+    <Menu onClick={handleAdd}>
+      {availableTemplateKeys.length > 0 ? (
+        availableTemplateKeys.map((tkey) => (
+          <Menu.Item key={tkey}>{TemplateList[tkey].title}</Menu.Item>
+        ))
+      ) : (
+        <div>{t("bodyshop.labels.notemplatesavailable")}</div>
+      )}
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu}>
+      <span>
+        {t("bodyshop.actions.addtemplate")} <DownOutlined />
+      </span>
+    </Dropdown>
+  );
+}