Notes

import React, { Fragment, useEffect, useState, useContext } from "react";
import { useNavigate } from "react-router-dom";
import { AlertColor, Icon } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";
import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import LoadingButton from "@mui/lab/LoadingButton";
import CircularProgress from "@mui/material/CircularProgress";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { Stack } from "@mui/material";
import Switch from "@mui/material/Switch";
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
// import AlertDialog from "../common/AlertDialog";
import Alert from "../common/Alert";
import FilingMasterContext from "../../context/filing-master/FilingMasterContext";
import { BusinessCategory, FilingMaster } from "../../types/FilingMaster";
import states from "../../data/StateLookup.json";
import { juristictionLookup } from "../../data/constants";
import MultiSelect from "../common/MultiSelect";
import axios from "axios";
import { useLocation } from "react-router-dom";
import { style, width } from "@mui/system";
// const categories = [
// { id: 1, category: "Telecom" },
// { id: 2, category: "Brodband" },
// { id: 3, category: "Wireless" },
// { id: 4, category: "Mobile" },
// ];


const theme = createTheme();

export default function FilingMasterForm(props: any) {
const location = useLocation();
const filingMasterContext = useContext(FilingMasterContext);
const {
createFilingMaster,
filingMasters,
filingMasterLoaded,
filingMasterLoading,
getBusinessCategories,
createFilingMasterCategories,
} = filingMasterContext;

const [alertMessage, setAlertMessage] = useState<{
message: string;
type: AlertColor;
}>({ message: "", type: "success" });
const [switchChecked, setSwitchChecked] = useState(false);
const [categories, setCategories] = useState<BusinessCategory[]>([]);
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
const initForm: FilingMaster = {
// filingId: 0,
// filingDescription: "",
// filingFrequency: "",
// stateInfo: "",
// ruleInf: "",
// required: false,
// jsidept: "",
// jsicontactName: "",
// jsicontactEmail: "",
// juristiction: "",
// notes: "",
// changesInprogress: true,
filingId: 0,
filingName: "",
filingDescription: "",
// filingFrequency: "",
businessCategory: [],
stateInfo: "",
ruleInf: "",
fileState: "",
fileFederal: "",
juristiction: "",
jsidept: "",
jsicontactName: "",
jsicontactEmail: "",
jsicontactNumber: "",
required: true,
notes: "",
changesInprogress: true,
};

const [showAlert, setShowAlert] = useState(false);
const [filingMaster, setFilingMaster] = useState(initForm);
const [name, setName] = useState("");
const navigate = useNavigate();

// const selectedMasters = location.state?.selectedMasters
// React.useState(()=>{
// if(selectedMasters){
// setFilingMaster(selectedMasters);
// }
// },[selectedMasters]);

const selectedMasters = location.state?.selectedMasters;
console.log("SelectedClient is sucessfully received", selectedMasters);
const [buttonText, setButtonText] = useState("Add");
React.useEffect(() => {
if (selectedMasters) {
setFilingMaster(selectedMasters);
setButtonText("Update");
window.localStorage.removeItem("selectedMasters");
}
}, [selectedMasters]);

console.log("Selected FilingMaster is Assigned", filingMaster);

const backToHome = () => {
navigate("/");
};

const handleCloseAlert = () => {
setShowAlert(false);
};

// const onTextChange = async (
// e:
// | React.ChangeEventHandler<HTMLInputElement>
// | React.ChangeEventHandler<HTMLTextAreaElement>
// ) => {};
const [isValid,setisValid] = useState(true);

const onChange = async (e: React.ChangeEvent<any>) => {
// await hasTokenExpired();
// let value = "";
// if (e.target.name === "groupName") {
// getGroupId();
// }
// console.log(`Setting [${e.target.name}]: ${e.target.value}`);
setFilingMaster((cust) => ({ ...cust, [e.target.name]: e.target.value }));
if(
!filingMaster.filingName ||
!filingMaster.filingDescription ||
// !filingMaster.businessCategory ||
!filingMaster.stateInfo ||
!filingMaster.ruleInf ||
!filingMaster.fileState ||
!filingMaster.fileFederal ||
!filingMaster.juristiction ||
!filingMaster.jsidept ||
!filingMaster.jsicontactName ||
!filingMaster.jsicontactEmail ||
!filingMaster.jsicontactNumber
)
{
setisValid(true);
}
else{
setisValid(false)
}
console.log(filingMaster);
};

const handleCategoryChange = (event: SelectChangeEvent) => {
const {
target: { value },
} = event;
setFilingMaster((cust) => ({
...cust,
businessCatergoryId: parseInt(value),
}));
};

const handleManadatoryChange = (event: SelectChangeEvent) => {
console.log("REQUIRED::", event.target.value);
const {
target: { value },
} = event;
setFilingMaster((filingMaster) => ({
...filingMaster,
required: value === "true" ? true : false,
}));
};

const handleJurisdictionChange = (event: SelectChangeEvent) => {
const {
target: { value },
} = event;
setFilingMaster((filingMaster) => ({
...filingMaster,
juristiction: value,
}));
};

const JsiDeptSelectChange = (event: SelectChangeEvent) => {
const {
target: { value },
} = event;
setFilingMaster((filingMaster) => ({
...filingMaster,
jsidept: value,
}));
};



const handleFrequencyChange = (event: SelectChangeEvent) => {
const {
target: { value },
} = event;
setFilingMaster((filingMaster) => ({
...filingMaster,
filingFrequency: value,
}));
};



// const handleStateChange = (name: string)=> (event: any) =>{
// setFilingMaster({...filingMaster,[name]:event.target.value});
// console.log('test',filingMaster);}

const submitForm = async (event: React.MouseEvent<HTMLElement>) => {
if (buttonText == "Add") {
if (
!filingMaster.filingName ||
!filingMaster.filingDescription ||
// !filingMaster.businessCategory ||
!filingMaster.stateInfo ||
!filingMaster.ruleInf ||
!filingMaster.fileState ||
!filingMaster.fileFederal ||
!filingMaster.juristiction ||
!filingMaster.jsidept ||
!filingMaster.jsicontactName ||
!filingMaster.jsicontactEmail ||
!filingMaster.jsicontactNumber
) {
alert("All fields are required");
} else {
axios
.post(
"https://localhost:7005/api/FilingMaster/CreateFilingMaster",
filingMaster
)
.then((filingMaster) => {
alert("Succesfully Submited");
navigate("/filing-master-list");
});
}

}
else{
if (
!filingMaster.filingName ||
!filingMaster.filingDescription ||
// !filingMaster.businessCategory ||
!filingMaster.stateInfo ||
!filingMaster.ruleInf ||
!filingMaster.fileState ||
!filingMaster.fileFederal ||
!filingMaster.juristiction ||
!filingMaster.jsidept ||
!filingMaster.jsicontactName ||
!filingMaster.jsicontactEmail ||
!filingMaster.jsicontactNumber
) {
alert("All fields are required");
}
else{ await axios
.put(
"https://localhost:7005/api/FilingMaster/FilingMasterUpdate" +
selectedMasters.filingID,
filingMaster
)
.then((res) => {
alert("Succesfully Updated");
navigate("/filing-master-list");
});}
// try {
// if (createFilingMaster) {
// if (filingMaster.businessCategory) delete filingMaster.businessCategory;
// const res = await createFilingMaster(filingMaster);
// if (res) {
// const payload = selectedCategories.map((item) => ({
// filingId: res.filingId,
// businessCategoryId: item,
// }));
// let res1 = null;
// if (createFilingMasterCategories) {
// res1 = await createFilingMasterCategories(payload);
// }
// if (res1) alert(`Successfully Added FilingMaster`);
// setAlertMessage({
// message: "Successfully Added FilingMaster",
// type: "success",
// });
// setShowAlert(true);
// navigate("/filing-master-list");
// }
// }
// else {
// try {

}
// catch (error) {
// console.log("error updating filing master", error);

// }
// catch (error) {}
}



const handleCategoryChanges = (
values: string[],
keys: any,
action: string
) => {
console.log("@@Changed BusinessCategories:", values);
setSelectedCategories((old) => values);
};

const fetchBusinessCategories = async () => {
console.log("@@Fetch BusinessCategories:", getBusinessCategories);
if (getBusinessCategories) {
console.log("@@Fetch BusinessCategories:");
try {
const catList = await getBusinessCategories();
console.log("@@BusinessCategories:", catList);
setCategories(() => catList);
} catch (error) {
console.log("@@Error:", error);
}
}
};

useEffect(() => {
// toggleDrawer(props.dockAt, props.show);
fetchBusinessCategories();
//eslint-disable-next-line
}, []);

useEffect(() => {
// toggleDrawer(props.dockAt, props.show);
console.log("SWTICH::", switchChecked ? "ON" : "OFF");
setFilingMaster((filingMaster) => ({
...filingMaster,
required: switchChecked,
}));
//eslint-disable-next-line
}, [switchChecked]);

return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Stack
direction="column"
justifyContent="flex-start"
alignItems="center"
spacing={2}
style={{ padding: "22px", marginLeft: "22px" }}
>
<AppBar position="relative" color="inherit" sx={{ border: "none" }}>
<Stack
direction="row"
justifyContent="flex-start"
alignItems="center"
spacing={2}
>
<IconButton
className="nav-bar__logo__img"
sx={{ display: { xs: "none", md: "flex" } }}
onClick={backToHome}
>
<Box sx={{ m: 2 }}>
<ArrowBackIosNewIcon fontSize="medium" sx={{ mt: 1 }} />
</Box>
</IconButton>
<Box sx={{ m: 2 }}>
<Typography variant="h6" color="inherit" noWrap>
ADD FILING MASTER RECORD
</Typography>
</Box>
</Stack>
</AppBar>
{/* filingDescription: "",
filingFrequency: "",
stateInfo: "",
ruleInf: "",
required: false,
businessCategory: [],
jsidept: "",
jsicontactName: "",
jsicontactEmail: "",
juristiction: "",
notes: "", */}
<Container component="main" sx={{ mb: 4 }}>
<React.Fragment>
<Grid container spacing={3} sx={{ mt: 3 }}>
<Grid xs={12} sm={6} lg={4}>
Filing Name
<TextField
required
id="filingName"
name="filingName"
label="Enter Name"
fullWidth
autoComplete="filingName"
variant="filled"
value={filingMaster.filingName}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
Filing Description
<TextField
required
id="filingDescription"
name="filingDescription"
label="Enter Filing Description"
fullWidth
autoComplete="filingDescription"
variant="filled"
value={filingMaster.filingDescription}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4} style={{marginLeft:"-12px"}}>
<FormControl
fullWidth
variant="filled"
required
id = "businessCategory"
>
<MultiSelect
label='Filing Frequency'
inputs={categories.map((item) => ({
name: item.businessCategoryName
? item.businessCategoryName
: "",
value: item.businessCategoryId
? item.businessCategoryId + ""
: "",
}))}
values={selectedCategories}
updateSelection={handleCategoryChanges}
/>
</FormControl>
</Grid>
<Grid xs={12} sm={6} lg={4}>
State Info
<TextField
required
id="stateInfo"
name="stateInfo"
label="Enter State Info"
fullWidth
autoComplete="stateInfo"
variant="filled"
value={filingMaster.stateInfo}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
Rule Info
<TextField
required
id="ruleInf"
name="ruleInf"
label="Enter Rule Info"
fullWidth
autoComplete="ruleInf"
variant="filled"
value={filingMaster.ruleInf}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
Who Must File in State
<TextField
required
id="fileState"
name="fileState"
label="Enter Details"
fullWidth
autoComplete="fileState"
variant="filled"
value={filingMaster.fileState}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
Who Must File in Federal
<TextField
required
id="fileFederal"
name="fileFederal"
label="Enter Details"
fullWidth
autoComplete="fileFederal"
variant="filled"
value={filingMaster.fileFederal}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
Jurisdiction
<FormControl fullWidth variant="filled" required>
<InputLabel id="jurisdiction-label">
Select Jurisdiction
</InputLabel>
<Select
labelId="jurisdiction-label"
id="juristiction"
name="juristiction"
value={filingMaster.juristiction}
onChange={handleJurisdictionChange}
label="Jurisdiction"
>
{juristictionLookup.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>

{/* <Grid xs={12} sm={6} lg={4}>
<TextField
required
id="filingFrequency"
name="filingFrequency"
label="Filing Frequency"
placeholder="Enter Filing Frequency"
fullWidth
autoComplete="FilingFrequency"
variant="filled"
value={filingMaster.filingFrequency}
onChange={onChange}
/>
</Grid> */}

{/* <Grid xs={12} sm={6} lg={4}>
<FormControl fullWidth variant="filled">
<MultiSelect
label=" Filing Business Category"
inputs={categories.map((item) => ({
name: item.businessCategoryName
? item.businessCategoryName
: "",
value: item.businessCategoryId
? item.businessCategoryId + ""
: "",
}))}
values={selectedCategories}
updateSelection={handleCategoryChanges}
/>
</FormControl>
</Grid> */}
<Grid xs={12}>
<h4>JSI CONTACT PERSON'S DETAILS</h4>
</Grid>
<Grid xs={12} sm={6} lg={4}>
JSI Dept
<FormControl fullWidth variant="filled" required>
<InputLabel id="jurisdiction-label">
Select JSI Dept
</InputLabel>
<Select
labelId="jurisdiction-label"
id="jsidept"
name="jsidept"
value={filingMaster.jsidept}
onChange={JsiDeptSelectChange}
label="Jurisdiction"
>
{juristictionLookup.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid xs={12} sm={6} lg={4}>
JSI Contact Name
<TextField
required
id="jsicontactName"
name="jsicontactName"
label="Enter JSI Contact Name"
fullWidth
autoComplete="jsicontactName"
variant="filled"
value={filingMaster.jsicontactName}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
JSI Contact Email
<TextField
required
id="jsicontactEmail"
name="jsicontactEmail"
label="Enter JSI Contact Email"
fullWidth
autoComplete="jsicontactEmail"
variant="filled"
value={filingMaster.jsicontactEmail}
onChange={onChange}
/>
</Grid>
<Grid xs={12} sm={6} lg={4}>
JSI Contact No
<TextField
required
id="jsicontactNumber"
name="jsicontactNumber"
label="Enter JSI Contact No"
fullWidth
autoComplete="jsicontactNumber"
variant="filled"
value={filingMaster.jsicontactNumber}
onChange={onChange}
/>
</Grid>
<Grid
xs={12}
sx={{
display: "flex",
flexDirection: "row",
justifyContent: "flex-end",
}}
>
<Button
variant="text"
style={{ color: "blue" }}
sx={{ margin: 1, padding: 1 }}
onClick={backToHome}
>
CANCEL
</Button>
<LoadingButton
variant="contained"
style={{ backgroundColor: "blue", width: "100px" }}
onClick={submitForm}
loading={filingMasterLoading}
// disabled={!formIsValid}
disabled = {isValid}
sx={{ margin: 1, padding: 1 }}
loadingIndicator={
<CircularProgress color="inherit" size={16} />
}
>
{buttonText}
</LoadingButton>
</Grid>
</Grid>
</React.Fragment>
</Container>
</Stack>
</ThemeProvider>
);
}