From f659ef4d6456e96e28e14be572b0316a1028d0cc Mon Sep 17 00:00:00 2001 From: HyeonJongKim Date: Thu, 22 Aug 2024 15:55:01 +0900 Subject: [PATCH] =?UTF-8?q?admin:=20=ED=99=9C=EC=84=B1=ED=99=94=20?= =?UTF-8?q?=ED=83=AD=20=EB=B3=80=EA=B2=BD=EC=8B=9C=20=EC=9E=91=EC=84=B1=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=9C=A0=EC=A7=80=20#10?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/templates/layout/common.html | 162 ++++++++---------- 1 file changed, 69 insertions(+), 93 deletions(-) diff --git a/poc/admin/src/main/resources/templates/layout/common.html b/poc/admin/src/main/resources/templates/layout/common.html index 15c72ff..593cdb7 100644 --- a/poc/admin/src/main/resources/templates/layout/common.html +++ b/poc/admin/src/main/resources/templates/layout/common.html @@ -39,112 +39,43 @@ let tabContentCache = {}; Reqhelper.reqGetJson('/admin/tab/list', function(data) { - data.forEach(function(item) { - loadTab(item.id, item.name, item.url); - }) + 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 = $('
  • ').addClass('tab-item'); - const newTabLink = $('').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); - loadTabContent(id, url); - }); - - const closeButton = $('').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 = $('
    ').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); + createTab(id, tabName, url); + openTab({currentTarget: $(`#${id}-tab`)}, id); + loadTabContent(id, url); } - 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; - const newTab = $('
  • ').addClass('tab-item'); - const newTabLink = $('').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 = $('').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 = $('
    ').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); + 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]) { - $('#' + tabId).html(tabContentCache[tabId]); - } else { + if (!tabContentCache[tabId]) { $.ajax({ url: url, type: 'GET', @@ -159,6 +90,40 @@ } } + function createTab(tabId, tabName, url) { + const newTab = $('
  • ').addClass('tab-item'); + const newTabLink = $('').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 = $('').addClass('close-button') + .text('X') + .click(function(event) { + deleteTab(event, tabId); + }); + + newTabLink.append(closeButton); + newTab.append(newTabLink); + $('#myTab').append(newTab); + + const newTabContent = $('
    ').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) { $('.tab-pane').css('display', 'none'); $('.tab-link').each(function() { @@ -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(); }); -- 2.40.1