Notes

import React, { Fragment, useState, useEffect, useContext } from "react";
import Grid from "@mui/material/Unstable_Grid2";
import { styled } from "@mui/material/styles";
import Paper from "@mui/material/Paper";
import DataTableBase from "../common/DataTableBase";
import PageNavbar from "../layout/PageNavbar";
import Toolbox from "../common/Toolbox";
import SlidingDrawer from "../common/SlidingDrawer";
import _ from "lodash";
// import customers from "../../data/customers.json";
import { InputSwitch } from "primereact/inputswitch";
import { InputText } from "primereact/inputtext";
import { MultiSelect } from "primereact/multiselect";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { FilterMatchMode, FilterOperator } from "primereact/api";
import CustomerContext from "../../context/customer/CustomerContext";
import axios from "axios";

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 ClientProfiles = () => {
const columns = [
{
name: "Client Name",
selector: (row) => row.customerName,
sortable: true,
},
{
name: "Category",
selector: (row) => row.categories,
sortable: true,
},
{
name: "Address",
selector: (row) =>
row.address + "," + row.city + "," + row.state + "-" + row.locationCode,
sortable: false,
},
{
name: "Tax Number",
selector: (row) => row.taxNumber,
sortable: true,
},
{
name: "Phone",
selector: (row) => row.phone,
sortable: false,
},
{
name: "EMAIL",
selector: (row) => row.mail,
sortable: false,
},
{
name: "Juristiction",
selector: (row) => row.jurisdiction,
sortable: true,
},
{
name: "Notes",
selector: (row) => row.notes,
sortable: false,
},
];

const customerContext = useContext(CustomerContext);
const { getCustomers, customers, customerLoaded } = customerContext;

// const data = customers;
// const [visibleApps, setVisibleApps] = useState(props.projects);
const [showFilter, setShowFilter] = useState(false);
const [clients, setClients] = useState([]);
const [selectedClients, setSelectedClients] = useState(null);
const [rowClick, setRowClick] = useState(true);

// useEffect(() => {
// ProductService.getClientsMini().then((data) => setClients(data));
// }, []);
const [data, setData] = useState([]);
const [jurisdiction, setJurisdiction] = useState([]);
const [filters, setFilters] = useState({
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
customerName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
juristiction: { value: null, matchMode: FilterMatchMode.IN },
// 'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
// representative: { value: null, matchMode: FilterMatchMode.IN },
// status: { value: null, matchMode: FilterMatchMode.EQUALS },
// verified: { value: null, matchMode: FilterMatchMode.EQUALS }
});
const [globalFilterValue, setGlobalFilterValue] = useState("");

const displayFilter = () => {
console.log("Toggling Show Filter", showFilter);
setShowFilter(() => true);
};
const closeFilter = () => {
console.log("Toggling Show Filter", showFilter);
setShowFilter(() => 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>
);
// return (
// <div className="flex align-items-center gap-2">
// <img alt={option.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${option.image}`} width="32" />
// <span>{option.name}</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 fetchCustomers = async () => {
console.log("@@Fetch Customers1:", getCustomers);
if (getCustomers) {
console.log("@@Fetch Customers2:");
try {
const custList = await getCustomers();
console.log("@@Customers:", custList);
// console.log("@@Unique Jurisdiction:", _.map(custList, "jurisdiction"));
// console.log(
// "@@Unique Jurisdiction:",
// _.unique(_.map(custList, "jurisdiction"))
// );
const _jusrisdictions = custList.map((item) => item.juristiction);
const _uniqJurisdictions = Array.from(new Set(_jusrisdictions));
console.log("@@Unique Jurisdiction:", _uniqJurisdictions);
setJurisdiction(_uniqJurisdictions);
} catch (error) {
console.log("@@Error:", error);
}
}
};
const onRowSelect = (e) => {
console.log("@@RowSelect:", e);
};

useEffect(() => {
if (customerLoaded) console.log("Show Table Data", customers);

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

useEffect(() => {
fetchCustomers();

//eslint-disable-next-line
}, []);
const [commentsData,setCommentsData] = useState(null)
const getComments = (data)=>{
console.log('row data',data);
sessionStorage.setItem('userIdForComments',data.customerID);
sessionStorage.setItem('usernameForComments',data.customerName);


setSelectedClients(data)
}

useEffect(() => {
if (customers) {
console.log("Orig Customers...", customers);
const updCustomers = customers.map((item) => {
console.log(`Customer ...`, item);
const categories = _.map(
item.businessCategory,
"businessCategoryName"
).join(", ");
console.log(`Customers ${item.customerID} cat...`, categories);
return { ...item, categories };
});
console.log("Updated Customers...", updCustomers);
// setData(updCustomers);
setClients(updCustomers);
}

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

const renderHeader = () => {
return (
<div className='flex justify-content-end'>
<span className='p-input-icon-left'>
<i className='pi pi-search' />
<InputText
value={globalFilterValue}
onChange={onGlobalFilterChange}
placeholder='Keyword Search'
/>
</span>
</div>
);
};

const header = renderHeader();

return (
<Fragment>
<Grid sm={23} sx={{ height: "100vh" }}>
<Grid sm={23} sx={{ height: "10vh" }}>
<PageNavbar pageTitle={"CLIENT PROFILE LIST"} />
</Grid>
<Grid sm={23} sx={{ height: "90vh", mx: 2 }}>
{/* {customerLoaded && (
<DataTableBase columns={columns} data={data} selectableRows />
)}
{
<SlidingDrawer
show={showFilter}
dockAt='right'
handleClose={closeFilter}
/>
} */}
<div className='card' style={{ maxWidth: "97vw" }}>
{/* <div className='flex justify-content-center align-items-center mb-4 gap-2'>
<InputSwitch
inputId='input-rowclick'
checked={rowClick}
onChange={(e) => setRowClick(e.value)}
/>
<label htmlFor='input-rowclick'>Row Click</label>
</div> */}
<DataTable
scrollable
resizableColumns
showGridlines
value={clients}
selection={selectedClients}
onSelectionChange = {(e)=>getComments(e.value)}
// onSelectionChange={(e) => {setSelectedClients(e.value);console.log('Testing user',e.value)}}
dataKey='customerID'
tableStyle={{ minWidth: "70rem" }}
onRowSelect={onRowSelect}
paginator
rows={10}
rowsPerPageOptions={[5, 10, 25, 50]}
filters={filters}
filterDisplay='row'
globalFilterFields={["customerName"]}
header={header}
>
<Column selectionMode='single' headerStyle={{ width: "3rem" }}>
Select
</Column>
<Column
field='customerName'
header='Customer Name'
sortable
filter
filterPlaceholder='Search by Name'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='categories'
header='Categories'
sortable
filter
filterPlaceholder='Search by Cateogry'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='address'
header='Address'
filter
filterPlaceholder='Search by Address'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='taxNumber'
header='Tax Number'
filter
filterPlaceholder='Search by Tax Number'
style={{ minWidth: "15rem" }}
></Column>
<Column
field='phone'
header='Phone'
filter
filterPlaceholder='Search by Phone'
style={{ minWidth: "15rem" }}
></Column>
{/* <Column field='mail' header='Email'></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" }}>
<Toolbox displayFilter={displayFilter} commentsData={commentsData}/>
</Item>
</Grid>
</Fragment>
);
};

export default ClientProfiles;