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

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

@ -39,62 +39,58 @@
let tabContentCache = {};
Reqhelper.reqGetJson('/admin/tab/list', function(data) {
if(data.length !== 0) {
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) {
const newTab = $('<li></li>').addClass('tab-item');
const newTabLink = $('<a></a>').addClass('tab-link')
.attr('id', `${id}-tab`)
.attr('href', `#${id}`)
.attr('role', 'tab')
.attr('aria-controls', `${id}`)
.attr('aria-selected', 'false')
.text(tabName)
.click(function(event) {
openTab(event, id);
createTab(id, tabName, url);
openTab({currentTarget: $(`#${id}-tab`)}, 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', {
name: tabName,
url: url
}, function(response) {
console.log('Tab created successfully');
const tabId = response.id;
createTab(tabId, tabName, url);
openTab({currentTarget: $(`#${tabId}-tab`)}, tabId);
loadTabContent(tabId, url);
}, function() {
console.log('Failed to create tab');
});
}
function loadTabContent(tabId, url) {
if (!tabContentCache[tabId]) {
$.ajax({
url: url,
type: 'GET',
success: function(data) {
tabContentCache[tabId] = data;
$('#' + tabId).html(data);
},
error: function() {
alert('Failed to load tab content');
}
});
}
}
function createTab(tabId, tabName, url) {
const newTab = $('<li></li>').addClass('tab-item');
const newTabLink = $('<a></a>').addClass('tab-link')
.attr('id', `${tabId}-tab`)
@ -111,16 +107,7 @@
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');
})
deleteTab(event, tabId);
});
newTabLink.append(closeButton);
@ -135,28 +122,6 @@
tabContentCache[tabId] = newTabContent.html();
});
$('#myTabContent').append(newTabContent);
}, function() {
console.log('Failed to create tab');
});
}
function loadTabContent(tabId, url) {
if (tabContentCache[tabId]) {
$('#' + tabId).html(tabContentCache[tabId]);
} else {
$.ajax({
url: url,
type: 'GET',
success: function(data) {
tabContentCache[tabId] = data;
$('#' + tabId).html(data);
},
error: function() {
alert('Failed to load tab content');
}
});
}
}
function openTab(evt, tabId) {
@ -169,12 +134,23 @@
$(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() {
$("#myTab").sortable({
placeholder: "ui-state-highlight",
update: function(event, ui) {
}
placeholder: "ui-state-highlight"
});
$("#myTab").disableSelection();
});