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

CFE-26 styling tabs and active

Browse Source
This commit is contained in:
Amin Ghasempoor
2023-10-15 16:45:36 +03:30
parent ab29954941
commit 6b367aeb8c
5 changed files with 43 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails.jsx
View File

@@ -11,19 +11,19 @@ const CallTabDetails = ({tab}) => {
} }
return ( return (
<Stack direction="row" justifyContent="center" alignItems="center" spacing={3}> <Stack direction="row" justifyContent="center" alignItems="center" spacing={3}>
<VisibilityIcon color="red"/> <VisibilityIcon />
<Stack> <Stack alignItems={"start"}>
<Typography variant="h6">{tab.phone_number}</Typography> <Typography>{tab.phone_number}</Typography>
{ {
error ? ( error ? (
<Typography>errror</Typography> <Typography variant="body1" color="error">errror</Typography>
): ):
( (
isLoading ? ( isLoading ? (
<Skeleton variant="text" animation="wave"/> <Skeleton variant="text" animation="wave"/>
) )
:( :(
<Typography color="gray">5 روز پیش</Typography> <Typography variant="caption" color="gray">5 روز پیش</Typography> //dateChange(data.date)
) )
) )
} }

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

@@ -4,18 +4,23 @@ import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import CallTabDetails import CallTabDetails
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails"; from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/CallTabDetails";
const CallTabLabel = ({tab}) => { const CallTabLabel = ({tab, index}) => {
const {closeAnswerTab} = useAnswers() const {closeAnswerTab, activeTab} = useAnswers()
const handleCloseClick = (id) => { const handleCloseClick = (id) => {
closeAnswerTab(id) closeAnswerTab(id)
}; };
return ( return (
<Stack sx={{width: '100%'}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}> <Stack sx={{
<CallTabDetails tab={tab} /> width: '100%',
px: 1,
borderRight: activeTab === index ? 0 : activeTab - 1 === index ? 0 : 1,
borderRightColor: 'divider'
}} direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
<CallTabDetails tab={tab}/>
<Zoom in={tab.active}> <Zoom in={tab.active}>
<IconButton onClick={() => handleCloseClick(tab.id)}> <IconButton size="small" onClick={() => handleCloseClick(tab.id)}>
<CloseIcon/> <CloseIcon fontSize="small"/>
</IconButton> </IconButton>
</Zoom> </Zoom>
</Stack> </Stack>

2
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/callTabsList/__test__/CallTabDetails.test.js
View File

@@ -15,7 +15,7 @@ describe("Call Tab Details from Call Tan List", ()=>{
<CallTabDetails tab={tab}/> <CallTabDetails tab={tab}/>
</MockAppWithProviders> </MockAppWithProviders>
) )
const phoneNumberElement = screen.getByRole("heading", {level : 6}) const phoneNumberElement = screen.getByText("09134849737")
await waitFor(()=>{ await waitFor(()=>{
expect(phoneNumberElement).toHaveTextContent("09134849737") expect(phoneNumberElement).toHaveTextContent("09134849737")
}) })

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

@@ -14,10 +14,15 @@ const CallTabsList = () => {
<Tabs <Tabs
value={activeTab} value={activeTab}
onChange={handleChange} onChange={handleChange}
variant={'fullWidth'} variant="scrollable"
scrollButtons="auto"
sx={{background: "#e0e0e0"}}
> >
{answersList.map((answer) => ( {answersList.map((answer, index) => (
<Tab component={'div'} sx={{py: 0.5, pr: 0, border : 1}} label={<CallTabLabel tab={answer}/>} key={answer.id}/> <Tab component={'div'} sx={{
width: 350, p: 0, py: 0.5, background: answer.active ? "#fff" : null,
borderTopRightRadius: answer.active ? "16px" : 0, borderTopLeftRadius: answer.active ? "16px" : 0
}} label={<CallTabLabel index={index} tab={answer}/>} key={answer.id}/>
))} ))}
</Tabs> </Tabs>
</Box> </Box>

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

@@ -20,14 +20,30 @@ export const AnswersProvider = ({children}) => {
const [state, dispatch] = useReducer(reducer, [{ const [state, dispatch] = useReducer(reducer, [{
id:45, id:45,
phone_number:'09120630676', phone_number:'09120630676',
active:true active:false
}, { }, {
id:50, id:50,
phone_number:'09120630675', phone_number:'09120630675',
active:true active:false
}, { }, {
id:55, id:55,
phone_number:'09120630672', phone_number:'09120630672',
active:false
}, {
id:60,
phone_number:'09120630672',
active:false
}, {
id:65,
phone_number:'09120630672',
active:false
}, {
id:70,
phone_number:'09120630672',
active:false
}, {
id:75,
phone_number:'09120630672',
active:true active:true
}]); }]);