IO-2206 Refine claim tasks modal to add validations and insertions.

client/src/components/time-ticket-list/time-ticket-list-team-pay.component.jsx

@@ -1,3 +1,4 @@
+import { useQuery } from "@apollo/client";
 import {
   Button,
   Form,
@@ -9,17 +10,16 @@ import {
   Table,
   Typography,
 } from "antd";
+import Dinero from "dinero.js";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormDatePicker from "../form-date-picker/form-date-picker.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import Dinero from "dinero.js";
-import { useQuery } from "@apollo/client";
-import { GET_JOB_INFO_DRAW_CALCULATIONS } from "../../graphql/jobs-lines.queries";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
@@ -30,20 +30,20 @@ export default connect(
 )(TimeTicketListTeamPay);
 
 export function TimeTicketListTeamPay({ bodyshop, context, actions }) {
-  const { refetch } = actions;
+  //const { refetch } = actions;
   const { jobId } = context;
   const [visible, setVisible] = useState(false);
   const [form] = Form.useForm();
   const { t } = useTranslation();
-  const { loading, data: lineTicketData } = useQuery(
-    GET_JOB_INFO_DRAW_CALCULATIONS,
-    {
-      variables: { id: jobId },
-      skip: !jobId,
-      fetchPolicy: "network-only",
-      nextFetchPolicy: "network-only",
-    }
-  );
+  const {
+    //loading,
+    data: lineTicketData,
+  } = useQuery(GET_JOB_INFO_DRAW_CALCULATIONS, {
+    variables: { id: jobId },
+    skip: !jobId,
+    fetchPolicy: "network-only",
+    nextFetchPolicy: "network-only",
+  });
 
   const handleOk = () => {
     setVisible(false);
@@ -124,7 +124,7 @@ export function TimeTicketListTeamPay({ bodyshop, context, actions }) {
           <Form.Item shouldUpdate noStyle>
             {({ getFieldsValue }) => {
               const formData = getFieldsValue();
-              console.log("🚀 ~ file: time-ticket-list-team-pay.component.jsx:127 ~ TimeTicketListTeamPay ~ formData:", formData)
+
               let data = [];
               let eligibleHours = 0;
               const theTeam = Teams.find((team) => team.name === formData.team);

client/src/components/time-ticket-list/time-ticket-list.component.jsx

@@ -1,35 +1,37 @@
 import { EditFilled } from "@ant-design/icons";
-import { Card, Space, Table } from "antd";
+import { Button, Card, Space, Table } from "antd";
+import Dinero from "dinero.js";
 import moment from "moment";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { setModalContext } from "../../redux/modals/modals.actions";
 import {
   selectAuthLevel,
   selectBodyshop,
 } from "../../redux/user/user.selectors";
-import { onlyUnique } from "../../utils/arrayHelper";
 import { DateFormatter, DateTimeFormatter } from "../../utils/DateFormatter";
+import { onlyUnique } from "../../utils/arrayHelper";
 import { alphaSort, dateSort } from "../../utils/sorters";
 import RbacWrapper, {
   HasRbacAccess,
 } from "../rbac-wrapper/rbac-wrapper.component";
-import Dinero from "dinero.js";
 import TimeTicketEnterButton from "../time-ticket-enter-button/time-ticket-enter-button.component";
-import TimeTicketListTeamPay from "./time-ticket-list-team-pay.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   authLevel: selectAuthLevel,
 });
 const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
+  setTimeTicketTaskContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "timeTicketTask" })),
 });
 export default connect(mapStateToProps, mapDispatchToProps)(TimeTicketList);
 
 export function TimeTicketList({
   bodyshop,
+  setTimeTicketTaskContext,
   authLevel,
   disabled,
   loading,
@@ -261,10 +263,23 @@ export function TimeTicketList({
       title={t("timetickets.labels.timetickets")}
       extra={
         <Space wrap>
-          <TimeTicketListTeamPay
-            actions={{ refetch }}
-            context={{ jobId: jobId }}
-          />
+          {
+            //  <TimeTicketListTeamPay
+            //      actions={{ refetch }}
+            //      context={{ jobId: jobId }}
+            //    />
+          }
+          <Button
+            onClick={() => {
+              setTimeTicketTaskContext();
+              setTimeTicketTaskContext({
+                actions: {},
+                context: { jobid: jobId },
+              });
+            }}
+          >
+            {t("timetickets.actions.claimtasks")}
+          </Button>
           {jobId &&
             (techConsole ? null : (
               <TimeTicketEnterButton