Index: vue/src/assets/images/devops/DevSupport/github.png =================================================================== diff -u -r30b75fcc938cea7e2e25feb948cddbfcf80473bc -r83ad418edefb4880f535790d3f2de5260cc72655 --- vue/src/assets/images/devops/DevSupport/github.png (.../github.png) (revision 30b75fcc938cea7e2e25feb948cddbfcf80473bc) +++ vue/src/assets/images/devops/DevSupport/github.png (.../github.png) (revision 83ad418edefb4880f535790d3f2de5260cc72655) @@ -1515,30 +1515,40 @@ opacity: 1; } -.req-table { +.req-table, +.req-select { background: rgba(51, 51, 51, 0.8) !important; border: 1px solid rgba(51, 51, 51, 0.825) !important; } .req-table.dropdown-menu a:hover, -.req-table.dropdown-menu .active a { +.req-table.dropdown-menu .active a, +.req-select.dropdown-menu a:hover, +.req-select.dropdown-menu .active a { background: none; } .req-table.dropdown-menu a:hover, +.req-select.dropdown-menu a:hover, #select2-selected_pdService-container .select2-selection__placeholder, .multiple-select .ms-choice > span.placeholder { color: #f8f8f8; } .req-table.dropdown-menu .active a, +.req-select.dropdown-menu .active a, #disabled_input_pdservice.form-control { color: #a4c6ff; } +.req-select { + min-width: auto; +} + #reqDataTable { + padding-top: 0; margin-bottom: 0; - min-height: 300px; - max-height: 721px; + max-height: 745px; + background: 0 none; overflow: auto; } @@ -1548,8 +1558,12 @@ } #reqDataTable .reqTable th { - padding: 10px; + padding: 20px 10px 10px; text-align: center; + position: sticky; + top: 0; + z-index: 1; + background-color: rgba(51, 51, 51, 0.9); } #reqDataTable .reqTable td { @@ -1570,12 +1584,13 @@ background: 0 none; } -#reqDataTable .reqTable .tbody tr:nth-child(odd) { +#reqDataTable .reqTable .tbody tr:nth-child(even) { background-color: rgba(51, 51, 51, 0.325); } #reqDataTable .reqTable .tbody tr:first-child { height: 37px !important; } #reqDataTable .reqTable .tbody tr td { + position: relative; border-right: 2px solid #515256; } Index: arms/js/reqAdd.js =================================================================== diff -u -r48cb04decc2123215f76ec93a28363215410a0bb -r83ad418edefb4880f535790d3f2de5260cc72655 --- arms/js/reqAdd.js (.../reqAdd.js) (revision 48cb04decc2123215f76ec93a28363215410a0bb) +++ arms/js/reqAdd.js (.../reqAdd.js) (revision 83ad418edefb4880f535790d3f2de5260cc72655) @@ -1916,7 +1916,35 @@ } function tableSelect(id) { - makeTable(id, "reqDataTable", { + makeTable("reqDataTable", { + id, + onGetData: async function (id) { + return await $.ajax({ + url: `/auth-user/api/arms/reqAdd/T_ARMS_REQADD_${id}/getMonitor.do`, + type: "GET", + dataType: "json", + progress: true, + statusCode: { + 200: function (data) { + if (!isEmpty(data)) { + return data; + } + } + } + }); + }, + onUpdate: function (id, params) { + $.ajax({ + url: `/auth-user/api/arms/reqAdd/T_ARMS_REQADD_${id}/updateNode.do`, + type: "POST", + data: params, + statusCode: { + 200: function () { + jSuccess(params.c_title + "의 데이터가 변경되었습니다."); + } + } + }); + }, content: { version: "Version", category: "구분", Index: arms/js/reqAddTable.js =================================================================== diff -u -r30b75fcc938cea7e2e25feb948cddbfcf80473bc -r83ad418edefb4880f535790d3f2de5260cc72655 --- arms/js/reqAddTable.js (.../reqAddTable.js) (revision 30b75fcc938cea7e2e25feb948cddbfcf80473bc) +++ arms/js/reqAddTable.js (.../reqAddTable.js) (revision 83ad418edefb4880f535790d3f2de5260cc72655) @@ -1,3 +1,25 @@ +const ReqPriority = { + 매우_높음: 7, + 높음: 6, + 중간: 5, + 낮음: 4, + 매우_낮음: 3 +}; + +const ReqDifficulty = { + 매우_어려움: 3, + 어려움: 4, + 보통: 5, + 쉬움: 6, + 매우_쉬움: 7 +}; + +const ReqStatus = { + 열림: 10, + 진행중: 11, + 해결됨: 12 +}; + class Table { constructor(options, data) { this.options = options; @@ -17,8 +39,18 @@ Object.keys(this.options.content).forEach((key) => { const $col = this.makeElement(tag); $col.className = key; - $col.innerHTML = cur[key]; + if (tag === "td" && ["status", "priority", "difficulty"].includes(key)) { + !!cur[key] && + ($col.innerHTML = ` + `); + } else { + $col.innerHTML = cur[key]; + } + $tr.appendChild($col); }); @@ -38,37 +70,133 @@ return $tbody; } - removeInput(input, node) { - const { origin } = this.$data.find((item) => item.id === Number(node.parentElement.dataset.id)); - origin.data = input.value; - node.textContent = input.value; + getOriginData(id) { + return origin; + } - console.log("#### update ", origin); + updateData(id, obj) { + const { + origin: { + c_id, + c_title, + c_req_contents, + c_req_pdservice_versionset_link, + reqDifficultyEntity, + reqPriorityEntity, + reqStateEntity, + c_req_reviewer01, + c_req_reviewer02, + c_req_reviewer03, + c_req_reviewer04, + c_req_reviewer05 + } + } = this.$data.find((item) => item.id === Number(id)); + + this.options.onUpdate( + this.options.id, + Object.assign( + { + c_id, + c_title, + c_req_pdservice_versionset_link, + c_req_priority_link: reqPriorityEntity?.c_id ?? null, // 5 - 중간 + c_req_difficulty_link: reqDifficultyEntity?.c_id ?? null, // 5 - 보통 + c_req_state_link: reqStateEntity?.c_id ?? null, //10 - 열림 + c_req_update_date: new Date(), + c_req_reviewer01, + c_req_reviewer02, + c_req_reviewer03, + c_req_reviewer04, + c_req_reviewer05, + c_req_status: "ChangeReq", + c_req_contents + }, + obj + ) + ); } addInput(node) { const uuid = crypto.randomUUID(); const text = node.textContent; - const $input = document.createElement("input"); + const $input = this.makeElement("input"); + $input.id = uuid; - $input.addEventListener("blur", () => this.removeInput($input, node)); + $input.addEventListener("blur", () => { + this.updateData(node.parentElement.dataset.id, { c_title: $input.value }); + node.textContent = $input.value; + }); node.textContent = ""; node.appendChild($input); document.getElementById(uuid).value = text; document.getElementById(uuid).focus(); } + setOptions(name, text, uuid) { + let options; + let keyname; + switch (name) { + case "difficulty": + options = ReqDifficulty; + keyname = "c_req_difficulty_link"; + break; + case "priority": + options = ReqPriority; + keyname = "c_req_priority_link"; + break; + case "status": + default: + options = ReqStatus; + keyname = "c_req_state_link"; + break; + } + + return Object.entries(options).reduce((acc, [name, value]) => { + const $li = this.makeElement("li"); + const label = name.replace("_", " "); + $li.className = text.trim() === label ? "active" : ""; + $li.innerHTML = `${label}`; + $li.addEventListener("click", (e) => { + const result = {}; + result[keyname] = value; + this.updateData($li.parentElement.parentElement.parentElement.dataset.id, result); + $li.parentElement.previousElementSibling.innerHTML = `${e.target.textContent} `; + + document.getElementById(uuid).remove(); + }); + + return [...acc, $li]; + }, []); + } + + addSelect(node) { + const uuid = crypto.randomUUID(); + const $ul = this.makeElement("ul"); + $ul.id = uuid; + $ul.className = "dropdown-menu req-select"; + this.setOptions(node.parentElement.className, node.textContent, uuid).forEach((item) => $ul.append(item)); + + node.parentElement.appendChild($ul); + } + makeSection(rowData, name, col) { const $el = this.makeElement(name); $el.className = name; this.makeRow(rowData, col).forEach((r) => $el.append(r)); $el.addEventListener("click", (e) => { - if (e.target.tagName !== "TD") return; - if (e.target.classList.contains("content")) { + const { tagName, classList, parentElement } = e.target; + // input + if (tagName === "TD" && classList.contains("content")) { this.addInput(e.target); } + + // select + if (["A", "I"].includes(tagName)) { + classList.contains("dropdown-toggle") && this.addSelect(e.target); + tagName === "I" && this.addSelect(parentElement); + } }); return $el; @@ -110,6 +238,7 @@ return setDepth(data, node.c_parentid, titles.concat(node.c_title)); }; + const setTableData = (data) => { return data .sort((a, b) => a.c_parentid - b.c_parentid) @@ -152,24 +281,24 @@ }, []); }; -const getMonitorData = async (id) => { - return await $.ajax({ - url: `/auth-user/api/arms/reqAdd/T_ARMS_REQADD_${id}/getMonitor.do`, - type: "GET", - dataType: "json", - progress: true, - statusCode: { - 200: function (data) { - if (!isEmpty(data)) { - return data; - } - } - } - }); -}; +// const getMonitorData = async (id) => { +// return await $.ajax({ +// url: `/auth-user/api/arms/reqAdd/T_ARMS_REQADD_${id}/getMonitor.do`, +// type: "GET", +// dataType: "json", +// progress: true, +// statusCode: { +// 200: function (data) { +// if (!isEmpty(data)) { +// return data; +// } +// } +// } +// }); +// }; -const makeTable = async (id, wrapper, options) => { - const res = await getMonitorData(id); +const makeTable = async (wrapper, options) => { + const res = await options.onGetData(options.id); const $wrapper = document.getElementById(wrapper); const table = new Table(options, setTableData(res));