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

CFE-25 change structure call widget

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-10-11 13:10:30 +03:30
parent dfc0207242
commit a3ee52632f
15 changed files with 64 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/layouts/Dashboard/CallWidget/CallWidgetButton.jsx
View File

@@ -1,15 +0,0 @@
import PermPhoneMsgIcon from '@mui/icons-material/PermPhoneMsg';
import StyledFab from "@/core/components/StyledFab";
import useCallDialog from "@/lib/callWidget/hooks/useCallDialog";
const CallWidgetButton = () => {
const {setOpenCallDialog} = useCallDialog()
return (
<StyledFab color="primary" aria-label="open-dialog"
onClick={() => setOpenCallDialog(true)}>
<PermPhoneMsgIcon/>
</StyledFab>
)
}
export default CallWidgetButton

10
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
const CallActions = () => {
const {answer} = useAnswers()
return (
<>CallActions - {answer.id}</>
)
}
export default CallActions

10
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory/index.jsx Normal file
View File

@@ -0,0 +1,10 @@
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
const CallHistory = () => {
const {answer} = useAnswers()
return (
<>CallHistory - {answer.id}</>
)
}
export default CallHistory

18
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/index.jsx Normal file
View File

@@ -0,0 +1,18 @@
import {Grid} from "@mui/material";
import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallActions";
import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel/CallHistory";
const CallPanel = () => {
return (
<Grid container columns={{xs: 3}}>
<Grid item xs={2}>
<CallActions/>
</Grid>
<Grid item xs={1}>
<CallHistory/>
</Grid>
</Grid>
)
}
export default CallPanel

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

@@ -1,7 +0,0 @@
const CallActions = ({tab}) => {
return (
<>CallActions - {tab.id}</>
)
}
export default CallActions

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

@@ -1,7 +0,0 @@
const CallHistory = ({tab}) => {
return (
<>CallHistory - {tab.id}</>
)
}
export default CallHistory

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

@@ -1,19 +0,0 @@
import {Grid} from "@mui/material";
import CallActions from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallActions";
import CallHistory from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel/CallHistory";
const CallTabPanel = ({tab}) => {
return (
<Grid container columns={{xs: 3}} sx={{display: !tab.active && 'none'}} role="tabpanel"
id={`answer-tabpanel-${tab.id}`} aria-labelledby={`answer-tab-${tab.id}`}>
<Grid item xs={2}>
<CallActions tab={tab}/>
</Grid>
<Grid item xs={1}>
<CallHistory tab={tab}/>
</Grid>
</Grid>
)
}
export default CallTabPanel

23
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel.jsx
View File

@@ -1,23 +0,0 @@
import {IconButton, Stack, Typography, Zoom} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
const CallTabLabel = ({tab}) => {
const {closeAnswerTab} = useAnswers()
const handleCloseClick = (id) => {
closeAnswerTab(id)
};
return (
<Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
<Typography>{tab.phone_number} - {tab.id}</Typography>
<Zoom in={tab.active}>
<IconButton onClick={() => handleCloseClick(tab.id)}>
<CloseIcon/>
</IconButton>
</Zoom>
</Stack>
)
}
export default CallTabLabel

27
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/index.jsx
View File

@@ -1,27 +0,0 @@
import {Box, Tab, Tabs} from "@mui/material";
import CallTabLabel
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabLabel";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
const CallTabsList = () => {
const {answersList, changeActiveTabAnswers, activeTab} = useAnswers()
const handleChange = (event, newValue) => {
changeActiveTabAnswers(newValue)
};
return (
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<Tabs
value={activeTab}
onChange={handleChange}
variant={'fullWidth'}
>
{answersList.map((answer) => (
<Tab component={'div'} sx={{py: 0.5, pr: 0,}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
))}
</Tabs>
</Box>
)
}
export default CallTabsList

17
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/index.jsx
View File

@@ -1,17 +0,0 @@
import CallTabsList from "src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList";
import CallTabPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabPanel";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
const CallTabs = () => {
const {answersList} = useAnswers()
return (
<>
<CallTabsList/>
{answersList.map((answer) => (
<CallTabPanel key={answer.id} tab={answer}/>
))}
</>
)
}
export default CallTabs

23
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/index.jsx
View File

@@ -2,18 +2,19 @@ import {Dialog} from "@mui/material";
import {DialogTransition} from "@/core/components/DialogTransition";
import {useEffect} from "react";
import useCallDialog from "@/lib/callWidget/hooks/useCallDialog";
import CallTabs from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs";
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import useSocket from "@/lib/app/hooks/useSocket";
import CallPanel from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallPanel";
const CallWidgetDialog = () => {
const {openCallDialog, setOpenCallDialog} = useCallDialog()
const {answersList, newAnswerTab} = useAnswers()
const {answer, newAnswer} = useAnswers()
const socket = useSocket()
useEffect(() => {
const answerCall = (data, act) => {
newAnswerTab({
const answerCall = (_data, act) => {
const data = JSON.parse(_data)
newAnswer({
id: data.id,
phone_number: data.phone_number
})
@@ -24,15 +25,15 @@ const CallWidgetDialog = () => {
return () => {
socket.off('answer', answerCall)
}
}, []);
});
useEffect(() => {
if (answersList.length === 0) {
setOpenCallDialog(false)
if (answer) {
setOpenCallDialog(true)
return
}
setOpenCallDialog(true)
}, [answersList.length]);
setOpenCallDialog(false)
}, [answer]);
return (
<Dialog
@@ -40,7 +41,9 @@ const CallWidgetDialog = () => {
open={openCallDialog}
TransitionComponent={DialogTransition}
>
<CallTabs/>
{answer && (
<CallPanel/>
)}
</Dialog>
)
}

2
src/components/layouts/Dashboard/CallWidget/index.jsx
View File

@@ -1,4 +1,3 @@
import CallWidgetButton from "@/components/layouts/Dashboard/CallWidget/CallWidgetButton";
import CallWidgetDialog from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog";
import {AnswersProvider} from "@/lib/callWidget/contexts/answers";
import useSocket from "@/lib/app/hooks/useSocket";
@@ -19,7 +18,6 @@ const CallWidget = () => {
return (
<AnswersProvider>
<CallWidgetButton/>
<CallWidgetDialog/>
</AnswersProvider>
)

2
src/core/components/LoadingHardPage.jsx
View File

@@ -23,7 +23,7 @@ const LoadingHardPage = ({children, loading}) => {
return (
<>
<Backdrop
sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1}}
sx={{bgcolor: "#fff", zIndex: (theme) => theme.zIndex.modal + 1}}
open={loading}
>
<LoadingImage

16
src/lib/callWidget/contexts/answers.jsx
View File

@@ -2,13 +2,10 @@ import {createContext, useReducer, useState} from "react";
const reducer = (state, action) => {
switch (action.type) {
case "CHANGE_ACTIVE_TAB":
return state.map((answer, index) => action.newValue === index ? {...answer, active: true} : {
...answer,
active: false
});
case "CHANGE_LIST":
return [...action.newList]
case "CREATE_ANSWER":
return {...action.data}
case "DELETE_ANSWER":
return null
default:
return state;
}
@@ -16,8 +13,7 @@ const reducer = (state, action) => {
export const AnswersContext = createContext()
export const AnswersProvider = ({children}) => {
const [openCallDialog, setOpenCallDialog] = useState(false)
const [activeTab, setActiveTab] = useState(0)
const [state, dispatch] = useReducer(reducer, []);
const [state, dispatch] = useReducer(reducer, null);
return <AnswersContext.Provider
value={{
@@ -25,7 +21,5 @@ export const AnswersProvider = ({children}) => {
setOpenCallDialog,
state,
dispatch,
activeTab,
setActiveTab
}}>{children}</AnswersContext.Provider>
}

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

@@ -2,37 +2,16 @@ import {useContext} from "react";
import {AnswersContext} from "@/lib/callWidget/contexts/answers";
const useAnswers = () => {
const {state, dispatch, activeTab, setActiveTab} = useContext(AnswersContext)
const {state, dispatch} = useContext(AnswersContext)
const changeActiveTabAnswers = (newValue) => {
dispatch({type: 'CHANGE_ACTIVE_TAB', newValue})
setActiveTab(newValue)
const newAnswer = (data) => {
dispatch({type: 'CREATE_ANSWER', data})
}
const deleteAnswer = () => {
dispatch({type: 'DELETE_ANSWER'})
}
const newAnswerTab = (data) => {
const newAnswer = {
id: data.id,
phone_number: data.phone_number,
active: true
}
const newList = [...state, newAnswer]
dispatch({type: 'CHANGE_LIST', newList})
changeActiveTabAnswers(newList.length - 1)
}
const closeAnswerTab = (id) => {
const index = state.findIndex(answer => answer.id === id)
const newIndex = index === 0 ? 0 : index - 1
const newList = [...state]
newList.splice(index, 1);
if (newList.length !== 0) {
newList[newIndex].active = true
setActiveTab(newIndex)
}
dispatch({type: 'CHANGE_LIST', newList})
}
return {answersList: state, activeTab, setActiveTab, changeActiveTabAnswers, closeAnswerTab, newAnswerTab}
return {answer: state, newAnswer, deleteAnswer}
}
export default useAnswers