diff --git a/src/components/CertificationMetadataForm/components/ReportScriptForm.tsx b/src/components/CertificationMetadataForm/components/ReportScriptForm.tsx index dbd146f3..706df66a 100644 --- a/src/components/CertificationMetadataForm/components/ReportScriptForm.tsx +++ b/src/components/CertificationMetadataForm/components/ReportScriptForm.tsx @@ -1,19 +1,21 @@ -import React from "react"; +import React, { useState } from "react"; -import { Box, Grid, Paper, Typography, TextField, Button } from "@mui/material"; +import { Box, Grid, Typography, Button } from "@mui/material"; import AddIcon from "@mui/icons-material/Add"; import RemoveIcon from "@mui/icons-material/Remove"; import InputGroup from "compositions/InputGroup"; import Container from "compositions/InputGroup/components/Container"; +import ReportScriptFormConfirmModal from "./ReportScriptFormConfirmModal"; import { getScriptFields, getScriptContractFields } from "../utils"; -import type { FormState, UseFormRegister, UseFormGetFieldState, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove } from "react-hook-form"; -import type { ReportForm } from "../interface"; +import type { FormState, UseFormRegister, UseFormGetFieldState, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove, UseFormWatch } from "react-hook-form"; +import type { ReportForm, ReportFormScript } from "../interface"; import "../index.css"; interface Props { + watch: UseFormWatch; formState: FormState; register: UseFormRegister; getFieldState: UseFormGetFieldState; @@ -31,90 +33,120 @@ interface InstanceProps { onRemove: () => void; } -const ReportScriptFormInstance = (props: InstanceProps) => { - return ( - - - - DAPP Script (#{props.index+1}) - - {props.index > 0 && ( - - )} - - - - - - SmartContract Information +const ReportScriptFormInstance = (props: InstanceProps) => ( + + + + DAPP Script (#{props.index+1}) - - - - - - - - - - - - + {props.index > 0 && ( + + )} - ); -} - -const ReportScriptForm = (props: Props) => ( - - - DAPP Scripts - - {props.scriptFields.map((field, index) => ( - + props.removeScript(index)} /> - ))} - - - + + SmartContract Information + + + + + + + + + + + + + + ); +const ReportScriptForm = (props: Props) => { + const [currentIndex, setCurrentIndex] = useState(null); + + const isDirty = (script: ReportFormScript) => { + if (script.scriptHash.length > 0) return true; + if (script.contractAddress.length > 0) return true; + if (Object.keys(script.smartContractInfo).filter(key => (script as any).smartContractInfo[key]?.length > 0 ).length > 0) return true; + return false; + } + + const onRemove = (index: number) => { + if (isDirty(props.watch(`scripts.${index}`))) { + setCurrentIndex(index); + } else { + props.removeScript(index); + } + } + + const confirmRemove = () => { + props.removeScript(currentIndex!); + setCurrentIndex(null); + } + + return ( + <> + + + DAPP Scripts + + {props.scriptFields.map((field, index) => ( + onRemove(index)} + /> + ))} + + + + + + setCurrentIndex(null)} + onConfirm={confirmRemove} + /> + + ); +}; + export default ReportScriptForm; \ No newline at end of file diff --git a/src/components/CertificationMetadataForm/components/ReportScriptFormConfirmModal.tsx b/src/components/CertificationMetadataForm/components/ReportScriptFormConfirmModal.tsx new file mode 100644 index 00000000..2e6fab8a --- /dev/null +++ b/src/components/CertificationMetadataForm/components/ReportScriptFormConfirmModal.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +import { Dialog, DialogTitle, DialogActions, Button } from "@mui/material"; + +import "../index.css"; + +interface Props { + show: boolean; + onConfirm: () => void; + onClose: () => void; +} + +const ReportScriptFormConfirmModal = (props: Props) => { + return ( + + + Do you want to delete the current script? + + + + + + + ); +} + +export default ReportScriptFormConfirmModal; \ No newline at end of file diff --git a/src/components/CertificationMetadataForm/index.tsx b/src/components/CertificationMetadataForm/index.tsx index 23fc2831..a072ecdd 100644 --- a/src/components/CertificationMetadataForm/index.tsx +++ b/src/components/CertificationMetadataForm/index.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { useForm, useFieldArray } from "react-hook-form"; import { Box, Grid, Paper, Button } from "@mui/material"; -import SendIcon from "@mui/icons-material/Send"; +import DownloadIcon from "@mui/icons-material/Download"; import { sendReport } from "store/slices/reportUpload.slice"; import { getResolver, getDefaultValues, getInformationFields, auditorFields } from "./utils"; @@ -33,7 +33,7 @@ const CertificationMetadataForm = (props: Props) => { const { profile } = useAppSelector((state) => state.profile); const { loading, success, errorMessage, onchain, offchain, subject, uuid } = useAppSelector((state) => state.reportUpload); - const { control, register, handleSubmit, getFieldState, formState } = useForm({ + const { control, register, handleSubmit, getFieldState, formState, watch } = useForm({ defaultValues: getDefaultValues(profile), resolver: getResolver(props.isReviewCertification), mode: 'onBlur' }); const { fields: scriptFields, append: appendScript, remove: removeScript } = useFieldArray({ name: 'scripts', control }); @@ -109,6 +109,7 @@ const CertificationMetadataForm = (props: Props) => { { {props.isReviewCertification && (