Notes

import React, {
Fragment,
useState,
useEffect,
useContext,
useMemo,
useCallback,
} from "react";
import Grid from "@mui/material/Unstable_Grid2";
import { styled } from "@mui/material/styles";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import DataTableBase from "../common/DataTableBase";
import PageNavbar from "./PageNavbar";
import ApproveToolbox from "./ApproveToolbox";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { FilterMatchMode, FilterOperator } from "primereact/api";
import SlidingDrawer from "../common/SlidingDrawer";
import { InputText } from "primereact/inputtext";
import { MultiSelect } from "primereact/multiselect";
import { Button as PrimeButton } from "primereact/button";
import { Dialog } from "primereact/dialog";
import _ from "lodash";
import { useLocation } from "react-router-dom";
// import filingMasters from "../../data/filingMasters.json";
import FilingMasterContext from "../../context/filing-master/FilingMasterContext";
import ApproveFilingMaster from "./ApproveFilingMaster";
import FilingMasterWorkflowComments from "./ApprovalListComments";

const Item = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: "center",
color: theme.palette.text.secondary,
}));

const ApprovalList = () => {
const [selectedFiling, setSelectedFiling] = useState(null);
const [selectedRows, setSelectedRows] = useState(null);
const [data, setData] = useState([]);
const [alertMessage, setAlertMessage] = useState("");
const [showAlert, setShowAlert] = useState(false);
const [comments, setComments] = React.useState([]);
const [filters, setFilters] = useState({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
filingName: { value: null, matchMode: FilterMatchMode.CONTAINS },
filingDescription: { value: null, matchMode: FilterMatchMode.CONTAINS },
filingFrequency: { value: null, matchMode: FilterMatchMode.CONTAINS },
stateInfo: { value: null, matchMode: FilterMatchMode.CONTAINS },
ruleInf: { value: null, matchMode: FilterMatchMode.CONTAINS },
required: { value: null, matchMode: FilterMatchMode.CONTAINS },
federalCategories: { value: null, matchMode: FilterMatchMode.CONTAINS },
stateCategories: { value: null, matchMode: FilterMatchMode.CONTAINS },
jsidept: { value: null, matchMode: FilterMatchMode.CONTAINS },
jsicontactName: { value: null, matchMode: FilterMatchMode.CONTAINS },
jsicontactEmail: { value: null, matchMode: FilterMatchMode.CONTAINS },
juristiction: { value: null, matchMode: FilterMatchMode.IN },
});
const getFilingCategories = (filingMaster) => {
return _.map(filingMaster.businessCategory, "businessCategoryName").join(
", "
);
};

const filingMasterContext = useContext(FilingMasterContext);
const {
getFilingMasterApprovals,
filingMasterApprovals,
filingMasterLoaded,
getFilingMasterWorkflowComments,
} = filingMasterContext;

// const data = filingMasterApprovals;
// const [visibleApps, setVisibleApps] = useState(props.projects);
const [showFilter, setShowFilter] = useState(false);
const [showComments, setShowComments] = useState(false);
const [globalFilterValue, setGlobalFilterValue] = useState("");
const [jurisdiction, setJurisdiction] = useState([]);
const displayFilter = () => {
console.log("Toggling Show Filter", showFilter);
setShowFilter(() => true);
};
const closeFilter = () => {
console.log("Toggling Show Filter", showFilter);
setShowFilter(() => false);
};

// const location = useLocation()
// const { selectRows } = location.state;
// console.log("received props", selectRows);

const approveDraft = () => {
console.log("Approving Draft", selectedFiling);
if (selectedFiling) {
setShowFilter(() => true);
} else {
setAlertMessage("Please Select a Filing Master Record");
setShowAlert(true);
}
};

const fetchFilingMasterComments = async (filingId: number) => {
console.log("@@Fetch FilingMasters1:", getFilingMasterWorkflowComments);
if (getFilingMasterWorkflowComments) {
console.log("@@Fetch FilingMasters2:");
try {
const commentList = await getFilingMasterWorkflowComments(filingId);
setComments(() => commentList);
console.log("@@Fetch FilingMasters2 comments:", commentList);
} catch (error) {
console.log("@@Error:", error);
}
}
};

const addComment = () => {
console.log("Display Comments", selectedFiling);
console.log("Fetching Comments", selectedFiling);
if (selectedFiling && selectedFiling.workflowId) {
console.log(`Fetching Commnet for :${selectedFiling.workflowId}`);
fetchFilingMasterComments(selectedFiling.workflowId);

setShowComments(() => true);
} else {
setAlertMessage("Please Select a Client Record");
setShowAlert(true);
}
};

const closeComments = () => {
console.log("Toggling Show Filter", showComments);
setShowComments(() => false);
};

const onGlobalFilterChange = (e) => {
const value = e.target.value;
let _filters = { ...filters };
_filters["global"].value = value;
setFilters(_filters);
setGlobalFilterValue(value);
};

const jusrisdictionItemTemplate = (option) => {
return (
<div className='flex align-items-center'>
<span>{option}</span>
</div>
);
};

const jurisdictionRowFilterTemplate = (options) => {
console.log("##Options:", options);
return (
<MultiSelect
value={options.value}
options={jurisdiction}
itemTemplate={jusrisdictionItemTemplate}
onChange={(e) => {
console.log("##EOptions:", e);
options.filterApplyCallback(e.value);
}}
placeholder='Any'
maxSelectedLabels={1}
className='p-column-filter'
style={{ minWidth: "14rem", maxWidth: "14rem" }}
/>
);
};

const fetchFilingMasters = async () => {
console.log("@@Fetch FilingMasters1:", getFilingMasterApprovals);
if (getFilingMasterApprovals) {
console.log("@@Fetch FilingMasters2:");
try {
const list = await getFilingMasterApprovals();
console.log("@@FilingMasters:", list);
} catch (error) {
console.log("@@Error:", error);
}
}
};

const onRowSelect = (e) => {
console.log("@@RowSelect:", e);
};

useEffect(() => {
if (filingMasterLoaded) {
console.log("Show Table Data", filingMasterApprovals);
const updList = filingMasterApprovals.filter(
(item) => item.changesInprogress
);
const _jusrisdictions = updList.map((item) => item.juristiction);
const _uniqJurisdictions = Array.from(new Set(_jusrisdictions));
console.log("@@Unique Jurisdiction:", _uniqJurisdictions);
setJurisdiction(_uniqJurisdictions);
setData(() => updList);
}

//eslint-disable-next-line
}, [filingMasterLoaded]);

useEffect(() => {
fetchFilingMasters();

//eslint-disable-next-line
}, []);

const handleChange = useCallback((state) => {
setSelectedRows(state.selectedRows);
}, []);

useEffect(() => {
console.log("state", selectedRows);
}, [selectedRows]);

const renderHeader = () => {
return (
<Grid container sx={{ my: 1, flexDirection: "row" }}>
<Grid md={8} sx={{ margin: 1, flexGrow: 1 }}>
<Typography
variant='h6'
noWrap
component='a'
sx={{
fontWeight: 500,
color: "inherit",
textDecoration: "none",
}}
>
FILING MASTER APPROVALS ({data.length})
</Typography>
</Grid>
<Grid md={3} sx={{ margin: 1 }}>
<span className='p-input-icon-left'>
<i className='pi pi-search' />
<InputText
value={globalFilterValue}
onChange={onGlobalFilterChange}
placeholder='Keyword Search'
/>
</span>
</Grid>
</Grid>
);
};

const header = renderHeader();

const footerContent = (
<div>
<PrimeButton
label='OK'
icon='pi pi-check'
onClick={() => closeAlert()}
autoFocus
/>
</div>
);

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

return (
<Fragment>
<Grid sm={23} sx={{ height: "100vh" }}>
{/* <Grid sm={23} sx={{ height: "10vh" }}>
<PageNavbar pageTitle={"FILING MASTER LIST"} />
</Grid> */}
<ApproveFilingMaster
show={showFilter}
dockAt='right'
draft={selectedFiling}
handleClose={closeFilter}
/>
<Grid sx={{ height: "90vh", mx: 2 }}>
{filingMasterLoaded && (
<div className='card' style={{ maxWidth: "97vw" }}>
<DataTable
scrollable
resizableColumns
showGridlines
value={data}
selection={selectedFiling}
onSelectionChange={(e) => setSelectedFiling(e.value)}
dataKey='draftId'
tableStyle={{ minWidth: "70rem" }}
onRowSelect={onRowSelect}
paginator
rows={10}
rowsPerPageOptions={[5, 10, 25, 50]}
filters={filters}
filterDisplay='row'
globalFilterFields={["filingName"]}
header={header}
>
<Column selectionMode='single' headerStyle={{ width: "3rem" }}>
Select
</Column>
<Column
field='filingName'
header='Filing Name'
sortable
filter
filterPlaceholder='Search by Name'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='filingDescription'
header='Filing Description'
sortable
filter
filterPlaceholder='Search by Description'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='filingFrequency'
header='Filing Frequency'
filter
filterPlaceholder='Search by Frequency'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='stateInfo'
header='State'
filter
filterPlaceholder='Search by stateInfo '
style={{ minWidth: "15rem" }}
></Column>
<Column
field='ruleInf'
header='Rule Info'
filter
filterPlaceholder='Search by ruleInf'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='required'
header='Mandatory'
filter
filterPlaceholder='Search by required'
style={{ minWidth: "15rem" }}
></Column>

<Column
field='federalCategories'
header='Who Must File Federal'
sortable
filter
filterPlaceholder='Search by Cateogry'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='stateCategories'
header='Who Must File in State'
sortable
filter
filterPlaceholder='Search by Cateogry'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='jsidept'
header='JSI Dept'
filter
filterPlaceholder='Search by dept'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='jsicontactName'
header='JSI Contact Name'
filter
filterPlaceholder='Search by contactName '
style={{ minWidth: "15rem" }}
></Column>
<Column
field='jsicontactEmail'
header='JSI Contact Email'
filter
filterPlaceholder='Search by contactEmail'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='juristiction'
header='Jurisdiction'
sortable
filterField='juristiction'
showFilterMenu={false}
filterMenuStyle={{ width: "14rem" }}
style={{ minWidth: "14rem" }}
filter
filterElement={jurisdictionRowFilterTemplate}
></Column>
<Column
field='notes'
header='Notes'
style={{ minWidth: "15rem" }}
></Column>
</DataTable>
</div>
)}
</Grid>
</Grid>
<Grid sm={1} sx={{ height: "90vh" }}>
<Item sx={{ height: "90vh", backgroundColor: "linen", mt: "5" }}>
<ApproveToolbox addComment={addComment} approveDraft={approveDraft} />
</Item>
</Grid>
<Dialog
header='Info'
visible={showAlert}
style={{ width: "30vw" }}
onHide={() => closeAlert()}
footer={footerContent}
>
<p className='m-0'>{alertMessage}</p>
</Dialog>
{
<FilingMasterWorkflowComments
show={showComments}
dockAt='right'
workflow={selectedFiling}
comments={comments}
handleClose={closeComments}
/>
}
</Fragment>
);
};

export default ApprovalList;