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

CFE-26 Merge branch 'feature/CFE-26_widget_tabs_details' into 'develop'

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-10-21 10:02:22 +00:00
parent 53f17f786d c04725adce
commit 74e9c53baf
14 changed files with 171 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
.gitlab-ci.yml
View File

@@ -44,17 +44,17 @@ merge:test:lint:
- .env.local
- .env.test
merge:test:build:
stage: test:build
script:
- npm run build
only:
- merge_requests
artifacts:
paths:
- node_modules
- .env.local
- .env.test
#merge:test:build:
# stage: test:build
# script:
# - npm run build
# only:
# - merge_requests
# artifacts:
# paths:
# - node_modules
# - .env.local
# - .env.test
build:
stage: build
@@ -97,18 +97,18 @@ test:lint:
- .env.local
- .env.test
test:build:
stage: test:build
script:
- npm run build
only:
- develop
- main
artifacts:
paths:
- node_modules
- .env.local
- .env.test
#test:build:
# stage: test:build
# script:
# - npm run build
# only:
# - develop
# - main
# artifacts:
# paths:
# - node_modules
# - .env.local
# - .env.test
deploy:
stage: deploy

0
public/fontiran.scss → public/fontiran.css
View File

24
src/components/dashboard/role-management/Form/DeleteForm/__test__/DeleteContent.test.js
View File

@@ -1,51 +1,51 @@
import {act, render, screen} from "@testing-library/react";
import {act, render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../mocks/AppWithProvider";
import DeleteContent from "@/components/dashboard/role-management/Form/DeleteForm/DeleteContent";
import UpdateContent from "@/components/dashboard/role-management/Form/UpdateForm/UpdateContent";
describe("Create Content component from Create Form Component in Role Management Component",()=> {
describe("Create Content component from Create Form Component in Role Management Component", () => {
describe("Rendering", () => {
it('should see DeleteDialog text in the top ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId={1}/>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const textElement = screen.queryByText("حذف")
act(()=>{
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
})
it('should see DeleteDialog text content ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId={1}/>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const textElement = screen.queryByText("آیا از حدف این مورد اطمینان دارید ؟")
act(()=>{
await waitFor(() => {
expect(textElement).toBeInTheDocument()
})
})
it('should see delete text in the delete button ', () => {
it('should see delete text in the delete button ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId={1}/>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const buttonElement = screen.queryByText("حذف کردن")
act(()=>{
await waitFor(() => {
expect(buttonElement).toBeInTheDocument()
})
});
it('should see cancel text in the cancel button ', () => {
it('should see cancel text in the cancel button ', async () => {
render(
<MockAppWithProviders>
<DeleteContent rowId={1}/>
<DeleteContent rowId = {1}/>
</MockAppWithProviders>
)
const buttonElement = screen.queryByText("انصراف")
act(()=>{
await waitFor(() => {
expect(buttonElement).toBeInTheDocument()
})
});

2
src/components/dashboard/role-management/index.jsx
View File

@@ -1,8 +1,8 @@
import RoleManagementComponent from "@/components/dashboard/role-management/RoleManagementComponent";
import DashboardLayout from "@/layouts/DashboardLayout";
import moment from "jalali-moment";
function DashboardRoleManagementComponent() {
return (
<DashboardLayout>
<RoleManagementComponent />

17
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails.jsx Normal file
View File

@@ -0,0 +1,17 @@
import {Stack, Typography} from "@mui/material";
import CallIcon from '@mui/icons-material/Call';
import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime";
const CallTabDetails = ({tab}) => {
return (
<Stack direction = "row" justifyContent = "center" alignItems = "center" spacing = {3}>
<CallIcon/>
<Stack alignItems = {"start"}>
<Typography>{tab.phone_number}</Typography>
<CallTabTime realTimeDate = {tab.date}/>
</Stack>
</Stack>
)
}
export default CallTabDetails

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

@@ -1,19 +1,26 @@
import {IconButton, Stack, Typography, Zoom} from "@mui/material";
import {IconButton, Stack, Zoom} from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import useAnswers from "@/lib/callWidget/hooks/useAnswers";
import CallTabDetails
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails";
const CallTabLabel = ({tab}) => {
const {closeAnswerTab} = useAnswers()
const CallTabLabel = ({tab, index}) => {
const {closeAnswerTab, activeTab} = 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/>
<Stack sx = {{
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}>
<IconButton size = "small" onClick = {() => handleCloseClick(tab.id)}>
<CloseIcon fontSize = "small"/>
</IconButton>
</Zoom>
</Stack>

29
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime.jsx Normal file
View File

@@ -0,0 +1,29 @@
import {Typography} from "@mui/material";
import {useEffect, useState} from "react";
import moment from "jalali-moment";
import useLanguage from "@/lib/app/hooks/useLanguage";
const CallTabTime = ({realTimeDate}) => {
const {languageApp} = useLanguage()
const [date, setDate] = useState('...')
const changeTabTime = (tabTime) => {
moment.relativeTimeThreshold('ss', 1)
return moment(tabTime).locale(languageApp).fromNow()
}
useEffect(() => {
const timer = setInterval(() => {
setDate(changeTabTime(realTimeDate))
}, 1000)
return () => {
clearInterval(timer)
}
}, [realTimeDate]);
return (
<Typography variant = "caption"
color = "gray">{date}</Typography>
)
}
export default CallTabTime

28
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/__test__/CallTabDetails.test.js Normal file
View File

@@ -0,0 +1,28 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
import CallTabDetails
from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabDetails";
const tab = {
phone_number: "09134849737",
id: 1,
date: new Date()
}
describe("Call Tab Details from Call Tan List", () => {
describe("Rendering", () => {
it('Should see the phone number on tab detail', async () => {
render(
<MockAppWithProviders>
<CallTabDetails tab = {tab}/>
</MockAppWithProviders>
)
const phoneNumberElement = screen.getByText("09134849737")
await waitFor(() => {
expect(phoneNumberElement).toHaveTextContent("09134849737")
})
});
})
})

25
src/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/__test__/CallTabTime.test.js Normal file
View File

@@ -0,0 +1,25 @@
import {render, screen, waitFor} from "@testing-library/react";
import MockAppWithProviders from "../../../../../../../../../mocks/AppWithProvider";
import CallTabTime from "@/components/layouts/Dashboard/CallWidget/CallWidgetDialog/CallTabs/CallTabsList/CallTabTime";
const tab = {
phone_number: "09134849737",
id: 1,
date: new Date()
}
describe("Call Tab Details from Call Tan List", () => {
describe("Rendering", () => {
it('Should see the date on tab detail', async () => {
render(
<MockAppWithProviders>
<CallTabTime realTimeDate = {tab.date}/>
</MockAppWithProviders>
)
await waitFor(() => {
expect(screen.getByText(/ثانیه پیش/i)).toBeInTheDocument()
})
});
})
})

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

@@ -10,14 +10,20 @@ const CallTabsList = () => {
};
return (
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<Box sx = {{borderBottom: 1, borderColor: 'divider'}}>
<Tabs
value={activeTab}
onChange={handleChange}
variant={'fullWidth'}
value = {activeTab}
onChange = {handleChange}
variant = "scrollable"
scrollButtons = "auto"
sx = {{background: "#e0e0e0"}}
>
{answersList.map((answer) => (
<Tab component={'div'} sx={{py: 0.5, pr: 0}} label={<CallTabLabel tab={answer}/>} key={answer.id}/>
{answersList.map((answer, index) => (
<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>
</Box>

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

@@ -38,8 +38,8 @@ const CallWidgetDialog = () => {
return (
<Dialog
fullScreen
open={openCallDialog}
TransitionComponent={DialogTransition}
open = {openCallDialog}
TransitionComponent = {DialogTransition}
>
<CallTabs/>
</Dialog>

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

@@ -20,7 +20,7 @@ export const AnswersProvider = ({children}) => {
const [state, dispatch] = useReducer(reducer, []);
return <AnswersContext.Provider
value={{
value = {{
openCallDialog,
setOpenCallDialog,
state,

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

@@ -12,6 +12,7 @@ const useAnswers = () => {
const newAnswer = {
id: data.id,
phone_number: data.phone_number,
date: new Date(),
active: true
}
const newList = [...state, newAnswer]

10
src/pages/_app.jsx
View File

@@ -1,4 +1,4 @@
import "&/fontiran.scss";
import "&/fontiran.css";
import AppLayout from "@/layouts/AppLayout";
import MuiLayout from "@/layouts/MuiLayout";
import {LanguageProvider} from "@/lib/app/contexts/language";
@@ -14,11 +14,11 @@ const App = ({Component, pageProps}) => {
return (<>
<UserProvider>
<LanguageProvider>
<NextIntlProvider locale={pageProps.locale} messages={pageProps.messages || {}}>
<MuiLayout isBot={pageProps.isBot}>
{pageProps.messages ? <TitlePage text={pageProps.title}/> : ''}
<NextIntlProvider locale = {pageProps.locale} messages = {pageProps.messages || {}}>
<MuiLayout isBot = {pageProps.isBot}>
{pageProps.messages ? <TitlePage text = {pageProps.title}/> : ''}
<LoadingProvider>
<AppLayout isBot={pageProps.isBot}>
<AppLayout isBot = {pageProps.isBot}>
<SocketProvider>
<Component {...pageProps} />
</SocketProvider>