admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added block ui script to block ui until processing

Browse Source
This commit is contained in:
pramod.mahajan 2025-10-28 09:42:06 +05:30
parent 67830372fb
commit 7b2de38a32
7 changed files with 551 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -81,7 +81,10 @@
<script src="/assets/vendor/js/menu.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- BlockUI core plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
<!-- endbuild -->
@ -97,6 +100,8 @@
<!-- Main JS -->
<script src="/assets/js/main.js"></script>
<!-- Bloack Ui -->
<!-- <script src="/assets/js/extended-ui-blockui.js"></script> -->
<!-- Page JS -->
<script src="/assets/js/form-wizard-icons.js"></script>
<script src="/assets/js/dashboards-analytics.js"></script>

504
public/assets/js/extended-ui-blockui.js Normal file
View File

@ -0,0 +1,504 @@
/**
* Block UI (jquery)
*/
'use strict';
$(function () {
var section = $('#section-block'),
sectionBlock = $('.btn-section-block'),
sectionBlockOverlay = $('.btn-section-block-overlay'),
sectionBlockSpinner = $('.btn-section-block-spinner'),
sectionBlockCustom = $('.btn-section-block-custom'),
sectionBlockMultiple = $('.btn-section-block-multiple'),
cardSection = $('#card-block'),
cardBlock = $('.btn-card-block'),
cardBlockOverlay = $('.btn-card-block-overlay'),
cardBlockSpinner = $('.btn-card-block-spinner'),
cardBlockCustom = $('.btn-card-block-custom'),
cardBlockMultiple = $('.btn-card-block-multiple'),
pageBlock = $('.btn-page-block'),
pageBlockOverlay = $('.btn-page-block-overlay'),
pageBlockSpinner = $('.btn-page-block-spinner'),
pageBlockCustom = $('.btn-page-block-custom'),
pageBlockMultiple = $('.btn-page-block-multiple'),
formSection = $('.form-block'),
formBlock = $('.btn-form-block'),
formBlockOverlay = $('.btn-form-block-overlay'),
formBlockSpinner = $('.btn-form-block-spinner'),
formBlockCustom = $('.btn-form-block-custom'),
formBlockMultiple = $('.btn-form-block-multiple');
// Block UI
// --------------------------------------------------------------------
// Default
if (sectionBlock.length && section.length) {
sectionBlock.on('click', function () {
$('#section-block').block({
message: '<div class="spinner-border text-white" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Overlay Color
if (sectionBlockOverlay.length && section.length) {
sectionBlockOverlay.on('click', function () {
$('#section-block').block({
message: '<div class="spinner-border text-primary" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8
}
});
});
}
// Custom Spinner
if (sectionBlockSpinner.length && section.length) {
sectionBlockSpinner.on('click', function () {
$('#section-block').block({
message:
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Custom Message
if (sectionBlockCustom.length && section.length) {
sectionBlockCustom.on('click', function () {
$('#section-block').block({
message:
'<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Multiple Message
if (sectionBlockMultiple.length && section.length) {
sectionBlockMultiple.on('click', function () {
$('#section-block').block({
message:
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
},
timeout: 1000,
onUnblock: function () {
$('#section-block').block({
message: '<p class="mb-0">Almost Done...</p>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.25
},
onUnblock: function () {
$('#section-block').block({
message: '<div class="p-3 bg-success">Success</div>',
timeout: 500,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.25
}
});
}
});
}
});
});
}
// Card Blocking
// --------------------------------------------------------------------
// Default
if (cardBlock.length && cardSection.length) {
cardBlock.on('click', function () {
$('#card-block').block({
message: '<div class="spinner-border text-white" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Overlay Color
if (cardBlockOverlay.length && cardSection.length) {
cardBlockOverlay.on('click', function () {
$('#card-block').block({
message: '<div class="spinner-border text-primary" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8
}
});
});
}
// Custom Spinner
if (cardBlockSpinner.length && cardSection.length) {
cardBlockSpinner.on('click', function () {
$('#card-block').block({
message:
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Custom Message
if (cardBlockCustom.length && cardSection.length) {
cardBlockCustom.on('click', function () {
$('#card-block').block({
message:
'<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Multiple Message
if (cardBlockMultiple.length && cardSection.length) {
cardBlockMultiple.on('click', function () {
$('#card-block').block({
message:
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
},
timeout: 1000,
onUnblock: function () {
$('#card-block').block({
message: '<p class="mb-0">Almost Done...</p>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.25
},
onUnblock: function () {
$('#card-block').block({
message: '<div class="p-3 bg-success">Success</div>',
timeout: 500,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.25
}
});
}
});
}
});
});
}
// Page Blocking
// --------------------------------------------------------------------
// Default
if (pageBlock.length) {
pageBlock.on('click', function () {
$.blockUI({
message: '<div class="spinner-border text-white" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Overlay Color
if (pageBlockOverlay.length) {
pageBlockOverlay.on('click', function () {
$.blockUI({
message: '<div class="spinner-border text-primary" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8
}
});
});
}
// Custom Spinner
if (pageBlockSpinner.length) {
pageBlockSpinner.on('click', function () {
$.blockUI({
message:
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Custom Message
if (pageBlockCustom.length) {
pageBlockCustom.on('click', function () {
$.blockUI({
message:
'<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Multiple Message
if (pageBlockMultiple.length) {
pageBlockMultiple.on('click', function () {
$.blockUI({
message:
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
},
timeout: 1000,
onUnblock: function () {
$.blockUI({
message: '<p class="mb-0">Almost Done...</p>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
},
onUnblock: function () {
$.blockUI({
message: '<div class="p-3 bg-success">Success</div>',
timeout: 500,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
}
});
}
});
});
}
// Form Blocking
// --------------------------------------------------------------------
// Default
if (formBlock.length && formSection.length) {
formBlock.on('click', function () {
formSection.block({
message: '<div class="spinner-border text-white" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Overlay Color
if (formBlockOverlay.length && formSection.length) {
formBlockOverlay.on('click', function () {
formSection.block({
message: '<div class="spinner-border text-primary" role="status"></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.8
}
});
});
}
// Custom Spinner
if (formBlockSpinner.length && formSection.length) {
formBlockSpinner.on('click', function () {
formSection.block({
message:
'<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Custom Message
if (formBlockCustom.length && formSection.length) {
formBlockCustom.on('click', function () {
formSection.block({
message:
'<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
}
});
});
}
// Multiple Message
if (formBlockMultiple.length && formSection.length) {
formBlockMultiple.on('click', function () {
formSection.block({
message:
'<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
css: {
backgroundColor: 'transparent',
color: '#fff',
border: '0'
},
overlayCSS: {
opacity: 0.5
},
timeout: 1000,
onUnblock: function () {
formSection.block({
message: '<p class="mb-0">Almost Done...</p>',
timeout: 1000,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
opacity: 0.25
},
onUnblock: function () {
formSection.block({
message: '<div class="p-3 bg-success">Success</div>',
timeout: 500,
css: {
backgroundColor: 'transparent',
border: '0'
},
overlayCSS: {
opacity: 0.25
}
});
}
});
}
});
});
}
});

3
src/components/UserSubscription/ProcessedPayment.jsx
View File

@ -12,6 +12,7 @@ import { PaymentRepository } from "../../repositories/PaymentRepository";
import { useMakePayment } from "../../hooks/usePayment";
import { useDispatch } from "react-redux";
import { setSelfTenant } from "../../slices/localVariablesSlice";
import { unblockUI } from "../../utils/blockUI";
const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
const { frequency, planName } = useParams();
@ -62,9 +63,11 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
const { mutate: MakePayment, isPending } = useMakePayment(
(response) => {
unblockUI()
onNext(response);
},
(fail) => {
unblockUI()
setFailPayment(fail);
onNext(fail);
},

3
src/components/UserSubscription/SubscriptionForm.jsx
View File

@ -10,6 +10,7 @@ import { orgSize, reference } from "../../utils/constants";
import DatePicker from "../common/DatePicker";
import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
import { useCreateSelfTenant } from "../../hooks/useAuth";
import { blockUI } from "../../utils/blockUI";
const SubscriptionForm = ({currentStep,
setCurrentStep,
@ -41,7 +42,7 @@ const SubscriptionForm = ({currentStep,
// reset();
};
return (
<div className="container-md vh-100">
<div className="container-md ">
<div className="row">
<div className="col-12 col-md-6">
<div className="row px-4">

6
src/hooks/usePayment.jsx
View File

@ -2,8 +2,9 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { PaymentRepository } from "../repositories/PaymentRepository";
import showToast from "../services/toastService";
import { useSelector } from "react-redux";
import { blockUI } from "../utils/blockUI";
export function removeRazorpayArtifacts() {
export const removeRazorpayArtifacts=()=> {
try {
document
.querySelectorAll("iframe[src*='razorpay'], iframe[name^='__PRIVATE']")
@ -40,7 +41,7 @@ export function removeRazorpayArtifacts() {
}
}
function closeRazorpayPopup() {
const closeRazorpayPopup=()=> {
try {
if (window.Razorpay && typeof window.Razorpay.close === "function") {
window.Razorpay.close();
@ -166,6 +167,7 @@ export const useMakePayment = (
});
try {
blockUI("Please Wait...")
razorpay.open();
} catch (err) {
alert("This browser is not supported. Please try another browser.");

2
src/pages/Home/MakeSubscription.jsx
View File

@ -10,7 +10,7 @@ const MakeSubscription = () => {
const [responsePayment, setResponsePayment] = useState(null);
const [stepStatus, setStepStatus] = useState({
1: "success",
1: "pending",
2: "pending",
3: "pending",
});

32
src/utils/blockUI.js Normal file
View File

@ -0,0 +1,32 @@
export const blockUI = (message = 'Please wait...') => {
if (window.$ && window.$.blockUI) {
window.$.blockUI({
message: `
<div class="d-flex flex-column align-items-center">
<div class="sk-wave mb-2">
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
</div>
<p class="text-white">${message}</p>
</div>`,
css: {
backgroundColor: 'transparent',
border: '0',
color: '#fff',
},
overlayCSS: {
opacity: 0.5,
cursor: 'wait',
},
});
}
};
export const unblockUI = () => {
if (window.$ && window.$.unblockUI) {
window.$.unblockUI();
}
};