focalxaiinspection/src/lib/Components/DamageList/DamageList.js

Focalx AI Inspection

import React, { useState, useEffect } from "react";
import { Modal } from 'react-bootstrap';
import { useLocation } from "react-router-dom";
import "./DamageList.scss";
import GetInspectionReport from "../../services/Api/GetInspectionReport";
//import GetBaseURL from "../../services/Api/base";

const DamageList = () => {
  //const baseUrl = GetBaseURL();
  const car_info = JSON.parse(sessionStorage.getItem('carInformation'));
  const baseUrl = car_info.baseUrl;
  const accessToken = sessionStorage.getItem('token');
  const schemaName = sessionStorage.getItem('schema_name');
  const [data, setData] = useState(null);
  const [damageTypeData, setDamageTypeData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [selectedCard, setSelectedCard] = useState(null);
  const [showModel, setShowModel] = useState(false);
  const [itemIndex, setItemIndex] = useState(null);

  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get("id");
  //console.log(id);
  useEffect(() => {
    GetInspectionReport()
      .then((data) => {
        let damageDataList = [];
        data.image_report.map((item) => {
          if (item.damages && item.damages.length > 0) {
            const position = item.position;
            item.damages.map((damageData) => {
              let damageItem = damageData;
              damageItem.position = position;
              damageDataList.push(damageItem);
            })
          }
        });
        //console.log(damageDataList);
        setDamageTypeData(damageDataList);
        renderDamageList(damageDataList);
        setLoading(false);
      })
      .catch((error) => {
        console.log("Error getting inspection report:", error);
        setLoading(false);
      });
  }, []);

  const handleDamageApproval = (id, status) => {
    try {
      //console.log(status);
      const apiUrl = `https://${schemaName}.${baseUrl}/api/v1/service/damage/${id}/`
      let formdata = new FormData();
      formdata.append("user_action", status);
      const requestOptions = {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${accessToken}`
        },
        body: formdata
      };

      fetch(apiUrl, requestOptions)
        .then(response => response.json())
        .then(result => {
          let damageListItem = damageTypeData;
          damageListItem[itemIndex].user_action_status = result.damage.user_action_status;
          renderDamageList(damageListItem);
          //setData(damageListItem);
          setShowModel(false);
        })
        .catch(error => console.log('error', error));
      setShowModel(false);
    } catch (e) {
      console.log(e.message);
    }
  }

  const renderDamageList = (listData) => {
    if (listData && listData.length > 0) {
      setData(listData.map((item, index) => {
        return (
          <>
            <div className="custom-card car-service-card pointer" key={index} onClick={() => handleModel(index, item)}>
              <figure>
                <div className="image-wrap">
                  <img src={item.annotated_damage_image_url_public} alt="" />
                </div>
              </figure>
              <div className="description">
                <p className="car-model">{item.part.name || "-"}</p>
                <p>{item.damage_type.name || "-"}</p>
                <p>{item.is_manual ? "Manually added" : "Auto detected"}</p>
                <p>{item.category}</p>
                <div className="status">
                  {item.user_action_status === "REJECTED" && 
                    <img width={20} src={require('../../Assets/images/rejected_icon.png')} alt='' />}
                  {item.user_action_status === "ACCEPTED" && 
                    <img width={20} src={require('../../Assets/images/accepted_damage.svg').default} alt='' />}
                </div>
              </div>
            </div>
          </>
        );
      }));
    } else {
      setData(<p className="no-data">No data to display.</p>)
    }
  }

  const handleModel = (index, item) => {
    setShowModel(true);
    setItemIndex(index);
    setSelectedCard(item);
  }

  return (
    <>
      {loading &&
        <div className="lds-roller-overlay">
          <div className="lds-roller">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      }

      {data}

      <Modal className="damage-modal" show={showModel} centered onHide={() => { setShowModel(false); setSelectedCard(null) }}>
        <button type="button" className="custom-btn-close" aria-label="Close" onClick={() => { setShowModel(false); setSelectedCard(null) }}>
          <img src={require('../../Assets/images/close-with-circle.svg').default} alt='' />
        </button>
        <Modal.Body>
          {selectedCard && (
            <div className="damage-modal-details">
              <figure>
                <img src={selectedCard.annotated_damage_image_url_public} alt="" />
              </figure>
              <ul className="description">
                <li>
                  <span>Type</span>
                  <span>{selectedCard.damage_type.name || "-"}</span>
                </li>
                <li>
                  <span>Location</span>
                  <span>{selectedCard.position.name || "-"}</span>
                </li>
                <li>
                  <span>Part</span>
                  <span>{selectedCard.part.name || "-"}</span>
                </li>
                <li>
                  <span>K1-K5</span>
                  <span>{selectedCard.category || "-"}</span>
                </li>
              </ul>
            </div>
          )}
        </Modal.Body>
        <Modal.Footer>
          <button onClick={() => handleDamageApproval(selectedCard.id, "REJECTED")} className="custom-secondary-outline-button left-side-btn justify-content-center">Reject</button>
          <button onClick={() => handleDamageApproval(selectedCard.id, "ACCEPTED")} className="custom-primary-button right-side-btn justify-content-center text-white">Accept</button>
        </Modal.Footer>
      </Modal>

      {/*<p className="no-data">No data to display.</p>*/}

    </>
  );
};

export default DamageList;