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

work on caller history part of widget and making fake data and work on that

Browse Source
This commit is contained in:
Mohammad Jalali
2023-10-23 16:00:58 +03:30
parent 0f06c0343f
commit 0f6efe7ec1
11 changed files with 207 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/__tests__/index.test.js Normal file
View File

33
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/ErrorOrEmpty/index.jsx Normal file
View File

@@ -0,0 +1,33 @@
import {useTranslations} from "next-intl";
import {Typography} from "@mui/material";
const ErrorOrEmpty = ({isErrorOrEmpty}) => {
const t = useTranslations();
return (
<>
{isErrorOrEmpty === "error" ?
<Typography variant="subtitle1" sx={{
color: "#837e7e",
fontWeight: "500",
letterSpacing: 1,
textAlign: "center",
mt: "50%"
}}>
{t("CallHistory.call_history_error_fetching")}
</Typography>
: isErrorOrEmpty === "empty" ?
<Typography variant="subtitle1" sx={{
color: "#837e7e",
fontWeight: "500",
letterSpacing: 1,
textAlign: "center",
mt: "50%"
}}>
{t("CallHistory.call_history_not_found")}
</Typography> : <></>
}
</>
)
}
export default ErrorOrEmpty

0
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/__tests__/index.test.js Normal file
View File

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/HistoryHeader/index.jsx Normal file
View File

@@ -0,0 +1,25 @@
import {useTranslations} from "next-intl";
import {Stack, Typography} from "@mui/material";
const HistoryHeader = ({tab}) => {
const t = useTranslations();
return (
<Stack sx={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
py: 2,
backgroundColor: "primary.main",
overflow: "hidden"
}}>
<Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
.... {t("CallHistory.call_history_of")}:
</Typography>
<Typography variant="subtitle1" sx={{color: "#fff"}}>
{tab.phone_number} ....
</Typography>
</Stack>
)
}
export default HistoryHeader

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

@@ -2,7 +2,8 @@ import {useTranslations} from "next-intl";
import {Avatar, Box, ListItem, ListItemAvatar, ListItemText, Typography} from "@mui/material";
import HeadsetMicIcon from '@mui/icons-material/HeadsetMic';
const PreviusOperatorData = ({tab}) => {
const PreviusOperatorData = ({historyItem}) => {
console.log(historyItem)
const t = useTranslations();
return (
<ListItem>
@@ -14,13 +15,13 @@ const PreviusOperatorData = ({tab}) => {
<ListItemText primary={
<Box sx={{display: "flex", alignItems: "end"}}>
<Typography sx={{marginRight: 1, color: "#545151"}}>
اشکان خطیبی
{historyItem.operator_name}
</Typography>
<Typography variant="caption" sx={{color: "secondary.main"}}>
({t("CallHistory.operator")})
</Typography>
</Box>
} secondary="1379/02/03 13:50"/>
} secondary={historyItem.answer_date}/>
</ListItem>
)
}

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

@@ -1,7 +1,7 @@
import {useTranslations} from "next-intl";
import {Box, List, ListItem, Typography} from "@mui/material";
const Topics = ({tab}) => {
const Topics = ({historyItem}) => {
const t = useTranslations();
return (
<Box timeout="auto" unmountOnExit>
@@ -12,7 +12,7 @@ const Topics = ({tab}) => {
{t("CallHistory.topic")}:
</Typography>
<Typography variant="subtitle2" sx={{color: "#837e7e"}}>
موضوع تست
{historyItem.topic}
</Typography>
</Box>
</ListItem>
@@ -31,7 +31,7 @@ const Topics = ({tab}) => {
textAlign: "end",
color: "#837e7e"
}}>
زیر موضوع تست با متن طولانی تر از موضوع
{historyItem.sub_topic}
</Typography>
</Box>
</ListItem>

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

@@ -3,13 +3,14 @@ import {Divider, List} from "@mui/material";
import PreviusOperatorData from "./PreviusOperatorData";
import Topics from "./Topics";
const ListItemOfCalls = ({lastItem, tab}) => {
const ListItemOfCalls = ({lastItem, historyItem}) => {
const t = useTranslations();
console.log("historyItem", historyItem)
return (
<>
<List sx={{width: '100%', bgcolor: 'rgba(222,234,215,0.11)'}}>
<PreviusOperatorData/>
<Topics/>
<PreviusOperatorData historyItem={historyItem}/>
<Topics historyItem={historyItem}/>
</List>
{!lastItem && <Divider/>}
</>

0
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/__tests__/intex.test.js Normal file
View File

78
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory/LoadingHistory/index.jsx Normal file
View File

@@ -0,0 +1,78 @@
import {useTranslations} from "next-intl";
import {Box, List, ListItem, ListItemAvatar, ListItemText, Skeleton} from "@mui/material";
const LoadingHistory = () => {
const t = useTranslations();
return (
<>
<List sx={{
width: '100%',
bgcolor: 'rgba(222,234,215,0.11)',
}}>
<Box sx={{
display: "flex",
alignItems: "center",
px: 2
}}>
<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={{marginRight: 10, marginBottom: 5}}
/>
</Box>
} secondary={
<Skeleton
animation="wave"
height={10}
width="30%"
style={{marginRight: 10}}
/>
}/>
</Box>
<Box timeout="auto" unmountOnExit sx={{py: 2}}>
<List component="div" disablePadding>
<ListItem sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Skeleton
animation="wave"
height={15}
width="15%"
/>
<Skeleton
animation="wave"
height={15}
width="30%"
/>
</Box>
</ListItem>
</List>
<List component="div" disablePadding>
<ListItem sx={{px: 4}}>
<Box sx={{width: "100%", display: "flex", justifyContent: "space-between"}}>
<Skeleton
animation="wave"
height={15}
width="25%"
/>
<Skeleton
animation="wave"
height={15}
width="50%"
/>
</Box>
</ListItem>
</List>
</Box>
</List>
</>
)
}
export default LoadingHistory

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

@@ -1,13 +1,17 @@
import {useTranslations} from "next-intl";
import {Box, Chip, Divider, List, ListItemAvatar, ListItemText, Skeleton, Stack, Typography} from "@mui/material";
import ListItemOfCalls from "./ListItemOfCalls";
import {Box, Chip, Divider, Stack} from "@mui/material";
import HeadphonesIcon from '@mui/icons-material/Headphones';
import LoadingHistory from "./LoadingHistory";
import HistoryHeader from "./HistoryHeader";
import ErrorOrEmpty from "./ErrorOrEmpty";
import useCallerHistory from "@/lib/callWidget/hooks/useCallerHistory";
import ListItemOfCalls from "./ListItemOfCalls";
import {useState} from "react";
const CallHistory = ({tab}) => {
const t = useTranslations();
// const {historyList, isLoadingHistoryList, errorHistoryList} = useCallerHistory(tab.id);
const errorHistoryList = false;
const isLoadingHistoryList = true;
const {historyList, isLoadingHistoryList, errorHistoryList} = useCallerHistory(tab.id);
const [showRestOfHistory, setShowRestOfHistory] = useState(false);
const handleClick = () => {
console.info('You clicked the Chip.');
};
@@ -16,82 +20,36 @@ const CallHistory = ({tab}) => {
height: "100%",
overflow: "hidden"
}}>
<Stack sx={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
py: 2,
backgroundColor: "primary.main",
overflow: "hidden"
}}>
<Typography variant="subtitle1" sx={{marginRight: 1, color: "#fff"}}>
.... {t("CallHistory.call_history_of")}:
</Typography>
<Typography variant="subtitle1" sx={{color: "#fff"}}>
{tab.phone_number} ....
</Typography>
</Stack>
<HistoryHeader tab={tab}/>
<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>
<ErrorOrEmpty isErrorOrEmpty="error"/>
) : 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>
</>
<LoadingHistory/>
) : historyList.length === 0 ? (
<Typography variant="subtitle1" sx={{
color: "#837e7e",
fontWeight: "500",
letterSpacing: 1,
textAlign: "center",
mt: "50%"
}}>
{t("CallHistory.call_history_not_found")}
</Typography>
<ErrorOrEmpty isErrorOrEmpty="empty"/>
) : (
<Box>
<ListItemOfCalls lastItem={true} historyList={historyList}/>
<ListItemOfCalls key={historyList[1].id} lastItem={true} historyItem={historyList[1]}/>
<Divider>
<Chip
icon={<HeadphonesIcon/>}
onClick={handleClick}
label="نمایش موارد بیشتر">
onClick={() => setShowRestOfHistory(true)}
label="نمایش موارد بیشتر"
disabled={showRestOfHistory}>
</Chip>
</Divider>
{showRestOfHistory && (
<>
{historyList.slice(2).map((historyItem, index) => (
<>
<ListItemOfCalls key={historyItem.id} lastItem={true}
historyItem={historyItem}/>
<Divider/>
</>
))}
</>)
}
</Box>
)}
</Stack>

35
src/lib/callWidget/hooks/useCallerHistory.jsx
View File

@@ -21,9 +21,38 @@ const useCallerHistory = (id) => {
});
return {
historyList: data,
isLoadingHistoryList: isLoading,
errorHistoryList: !data
historyList: [
{
id: 1,
operator_name: "اشکان خطیبی",
answer_date: "1379/02/03 13:50",
topic: "موضوع تست",
sub_topic: "زیر موضوع تست با متن طولانی تر از موضوع"
},
{
id: 2,
operator_name: "مصیب خطیبی",
answer_date: "1385/01/23 23:10",
topic: "موضوع تست2",
sub_topic: "زیر موضوع تست با متن طولانی تر از موضوع2"
},
{
id: 2,
operator_name: "علی جلالی",
answer_date: "1385/01/01 12:12",
topic: "موضوع تست23",
sub_topic: "زیر 22موضوع تست با متن طولانی تر از موضوع32"
},
{
id: 2,
operator_name: "حسن محمودی",
answer_date: "1385/01/01 11:22",
topic: "موضوع اول",
sub_topic: "زیر دوم تست با متن طولانی تر از موضوع32"
}
],
isLoadingHistoryList: false,
errorHistoryList: false
}
};