eNotaryoPH/enotaryo-landing
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

new confirm dialog window

Browse Source
This commit is contained in:
jojo aquino 2024-12-21 23:08:11 +00:00
parent 01705c86fe
commit 45f17d06ce
4 changed files with 102 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
EnotaryoPH/EnotaryoPH.Web/Assets/js/Components/Dialog/_Dialog.js Normal file
View File

@ -0,0 +1,34 @@
jfa.components.dialog = (function () {
function _confirm({ message, title, callbackyes, callbackno }) {
const dialogTemplate = jfa.page.getDialogTemplate().content;
let spanTitle = dialogTemplate.querySelector(".modal__title__text");
spanTitle.textContent = title || "Confirm";
let bodyMessage = dialogTemplate.querySelector(".modal__body-message");
bodyMessage.textContent = message;
const dialog = dialogTemplate.querySelector("#dialog-container");
const modal = bootstrap.Modal.getOrCreateInstance(dialog);
let buttonNo = dialogTemplate.querySelector(".modal__footer__button-no");
buttonNo.addEventListener("click", function () {
buttonNo.blur();
modal.hide();
callbackno?.();
});
let buttonYes = dialogTemplate.querySelector(".modal__footer__button-yes");
buttonYes.addEventListener("click", function () {
buttonYes.blur();
modal.hide();
callbackyes?.();
});
modal.show();
}
return {
confirm: _confirm
};
})();

10
EnotaryoPH/EnotaryoPH.Web/Assets/js/Page/_Page.js
View File

@ -11,6 +11,14 @@
return window.top.document.querySelector("[name='__RequestVerificationToken']")?.value;
}
function _getDialogContainer() {
return document.getElementById("ContainerDialog").cloneNode(true);
}
function _getDialogTemplate() {
return document.getElementById("DialogTemplate").cloneNode(true);
}
function reload() {
window.location.reload();
}
@ -19,6 +27,8 @@
getAlertContainer: _getAlertContainer,
getAlertTemplate: _getAlertTemplate,
getAntiForgeryToken: _getAntiForgeryToken,
getDialogContainer: _getDialogContainer,
getDialogTemplate: _getDialogTemplate,
reload: reload
};
})();

38
EnotaryoPH/EnotaryoPH.Web/Pages/Shared/_Layout.cshtml
View File

@ -19,6 +19,7 @@
</head>
<body>
<header>
<nav class="navbar navbar-expand-md bg-dark py-3 navbar-dark">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="/">
@ -32,18 +33,25 @@
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
</ul>
@if (User.Identity?.IsAuthenticated ?? false) {
@if (User.Identity?.IsAuthenticated ?? false)
{
<a class="btn btn-primary ms-md-2" role="button" href="/Login?handler=Logout">Logout</a>
}
else {
else
{
<a class="btn btn-primary ms-md-2" role="button" href="/Login">Login</a>
}
</div>
</div>
</nav>
</header>
<main>
<div id="ContainerAlert" class="container"></div>
@RenderBody()
<partial name="_AntiForgeryPartial.cshtml" />
</main>
<footer class="text-center">
<div class="container-fluid text-muted py-4 py-lg-5">
<ul class="list-inline">
@ -55,6 +63,32 @@
<p class="mb-0">Copyright © 2024 Enotaryo</p>
</div>
</footer>
<template id="AlertTemplate">
<div id="alert-container" class="alert alert-warning alert-dismissible mt-1" role="alert">
<button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
<span id="alert-message" class="message">
<i id="alert-icon" class="fas fa-exclamation-triangle me-1"></i>
<strong>Alert</strong> text.
</span>
<div class="actions"></div>
</div>
</template>
<template id="DialogTemplate">
<div id="dialog-container" class="modal fade show" role="dialog" tabindex="-1" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fas fa-question-circle text-primary me-1 modal__title__icon"></i><span class="modal__title__text">Title</span></h4><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body"><span class="modal__body-message">This is the confirmation message.</span></div>
<div class="modal-footer modal__footer"><button class="btn btn-light modal__footer__button-no" type="button" data-bs-dismiss="modal">No</button><button class="btn btn-primary modal__footer__button-yes" type="button">Yes</button></div>
</div>
</div>
</div>
</template>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.1/baguetteBox.min.js"></script>

1
EnotaryoPH/EnotaryoPH.Web/gulpfile.js
View File

@ -14,6 +14,7 @@ const bundles = {
"Assets/js/Utilities/Routing/_Routing.js",
"Assets/js/Utilities/Element/_Element.js",
"Assets/js/Utilities/Request/_Request.js",
"Assets/js/Components/Dialog/_Dialog.js"
]
},
};