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

3
public/locales/fa/app.json
View File

@@ -257,6 +257,7 @@
"operator": "اپراتور",
"date": "تاریخ",
"call_history_of": "تاریخچه تماس های",
"call_history_not_found": "تاریخچه ای برای این تماس یافت نشد"
"call_history_not_found": "تاریخچه ای برای تماس دریافتی یافت نشد",
"call_history_error_fetching": "خطا در دریافت تاریخچه تماس دریافتی"
}
}

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>
)
}

4
src/core/data/apiRoutes.js
View File

@@ -16,6 +16,10 @@ export const GET_ROLE_LIST = BASE_URL + "/api/roles/list";
export const GET_PROVINCE_LIST = BASE_URL + "/api/provinces";
// province list
// province list
export const GET_CALLER_HISTORY = BASE_URL + "...";
// province list
//change password
export const SET_USER_PASSWORD = BASE_URL + "/api/profile/change_password";
//end change password

30
src/lib/callWidget/hooks/useCallerHistory.jsx Normal file
View File

@@ -0,0 +1,30 @@
import {GET_CALLER_HISTORY} from "@/core/data/apiRoutes";
import useRequest from "@/lib/app/hooks/useRequest";
import useSWR from "swr";
const useCallerHistory = (id) => {
const requestServer = useRequest({auth: true, notification: false})
//swr config
const fetcher = (...args) => {
return requestServer(args, 'get').then(({data}) => {
return data.data;
}).catch(() => {
})
};
const {data, isLoading} = useSWR(`${GET_CALLER_HISTORY}/${id}`, fetcher, {
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false,
keepPreviousData: true
});
return {
historyList: data,
isLoadingHistoryList: isLoading,
errorHistoryList: !data
}
};
export default useCallerHistory;