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 = `
+
+ ${cur[key]}
+
+ `);
+ } 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));