added office refreesh
This commit is contained in:
CHIEFSOFT\ameye
@@ -1,10 +1,10 @@
|
||||
import {useLocation, useNavigate, Link} from 'react-router-dom'
|
||||
import { useQuery, useMutation } from '@tanstack/react-query'
|
||||
import { FaCaretDown } from "react-icons/fa";
|
||||
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 } from '../../services/siteServices'
|
||||
import {getSubscriptionsView, updateTemplate, updateCustomTemplate, rebuildTemplate} from '../../services/siteServices'
|
||||
import queryKeys from '../../services/queryKeys'
|
||||
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString';
|
||||
|
||||
@@ -18,12 +18,12 @@ export default function SubscriptionViewCom() {
|
||||
|
||||
const [values, setValues] = useState({custom_id: '', template_uid: ''})
|
||||
|
||||
const handleValueChange = ({target:{name, value}}) => {
|
||||
if(name == 'custom_template'){
|
||||
const handleValueChange = ({target: {name, value}}) => {
|
||||
if (name == 'custom_template') {
|
||||
setValues(prev => ({...prev, custom_id: value}))
|
||||
}else if (name == 'template') {
|
||||
} else if (name == 'template') {
|
||||
setValues(prev => ({...prev, template_uid: value}))
|
||||
}else{
|
||||
} else {
|
||||
setValues(prev => ({...prev}))
|
||||
}
|
||||
}
|
||||
@@ -34,7 +34,7 @@ export default function SubscriptionViewCom() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
const {data, isFetching, isError, error} = useQuery({
|
||||
queryKey: queryKeys.subscriptions_view,
|
||||
queryFn: () => {
|
||||
// const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
|
||||
@@ -63,6 +63,16 @@ export default function SubscriptionViewCom() {
|
||||
// }
|
||||
// },[data])
|
||||
|
||||
const templateRebuild = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
return rebuildTemplate(fields)
|
||||
},
|
||||
onSettled: () => {
|
||||
setTimeout(() => {
|
||||
templateRebuild.reset()
|
||||
}, 3000)
|
||||
}
|
||||
})
|
||||
|
||||
const templateUpdate = useMutation({
|
||||
mutationFn: (fields) => {
|
||||
@@ -73,7 +83,7 @@ export default function SubscriptionViewCom() {
|
||||
// onSuccess: (res) => {
|
||||
// },
|
||||
onSettled: () => {
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
templateUpdate.reset()
|
||||
}, 3000)
|
||||
}
|
||||
@@ -88,7 +98,7 @@ export default function SubscriptionViewCom() {
|
||||
// onSuccess: (res) => {
|
||||
// },
|
||||
onSettled: () => {
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
customTemplateUpdate.reset()
|
||||
}, 3000)
|
||||
}
|
||||
@@ -102,6 +112,13 @@ export default function SubscriptionViewCom() {
|
||||
templateUpdate.mutate(reqData)
|
||||
}
|
||||
|
||||
const handleRebuildTemplate = () => {
|
||||
const reqData = {
|
||||
subscription_uid: state?.subscriptionUID,
|
||||
}
|
||||
templateRebuild.mutate(reqData)
|
||||
}
|
||||
|
||||
const handleUpdateCustomTemplate = () => {
|
||||
const reqData = {
|
||||
subscrtiption_uid: state?.subscriptionUID,
|
||||
@@ -113,88 +130,114 @@ export default function SubscriptionViewCom() {
|
||||
|
||||
return (
|
||||
<div className='w-full flex flex-col gap-8'>
|
||||
<BreadcrumbCom title={`Subscription View [${state?.subscriptionUID}]`} paths={['Dashboard', 'Subscription View']}/>
|
||||
<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>
|
||||
:
|
||||
{isFetching ?
|
||||
<>
|
||||
<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>
|
||||
<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?.added)}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{selectedSubscription?.product_id}</div>
|
||||
<div
|
||||
className="text-base font-semibold">{selectedSubscription?.product_id}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-left">
|
||||
<div className="text-base font-semibold">{selectedSubscription?.internal_url}
|
||||
<br /><span>Template :</span> {selectedSubscription?.product_template}
|
||||
<br /><span>Custom :</span> {selectedSubscription?.custom_template}
|
||||
<div
|
||||
className="text-base font-semibold">{selectedSubscription?.internal_url}
|
||||
<br/><span>Template :</span> {selectedSubscription?.product_template}
|
||||
<br/><span>Custom :</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
|
||||
className="text-base font-semibold">{selectedSubscription?.status}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2">
|
||||
<div className="text-right">
|
||||
<button name='template' onClick={handleRebuildTemplate}
|
||||
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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
|
||||
<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 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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</>
|
||||
|
||||
<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>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -124,6 +124,14 @@ export const getProductsTemplate = (reqData) => {
|
||||
return getAuxEnd(`/products-templates`, postData)
|
||||
}
|
||||
|
||||
// FUNCTION TO INITIATE TEMPLATE REBUILD
|
||||
export const rebuildTemplate = (reqData) => {
|
||||
let postData = {
|
||||
...reqData
|
||||
}
|
||||
return postAuxEnd('/rebuild-template', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO UPDATE TEMPLATE
|
||||
export const updateTemplate = (reqData) => {
|
||||
let postData = {
|
||||
|
||||
Reference in New Issue
Block a user