Index: arms/html/mapping/content-container.html =================================================================== diff -u -r251023a0dffa14a367b70103ba05c3406c277ba4 -r67f9ca4fa4167c8be071f039e4a57daa11dc683b --- arms/html/mapping/content-container.html (.../content-container.html) (revision 251023a0dffa14a367b70103ba05c3406c277ba4) +++ arms/html/mapping/content-container.html (.../content-container.html) (revision 67f9ca4fa4167c8be071f039e4a57daa11dc683b) @@ -142,6 +142,15 @@ 요구사항 상태 추가 +
+ +

@@ -475,570 +484,140 @@
- \ No newline at end of file + + + + \ No newline at end of file Index: arms/js/mapping.js =================================================================== diff -u -rbea58ee8641a53032784afc293d4d320c325264b -r67f9ca4fa4167c8be071f039e4a57daa11dc683b --- arms/js/mapping.js (.../mapping.js) (revision bea58ee8641a53032784afc293d4d320c325264b) +++ arms/js/mapping.js (.../mapping.js) (revision 67f9ca4fa4167c8be071f039e4a57daa11dc683b) @@ -5,6 +5,7 @@ var selected_alm_server_name; var alm_server_list = {}; var req_state_category_list = {}; +var select_state_id; const reqStateToIconMapping = { // 요구사항 상태에 아이콘 매핑 "10": '', @@ -13,20 +14,6 @@ "13": '' }; -let boardData = Object.keys(req_state_category_list).map(state => ({ // 기본 보드 데이터 - id: req_state_category_list[state], - title: `${reqStateToIconMapping[state]} ${req_state_category_list[state]}` -})); - -const reqKanbanTg = new tourguide.TourGuideClient({ // 상세 정보 투어 가이드 - exitOnClickOutside: true, - autoScroll: false, - hidePrev: true, - hideNext: true, - showStepDots: false, - showStepProgress: false -}); - //////////////////////////////////////////////////////////////////////////////////////// //Document Ready //////////////////////////////////////////////////////////////////////////////////////// @@ -88,6 +75,7 @@ save_req_state_btn_click(); update_req_state_btn_click(); delete_req_state_btn_click(); + default_state_setting_btn_click(); // --- 에디터 설정 --- // var waitCKEDITOR = setInterval(function () { @@ -103,41 +91,6 @@ } }, 313 /*milli*/); - // 칸반 보드 초기화 - // initKanban(); - // setKanban(); - // $("#kanban_search").on("input", function () { - // let searchText = $(this).val().toLowerCase(); - // // console.log("검색: " + searchText); - // - // $('.kanban-item').each(function() { - // let itemText = $(this).find('.req_item').text().toLowerCase(); - // if (itemText.indexOf(searchText) !== -1) { - // $(this).removeClass('hidden'); - // } else { - // $(this).addClass('hidden'); - // } - // }); - // - // if ($(this).val().length > 0) { - // $('.kanban_search_clear').show(); - // } else { - // $('.kanban_search_clear').hide(); - // } - // }); - // - // $('.kanban_search_clear').click(function() { - // $('#kanban_search').val('').focus(); - // $('.kanban-item').removeClass('hidden'); - // $(this).hide(); - // }); - // $(window).resize(function() { - // adjustHeight(); - // }); - // state_category_tab_group_click_event(); - // mapping_flow_chart(); - // flow_chart(); - // mapping_flow_chart(); }) .catch(function (e) { console.error("플러그인 로드 중 오류 발생"); @@ -983,277 +936,57 @@ }); } -/* -function state_category_tab_group_click_event() { - $('ul[data-group="state_category_tab_group"] a[data-toggle="tab"]').on("shown.bs.tab", function(e) { - var target = $(e.target).attr("href"); // activated tab - - if (target === "#board") { - setKanban(); - } - else if (target === "#table"){ - dataTableLoad(); - } - }); +function fn_urlHandler(data) { + select_state_id = data; } -function setKanban() { - $.ajax({ - url: "/auth-user/api/arms/reqState/getNodesWithoutRoot.do", - type: "GET", - dataType: "json", - progress: true, - statusCode: { - 200: function (data) { - let arms_state_list = data.result; - console.log(arms_state_list); +function req_state_data_table() { + $("#default_state_setting_modal").modal("show"); - // 요구사항 상태 별 리스트 - const reqListByState = arms_state_list.reduce((reqList, item) => { - const state = (item && item.reqStateCategoryEntity && item.reqStateCategoryEntity.c_id) || "상태 정보 없음"; - - // 해당 상태의 리스트가 없으면 초기화 - if (!reqList[state]) { - reqList[state] = []; + var columnList= [ + { title:"설정", + data: "c_id", + className: "dt-body-left texe-align-center", + render: function (data, type, row,meta) { + if (type === "display") { + if(isEmpty(data)) { + return `
+
`; } - - // 현재 상태에 해당하는 리스트에 아이템 추가 - reqList[state].push({ - id: item.c_id, - title: `${item.c_title} - `, - info: { - reqSummary: item.c_title - }, - data: item - }); - - return reqList; - }, {}); - - const reqBoardByState = Object.keys(req_state_category_list).map(state => ({ - id: state, // 상태 카테고리 ID - title: `${req_state_category_list[state].c_category_icon} ${req_state_category_list[state].c_title}`, // 상태 카테고리 이름 - item: reqListByState[state] // 상태 카테고리별 상태 목록 - })); - - // 칸반 보드 로드 - loadKanban(reqListByState, reqBoardByState); - - // 높이 조정 - adjustHeight(); - } - }, - error: function (e) { - jError("요구사항 조회 중 에러가 발생했습니다."); - } - }); -} - -function loadKanban(reqListByState, reqBoardByState) { - - $("#myKanban").empty(); - - let kanban = new jKanban({ - element : '#myKanban', - gutter : '15px', - responsivePercentage: true, - dragBoards: false, - boards : reqBoardByState, - dropEl: function (el, target, source) { - - // 보드 변경 - let reqId = el.dataset.eid; - let reqTitle = el.innerText; - let state = source.parentNode.dataset.id; - let changeState = target.parentNode.dataset.id; - - console.log(reqId); - console.log(changeState); - - console.log('[ reqKanban :: loadKanban ] :: 보드 이동', { - element: el.dataset, - fromBoard: state, - toBoard: changeState - }); - - // 요구사항 상태 변경 - let reqData = { - c_id: reqId, - c_state_category_mapping_id: changeState, - }; - - $.ajax({ - url: "/auth-user/api/arms/reqState/updateNode.do", - type: "put", - data: reqData, - statusCode: { - 200: function () { - console.log("[ reqKanban :: loadKanban ] :: 요구사항 상태 변경 -> ", changeState); - jSuccess('"' + reqTitle + '"' + " 상태 카테고리가 변경되었습니다."); + else { + return `
+ +
`; } } - }); - } - }); - - // 상세 정보 클릭 이벤트 - $(".show-info").on('click', function() { - const state_id = $(this).data('id');; - popup_modal('update_popup', state_id); - }); - - // 툴팁 - $('.req_item').hover(function() { - - let reqSummary = $(this).text(); // 요구사항 제목 - - // req_item 요소 - let target = $(this); - let reqItem = target[0].getBoundingClientRect(); - - // 툴팁 요소 - let tooltip = $('
') - .text(reqSummary) - .appendTo('body') - .fadeIn('slow'); - - let tooltipWidth = tooltip.outerWidth(); - let tooltipHeight = tooltip.outerHeight(); - - // 요소의 가운데 아래에 툴팁 위치 설정 - let topPosition = reqItem.bottom + window.scrollY + 5; // 페이지 스크롤을 고려하여 bottom 위치 사용 - let leftPosition = reqItem.left + window.scrollX + (target.outerWidth() - tooltipWidth) / 2; // 요소의 가운데 정렬 - if (leftPosition < 0) { - leftPosition = 0; // 화면 왼쪽을 넘지 않도록 보정 - } - tooltip.css({top: topPosition + 'px', left: leftPosition + 'px'}); - - }, function() { - // 툴팁 제거 - $('.req_item_tooltip').fadeOut('fast', function() { - $(this).remove(); - }); - }).mousemove(function(e) { - // 마우스 위치에 따라 툴팁 위치 조정 - // $('.req_item_tooltip') - // .css({top: e.pageY + 20 + 'px', left: e.pageX - 20 + 'px'}); - }); -} - -function adjustHeight() { - // 높이 조정 - $('.kanban_board').height(350); - - let sidebarHeight = 350; - $('.kanban-drag').each(function() { - this.style.setProperty('height', `calc(${sidebarHeight}px - 181px)`, 'important'); - }); -} - -function initKanban() { - KanbanBoard.init('myKanban', boardData); - adjustHeight(); -} - -//////////////////////////////////////////////////////////////////////////////////////// -// --- 데이터 테이블 설정 --- // -//////////////////////////////////////////////////////////////////////////////////////// -function dataTableLoad() { - // 데이터 테이블 컬럼 및 열그룹 구성 - var columnList = [ - { name: "c_id", title: "상태 아이디", data: "c_id", visible: false }, - { - name: "c_title", - title: "상태 이름", - data: "c_title", - render: function (data, type, row, meta) { - if (isEmpty(data) || data === "unknown") { - return `
N/A
`; - } - - console.log(row); - let edit_button_html = ``; - - return `
${data} ${edit_button_html}
`; + return data; }, - className: "dt-body-left", // 좌측 정렬 - visible: true }, - { - name: "c_id", - title: "상태 카테고리", - data: "c_id", + { title:"상태 이름", + data: "c_title", render: function (data, type, row, meta) { - // select 박스의 초기 옵션 설정 - if (type === "display") { - if(isEmpty(data)) { - return `
- -
`; + if (isEmpty(data)) { + return "
N/A
"; + } else { + return '
' + data + "
"; } - else { - let option_html = ``; - - Object.keys(req_state_category_list).forEach(key => { - let select_html = ""; - let value = key; - let text = req_state_category_list[key]; - // 변경할 부분 c_req_state_mapping_link - if (Number(value) === Number(row.c_state_category_mapping_id)) { - select_html = "selected"; - } - - option_html += ``; - }); - - return ``; - } } return data; }, - className: "dt-body-left", // 좌측 정렬 + className: "dt-body-left", visible: true - } + }, ]; - var rowsGroupList = []; + var rowsGroupList = null; //그룹을 안쓰려면 null 처리 var columnDefList = []; var selectList = {}; - var orderList = [[0, "asc"]]; - var buttonList = [ - "copy", - "excel", - "print", - { - extend: "csv", - text: "Export csv", - charset: "utf-8", - extension: ".csv", - fieldSeparator: ",", - fieldBoundary: "", - bom: true - }, - { - extend: "pdfHtml5", - orientation: "landscape", - pageSize: "LEGAL" - } - ]; - + var orderList = [[1, "asc"]]; + var buttonList = []; var jquerySelector = "#req_state_table"; - var ajaxUrl = "/auth-user/api/arms/reqState/getNodesWithoutRoot.do"; - var jsonRoot = "result"; + var ajaxUrl = "/auth-user/api/arms/reqState/getReqStateListFilter.do"; + var jsonRoot = ""; var isServerSide = false; - console.log("jsonRoot:", jsonRoot); dataTableRef = dataTable_build( jquerySelector, @@ -1267,371 +1000,64 @@ buttonList, isServerSide ); + // ----- 데이터 테이블 빌드 이후 스타일 구성 ------ // + //datatable 좌상단 datarow combobox style + $(".dataTables_length").find("select:eq(0)").addClass("darkBack"); + $(".dataTables_length").find("select:eq(0)").css("min-height", "30px"); - // $(jquerySelector+' tbody').off('click', 'tr'); - // select 박스 및 ajax 적용 코드 - if ($.fn.DataTable.isDataTable(jquerySelector)) { - // DataTable이 이미 초기화된 경우, draw 이벤트에 콜백 함수 연결 - var table = $(jquerySelector).DataTable(); - table.off('draw').on('draw', function() { - select_state_mapping_event(); - }); - select_state_mapping_event(); // 페이지가 처음 로드될 때도 적용되도록 - } - else { - // 초기화되지 않은 경우 초기화 - var table = $(jquerySelector).DataTable({ - // 다른 DataTable 옵션들 - initComplete: function(settings, json) { - select_state_mapping_event(); - } - }); - - // 데이터 테이블의 draw 이벤트에 콜백 함수 연결 - table.on('draw', function() { - select_state_mapping_event(); - }); - } + $(jquerySelector+' tbody').off('click', 'tr'); } -function select_state_mapping_event() { +function dataTableDrawCallback(tableInfo) { + console.log("[ mapping :: dataTableDrawCallback ] :: tableInfo"); + console.log(tableInfo); - // 데이터 테이블 그려진 후 상태 매핑 select2 적용 - $(".chzn-select").each(function () { - // $(this).select2($(this).data()); - $(this).select2({ - ...$(this).data(), - minimumResultsForSearch: -1 // 검색 기능 제거 - }); - }); + var className = "issueStatus"; - // slim scroll 적용 - // $(".select-state-category-mapping").on("select2:open", function () { - // makeSlimScroll(".select2-results__options"); - // }); + var tableData = tableInfo.aoData; + if(!isEmpty(tableData)) { + tableData.forEach(function (rowInfo, index) { + if( !isEmpty(rowInfo._aData) ) { + var tableRowData = rowInfo._aData; + console.log(tableRowData); + var rowIsDefault = tableRowData.c_check; + var rowNameClass = "." + className + "-data" + index; - $(".select-state-category-mapping").off("select2:select").on("select2:select", function (e) { - - console.log(e); - console.log(e.params); - console.log(e.params.data.element); - let c_id = $(e.params.data.element).data('id'); - let c_title = $(e.params.data.element).data('title'); - let req_state_category_c_id = $(e.params.data.element).val(); - let req_state_category_c_title = $(e.params.data.element).text(); - - // ajax updateNode 호출 - $.ajax({ - url: "/auth-user/api/arms/reqState/updateNode.do", - type: "put", - data: { c_id: c_id, c_state_category_mapping_id: req_state_category_c_id}, // 변경할 부분 c_req_state_mapping_link - statusCode: { - 200: function () { - jSuccess( c_title + " 상태가 " + req_state_category_c_title + " 카테고리로 지정되었습니다."); + var appendHtml = rowNameClass+">input"; + if (rowIsDefault === "true") { + $(appendHtml).prop("checked", "true"); } } }); - }); + } } -// 데이터 테이블 구성 이후 꼭 구현해야 할 메소드 : 열 클릭시 이벤트 -function dataTableClick(tempDataTable, selectedData) { - console.log(selectedData); -} - -function dataTableDrawCallback(tableInfo) { - $("#" + tableInfo.sInstance) - .DataTable() - .columns.adjust() - .responsive.recalc(); -} - //데이터 테이블 ajax load 이후 콜백. function dataTableCallBack(settings, json) { + console.log("Data Table loaded in initComplete", settings); console.log(json); } -function getActiveTab() { - var activeTab = $('ul[data-group="state_category_tab_group"] li.active a[data-toggle="tab"]')[0].hash; - return activeTab; -} - -function flow_chart() { - var $flowchart = $('#mapping-flow-chart'); - var $container = $flowchart.parent(); - - // Apply the plugin on a standard, empty div... - $flowchart.flowchart({ - data: defaultFlowchartData, - defaultSelectedLinkColor: '#000055', - grid: 10, - multipleLinksOnInput: true, - multipleLinksOnOutput: true - }); - - function getOperatorData($element) { - var nbInputs = parseInt($element.data('nb-inputs'), 10); - var nbOutputs = parseInt($element.data('nb-outputs'), 10); - var data = { - properties: { - title: $element.text(), - inputs: {}, - outputs: {} - } - }; - - var i = 0; - for (i = 0; i < nbInputs; i++) { - data.properties.inputs['input_' + i] = { - label: 'Input ' + (i + 1) - }; +function default_state_setting_btn_click() { + $("#save_default_state_setting").off().click(function() { + if( isEmpty(select_state_id) ){ + jError("설정된 값이 없거나, 변경된 데이터가 없습니다."); + return; } - for (i = 0; i < nbOutputs; i++) { - data.properties.outputs['output_' + i] = { - label: 'Output ' + (i + 1) - }; - } - return data; - } - - //----------------------------------------- - //--- operator and link properties - //--- start - var $operatorProperties = $('#operator_properties'); - $operatorProperties.hide(); - var $linkProperties = $('#link_properties'); - $linkProperties.hide(); - var $operatorTitle = $('#operator_title'); - var $linkColor = $('#link_color'); - - $flowchart.flowchart({ - onOperatorSelect: function(operatorId) { - $operatorProperties.show(); - $operatorTitle.val($flowchart.flowchart('getOperatorTitle', operatorId)); - return true; - }, - onOperatorUnselect: function() { - $operatorProperties.hide(); - return true; - }, - onLinkSelect: function(linkId) { - $linkProperties.show(); - $linkColor.val($flowchart.flowchart('getLinkMainColor', linkId)); - return true; - }, - onLinkUnselect: function() { - $linkProperties.hide(); - return true; - } - }); - - $operatorTitle.keyup(function() { - var selectedOperatorId = $flowchart.flowchart('getSelectedOperatorId'); - if (selectedOperatorId != null) { - $flowchart.flowchart('setOperatorTitle', selectedOperatorId, $operatorTitle.val()); - } - }); - - $linkColor.change(function() { - var selectedLinkId = $flowchart.flowchart('getSelectedLinkId'); - if (selectedLinkId != null) { - $flowchart.flowchart('setLinkMainColor', selectedLinkId, $linkColor.val()); - } - }); - //--- end - //--- operator and link properties - //----------------------------------------- - - //----------------------------------------- - //--- delete operator / link button - //--- start - $flowchart.parent().siblings('.delete_selected_button').click(function() { - $flowchart.flowchart('deleteSelected'); - }); - //--- end - //--- delete operator / link button - //----------------------------------------- - - - - //----------------------------------------- - //--- create operator button - //--- start - var operatorI = 0; - $flowchart.parent().siblings('.create_operator').click(function() { - var operatorId = 'created_operator_' + operatorI; - var operatorData = { - top: ($flowchart.height() / 2) - 30, - left: ($flowchart.width() / 2) - 100 + (operatorI * 10), - properties: { - title: 'Operator ' + (operatorI + 3), - inputs: { - input_1: { - label: 'Input 1', - } - }, - outputs: { - output_1: { - label: 'Output 1', - } + $.ajax({ + url: "/auth-user/api/arms/reqState/defaultSetting.do", + type: "PUT", + data: { c_id: select_state_id }, + statusCode: { + 200: function (result) { + console.log(result); + jSuccess("상태 기본 설정이 완료되었습니다."); } + }, + error: function (e) { + jError("상태 기본 설정 중 오류가 발생하였습니다."); } - }; - - operatorI++; - - $flowchart.flowchart('createOperator', operatorId, operatorData); - - }); - //--- end - //--- create operator button - //----------------------------------------- - - - - - //----------------------------------------- - //--- draggable operators - //--- start - //var operatorId = 0; - var $draggableOperators = $('.draggable_operator'); - $draggableOperators.draggable({ - cursor: "move", - opacity: 0.7, - - // helper: 'clone', - appendTo: 'body', - zIndex: 1000, - - helper: function(e) { - var $this = $(this); - var data = getOperatorData($this); - return $flowchart.flowchart('getOperatorElement', data); - }, - stop: function(e, ui) { - var $this = $(this); - var elOffset = ui.offset; - var containerOffset = $container.offset(); - if (elOffset.left > containerOffset.left && - elOffset.top > containerOffset.top && - elOffset.left < containerOffset.left + $container.width() && - elOffset.top < containerOffset.top + $container.height()) { - - var flowchartOffset = $flowchart.offset(); - - var relativeLeft = elOffset.left - flowchartOffset.left; - var relativeTop = elOffset.top - flowchartOffset.top; - - var positionRatio = $flowchart.flowchart('getPositionRatio'); - relativeLeft /= positionRatio; - relativeTop /= positionRatio; - - var data = getOperatorData($this); - data.left = relativeLeft; - data.top = relativeTop; - - $flowchart.flowchart('addOperator', data); - } - } - }); - -} - -function mapping_flow_chart() { - - $("#state_flow_chart").flowchart(); - - // 스타일 적용 - $(".input-operator").css("background-color", "#f0ad4e"); - $(".output-operator").css("background-color", "#5bc0de"); - - var $lastEvent = $('#last_event_state_flow_chart'); - var $lastEventContainer = $('#last_event_state_flow_chart_container'); - - var $flowchart = $('#state_flow_chart'); - var $container = $("#flow_chart_container"); - - var cx = $flowchart.width() / 2; - var cy = $flowchart.height() / 2; - - $flowchart.panzoom(); - - $flowchart.panzoom('pan', -cx + $container.width() / 2, -cy + $container.height() / 2); - - var possibleZooms = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3]; - var currentZoom = 2.5; - $flowchart.panzoom('zoom', possibleZooms[currentZoom], { - animate: false - }); - - $container.on('mousewheel.focal', function( e ) { - e.preventDefault(); - var delta = (e.delta || e.originalEvent.wheelDelta) || e.originalEvent.detail; - var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0; - currentZoom = Math.max(0, Math.min(possibleZooms.length - 1, (currentZoom + (zoomOut * 2 - 1)))); - $flowchart.flowchart('setPositionRatio', possibleZooms[currentZoom]); - $flowchart.panzoom('zoom', possibleZooms[currentZoom], { - animate: false, - focal: e }); }); - - function showEvent(txt) { - $lastEvent.text(txt + "\n" + $lastEvent.text()); - $lastEventContainer.effect( "highlight", {color: '#3366ff'}, 500); - } - - $flowchart.flowchart({ - defaultOperatorClass: 'flowchart-operator', - onOperatorSelect: function(operatorId) { - showEvent('Operator "' + operatorId + '" selected. Title: ' + $flowchart.flowchart('getOperatorTitle', operatorId) + '.'); - return true; - }, - onOperatorUnselect: function() { - showEvent('Operator unselected.'); - return true; - }, - onLinkSelect: function(linkId) { - showEvent('Link "' + linkId + '" selected. Main color: ' + $flowchart.flowchart('getLinkMainColor', linkId) + '.'); - return true; - }, - onLinkUnselect: function() { - showEvent('Link unselected.'); - return true; - }, - onOperatorCreate: function(operatorId, operatorData, fullElement) { - showEvent('New operator created. Operator ID: "' + operatorId + '", operator title: "' + operatorData.properties.title + '".'); - return true; - }, - onLinkCreate: function(linkId, linkData) { - showEvent('New link created. Link ID: "' + linkId + '", link color: "' + linkData.color + '".'); - return true; - }, - onOperatorDelete: function(operatorId) { - showEvent('Operator deleted. Operator ID: "' + operatorId + '", operator title: "' + $flowchart.flowchart('getOperatorTitle', operatorId) + '".'); - return true; - }, - onLinkDelete: function(linkId, forced) { - showEvent('Link deleted. Link ID: "' + linkId + '", link color: "' + $flowchart.flowchart('getLinkMainColor', linkId) + '".'); - return true; - }, - onOperatorMoved: function(operatorId, position) { - showEvent('Operator moved. Operator ID: "' + operatorId + ', position: ' + JSON.stringify(position) + '.'); - } - }); - - $flowchart.siblings('.delete_selected_button').click(function() { - $flowchart.flowchart('deleteSelected'); - }); - - $(".flowchart-operator").resizable({handles:"se"}); -} - -function updateFlowchartData(newData) { - // 새로운 데이터 설정 - let $flowchart = $("#state_flow_chart"); - let $container = $("#flow_chart_container"); - $flowchart.flowchart('setData', newData); -} -*/ \ No newline at end of file +} \ No newline at end of file