BP
/
poc
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'admin: 활성화 탭 변경시 작성 데이터 유지 #10' (#11) from feature/#10 into main 

Reviewed-on: #11
This commit is contained in:
HyeonJongKim 2024-08-22 15:56:15 +09:00
parent a74b0a56f4 f659ef4d64
commit 3c3cecf6ba
1 changed files with 69 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
poc/admin/src/main/resources/templates/layout/common.html
View File

@ -39,112 +39,43 @@
let tabContentCache = {}; let tabContentCache = {};
Reqhelper.reqGetJson('/admin/tab/list', function(data) { Reqhelper.reqGetJson('/admin/tab/list', function(data) {
data.forEach(function(item) { if(data.length !== 0) {
loadTab(item.id, item.name, item.url); data.forEach(function(item) {
}) loadTab(item.id, item.name, item.url);
})
if (data.length > 0) {
openTab(null, data[0].id);
loadTabContent(data[0].id, data[0].url)
}
}
}); });
//DB에 저장된 탭 생성
//여러 탭이 로드 될 경우 가장 좌측 탭을 열어준다.
function loadTab(id,tabName, url) { function loadTab(id,tabName, url) {
const newTab = $('<li></li>').addClass('tab-item'); createTab(id, tabName, url);
const newTabLink = $('<a></a>').addClass('tab-link') openTab({currentTarget: $(`#${id}-tab`)}, id);
.attr('id', `${id}-tab`) loadTabContent(id, url);
.attr('href', `#${id}`)
.attr('role', 'tab')
.attr('aria-controls', `${id}`)
.attr('aria-selected', 'false')
.text(tabName)
.click(function(event) {
openTab(event, id);
loadTabContent(id, url);
});
const closeButton = $('<span></span>').addClass('close-button')
.text('X')
.click(function(event) {
$(`#${id}`).remove();
$(`#${id}-tab`).parent().remove();
event.stopPropagation();
Reqhelper.reqPostJson('/admin/tab/delete', {
id : id
}, function() {
console.log('Tab deleted successfully');
}, function() {
console.log('Failed to delete tab');
})
});
newTabLink.append(closeButton);
newTab.append(newTabLink);
$('#myTab').append(newTab);
const newTabContent = $('<div></div>').addClass('tab-pane')
.attr('id', id)
.attr('role', 'tabpanel')
.attr('aria-labelledby', `${id}-tab`)
.on('input', 'input, textarea', function() {
tabContentCache[id] = newTabContent.html();
});
$('#myTabContent').append(newTabContent);
} }
function addTab(tabName,url) { // 탭 생성 및 DB Insert 메서드
function addTab(tabName, url) {
Reqhelper.reqPostJson('/admin/tab/add', { Reqhelper.reqPostJson('/admin/tab/add', {
name: tabName, name: tabName,
url: url url: url
}, function(response) { }, function(response) {
console.log('Tab created successfully'); console.log('Tab created successfully');
const tabId = response.id; const tabId = response.id;
const newTab = $('<li></li>').addClass('tab-item'); createTab(tabId, tabName, url);
const newTabLink = $('<a></a>').addClass('tab-link') openTab({currentTarget: $(`#${tabId}-tab`)}, tabId);
.attr('id', `${tabId}-tab`) loadTabContent(tabId, url);
.attr('href', `#${tabId}`)
.attr('role', 'tab')
.attr('aria-controls', `${tabId}`)
.attr('aria-selected', 'false')
.text(tabName)
.click(function(event) {
openTab(event, tabId);
loadTabContent(tabId, url);
});
const closeButton = $('<span></span>').addClass('close-button')
.text('X')
.click(function(event) {
$(`#${tabId}`).remove();
$(`#${tabId}-tab`).parent().remove();
event.stopPropagation();
Reqhelper.reqPostJson('/admin/tab/delete', {
id : tabId
}, function() {
console.log('Tab deleted successfully');
}, function() {
console.log('Failed to delete tab');
})
});
newTabLink.append(closeButton);
newTab.append(newTabLink);
$('#myTab').append(newTab);
const newTabContent = $('<div></div>').addClass('tab-pane')
.attr('id', tabId)
.attr('role', 'tabpanel')
.attr('aria-labelledby', `${tabId}-tab`)
.on('input', 'input, textarea', function() {
tabContentCache[tabId] = newTabContent.html();
});
$('#myTabContent').append(newTabContent);
}, function() { }, function() {
console.log('Failed to create tab'); console.log('Failed to create tab');
}); });
} }
function loadTabContent(tabId, url) { function loadTabContent(tabId, url) {
if (tabContentCache[tabId]) { if (!tabContentCache[tabId]) {
$('#' + tabId).html(tabContentCache[tabId]);
} else {
$.ajax({ $.ajax({
url: url, url: url,
type: 'GET', type: 'GET',
@ -159,6 +90,40 @@
} }
} }
function createTab(tabId, tabName, url) {
const newTab = $('<li></li>').addClass('tab-item');
const newTabLink = $('<a></a>').addClass('tab-link')
.attr('id', `${tabId}-tab`)
.attr('href', `#${tabId}`)
.attr('role', 'tab')
.attr('aria-controls', `${tabId}`)
.attr('aria-selected', 'false')
.text(tabName)
.click(function(event) {
openTab(event, tabId);
loadTabContent(tabId, url);
});
const closeButton = $('<span></span>').addClass('close-button')
.text('X')
.click(function(event) {
deleteTab(event, tabId);
});
newTabLink.append(closeButton);
newTab.append(newTabLink);
$('#myTab').append(newTab);
const newTabContent = $('<div></div>').addClass('tab-pane')
.attr('id', tabId)
.attr('role', 'tabpanel')
.attr('aria-labelledby', `${tabId}-tab`)
.on('input', 'input, textarea', function() {
tabContentCache[tabId] = newTabContent.html();
});
$('#myTabContent').append(newTabContent);
}
function openTab(evt, tabId) { function openTab(evt, tabId) {
$('.tab-pane').css('display', 'none'); $('.tab-pane').css('display', 'none');
$('.tab-link').each(function() { $('.tab-link').each(function() {
@ -169,12 +134,23 @@
$(evt.currentTarget).addClass('active'); $(evt.currentTarget).addClass('active');
} }
function deleteTab(event, tabId) {
$(`#${tabId}`).remove();
$(`#${tabId}-tab`).parent().remove();
event.stopPropagation();
Reqhelper.reqPostJson('/admin/tab/delete', {
id : tabId
}, function() {
console.log('Tab deleted successfully');
}, function() {
console.log('Failed to delete tab');
})
}
// 탭 이동 메서드
$(function() { $(function() {
$("#myTab").sortable({ $("#myTab").sortable({
placeholder: "ui-state-highlight", placeholder: "ui-state-highlight"
update: function(event, ui) {
}
}); });
$("#myTab").disableSelection(); $("#myTab").disableSelection();
}); });