All files / pages/user/Home/components AssignmentDetailsModal.tsx

100% Statements 9/9
100% Branches 1/1
100% Functions 2/2
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 682x 2x                     27x 27x 27x 27x     27x   27x                                                                                           2x  
import { Form, Modal } from "antd";
import "./AssignmentDetailsModal.css"
import { AssignmentResponse } from "@/types/AssignmentResponse";
interface Props{
    data: AssignmentResponse;
    show?:boolean;
    handleClose?: ()=>void;
}
function AssignmentDetailsModal ({data, show=false, handleClose}:Props) {
 
    function formatDate(dateInput:Date) {
        // Extract day, month, and year from the date object
        const date = new Date(dateInput)
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero based
        const year = date.getFullYear();
      
        // Return the formatted date string in DD/MM/YYYY format
        return `${day}/${month}/${year}`;
      }
    return (
    <Modal
      className=""
      title={
        <div>
          <p className="text-lg font-semibold primary-color">
            Detailed Assignment Information
          </p>
          <br/>
          <hr/>
        </div>
      }
      open={show}
      footer={null}
      onCancel={handleClose}
    >
        <Form layout="horizontal">
          <Form.Item label="Assest Code" className="custom-form-item" data-testid="assetCode" labelCol={{ span: 6 }} labelAlign="left">
            <div>{data.asset.assetCode}</div>
          </Form.Item>
          <Form.Item label="Assest Name" className="custom-form-item" data-testid="assetName" labelCol={{ span: 6 }} labelAlign="left">
            <div>{data.asset.name}</div>
          </Form.Item>
          <Form.Item label="Specification" className="custom-form-item" data-testid="specification" labelCol={{  span: 6 }} labelAlign="left">
            <p>{data.asset.specification}</p>
          </Form.Item>
          <Form.Item label="Assigned to" className="custom-form-item" data-testid="assignedBy" labelCol={{  span: 6 }} labelAlign="left">
            <p>{data.assignTo}</p>
          </Form.Item>
          <Form.Item label="Assigned by" className="custom-form-item" data-testid="assignedTo" labelCol={{  span: 6 }} labelAlign="left">
            <p>{data.assignBy}</p>
          </Form.Item>
          <Form.Item label="Assigned Date" className="custom-form-item" data-testid="assignedDate" labelCol={{ span: 6 }} labelAlign="left">
            <p>{formatDate(data.assignedDate)}</p>
          </Form.Item>
          <Form.Item label="State" className="custom-form-item" data-testid="state" labelCol={{  span: 6 }} labelAlign="left">
            <p>{data.state}</p>
          </Form.Item>
          <Form.Item label="Note" className="custom-form-item" data-testid="note" labelCol={{  span: 6 }} labelAlign="left">
            <p>{data.note}</p>
          </Form.Item>
        </Form>
    </Modal>
  );
}
 
export default AssignmentDetailsModal;