basketballcantho/sisvietnamvn_01
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add stats block widget management and update block_3_button component content

Browse Source
This commit is contained in:
Victor Phan
2026-07-11 21:33:27 +07:00
parent 3e5432ba65
commit 324f3a505b
19 changed files with 410 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sisvietnamvn_main/src/main/resources/templates/manage/menus/edit.html
+3 -1
View File
@@ -35,9 +35,11 @@
<div class="form-group">
<label for="location">Location</label>
<select class="form-control" id="location" name="location">
<option value="" th:selected="${menu.location == null || menu.location == '' || menu.location == 'Unassigned'}">Unassigned</option>
<option value="" th:selected="${menu.location == null or menu.location == ''}">None</option>
<option value="PRIMARY" th:selected="${menu.location == 'PRIMARY'}">Primary Navigation</option>
<option value="FOOTER" th:selected="${menu.location == 'FOOTER'}">Footer Navigation</option>
<option value="INFO" th:selected="${menu.location == 'INFO'}">Info For Navigation</option>
<option value="CTA" th:selected="${menu.location == 'CTA'}">Call To Action Links</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Save Properties</button>
sisvietnamvn_main/src/main/resources/templates/manage/menus/list.html
+2
View File
@@ -35,6 +35,8 @@
<option value="">-- No Location Assigned --</option>
<option value="PRIMARY">Primary Navigation</option>
<option value="FOOTER">Footer Navigation</option>
<option value="INFO">Info For Navigation</option>
<option value="CTA">Call To Action Links</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Create Menu</button>
sisvietnamvn_main/src/main/resources/templates/manage/snippets/form.html
+91 -10
View File
@@ -4,6 +4,11 @@
<title th:text="${isNew} ? 'Add New Snippet' : 'Edit Snippet'">Edit Snippet</title>
<!-- GrapesJS CSS -->
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<!-- CodeMirror CSS for beautiful code editing -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/monokai.min.css">
<style>
/* ── GrapesJS Layout Overrides ── */
#gjs-editor-wrap {
@@ -196,6 +201,16 @@
<!-- Page Specific Scripts -->
<section layout:fragment="scripts">
<script src="https://unpkg.com/grapesjs"></script>
<!-- JS-Beautify for formatting HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script>
<!-- CodeMirror JS for syntax highlighting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
@@ -628,16 +643,76 @@
editor.setComponents(existingContent);
}
var cmEditor = null;
var isGrapesJsModified = false;
// Track if user made visual changes
editor.on('change:changesCount', function() {
isGrapesJsModified = true;
});
toggleBtn.addEventListener('click', function() {
if (isVisual) {
var html = editor.getHtml();
var css = editor.getCss();
textArea.value = html + (css ? '<style>' + css + '</style>' : '');
var rawOutput;
if (isGrapesJsModified) {
// User made visual changes, pull from GrapesJS
var html = editor.getHtml();
var css = editor.getCss();
var combined = html + (css && css.trim() !== '' && css.trim() !== '* { box-sizing: border-box; } body {margin: 0;}' ? '<style>' + css + '</style>' : '');
rawOutput = html_beautify(combined, {
indent_size: 4,
wrap_line_length: 0,
preserve_newlines: true
});
} else {
// User didn't make visual changes, KEEP IT RAW exactly as it was
rawOutput = textArea.value;
}
textArea.value = rawOutput;
gjsWrap.style.display = 'none';
textArea.style.display = 'block';
// We don't display textArea because CodeMirror handles the UI
textArea.style.display = 'none';
// Initialize CodeMirror if not already
if (!cmEditor) {
cmEditor = CodeMirror.fromTextArea(textArea, {
mode: "htmlmixed",
theme: "monokai",
lineNumbers: true,
matchBrackets: true,
autoCloseTags: true,
indentUnit: 4,
lineWrapping: true
});
// Fix for initially hidden textarea
setTimeout(function() {
cmEditor.refresh();
}, 10);
} else {
cmEditor.setValue(rawOutput);
setTimeout(function() {
cmEditor.refresh();
}, 10);
}
// CodeMirror wrapper needs to be visible
if(cmEditor.getWrapperElement()) {
cmEditor.getWrapperElement().style.display = 'block';
}
toggleBtn.innerHTML = '<i class="fas fa-paint-brush"></i> Use Visual Builder';
} else {
// Get value from CodeMirror back to textarea and GrapesJS
if (cmEditor) {
textArea.value = cmEditor.getValue();
cmEditor.getWrapperElement().style.display = 'none';
}
editor.setComponents(textArea.value);
isGrapesJsModified = false; // Reset flag since we just synced
textArea.style.display = 'none';
gjsWrap.style.display = 'block';
toggleBtn.innerHTML = '<i class="fas fa-code"></i> Use Code Editor';
@@ -647,13 +722,19 @@
form.addEventListener('submit', function() {
if (isVisual) {
var html = editor.getHtml();
var css = editor.getCss();
var finalOutput = html;
if (css && css.trim() !== '' && css.trim() !== '* { box-sizing: border-box; } body {margin: 0;}') {
finalOutput += '<style>' + css + '</style>';
if (isGrapesJsModified) {
var html = editor.getHtml();
var css = editor.getCss();
var finalOutput = html;
if (css && css.trim() !== '' && css.trim() !== '* { box-sizing: border-box; } body {margin: 0;}') {
finalOutput += '<style>' + css + '</style>';
}
textArea.value = finalOutput;
}
} else {
if (cmEditor) {
textArea.value = cmEditor.getValue();
}
textArea.value = finalOutput;
}
});
});
sisvietnamvn_main/src/main/resources/templates/manage/widgets/list.html
+32
View File
@@ -31,6 +31,7 @@
<select class="form-control" id="area" name="area">
<option value="sidebar">Sidebar</option>
<option value="footer">Footer</option>
<option value="stats">Stats Block</option>
</select>
</div>
<div class="form-group">
@@ -73,6 +74,7 @@
</div>
<small class="text-muted" th:text="${widget.type}">Type</small>
<p class="mb-1" th:text="${widget.content}">Content...</p>
<small class="text-muted d-block mt-1"><strong>Area:</strong> Sidebar</small>
</div>
<div th:if="${sidebarWidgets.empty}" class="text-center text-muted p-3">
No widgets in Sidebar.
@@ -101,6 +103,7 @@
</div>
<small class="text-muted" th:text="${widget.type}">Type</small>
<p class="mb-1" th:text="${widget.content}">Content...</p>
<small class="text-muted d-block mt-1"><strong>Area:</strong> Footer</small>
</div>
<div th:if="${footerWidgets.empty}" class="text-center text-muted p-3">
No widgets in Footer.
@@ -109,6 +112,35 @@
</div>
</div>
</div>
<!-- Stats Widgets -->
<div class="col-lg-4">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Stats Widgets</h6>
</div>
<div class="card-body">
<div class="list-group">
<div class="list-group-item" th:each="widget : ${statsWidgets}">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1" th:text="${widget.title}">Title</h5>
<form th:action="@{/manage/widgets/delete}" method="post">
<input type="hidden" name="area" value="stats">
<input type="hidden" name="id" th:value="${widget.id}">
<button type="submit" class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
</form>
</div>
<small class="text-muted" th:text="${widget.type}">Type</small>
<p class="mb-1" th:text="${widget.content}">Content...</p>
<small class="text-muted d-block mt-1"><strong>Area:</strong> Stats Block</small>
</div>
<div th:if="${statsWidgets.empty}" class="text-center text-muted p-3">
No widgets in Stats Block.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
sisvietnamvn_main/src/main/resources/templates/page.html
+9 -1
View File
@@ -26,7 +26,15 @@
<!-- 1. HTML Snippet Block (Custom) -->
<th:block th:if="${block.type == 'snippet'}">
<div th:utext="${block.data.htmlContent}" th:remove="tag"></div>
<th:block th:if="${block.data.id == 'top-banner' or block.data.id == 'umass_banner_snippet' or block.data.id == 'content_top_snippet' or block.data.id == 'top_banner' or block.data.id == 'content-top'}">
<div th:replace="~{themes/__${activeTheme}__/content-top}"></div>
</th:block>
<th:block th:if="${block.data.id == 'block_1_block-multiple-ctas' or block.data.id == 'block-multiple-ctas'}">
<div th:replace="~{themes/__${activeTheme}__/content-main-blocks-cta}"></div>
</th:block>
<th:block th:unless="${block.data.id == 'top-banner' or block.data.id == 'umass_banner_snippet' or block.data.id == 'content_top_snippet' or block.data.id == 'top_banner' or block.data.id == 'content-top' or block.data.id == 'block_1_block-multiple-ctas' or block.data.id == 'block-multiple-ctas'}">
<div th:utext="${block.data.htmlContent}" th:remove="tag"></div>
</th:block>
</th:block>
<!-- 2. Header Block -->
sisvietnamvn_main/src/main/resources/templates/themes/umass/content-main-blocks-cta.html
+46
View File
@@ -0,0 +1,46 @@
<div data-component-id="umass_base:block-multiple-ctas" data-background="solid" data-layout-variant="default">
<div class="container" th:if="${ctaMenu != null and not #lists.isEmpty(ctaMenu.items)}">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2><span th:utext="${ctaMenu.name}">TÌM HIỂU CHUYÊN KHOA</span></h2>
</div>
</div>
<div class="links-container">
<div class="f--field f--button" th:each="item : ${ctaMenu.items}">
<a th:href="${item.url}" class="button-text-link button-context-light " th:aria-label="${item.label}" target="_self" data-component-id="umass_base:button">
<span class="button-text" th:text="${item.label}"> Apply </span>
</a>
</div>
</div>
</div>
<!-- Fallback if menu is empty, show default CTA block -->
<div class="container" th:unless="${ctaMenu != null and not #lists.isEmpty(ctaMenu.items)}">
<div class="text-container">
<div data-component-id="umass_base:section-title" class="f--section-title">
<h2>TÌM HIỂU<span class="highlight">CHUYÊN KHOA</span></h2>
</div>
</div>
<div class="links-container">
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/apply" class="button-text-link button-context-light " aria-label="Apply" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Apply </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/academics/explore-our-programs" class="button-text-link button-context-light " aria-label="Majors &amp; Minors" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Majors &amp; Minors </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/undergraduate-admissions/costs-aid" class="button-text-link button-context-light " aria-label="Tuition &amp; Costs" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Tuition &amp; Costs </span>
</a>
</div>
<div class="f--field f--button">
<a href="https://www.umass.edu/admissions/visit" class="button-text-link button-context-light " aria-label="Take a Tour" target="_self" data-component-id="umass_base:button">
<span class="button-text"> Take a Tour </span>
</a>
</div>
</div>
</div>
</div>
sisvietnamvn_main/src/main/resources/templates/themes/umass/content-top.html
+9 -31
View File
@@ -32,57 +32,35 @@
<div class="text-container centered">
<div class="slide-text-container-inner">
<h3>
<a href="https://www.umass.edu/gateway/why-umass">Be the Future You Want to See.</a>
<a href="https://www.umass.edu/gateway/why-umass">Stroke International School 2026.</a>
</h3>
<div class="f--field f--button">
<a href="https://www.umass.edu/gateway/why-umass" class="button-secondary button-context-dark " aria-label="Learn More Learn more about UMass Amherst." data-component-id="umass_base:button">
<span class="button-text"> Learn More </span>
</a>
</div>
<nav class="mc--menu mc--info-menu">
<nav class="mc--menu mc--info-menu" th:if="${infoMenu != null and not #lists.isEmpty(infoMenu.items)}">
<ul class="menu m--menu m--info-menu">
<li class="menu-item menu-item--expanded">
<details class="utility-button-wrapper mc--info-menu-container">
<summary type="button" class="utility-button arrow-toggle information-for-toggle" aria-label="Display submenu for Information menu" aria-expanded="false" aria-haspopup="true"> Info For <svg version="1.1" class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7">
<summary type="button" aria-label="Display submenu for Information menu" aria-expanded="false" aria-haspopup="true" class="utility-button arrow-toggle information-for-toggle">
<span th:text="${infoMenu.name}">Info For</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 7" enable-background="new 0 0 16 7" xml:space="preserve" width="16" height="7" class="arrow">
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" points="7,7 0,0 16,0 "></polygon>
</svg>
</summary>
<div class="submenu-wrapper">
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/prospective-students">Prospective Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/current-students">Current Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/parents-and-families">Parents &amp; Family</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/faculty-and-staff">Faculty &amp; Staff</a>
</li>
<li class="menu-item">
<a href="https://www.umassalumni.com/">Alumni</a>
<li class="menu-item" th:each="item : ${infoMenu.items}">
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
</li>
</ul>
</div>
</details>
<div class="submenu-wrapper-desktop">
<ul class="submenu">
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/prospective-students">Prospective Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/current-students">Current Students</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/parents-and-families">Parents &amp; Family</a>
</li>
<li class="menu-item">
<a href="https://www.umass.edu/gateway/info/faculty-and-staff">Faculty &amp; Staff</a>
</li>
<li class="menu-item">
<a href="https://www.umassalumni.com/">Alumni</a>
<li class="menu-item" th:each="item : ${infoMenu.items}">
<a th:href="${item.url}" th:text="${item.label}">Prospective Students</a>
</li>
</ul>
</div>