MERMS/MermsFirstOffice
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

added rebuild confirmation modal

Browse Source
This commit was merged in pull request #29.
This commit is contained in:
victorAnumudu
2025-10-13 06:50:00 +01:00
parent b898f7c3e3
commit cb4b0e89c7
7 changed files with 68 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/authorization/UserExist.jsx
+1 -1
View File
@@ -66,7 +66,7 @@ export default function UserExist() {
navigate(RouteLinks.login, {replace:true})
}
}
if(userDetails.name){
if(userDetails?.email || userDetails?.username){
setPageIsLoading(false)
}else if(!userDetails.name && localStorage.getItem('token')){
loadUser(localStorage.getItem('token'))
src/components/auth/LoginCom.jsx
+1 -3
View File
@@ -45,9 +45,7 @@ export default function LoginCom() {
const {jwt_token, user} = res?.data
if (jwt_token) {
localStorage.setItem('token', jwt_token)
// localStorage.setItem('room', room)
const data = {jwt_token}
dispatch(updateUserDetails({...data, ...user}));
dispatch(updateUserDetails({jwt_token, ...user}));
}
setLoading(false)
navigate(RouteLinks.homePage, {state: {proceed: 'true'}}) // later add redux to dispatch state
src/components/layouts/DashboardHeader.jsx
+5 -2
View File
@@ -1,3 +1,4 @@
import { useSelector } from "react-redux";
import { LuSunDim } from "react-icons/lu";
import { IoMdSunny } from "react-icons/io";
@@ -17,6 +18,8 @@ export default function DashboardHeader() {
const {theme, handleTheme, setLogoutModal, activeMenu, handleActiveMenu, showAsideDrawer, setShowAsideDrawer} = GeneralLayoutContext()
const {userDetails:{username, email}} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER
return (
<>
{/* HEADER SECTION*/}
@@ -60,8 +63,8 @@ export default function DashboardHeader() {
<div className="pop-modal z-[777] absolute p-4 w-52 sm:w-96 bg-white dark:bg-black-box right-0 top-16 rounded shadow-round_black dark:shadow-round_white">
<div className="w-full h-full flex flex-col gap-4">
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
<h1 className="font-semibold">Username</h1>
<p className="-mt-2">username@gmail.com</p>
<h1 className="font-semibold">{username}</h1>
<p className="-mt-2">{email}</p>
</div>
<div className="rounded w-full flex justify-center items-center gap-2">
<MainBtn
src/components/layouts/DashboardLayout.jsx
+5 -2
View File
@@ -4,8 +4,9 @@ import DashboardHeader from './DashboardHeader'
import { GeneralLayoutContext } from '../../context/GeneralLayoutContext'
import DashboardAside from './aside/DashboardAside'
import RightAsideBar from './rightaside/RightAsideBar'
import { memo } from 'react'
export default function DashboardLayout() {
const DashboardLayout =memo(()=> {
// let {pathname} = useLocation()
@@ -54,4 +55,6 @@ export default function DashboardLayout() {
</>
</div>
)
}
})
export default DashboardLayout
src/components/layouts/aside/DashboardAside.jsx
+5 -4
View File
@@ -1,22 +1,23 @@
import {useLocation} from 'react-router-dom'
import { useSelector } from "react-redux";
import RouteLinks from "../../../RouteLinks";
import DummyLogo from "../../DummyLogo";
import MainBtn from "../../MainBtn";
import AsideLink from "./AsideLink";
import AsideLinkWithSubLinks from "./AsideLinkWithSubLinks";
// import { useSelector } from "react-redux";
import {GeneralLayoutContext} from "../../../context/GeneralLayoutContext";
import {TbLogout2} from "react-icons/tb";
import UserAvatar from '../../../assets/user_avatar.jpg'
import Icons from "../../Icons";
export default function DashboardAside() {
const {pathname} = useLocation()
const {setLogoutModal, handleActiveMenu} = GeneralLayoutContext()
// const {userDetails} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER ROLE DETAILS
const {userDetails:{username, email}} = useSelector((state) => state.userDetails) // GETS LOGGED IN USER
// const {role}= userDetails
return (
@@ -126,8 +127,8 @@ export default function DashboardAside() {
<div className="w-full min-h-48 flex flex-col justify-between gap-4">
<div className="w-full h-full">
<div className="flex flex-col text-black dark:text-white text-base sm:text-lg">
<h1 className="font-semibold">Username</h1>
<p className="-mt-2">username@gmail.com</p>
<h1 className="font-semibold">{username}</h1>
<p className="-mt-2">{email}</p>
</div>
</div>
<div className="rounded w-full flex items-center gap-2">
src/components/subscription_view/RebuildModal.jsx
+45
View File
@@ -0,0 +1,45 @@
import React from 'react'
import ModalWrapper from '../modals/ModalWrapper'
import MainBtn from '../MainBtn'
export default function RebuildModal({data={}, templateRebuild, closeModal, proceedFunc}) {
return (
<ModalWrapper maxWidth='max-w-sm'>
<div className='relative bg-white rounded-lg shadow-round_black dark:border-[1px] dark:border-[#1E2027] dark:bg-black-box dark:text-white'>
{/* <!-- Modal header --> */}
{/* <div className="p-8 sm:p-12 flex items-center justify-between border-b rounded-t border-gray-300 dark:border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
EDIT
</h3>
<button onClick={closeModal} type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span className="sr-only">Close modal</span>
</button>
</div> */}
{/* <!-- Modal body --> */}
<div className='p-8 sm:p-12 mb-4 flex flex-col flex-wrap gap-4 lg:gap-8'>
<div className='w-full text-center'>
<p className='text-lg font-semibold mb-1'>Please confirm you want product rebuild to start</p>
{templateRebuild.isPending && <p className='text-sm text-emerald-600'>Rebuild started ...</p>}
</div>
<div className='flex justify-between items-center gap-4'>
<MainBtn
onClick={proceedFunc}
className={`bg-primary dark:bg-primary-dark px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
text='Proceed'
/>
<MainBtn
type='button'
className={`bg-red-500 px-2 py-1 mt-4 rounded-md text-white font-medium sm:self-end`}
text='Cancel'
onClick={closeModal}
/>
</div>
</div>
</div>
</ModalWrapper>
)
}
src/components/subscription_view/SubscriptionViewCom.jsx
+6 -3
View File
@@ -7,6 +7,7 @@ import RouteLinks from '../../RouteLinks';
import {getSubscriptionsView, updateTemplate, updateCustomTemplate, rebuildTemplate} from '../../services/siteServices'
import queryKeys from '../../services/queryKeys'
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
import RebuildModal from './RebuildModal';
export default function SubscriptionViewCom() {
@@ -14,7 +15,7 @@ export default function SubscriptionViewCom() {
const {state} = useLocation()
const navigate = useNavigate()
const [reqStatus, setReqStatus] = useState({loading: false, type: '', error: false, success: false})
const [rebuildStatus, setRebuildStatus] = useState({status: false, data: {}})
const [values, setValues] = useState({custom_id: '', template_uid: ''})
@@ -69,6 +70,7 @@ export default function SubscriptionViewCom() {
},
onSettled: () => {
setTimeout(() => {
setRebuildStatus({status: false, data: {}})
templateRebuild.reset()
}, 3000)
}
@@ -175,7 +177,7 @@ export default function SubscriptionViewCom() {
</td>
<td className="px-2">
<div className="text-right">
<button name='template' onClick={handleRebuildTemplate}
<button name='template' onClick={()=>setRebuildStatus({status: true, data:{}})}
className={`rounded-md p-2 bg-primary text-white text-center`}>
Rebuild
</button>
@@ -238,7 +240,8 @@ export default function SubscriptionViewCom() {
</div>
</div>
</>
}
}
{ rebuildStatus?.status && <RebuildModal data={{}} templateRebuild={templateRebuild} proceedFunc={handleRebuildTemplate} closeModal={()=>setRebuildStatus({status: false, data:{}})} />}
</div>
)
}