CRM/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

write a hook for fetching caller history and work on caller history part of widget

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-23 10:58:17 +03:30
parent 3286f6d0e3
commit 0f06c0343f
5 changed files with 120 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls/index.jsx
View File

@@ -3,7 +3,7 @@ import {Divider, List} from "@mui/material";
import PreviusOperatorData from "./PreviusOperatorData";
import Topics from "./Topics";
const ListItemOfCalls = ({tab}) => {
const ListItemOfCalls = ({lastItem, tab}) => {
const t = useTranslations();
return (
<>
@@ -11,7 +11,7 @@ const ListItemOfCalls = ({tab}) => {
<PreviusOperatorData/>
<Topics/>
</List>
<Divider/>
{!lastItem && <Divider/>}
</>
)
}

108
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/index.jsx
View File

@@ -1,15 +1,24 @@
import {useTranslations} from "next-intl";
import {Box, Typography} from "@mui/material";
import ListItemOfCalls
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ListItemOfCalls";
import {Box, Chip, Divider, List, ListItemAvatar, ListItemText, Skeleton, Stack, Typography} from "@mui/material";
import ListItemOfCalls from "./ListItemOfCalls";
import HeadphonesIcon from '@mui/icons-material/Headphones';
const CallHistory = ({tab}) => {
const t = useTranslations();
// const {historyList, isLoadingHistoryList, errorHistoryList} = useCallerHistory(tab.id);
const errorHistoryList = false;
const isLoadingHistoryList = true;
const handleClick = () => {
console.info('You clicked the Chip.');
};
return (
<>
<Box sx={{
display: "flex",
alignItems: "end",
<Stack sx={{
height: "100%",
overflow: "hidden"
}}>
<Stack sx={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
py: 2,
backgroundColor: "primary.main",
@@ -21,25 +30,72 @@ const CallHistory = ({tab}) => {
<Typography variant="subtitle1" sx={{color: "#fff"}}>
{tab.phone_number} ....
</Typography>
</Box>
<Box sx={{height: "100%", overflow: "scroll"}}>
<ListItemOfCalls tab={tab}/>
<ListItemOfCalls tab={tab}/>
<ListItemOfCalls tab={tab}/>
<ListItemOfCalls tab={tab}/>
<ListItemOfCalls tab={tab}/>
<ListItemOfCalls tab={tab}/>
<ListItemOfCalls tab={tab}/>
{/*<Typography variant="subtitle1"*/}
{/* sx={{*/}
{/* color: "#837e7e",*/}
{/* textAlign: "center",*/}
{/* mt: "50%"*/}
{/* }}>*/}
{/* {t("CallHistory.call_history_not_found")}*/}
{/*</Typography>*/}
</Box>
</>
</Stack>
<Stack sx={{overflow: "scroll"}}>
{errorHistoryList ? (
<Typography variant="subtitle1" sx={{
color: "#837e7e",
fontWeight: "500",
letterSpacing: 1,
textAlign: "center",
mt: "50%"
}}>
{t("CallHistory.call_history_error_fetching")}
</Typography>
) : isLoadingHistoryList ? (
<>
<List sx={{
width: '100%',
bgcolor: 'rgba(222,234,215,0.11)',
display: "flex",
alignItems: "center"
}}>
<ListItemAvatar>
<Skeleton animation="wave" variant="circular" width={60} height={60}/>
</ListItemAvatar>
<ListItemText primary={
<Box sx={{display: "flex", alignItems: "end"}}>
<Skeleton
animation="wave"
height={15}
width="50%"
style={{marginBottom: 6}}
/>
</Box>
} secondary={
<Skeleton
animation="wave"
height={10}
width="30%"
style={{marginBottom: 6}}
/>
}/>
</List>
</>
) : historyList.length === 0 ? (
<Typography variant="subtitle1" sx={{
color: "#837e7e",
fontWeight: "500",
letterSpacing: 1,
textAlign: "center",
mt: "50%"
}}>
{t("CallHistory.call_history_not_found")}
</Typography>
) : (
<Box>
<ListItemOfCalls lastItem={true} historyList={historyList}/>
<Divider>
<Chip
icon={<HeadphonesIcon/>}
onClick={handleClick}
label="نمایش موارد بیشتر">
</Chip>
</Divider>
</Box>
)}
</Stack>
</Stack>
)
}