' +
+
+ /* ── Header ─── */
'' +
- '
' +
+
+ /* ── Body ─── */
+ '
' +
+
+ /* Toolbar */
'
' +
'
' +
- '
' +
- '
' +
+
+ /* Footer */
'' +
'
' +
'
';
-
+
document.body.appendChild(modalEl);
- // Bind Search Input Handler
+ // Build quick-size buttons
+ var sizeContainer = document.getElementById('sisMediaSizeButtons');
+ if (sizeContainer) {
+ PREDEFINED_SIZES.forEach(function (size) {
+ var btn = document.createElement('button');
+ btn.type = 'button';
+ btn.className = 'btn btn-xs btn-outline-secondary mb-1';
+ btn.style.cssText = 'font-size:10px;padding:1px 6px;margin-right:3px;';
+ btn.innerText = size.label;
+ btn.addEventListener('click', function () {
+ var wEl = document.getElementById('sisMediaConfigWidth');
+ var hEl = document.getElementById('sisMediaConfigHeight');
+ if (wEl) wEl.value = size.width;
+ if (hEl) hEl.value = size.height;
+ sizeContainer.querySelectorAll('button').forEach(function (b) {
+ b.classList.replace('btn-secondary', 'btn-outline-secondary');
+ });
+ btn.classList.replace('btn-outline-secondary', 'btn-secondary');
+ });
+ sizeContainer.appendChild(btn);
+ });
+ }
+
+ /* ── Event delegation (attached once on modal, never on document) ── */
var self = this;
- document.addEventListener('input', function (e) {
+
+ // Debounced search
+ modalEl.addEventListener('input', function (e) {
if (e.target && e.target.id === 'sisMediaSearchInput') {
- var term = e.target.value.toLowerCase().trim();
- var filtered = self.mediaData.filter(function (item) {
- var name = (item.originalFilename || item.name || '').toLowerCase();
- return name.includes(term);
- });
- self.renderGrid(filtered);
- }
- });
-
- // Bind Upload Input Handler
- document.addEventListener('change', function (e) {
- if (e.target && e.target.id === 'sisMediaUploadInput') {
- var file = e.target.files[0];
- if (!file) return;
-
- var formData = new FormData();
- formData.append('file', file);
-
- var grid = document.getElementById('sisMediaGrid');
- if (grid) {
- grid.innerHTML = '
Đang tải tệp lên server...
';
- }
-
- fetch('/api/manage/media/upload', {
- method: 'POST',
- body: formData
- })
- .then(function (res) { return res.json(); })
- .then(function (data) {
- if (data && data.success === 1 && data.file && data.file.url) {
- self.selectItem(data.file.url, data.file);
- } else {
- alert('Tải tệp lên thất bại. Vui lòng thử lại!');
- self.fetchMediaList();
+ clearTimeout(self.searchTimer);
+ self.searchTimer = setTimeout(function () {
+ var kw = e.target.value.trim();
+ if (kw !== self.currentKeyword) {
+ self.currentKeyword = kw;
+ self._resetAndFetch();
}
- })
- .catch(function (err) {
- alert('Lỗi tải tệp: ' + err.message);
- self.fetchMediaList();
- });
+ }, 350);
}
});
+ // Upload
+ modalEl.addEventListener('change', function (e) {
+ if (e.target && e.target.id === 'sisMediaUploadInput') {
+ var file = e.target.files && e.target.files[0];
+ if (!file) return;
+ self._doUpload(file);
+ // reset so same file can be uploaded again
+ e.target.value = '';
+ }
+ });
+
+ // Button clicks
+ modalEl.addEventListener('click', function (e) {
+ var id = e.target && e.target.id;
+ var refreshBtn = e.target && e.target.closest && e.target.closest('#sisMediaRefreshBtn');
+ if (refreshBtn || id === 'sisMediaRefreshBtn') {
+ self._resetAndFetch(); return;
+ }
+ if (id === 'sisMediaConfigCancel') { self.hideConfigPanel(); return; }
+ if (id === 'sisMediaConfigConfirm') { self.confirmWithConfig(); return; }
+ });
+
+ /* ── Infinite scroll on the grid ── */
+ var grid = document.getElementById('sisMediaGrid');
+ if (grid) {
+ grid.addEventListener('scroll', function () {
+ // trigger when within 80 px of bottom
+ if (grid.scrollHeight - grid.scrollTop - grid.clientHeight < 80) {
+ self._maybeLoadMore();
+ }
+ });
+ }
+
return modalEl;
},
+ /* ── open ────────────────────────────────────────────── */
open: function (callback) {
this.callback = callback;
var modalEl = this.initModal();
@@ -124,66 +290,301 @@
modalEl.style.display = 'block';
modalEl.classList.add('show');
}
- this.fetchMediaList();
+
+ // Reset search input
+ var searchEl = document.getElementById('sisMediaSearchInput');
+ if (searchEl) searchEl.value = '';
+ this.currentKeyword = '';
+
+ this._resetAndFetch();
},
- fetchMediaList: function () {
+ /* ── internal helpers ───────────────────────────────── */
+
+ /** Reset pagination and fetch page 0 fresh */
+ _resetAndFetch: function () {
+ this.currentPage = 0;
+ this.totalPages = 1;
+ this.loading = false;
+ this.hideConfigPanel();
var grid = document.getElementById('sisMediaGrid');
if (grid) {
- grid.innerHTML = '
Đang nạp thư viện...
';
+ grid.innerHTML = '
Đang tải...
';
+ grid.scrollTop = 0;
}
+ this._updateInfoBar('');
+ this._fetchPage(0, true);
+ },
+
+ /** Load the next page if available and not already loading */
+ _maybeLoadMore: function () {
+ if (this.loading) return;
+ if (this.currentPage + 1 >= this.totalPages) return;
+ this._fetchPage(this.currentPage + 1, false);
+ },
+
+ /** Fetch a single page from the server
+ * @param {number} page - 0-based page index
+ * @param {boolean} reset - true → replace grid contents; false → append
+ */
+ _fetchPage: function (page, reset) {
+ if (this.loading) return;
+ this.loading = true;
var self = this;
- fetch('/api/manage/media/list')
- .then(function (res) { return res.json(); })
- .then(function (data) {
- self.mediaData = data || [];
- self.renderGrid(self.mediaData);
+ var url = '/api/manage/media/list?page=' + page + '&size=' + PAGE_SIZE;
+ if (this.currentKeyword) {
+ url += '&keyword=' + encodeURIComponent(this.currentKeyword);
+ }
+
+ // Append a loading row at the bottom when not resetting
+ if (!reset) {
+ var grid = document.getElementById('sisMediaGrid');
+ if (grid) {
+ var loaderRow = document.createElement('div');
+ loaderRow.className = 'col-12 text-center py-2 text-muted';
+ loaderRow.id = 'sisMediaPageLoader';
+ loaderRow.innerHTML = '
Đang tải thêm...';
+ grid.appendChild(loaderRow);
+ }
+ }
+
+ fetch(url)
+ .then(function (res) {
+ if (!res.ok) throw new Error('HTTP ' + res.status);
+ return res.json();
})
- .catch(function (err) {
- if (grid) {
- grid.innerHTML = '
Không thể tải danh sách tệp. Bạn có thể dán đường dẫn URL trực tiếp.
';
+ .then(function (data) {
+ self.loading = false;
+ self.currentPage = data.number || page;
+ self.totalPages = data.totalPages || 1;
+ var items = data.content || [];
+ var total = data.totalElements || 0;
+
+ // Remove loader row
+ var existingLoader = document.getElementById('sisMediaPageLoader');
+ if (existingLoader) existingLoader.remove();
+
+ if (reset) {
+ self._renderGrid(items, true, total);
+ } else {
+ self._appendItems(items);
}
+
+ // Update info bar
+ var loaded = Math.min((self.currentPage + 1) * PAGE_SIZE, total);
+ var kw = self.currentKeyword;
+ var info = kw
+ ? 'Tìm "' + kw + '": ' + total + ' ảnh — đang hiển thị ' + loaded
+ : total + ' ảnh — đang hiển thị ' + loaded;
+ if (self.currentPage + 1 >= self.totalPages) {
+ info += ' (đã tải tất cả)';
+ }
+ self._updateInfoBar(info);
+ })
+ .catch(function () {
+ self.loading = false;
+ var existingLoader = document.getElementById('sisMediaPageLoader');
+ if (existingLoader) existingLoader.remove();
+ if (reset) {
+ var grid = document.getElementById('sisMediaGrid');
+ if (grid) {
+ grid.innerHTML = '
Không thể tải danh sách. Vui lòng thử lại.
';
+ }
+ }
+ self._updateInfoBar('');
});
},
- renderGrid: function (list) {
+ _updateInfoBar: function (text) {
+ var bar = document.getElementById('sisMediaInfoBar');
+ if (bar) bar.textContent = text;
+ },
+
+ /** Replace entire grid with a fresh list of items */
+ _renderGrid: function (list, clear, total) {
var grid = document.getElementById('sisMediaGrid');
if (!grid) return;
+ if (clear) grid.innerHTML = '';
+
if (!list || list.length === 0) {
- grid.innerHTML = '
Chưa có tệp hình ảnh nào. Bấm nút "Tải ảnh mới lên" để thêm.
';
+ grid.innerHTML = '
Không tìm thấy hình ảnh nào.
';
return;
}
- var self = this;
- grid.innerHTML = list.map(function (item) {
- var url = item.fileUrl || item.url || '';
- var name = item.originalFilename || item.name || 'Image';
- return '
';
- }).join('');
+ this._appendItems(list);
+ },
+
+ /** Append card elements for each item in the list */
+ _appendItems: function (list) {
+ var grid = document.getElementById('sisMediaGrid');
+ if (!grid || !list || list.length === 0) return;
+
+ var self = this;
+ list.forEach(function (item) {
+ var url = item.fileUrl || item.url || '';
+ var name = item.originalFilename || item.name || 'Image';
+
+ var col = document.createElement('div');
+ col.className = 'col-lg-2 col-md-3 col-sm-4 col-6 mb-3';
+
+ var card = document.createElement('div');
+ card.className = 'card h-100 border shadow-sm media-select-card';
+ card.style.cssText = 'cursor:pointer;transition:all 0.2s;';
+ card.setAttribute('data-url', url);
+ card.setAttribute('data-name', name);
+
+ card.innerHTML =
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ '
' + self._esc(name) + '
' +
+ '
';
- // Add click listeners to items
- grid.querySelectorAll('.media-select-card').forEach(function (card) {
card.addEventListener('click', function () {
- var selectedUrl = card.getAttribute('data-url');
- self.selectItem(selectedUrl);
+ grid.querySelectorAll('.media-select-card').forEach(function (c) {
+ c.style.outline = '';
+ });
+ card.style.outline = '3px solid #007bff';
+ self.showConfigPanel(url, { name: name, url: url });
});
+
+ col.appendChild(card);
+ grid.appendChild(col);
});
},
+ /** Minimal HTML-escape helper */
+ _esc: function (str) {
+ return String(str)
+ .replace(/&/g, '&')
+ .replace(/"/g, '"')
+ .replace(//g, '>');
+ },
+
+ _doUpload: function (file) {
+ var self = this;
+ var formData = new FormData();
+ formData.append('file', file);
+
+ var grid = document.getElementById('sisMediaGrid');
+ if (grid) {
+ grid.innerHTML = '
Đang tải tệp lên server...
';
+ }
+
+ fetch('/api/manage/media/upload', { method: 'POST', body: formData })
+ .then(function (res) { return res.json(); })
+ .then(function (data) {
+ if (data && data.success === 1 && data.file && data.file.url) {
+ // Re-fetch from page 0 so new item appears, then show config
+ self._resetAndFetch();
+ // Show config after a short delay to let grid load
+ setTimeout(function () {
+ self.showConfigPanel(data.file.url, data.file);
+ }, 500);
+ } else {
+ alert('Tải tệp lên thất bại. Vui lòng thử lại!');
+ self._resetAndFetch();
+ }
+ })
+ .catch(function (err) {
+ alert('Lỗi tải tệp: ' + err.message);
+ self._resetAndFetch();
+ });
+ },
+
+ /* ── Config Panel ────────────────────────────────────── */
+ showConfigPanel: function (url, mediaObj) {
+ this.selectedUrl = url;
+ this.selectedMediaObj = mediaObj || {};
+
+ var panel = document.getElementById(this.configPanelId);
+ if (!panel) return;
+
+ var previewImg = document.getElementById('sisMediaConfigPreview');
+ if (previewImg) previewImg.src = url;
+
+ var nameEl = document.getElementById('sisMediaConfigName');
+ if (nameEl) nameEl.textContent = (mediaObj && (mediaObj.originalFilename || mediaObj.name)) || '';
+
+ // Reset all fields
+ ['sisMediaConfigWidth','sisMediaConfigHeight','sisMediaConfigStyle','sisMediaConfigClass','sisMediaConfigAlt','sisMediaConfigAttrs'].forEach(function (id) {
+ var el = document.getElementById(id); if (el) el.value = '';
+ });
+ ['sisMediaConfigObjectFit','sisMediaConfigAspectRatio'].forEach(function (id) {
+ var el = document.getElementById(id); if (el) el.value = '';
+ });
+
+ var sizeContainer = document.getElementById('sisMediaSizeButtons');
+ if (sizeContainer) {
+ sizeContainer.querySelectorAll('button').forEach(function (b) {
+ b.classList.replace('btn-secondary', 'btn-outline-secondary');
+ });
+ }
+
+ panel.style.display = 'block';
+ setTimeout(function () {
+ panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }, 50);
+ },
+
+ hideConfigPanel: function () {
+ var panel = document.getElementById(this.configPanelId);
+ if (panel) panel.style.display = 'none';
+ this.selectedUrl = null;
+ this.selectedMediaObj = null;
+ },
+
+ confirmWithConfig: function () {
+ if (!this.selectedUrl) return;
+
+ var g = function (id) { return (document.getElementById(id) || {}).value || ''; };
+ var width = g('sisMediaConfigWidth');
+ var height = g('sisMediaConfigHeight');
+ var objectFit = g('sisMediaConfigObjectFit');
+ var aspectRatio= g('sisMediaConfigAspectRatio');
+ var style = g('sisMediaConfigStyle');
+ var cssClass = g('sisMediaConfigClass');
+ var alt = g('sisMediaConfigAlt');
+ var customAttrs= g('sisMediaConfigAttrs');
+
+ var computedStyle = '';
+ if (width) computedStyle += 'width: ' + width + '; ';
+ if (height) computedStyle += 'height: ' + height + '; ';
+ if (aspectRatio) computedStyle += 'aspect-ratio: ' + aspectRatio + '; ';
+ if (objectFit) computedStyle += 'object-fit: ' + objectFit + '; ';
+ if (style) computedStyle += style;
+ computedStyle = computedStyle.trim();
+
+ var config = {
+ style: computedStyle, cssClass: cssClass, alt: alt,
+ customAttributes: customAttrs, width: width, height: height,
+ objectFit: objectFit, aspectRatio: aspectRatio
+ };
+
+ if (typeof this.callback === 'function') {
+ this.callback(this.selectedUrl, this.selectedMediaObj, config);
+ }
+
+ var modalEl = document.getElementById(this.modalId);
+ if (modalEl) {
+ if (typeof $ !== 'undefined' && $.fn && $.fn.modal) {
+ $(modalEl).modal('hide');
+ } else {
+ modalEl.style.display = 'none';
+ modalEl.classList.remove('show');
+ }
+ }
+ this.hideConfigPanel();
+ },
+
+ /** Legacy: immediate select without config panel */
selectItem: function (url, mediaObj) {
if (typeof this.callback === 'function') {
- this.callback(url, mediaObj);
+ this.callback(url, mediaObj, {});
}
var modalEl = document.getElementById(this.modalId);
if (modalEl) {
@@ -197,12 +598,7 @@
}
};
- // Expose standalone module globally
window.SISMediaPicker = SISMediaPicker;
-
- // Backward-compatible global helper function
- window.openSISMediaModal = function (callback) {
- SISMediaPicker.open(callback);
- };
+ window.openSISMediaModal = function (cb) { SISMediaPicker.open(cb); };
})(window, document);
diff --git a/sisvietnamvn_main/src/main/resources/templates/manage/menus/edit.html b/sisvietnamvn_main/src/main/resources/templates/manage/menus/edit.html
index d3c14a94..85fa0c26 100644
--- a/sisvietnamvn_main/src/main/resources/templates/manage/menus/edit.html
+++ b/sisvietnamvn_main/src/main/resources/templates/manage/menus/edit.html
@@ -75,9 +75,9 @@
-
+
-
+
@@ -108,15 +108,22 @@
-
+ 