IO-2193 Delete Owner & Vehicle

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -1,15 +1,38 @@
-import { Button, Form, notification, PageHeader } from "antd";
+import { Button, Form, notification, PageHeader, Popconfirm } from "antd";
 import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
-import { UPDATE_OWNER } from "../../graphql/owners.queries";
+import { DELETE_OWNER, UPDATE_OWNER } from "../../graphql/owners.queries";
 import OwnerDetailFormComponent from "./owner-detail-form.component";
 
 function OwnerDetailFormContainer({ owner, refetch }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const history = useHistory();
   const [loading, setLoading] = useState(false);
   const [updateOwner] = useMutation(UPDATE_OWNER);
+  const [deleteOwner] = useMutation(DELETE_OWNER);
+
+  const handleDelete = async () => {
+    setLoading(true);
+    const result = await deleteOwner({
+      variables: { id: owner.id },
+    });
+    console.log(result);
+    if (result.errors) {
+      notification["error"]({
+        message: t("owners.errors.deleting"),
+      });
+      setLoading(false);
+    } else {
+      notification["success"]({
+        message: t("owners.successes.delete"),
+      });
+      setLoading(false);
+      history.push(`/manage/owners`);
+    }
+  };
 
   const handleFinish = async (values) => {
     setLoading(true);
@@ -41,15 +64,29 @@ function OwnerDetailFormContainer({ owner, refetch }) {
     <>
       <PageHeader
         title={t("menus.header.owners")}
-        extra={
+        extra={[
+          <Popconfirm
+            trigger="click"
+            onConfirm={handleDelete}
+            disabled={owner.jobs.length !== 0}
+            title={t("owners.labels.deleteconfirm")}
+          >
+            <Button
+              type="danger"
+              loading={loading}
+              disabled={owner.jobs.length !== 0}
+            >
+              {t("general.actions.delete")}
+            </Button>
+          </Popconfirm>,
           <Button
             type="primary"
             loading={loading}
             onClick={() => form.submit()}
           >
             {t("general.actions.save")}
-          </Button>
-        }
+          </Button>,
+        ]}
       />
       <Form
         form={form}

client/src/components/vehicle-detail-form/vehicle-detail-form.container.jsx

@@ -1,16 +1,39 @@
 import React, { useState } from "react";
-import { Button, Form, notification, PageHeader } from "antd";
+import { Button, Form, notification, PageHeader, Popconfirm } from "antd";
 import { useMutation } from "@apollo/client";
 import VehicleDetailFormComponent from "./vehicle-detail-form.component";
 import { useTranslation } from "react-i18next";
 import moment from "moment";
-import { UPDATE_VEHICLE } from "../../graphql/vehicles.queries";
+import { DELETE_VEHICLE, UPDATE_VEHICLE } from "../../graphql/vehicles.queries";
+import { useHistory } from "react-router-dom";
 
 function VehicleDetailFormContainer({ vehicle, refetch }) {
   const { t } = useTranslation();
   const [updateVehicle] = useMutation(UPDATE_VEHICLE);
+  const [deleteVehicle] = useMutation(DELETE_VEHICLE);
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const history = useHistory();
+
+  const handleDelete = async () => {
+    setLoading(true);
+    const result = await deleteVehicle({
+      variables: { id: vehicle.id },
+    });
+    console.log(result);
+    if (result.errors) {
+      notification["error"]({
+        message: t("vehicles.errors.deleting"),
+      });
+      setLoading(false);
+    } else {
+      notification["success"]({
+        message: t("vehicles.successes.delete"),
+      });
+      setLoading(false);
+      history.push(`/manage/vehicles`);
+    }
+  };
 
   const handleFinish = async (values) => {
     setLoading(true);
@@ -40,15 +63,29 @@ function VehicleDetailFormContainer({ vehicle, refetch }) {
     <>
       <PageHeader
         title={t("menus.header.vehicles")}
-        extra={
+        extra={[
+          <Popconfirm
+            trigger="click"
+            onConfirm={handleDelete}
+            disabled={vehicle.jobs.length !== 0}
+            title={t("vehicles.labels.deleteconfirm")}
+          >
+            <Button
+              type="danger"
+              loading={loading}
+              disabled={vehicle.jobs.length !== 0}
+            >
+              {t("general.actions.delete")}
+            </Button>
+          </Popconfirm>,
           <Button
             type="primary"
             loading={loading}
             onClick={() => form.submit()}
           >
             {t("general.actions.save")}
-          </Button>
-        }
+          </Button>,
+        ]}
       />
       <Form
         onFinish={handleFinish}