// (2022.9.7, 차재복, Cha Jae Bok, http://www.ktword.co.kr)
// type별로 각각 다른 편집 버튼 및 기능 구현 (type = word, source, manual, db_table)
// 호출 : [navi_base.js] li_create()
function variousEditByType(li, liData, type) {
// 타이틀, 요약 수정 : (type = word, source, manual, db_table 모두 해당)
// [title]
let titleBtn = itemTitleEdit(li, liData, type); // navi_base_edit.js
li.appendChild(titleBtn);
// 트리 노드 수정 : (type = word, source, manual, db_table 모두 해당)
// [ ← ↑ ↓ →] [자식 맨앞 맨끝] [check]
if(liData.item_type!='no') {
let treeEditSpan = treeEdit(li, liData, type); // navi_base_edit.js
li.appendChild(treeEditSpan);
}
// 워드 노드 내용 편집 : (type = word 만 해당)
// [ New Move Delete Edit ]
if(li.dataset.no && type=='word') {
let wordEditSpan = wordEdit(li, liData, type); // navi_edit_word.js
li.appendChild(wordEditSpan);
}
// 소스 노드 내용 편집 : (type = source 만 해당)
// [ Edit ]
if(type=='source' && liData.item_type == 'file') {
let sourceEditSpan = sourceEdit(li, liData, type); // navi_base_edit.js
li.appendChild(sourceEditSpan);
}
}
// 기능 : 노드 title, desc 문자열 편집
// 호출 : [navi_base.js] li_create()
function itemTitleEdit(li, liData, type) {
// type = (word,file,manual,table 4종)
const editBtn = document.createElement('button');
editBtn.setAttribute('class','editBtn');
editBtnAllStyle(editBtn,'Title'); // navi_base_edit.js
editBtn.style.margin = '0px 0px 0px 15px';
editBtn.addEventListener('click', function(e) {
// 이미 input sumit 있으면 복귀
if( li.querySelector('button.submit') ) {
disableInput(li); // navi_base_edit.js
return editBtn;;
}
// title,colon,desc 찾음
const title = li.querySelector('span.title');
const colon = li.querySelector('span.colon');
const desc = li.querySelector('span.desc')
// title,colon,desc 숨김
if(title) title.style.display = 'none';
if(colon) colon.style.display = 'none';
if(desc) desc.style.display = 'none';
// title 변경
// title 요소 백업
window.titleBackup = title;
// title을 input 요소로 변환
let inputTitle = document.createElement('input');
inputTitle.setAttribute('class','title');
inputTitle.setAttribute('size','12');
inputTitle.value = title.innerText;
li.insertBefore(inputTitle,this);
// title.replaceWith(inputTitle);
// li.replaceChild(inputTitle,title);
// desc 요소 변경
// desc 요소 백업
if(desc) window.descBackup = desc;
// desc을 input 요소로 변환
if(desc) {
let inputDesc = document.createElement('input');
inputDesc.setAttribute('class','desc');
inputDesc.setAttribute('size','30');
inputDesc.value = desc.innerText;
li.insertBefore(inputDesc,this);
// desc.replaceWith(inputDesc);
// li.replaceChild(inputDesc,desc);
}
// submit button 추가
let submitBtn = document.createElement('button');
submitBtn.setAttribute('class','submit');
submitBtn.dataset.type = type;
// type별 요소 내 식별자 저장
if(type=='word' && liData.item_type == 'id')
submitBtn.dataset.choice = 'word_gubun_name_yoyak_update';
if(type=='word' && liData.item_type == 'no') {
li.dataset.id = li.parentNode.dataset.id;
li.dataset.no = liData.id;
submitBtn.dataset.choice = 'word_titlename_yoyak_update';
}
if(type=='source')
submitBtn.dataset.choice = 'source_name_expr_update';
if(type=='manual')
submitBtn.dataset.choice = 'manual_name_yoyak_update';
if(type=='db_table') {
if(liData.item_type=='field') {
li.dataset.id = li.parentNode.dataset.id; // table id
li.dataset.no = liData.id; // field id
}
submitBtn.dataset.choice = 'db_tbl_fld_comment_update';
}
submitBtn.innerHTML = 'Submit';
submitBtn.style.fontSize = '13px';
li.insertBefore(submitBtn, this);
// submit button에 event 추가
if(submitBtn.dataset.choice)
submitBtn.addEventListener('click', ajaxUpdate ); // navi_base_edit.js
},true);
return editBtn;
}
// 기능 : 트리 노드 수정
// 호출 : [navi_base.js] li_create()
function treeEdit(li, liData, type) {
const treeEditSpan = document.createElement('span');
treeEditSpan.style.marginLeft = '10px';
// move 버튼 넷 (4 ← ↑ ↓ → ) 보이기
moveBtnShow (li, treeEditSpan, 'sourceOrderingInNode'); // navi_base_edit.js
// check 버튼 보이기
if (type=='word') {
const checkBtn = document.createElement('button');
treeEditSpan.appendChild(checkBtn);
checkBtn.setAttribute('class','treeChkBtn');
editBtnAllStyle(checkBtn,'check'); // navi_base_edit.js
checkBtn.style.margin = '0px 5px 0px';
checkBtn.dataset.type = type;
checkBtn.dataset.choice = 'treeNodeCheck';
checkBtn.addEventListener('click', ajaxUpdate ); // navi_base_edit.js
// naviUpdate.php -> naviUpdate_utils.php -> treeNodeCheck()
}
// delete 버튼 (x) 보이기
if (type=='source') {
const deleteBtn = document.createElement('button');
treeEditSpan.appendChild(deleteBtn);
editBtnAllStyle(deleteBtn,'x'); // navi_base_edit.js
deleteBtn.addEventListener('click', (e) => {
const isConfirm = confirm('삭제 대상 id : '+li.dataset.id);
if(!isConfirm) return;
const url = '/test/navigation/naviUpdate.php';
const method = 'post';
const choice = 'deleteSrcFile';
const parent = li.parentNode.closest('li').dataset.id;
const id = li.dataset.id;
parms = {'type' : 'source', 'choice' : choice, 'id' : id, 'no' : parent};
ajaxPromise(url,method,parms) // common_utils.js
.then(
response => {
if(response.err_msg) alert(response.err_msg);
// 기존 olStart 산하 자식 모두 없애고 다시 보여주기
// - 기존 열려진 ol 요소들 모두 닫기, bullet 요소 화살표 방향 바꿈, idpath에 언급된 id 마다 차례로 open 시킴
const idpath = ['0',parent];
// const olStart = document.getElementById('sourceOlStart');
const startElem = document.getElementById('sourceStart');
const childOl = startElem.querySelector('ol.tree');
if(childOl) childOl.remove();
asynctodo(idpath,startElem); // navi_search.js
},
error => { alert(error); }
);
});
}
return treeEditSpan;
}
// 편집 버튼 제목 및 스타일링
function editBtnAllStyle(button,name,color) {
button.style.fontSize = '7px';
button.style.marginLeft = '5px';
button.style.padding = '0px';
button.innerHTML = name;
if(color) button.style.color = color;
}
// 기능 : 서버측 db 업데이트 및 그 결과 응답 처리
// 호출 : [navi_base_edit.js] itemTitleEdit(li,liData,type)
function ajaxUpdate(e) {
// title update :
// - type = (word,source,manual,db_table)
// - word : word_gubun_name_yoyak_update, word_titlename_yoyak_update
// - source : source_name_expr_update,
// - manual : manual_name_yoyak_update
// - db_tbl : db_tbl_fld_comment_update
// check update :
// - word : treeNodeCheck
let type = e.target.dataset.type;
let choice = e.target.dataset.choice;
let li = e.target.closest('li');
let id = li.dataset.id;
let no = li.dataset.no;
if(no) id = li.closest('li').dataset.id; // 상위 id 가져옴
// 제목
let inputTitle = li.querySelector('input.title');
let msg;
if(inputTitle) msg = inputTitle.value;
// 요약
let inputDesc = li.querySelector('input.desc');
let text;
if(inputDesc) text = inputDesc.value;
if(!confirm('type='+type+', choice='+choice+', id='+id+', no='+no+', msg='+msg+', text='+text)) return;
let formData = new FormData(); // 빈 formData 생성
formData.append('type',type);
formData.append('choice',choice);
// [str update] (word) 'word_gubun_name_yoyak_update', (source) 'source_name_expr_update'
// [word treeNode check]
formData.append('id',id); // 해당 id
if(no) formData.append('no',no); // 해당 no
formData.append('msg',msg); // name(title)
formData.append('text',text); // yoyak(desc)
let url = '/test/navigation/naviUpdate.php';
let method = 'post';
let parms = { 'formData' : formData };
ajaxPromise(url, method, parms) // common_utils.js
// 가져온 결과에 대한 데이터 가공
.then(
response => {
// (개발,디버깅중)
if(response.err_msg) {
alert(response.err_msg);
return;
}
if(choice=='word_gubun_name_yoyak_update'
|| choice=='word_titlename_yoyak_update'
|| choice=='source_name_expr_update'
|| choice=='manual_name_yoyak_update'
|| choice=='db_tbl_fld_comment_update') {
// input,submit 요소 제거, span 요소 복구
disableInput(li)
// 서버 송출 데이터를 해당 요소에 출력
let title = li.querySelector('span.title');
let desc = li.querySelector('span.desc');
if(response.title) title.innerHTML = response.title;
if(response.desc) desc.innerHTML = response.desc;
} else if(choice=='treeNodeCheck'){
alert(response.result);
}
},
error => {
alert(error);
}
);
}
// 제목 입력 창 닫기
// 호출 : [navi_base_edit.js] itemTitleEdit(li,liData,type)
function disableInput(li) {
// 각 요소들 찾기
const inputTitle = li.querySelector('input.title');
const inputDesc = li.querySelector('input.desc');
const buttonSubmit = li.querySelector('button.submit');
const spanTitle = li.querySelector('span.title');
const spanColon = li.querySelector('span.colon');
const spanDesc = li.querySelector('span.desc')
// 편집용 inputTitle,inputDesc,submit 제거
if(inputTitle) inputTitle.remove();
if(inputDesc) inputDesc.remove();
if(buttonSubmit) buttonSubmit.remove();
// 기존 title,colon,desc 보이기
if(spanTitle) spanTitle.style.display = '';
if(spanColon) spanColon.style.display = '';
if(spanDesc) spanDesc.style.display = '';
}
// 소스 파일 편집
function sourceEdit(li, liData, type) {
const srcEditSpan = document.createElement('span');
const editBtn = document.createElement('button');
editBtnAllStyle(editBtn,'Edit'); // navi_base_edit.js
srcEditSpan.appendChild(editBtn);
editBtn.addEventListener('click', function(e) {
const oldEditDiv = li.querySelector('div.editDiv')
if(oldEditDiv) {
if(oldEditDiv.style.display == 'none') oldEditDiv.style.display = 'flex';
else oldEditDiv.style.display = 'none';
return;
}
//console.log(liData);
// alert(li.dataset.id);
const url = '/test/navigation/naviUpdate.php';
const method = 'post';
const choice = 'editSrcFileFetch';
const id = li.dataset.id;
const parms = { 'choice' : choice, 'id' : id};
ajaxPromise(url, method, parms) // common_utils.js
.then(
response => {
// console.log(response);
// alert(response.responseText);
const editDiv = document.createElement('div');
editDiv.setAttribute('class','editDiv');
editDiv.style.display = 'flex';
editDiv.style.border = '1px solid red';
const textarea = document.createElement('textarea');
textarea.setAttribute('rows','23');
// textarea.setAttribute('cols','98');
textarea.style.width = '80%';
textarea.style.fontSize = '13px';
textarea.style.padding = '10px';
// textarea.style.whitespace = 'pre';
editDiv.appendChild(textarea);
textarea.value = response.code;
const submitBtn = document.createElement('button');
submitBtn.innerText = 'Submit';
editDiv.appendChild(submitBtn);
submitBtn.addEventListener('click', (e) => {
// alert(id + ' => ' + textarea.value);
const url = '/test/navigation/naviUpdate.php';
const method = 'post';
const choice = 'editSrcFileUpdate';
const parms = {'choice' : choice, 'id' : id, 'msg' : textarea.value };
ajaxPromise(url, method, parms) // common_utils.js
.then(
response => {
console.log(response);
// editDiv(textarea,submitBtn) 제거
editDiv.remove();
},
error => { alert(error); }
);
});
li.appendChild(editDiv);
},
error => { alert(error); }
);
});
return srcEditSpan;
}