CHIEFSOFT\ameye
276 lines
15 KiB
React
276 lines
15 KiB
React
import {useLocation, useNavigate} from 'react-router-dom'
|
|
import {useQuery, useMutation} from '@tanstack/react-query'
|
|
import {FaCaretDown} from "react-icons/fa";
|
|
import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
|
|
import {useEffect, useState} from 'react';
|
|
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() {
|
|
|
|
|
|
const {state} = useLocation()
|
|
const navigate = useNavigate()
|
|
|
|
const [rebuildStatus, setRebuildStatus] = useState({status: false, data: {}})
|
|
|
|
const [values, setValues] = useState({custom_id: '', template_uid: ''})
|
|
|
|
const handleValueChange = ({target: {name, value}}) => {
|
|
if (name === 'custom_template') {
|
|
setValues(prev => ({...prev, custom_id: value}))
|
|
} else if (name === 'template') {
|
|
setValues(prev => ({...prev, template_uid: value}))
|
|
} else {
|
|
setValues(prev => ({...prev}))
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const stateExist = () => {
|
|
if (!state?.subscriptionUID) {
|
|
navigate(RouteLinks.homePage, {replace: true})
|
|
}
|
|
}
|
|
stateExist()
|
|
}, [])
|
|
|
|
const {data, isFetching, isError, error} = useQuery({
|
|
queryKey: queryKeys.subscriptions_view,
|
|
queryFn: () => {
|
|
// const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
|
|
const reqData = {
|
|
subscription_uid: state?.subscriptionUID
|
|
// page,
|
|
// ...filterData
|
|
}
|
|
return getSubscriptionsView(reqData)
|
|
},
|
|
staleTime: 0 //0 mins
|
|
})
|
|
const subscriptionViewData = data?.data // ACCOUNT VIEW DATA
|
|
const customTemplates = subscriptionViewData?.available_custom_templates
|
|
const availableTemplates = subscriptionViewData?.available_templates
|
|
const selectedSubscription = subscriptionViewData?.subscription
|
|
const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id === subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
|
|
const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid === subscriptionViewData?.subscription?.product_template)[0]?.template_uid
|
|
// // console.log('subscriptionViewData', subscriptionViewData, currentCustomTem, currentTemplate)
|
|
|
|
// useEffect(()=>{
|
|
// if(data){
|
|
// const currentCustomTem = subscriptionViewData?.available_custom_templates?.filter(item => item?.custom_id == subscriptionViewData?.subscription?.custom_template)[0]?.custom_id
|
|
// const currentTemplate = subscriptionViewData?.available_templates?.filter(item => item?.template_uid == subscriptionViewData?.subscription?.product_template)[0]?.template_uid
|
|
// setValues({custom_id: currentCustomTem || '', template_uid: currentTemplate || ''})
|
|
// }
|
|
// },[data])
|
|
|
|
const templateRebuild = useMutation({
|
|
mutationFn: (fields) => {
|
|
return rebuildTemplate(fields)
|
|
},
|
|
onSettled: () => {
|
|
setTimeout(() => {
|
|
setRebuildStatus({status: false, data: {}})
|
|
templateRebuild.reset()
|
|
}, 3000)
|
|
}
|
|
})
|
|
|
|
const templateUpdate = useMutation({
|
|
mutationFn: (fields) => {
|
|
return updateTemplate(fields)
|
|
},
|
|
// onError: (error) => {
|
|
// },
|
|
// onSuccess: (res) => {
|
|
// },
|
|
onSettled: () => {
|
|
setTimeout(() => {
|
|
templateUpdate.reset()
|
|
}, 3000)
|
|
}
|
|
})
|
|
|
|
const customTemplateUpdate = useMutation({
|
|
mutationFn: (fields) => {
|
|
return updateCustomTemplate(fields)
|
|
},
|
|
// onError: (error) => {
|
|
// },
|
|
// onSuccess: (res) => {
|
|
// },
|
|
onSettled: () => {
|
|
setTimeout(() => {
|
|
customTemplateUpdate.reset()
|
|
}, 3000)
|
|
}
|
|
})
|
|
|
|
const handleUpdateTemplate = () => {
|
|
const reqData = {
|
|
subscrtiption_uid: state?.subscriptionUID,
|
|
template_uid: values.template_uid
|
|
}
|
|
templateUpdate.mutate(reqData)
|
|
}
|
|
|
|
const handleRebuildTemplate = () => {
|
|
const reqData = {
|
|
subscription_uid: state?.subscriptionUID,
|
|
}
|
|
templateRebuild.mutate(reqData)
|
|
}
|
|
|
|
const handleUpdateCustomTemplate = () => {
|
|
const reqData = {
|
|
subscrtiption_uid: state?.subscriptionUID,
|
|
custom_id: values.custom_id
|
|
}
|
|
customTemplateUpdate.mutate(reqData)
|
|
}
|
|
|
|
|
|
return (
|
|
<div className='w-full flex flex-col gap-8'>
|
|
<BreadcrumbCom title={`Subscription View [${state?.subscriptionUID}]`}
|
|
paths={['Dashboard', 'Subscription View']}/>
|
|
|
|
{isFetching ?
|
|
<>
|
|
<p className='text-slate-800'>Loading...</p>
|
|
</>
|
|
: isError ?
|
|
<p className='text-red-500'>{error.message}</p>
|
|
:
|
|
<>
|
|
<div
|
|
className='w-full box bg-white dark:bg-black-box text-black-body dark:text-white-body overflow-x-auto'>
|
|
<table className="py-2 w-full text-sm bg-[aliceblue] dark:bg-transparent rounded-[10px]">
|
|
<tbody>
|
|
<tr className="py-2 border-t border-dashed border-slate-300">
|
|
<td className="px-2 py-2">
|
|
<div className="text-left">
|
|
<div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.added)}</div>
|
|
<div className="text-base font-semibold">{getDateTimeFromDateString(selectedSubscription?.updated)}</div>
|
|
<div className="text-base font-semibold">ID: {selectedSubscription?.id}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
<div
|
|
className="text-base font-semibold">{selectedSubscription?.product_id}</div>
|
|
<div><a href={`http://${selectedSubscription?.primary_server}:${selectedSubscription?.provision_port}`}
|
|
target='_blank'
|
|
rel="noreferrer">{selectedSubscription?.primary_server}:{selectedSubscription?.provision_port}</a>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-left">
|
|
|
|
|
|
<span className="text-base font-semibold">
|
|
<a href={`https://${selectedSubscription?.internal_url}`}
|
|
target='_blank'
|
|
rel="noreferrer">{selectedSubscription?.internal_url}</a>
|
|
</span>
|
|
|
|
<br/>
|
|
<span className="text-base font-semibold">
|
|
<a href={`${selectedSubscription?.external_url}`}
|
|
target='_blank'
|
|
rel="noreferrer">{selectedSubscription?.external_url}</a>
|
|
</span>
|
|
|
|
<br/>
|
|
|
|
|
|
<div className="text-base font-semibold">
|
|
<br/><span>TM :</span> - {selectedSubscription?.template_name} - {selectedSubscription?.product_template} - {selectedSubscription?.flavor}
|
|
<br/><span>CS :</span> {selectedSubscription?.custom_template}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-right">
|
|
<div
|
|
className="text-base font-semibold">{selectedSubscription?.status}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2">
|
|
<div className="text-right">
|
|
<button name='template'
|
|
onClick={() => setRebuildStatus({status: true, data: {}})}
|
|
className={`rounded-md p-2 bg-primary text-white text-center`}>
|
|
Rebuild
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
|
|
|
|
<div className='w-full'>
|
|
<label className='font-medium'>Assign Template</label>
|
|
<div className='flex flex-col xs:flex-row md:items-center gap-2'>
|
|
<div className='w-full h-10 relative overflow-hidden rounded-md'>
|
|
<select name='template' value={currentTemplate || values.template_uid}
|
|
onChange={handleValueChange}
|
|
className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
|
|
<option value=''>None</option>
|
|
{availableTemplates && availableTemplates.map(item => (
|
|
<option key={item?.template_uid}
|
|
value={item?.template_uid}>{`${item?.product_id}-${item?.provision_name}`}</option>
|
|
))}
|
|
</select>
|
|
<FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2'/>
|
|
</div>
|
|
<button name='template' onClick={handleUpdateTemplate}
|
|
disabled={(templateUpdate.isPending || !values.template_uid)}
|
|
className={`rounded-md p-2 bg-primary text-white text-center ${(templateUpdate.isPending || !values.template_uid) && 'opacity-50'}`}>Update
|
|
</button>
|
|
</div>
|
|
<p className={`p-2 mt-4 ${templateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{templateUpdate.isSuccess ? 'Template updated' : templateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
|
|
|
|
<div className='w-full'>
|
|
<label className='font-medium'>Assign Custom Template</label>
|
|
<div className='flex flex-col xs:flex-row md:items-center gap-2'>
|
|
<div className='w-full h-10 relative overflow-hidden rounded-md'>
|
|
<select name='custom_template' value={currentCustomTem || values.custom_id}
|
|
onChange={handleValueChange}
|
|
className='w-full h-full p-2 appearance-none dark:bg-transparent border-0 dark:border-1 border-white ring-0 outline-none'>
|
|
<option value=''>None</option>
|
|
{customTemplates && customTemplates.map(item => (
|
|
<option key={item?.custom_id}
|
|
value={item?.custom_id}>{`${item?.custom_id}-${item?.provision_name}`}</option>
|
|
))}
|
|
</select>
|
|
<FaCaretDown className='text-base absolute top-1/2 -translate-y-1/2 right-2'/>
|
|
</div>
|
|
<button name='custom_template' onClick={handleUpdateCustomTemplate}
|
|
disabled={(customTemplateUpdate.isPending || !values.custom_id)}
|
|
className={`rounded-md p-2 bg-primary text-white text-center ${(customTemplateUpdate.isPending || !values.custom_id) && 'opacity-50'}`}>Update
|
|
</button>
|
|
</div>
|
|
<p className={`p-2 mt-4 ${customTemplateUpdate.isSuccess ? 'text-emerald-500' : 'text-red-500'}`}>{customTemplateUpdate.isSuccess ? 'Custom Template updated' : customTemplateUpdate.isSuccess ? 'Unable to complete request, try again' : ''}</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
{rebuildStatus?.status &&
|
|
<RebuildModal data={{}} templateRebuild={templateRebuild} proceedFunc={handleRebuildTemplate}
|
|
closeModal={() => setRebuildStatus({status: false, data: {}})}/>}
|
|
</div>
|
|
)
|
|
} |