Amkor/Groupware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

할일 관리 시스템 개선 및 대시보드 UI 향상

Browse Source 
- Todo 상태 관리 시스템 추가 (대기, 진행, 보류, 완료, 취소)
- 완료일(okdate) 자동 설정 기능 구현
- 대시보드 할일 목록에서 만료일 지난 항목 적색 배경 강조
- 휴가신청 목록에서 항목별 색상 구분 (대체=노란색, 년차=녹색, 하기=파란색)
- 휴가신청 목록 데이터 매핑 수정 (holydays, holytimes, HolyReason)
- Todo 정렬 순서 개선 (상태별 우선순위 적용)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
ChiKyun Kim
2025-07-30 15:50:21 +09:00
parent 943fdb2036
commit 642c204a18
4 changed files with 518 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
Project/Web/Controller/TodoController.cs
View File

@@ -57,7 +57,18 @@ namespace Project.Web.Controllers
string gcode = FCOMMON.info.Login.gcode; string gcode = FCOMMON.info.Login.gcode;
string uid = FCOMMON.info.Login.no; string uid = FCOMMON.info.Login.no;
var sql = "SELECT * FROM EETGW_Todo WHERE gcode = @gcode AND uid = @uid ORDER BY flag DESC, seqno DESC, expire ASC, wdate ASC"; var sql = @"SELECT * FROM EETGW_Todo WHERE gcode = @gcode AND uid = @uid
ORDER BY
CASE
WHEN ISNULL(status,'0') = '1' THEN 1 -- 진행
WHEN ISNULL(status,'0') = '0' THEN 2 -- 대기
WHEN ISNULL(status,'0') = '3' THEN 3 -- 보류
WHEN ISNULL(status,'0') = '5' THEN 4 -- 완료
WHEN ISNULL(status,'0') = '2' THEN 5 -- 취소
ELSE 6
END, flag DESC,
ISNULL(seqno, 0) DESC,
expire ASC";
var todos = DBM.Query<TodoModel>(sql, new { gcode = gcode, uid = uid }); var todos = DBM.Query<TodoModel>(sql, new { gcode = gcode, uid = uid });
return CreateJsonResponse(new return CreateJsonResponse(new
@@ -149,13 +160,35 @@ namespace Project.Web.Controllers
if (todo.seqno == null) todo.seqno = 0; if (todo.seqno == null) todo.seqno = 0;
if (todo.flag == null) todo.flag = false; if (todo.flag == null) todo.flag = false;
if (todo.status == '\0') todo.status = '0';
// 새로 생성할 때 완료 상태면 완료일 설정
DateTime? okdateValue = null;
if (todo.status == '5')
{
okdateValue = DateTime.Now;
}
var sql = @" var sql = @"
INSERT INTO EETGW_Todo (gcode, uid, title, remark, flag, expire, seqno, request, wuid, wdate) INSERT INTO EETGW_Todo (gcode, uid, title, remark, flag, expire, seqno, request, status, okdate, wuid, wdate)
VALUES (@gcode, @uid, @title, @remark, @flag, @expire, @seqno, @request, @wuid, @wdate); VALUES (@gcode, @uid, @title, @remark, @flag, @expire, @seqno, @request, @status, @okdate, @wuid, @wdate);
SELECT SCOPE_IDENTITY();"; SELECT SCOPE_IDENTITY();";
var newId = DBM.QuerySingle<int>(sql, todo); var newId = DBM.QuerySingle<int>(sql, new
{
gcode = todo.gcode,
uid = todo.uid,
title = todo.title,
remark = todo.remark,
flag = todo.flag,
expire = todo.expire,
seqno = todo.seqno,
request = todo.request,
status = todo.status,
okdate = okdateValue,
wuid = todo.wuid,
wdate = todo.wdate
});
return CreateJsonResponse(new return CreateJsonResponse(new
{ {
@@ -210,9 +243,24 @@ namespace Project.Web.Controllers
string gcode = FCOMMON.info.Login.gcode; string gcode = FCOMMON.info.Login.gcode;
string uid = FCOMMON.info.Login.no; string uid = FCOMMON.info.Login.no;
// 상태가 완료('5')로 변경되고 아직 완료일이 설정되지 않은 경우 완료일 설정
DateTime? okdateValue = null;
if (todo.status == '5')
{
// 기존 완료일이 있는지 확인
var existingTodo = DBM.QuerySingleOrDefault<TodoModel>(
"SELECT okdate FROM EETGW_Todo WHERE idx = @idx AND gcode = @gcode AND uid = @uid",
new { idx = todo.idx, gcode = gcode, uid = uid });
if (existingTodo?.okdate == null)
{
okdateValue = DateTime.Now;
}
}
var sql = @" var sql = @"
UPDATE EETGW_Todo UPDATE EETGW_Todo
SET title = @title, remark = @remark, flag = @flag, expire = @expire, seqno = @seqno, request = @request SET title = @title, remark = @remark, flag = @flag, expire = @expire, seqno = @seqno, request = @request, status = @status, okdate = @okdate
WHERE idx = @idx AND gcode = @gcode AND uid = @uid"; WHERE idx = @idx AND gcode = @gcode AND uid = @uid";
var affectedRows = DBM.Execute(sql, new var affectedRows = DBM.Execute(sql, new
@@ -223,6 +271,8 @@ namespace Project.Web.Controllers
expire = todo.expire, expire = todo.expire,
seqno = todo.seqno ?? 0, seqno = todo.seqno ?? 0,
request = todo.request, request = todo.request,
status = todo.status == '\0' ? '0' : todo.status,
okdate = okdateValue,
idx = todo.idx, idx = todo.idx,
gcode = gcode, gcode = gcode,
uid = uid uid = uid

6
Project/Web/Model/TodoModel.cs
View File

@@ -74,5 +74,11 @@ namespace Project.Web.Model
/// 자동 셋팅 /// 자동 셋팅
/// </summary> /// </summary>
public DateTime wdate { get; set; } public DateTime wdate { get; set; }
/// <summary>
/// 완료일
/// 상태를 완료로 변경할 때 자동 설정
/// </summary>
public DateTime? okdate { get; set; }
} }
} }

239
Project/Web/wwwroot/DashBoard/index.html
View File

@@ -252,9 +252,17 @@
</svg> </svg>
할일 할일
</span> </span>
<div class="flex items-center space-x-2">
<button onclick="showDashboardAddTodoModal()" class="text-xs bg-primary-500/20 hover:bg-primary-500/30 text-primary-300 hover:text-primary-200 px-3 py-1 rounded-full transition-colors flex items-center">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
할일추가
</button>
<button onclick="window.location.href='/Todo'" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full transition-colors"> <button onclick="window.location.href='/Todo'" class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full transition-colors">
전체보기 전체보기
</button> </button>
</div>
</h2> </h2>
</div> </div>
<div class="p-4"> <div class="p-4">
@@ -542,14 +550,20 @@
</div> </div>
</div> </div>
<!-- 만료일 및 작성일 --> <!-- 만료일, 완료일 및 작성일 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div> <div>
<label class="block text-white/70 text-sm font-medium mb-2">만료일</label> <label class="block text-white/70 text-sm font-medium mb-2">만료일</label>
<div id="detailExpire" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center"> <div id="detailExpire" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
- -
</div> </div>
</div> </div>
<div>
<label class="block text-white/70 text-sm font-medium mb-2">완료일</label>
<div id="detailOkdate" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
-
</div>
</div>
<div> <div>
<label class="block text-white/70 text-sm font-medium mb-2">작성일</label> <label class="block text-white/70 text-sm font-medium mb-2">작성일</label>
<div id="detailWdate" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center"> <div id="detailWdate" class="bg-white/10 rounded-lg px-4 py-3 text-white min-h-[2.5rem] flex items-center">
@@ -572,6 +586,93 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 할일 추가 모달 -->
<div id="dashboardAddTodoModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
<div class="flex items-center justify-center min-h-screen p-4">
<div class="glass-effect rounded-2xl w-full max-w-2xl animate-slide-up">
<!-- 모달 헤더 -->
<div class="px-6 py-4 border-b border-white/10 flex items-center justify-between">
<h2 class="text-xl font-semibold text-white flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
새 할일 추가
</h2>
<button onclick="hideDashboardAddTodoModal()" class="text-white/70 hover:text-white transition-colors">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- 모달 내용 -->
<div class="p-6">
<form id="dashboardTodoForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label class="block text-white/70 text-sm font-medium mb-2">제목 (선택사항)</label>
<input type="text" id="dashboardTodoTitle" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all" placeholder="할일 제목을 입력하세요">
</div>
<div>
<label class="block text-white/70 text-sm font-medium mb-2">만료일 (선택사항)</label>
<input type="date" id="dashboardTodoExpire" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
</div>
</div>
<div>
<label class="block text-white/70 text-sm font-medium mb-2">내용 *</label>
<textarea id="dashboardTodoRemark" rows="3" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all" placeholder="할일 내용을 입력하세요 (필수)" required></textarea>
</div>
<div>
<label class="block text-white/70 text-sm font-medium mb-2">요청자</label>
<input type="text" id="dashboardTodoRequest" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all" placeholder="업무 요청자를 입력하세요">
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label class="block text-white/70 text-sm font-medium mb-2">진행상태</label>
<input type="hidden" id="dashboardTodoStatus" value="0">
<div class="flex flex-wrap gap-2">
<button type="button" onclick="setDashboardTodoStatus('0')" id="dashboardStatusBtn0" class="px-3 py-1 rounded-lg text-xs font-medium bg-gray-500/20 text-gray-300 border border-gray-500/30 transition-all">대기</button>
<button type="button" onclick="setDashboardTodoStatus('1')" id="dashboardStatusBtn1" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-primary-500/20 hover:text-primary-300 transition-all">진행</button>
<button type="button" onclick="setDashboardTodoStatus('3')" id="dashboardStatusBtn3" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-warning-500/20 hover:text-warning-300 transition-all">보류</button>
<button type="button" onclick="setDashboardTodoStatus('2')" id="dashboardStatusBtn2" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-danger-500/20 hover:text-danger-300 transition-all">취소</button>
<button type="button" onclick="setDashboardTodoStatus('5')" id="dashboardStatusBtn5" class="px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-success-500/20 hover:text-success-300 transition-all">완료</button>
</div>
</div>
<div>
<label class="block text-white/70 text-sm font-medium mb-2">중요도</label>
<select id="dashboardTodoSeqno" class="w-full bg-white/20 backdrop-blur-sm border border-white/30 rounded-lg px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-primary-400 transition-all">
<option value="0">보통</option>
<option value="1">중요</option>
<option value="2">매우 중요</option>
<option value="3">긴급</option>
</select>
</div>
<div class="flex items-end">
<label class="flex items-center text-white/70 text-sm font-medium">
<input type="checkbox" id="dashboardTodoFlag" class="mr-2 text-primary-500 focus:ring-primary-400 focus:ring-offset-0 rounded">
플래그 (상단 고정)
</label>
</div>
</div>
</form>
</div>
<!-- 모달 푸터 -->
<div class="px-6 py-4 border-t border-white/10 flex justify-end space-x-3">
<button type="button" onclick="hideDashboardAddTodoModal()" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition-colors">
취소
</button>
<button type="submit" form="dashboardTodoForm" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-lg transition-colors flex items-center">
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
추가
</button>
</div>
</div>
</div>
</div>
</div> </div>
<script> <script>
@@ -939,8 +1040,11 @@
const isExpired = todo.expire && new Date(todo.expire) < new Date(); const isExpired = todo.expire && new Date(todo.expire) < new Date();
const expireClass = isExpired ? 'text-danger-400' : 'text-white/60'; const expireClass = isExpired ? 'text-danger-400' : 'text-white/60';
// 만료일이 지난 경우 배경을 적색계통으로 강조
const expiredBgClass = isExpired ? 'bg-danger-600/30 border-danger-400/40 hover:bg-danger-600/40' : 'bg-white/10 hover:bg-white/15 border-white/20';
todoItems += ` todoItems += `
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-3 hover:bg-white/15 transition-colors cursor-pointer border border-white/20" onclick="showTodoDetail(${todo.idx})"> <div class="${expiredBgClass} backdrop-blur-sm rounded-lg p-3 transition-colors cursor-pointer border" onclick="showTodoDetail(${todo.idx})">
<div class="flex items-start justify-between mb-2"> <div class="flex items-start justify-between mb-2">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
${flagIcon ? `<span class="text-xs">${flagIcon}</span>` : ''} ${flagIcon ? `<span class="text-xs">${flagIcon}</span>` : ''}
@@ -1049,6 +1153,11 @@
const expireClass = isExpired ? 'text-danger-400' : 'text-white'; const expireClass = isExpired ? 'text-danger-400' : 'text-white';
document.getElementById('detailExpire').innerHTML = `<span class="${expireClass}">${expireText}</span>`; document.getElementById('detailExpire').innerHTML = `<span class="${expireClass}">${expireText}</span>`;
// 완료일 표시
const okdateText = todo.okdate ? new Date(todo.okdate).toLocaleDateString('ko-KR') + ' ' + new Date(todo.okdate).toLocaleTimeString('ko-KR') : '-';
const okdateClass = todo.okdate ? 'text-success-400' : 'text-white';
document.getElementById('detailOkdate').innerHTML = `<span class="${okdateClass}">${okdateText}</span>`;
// 작성일 표시 // 작성일 표시
const wdateText = todo.wdate ? new Date(todo.wdate).toLocaleDateString('ko-KR') + ' ' + new Date(todo.wdate).toLocaleTimeString('ko-KR') : '-'; const wdateText = todo.wdate ? new Date(todo.wdate).toLocaleDateString('ko-KR') + ' ' + new Date(todo.wdate).toLocaleTimeString('ko-KR') : '-';
document.getElementById('detailWdate').textContent = wdateText; document.getElementById('detailWdate').textContent = wdateText;
@@ -1070,6 +1179,88 @@
alert(message); // 나중에 더 예쁜 toast나 modal로 변경 가능 alert(message); // 나중에 더 예쁜 toast나 modal로 변경 가능
} }
// 간단한 성공 표시 함수
function showSuccess(message) {
alert(message);
}
// 대시보드 할일 추가 모달 표시/숨기기
function showDashboardAddTodoModal() {
document.getElementById('dashboardAddTodoModal').classList.remove('hidden');
// 폼 초기화
document.getElementById('dashboardTodoForm').reset();
document.getElementById('dashboardTodoStatus').value = '0';
setDashboardTodoStatus('0');
}
function hideDashboardAddTodoModal() {
document.getElementById('dashboardAddTodoModal').classList.add('hidden');
}
// 대시보드에서 할일 상태 설정
function setDashboardTodoStatus(status) {
document.getElementById('dashboardTodoStatus').value = status;
// 모든 버튼 초기화
['0', '1', '2', '3', '5'].forEach(s => {
const btn = document.getElementById(`dashboardStatusBtn${s}`);
if (btn) {
btn.className = 'px-3 py-1 rounded-lg text-xs font-medium bg-white/10 text-white/50 border border-white/20 hover:bg-white/20 transition-all';
}
});
// 선택된 버튼 활성화
const selectedBtn = document.getElementById(`dashboardStatusBtn${status}`);
if (selectedBtn) {
const statusClass = getTodoStatusClass(status).replace('bg-', 'bg-').replace('text-', 'text-');
const borderClass = statusClass.replace('bg-', 'border-').replace('text-', 'border-').replace('/20', '/30');
selectedBtn.className = `px-3 py-1 rounded-lg text-xs font-medium ${statusClass} ${borderClass} transition-all`;
}
}
// 대시보드에서 할일 추가
function addDashboardTodo() {
const formData = {
title: document.getElementById('dashboardTodoTitle').value,
remark: document.getElementById('dashboardTodoRemark').value,
expire: document.getElementById('dashboardTodoExpire').value || null,
seqno: parseInt(document.getElementById('dashboardTodoSeqno').value),
flag: document.getElementById('dashboardTodoFlag').checked,
request: document.getElementById('dashboardTodoRequest').value || null,
status: document.getElementById('dashboardTodoStatus').value
};
if (!formData.remark.trim()) {
showError('할일 내용을 입력해주세요.');
return;
}
showLoading();
fetch('/Todo/CreateTodo', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.Success) {
hideDashboardAddTodoModal();
updateTodoList(); // 대시보드 할일 목록 새로고침
showSuccess(data.Message || '할일이 추가되었습니다.');
} else {
showError(data.Message || '할일 추가에 실패했습니다.');
}
hideLoading();
})
.catch(error => {
console.error('할일 추가 중 오류:', error);
showError('서버 연결에 실패했습니다.');
hideLoading();
});
}
// Todo 목록 업데이트 // Todo 목록 업데이트
function updateTodoList() { function updateTodoList() {
showLoading(); showLoading();
@@ -1106,6 +1297,8 @@
const isExpired = todo.expire && new Date(todo.expire) < new Date(); const isExpired = todo.expire && new Date(todo.expire) < new Date();
const expireClass = isExpired ? 'text-danger-400' : 'text-white/60'; const expireClass = isExpired ? 'text-danger-400' : 'text-white/60';
const okdateText = todo.okdate ? new Date(todo.okdate).toLocaleDateString('ko-KR') : '';
todoItems += ` todoItems += `
<div class="bg-white/10 rounded-lg p-4 hover:bg-white/15 transition-colors cursor-pointer" onclick="showTodoDetail(${todo.idx})"> <div class="bg-white/10 rounded-lg p-4 hover:bg-white/15 transition-colors cursor-pointer" onclick="showTodoDetail(${todo.idx})">
<div class="flex items-start justify-between mb-2"> <div class="flex items-start justify-between mb-2">
@@ -1117,7 +1310,10 @@
${seqnoText} ${seqnoText}
</span> </span>
</div> </div>
${expireText ? `<span class="text-xs ${expireClass}">${expireText}</span>` : ''} <div class="text-xs text-right">
${expireText ? `<div class="${expireClass}">만료: ${expireText}</div>` : ''}
${okdateText ? `<div class="text-success-400">완료: ${okdateText}</div>` : ''}
</div>
</div> </div>
<h4 class="text-white font-medium mb-1">${flagIcon}${todo.title || '제목 없음'}</h4> <h4 class="text-white font-medium mb-1">${flagIcon}${todo.title || '제목 없음'}</h4>
<p class="text-white/70 text-sm line-clamp-2">${todo.remark || ''}</p> <p class="text-white/70 text-sm line-clamp-2">${todo.remark || ''}</p>
@@ -1195,6 +1391,19 @@
updateTodoList(); updateTodoList();
}, 30000); }, 30000);
// 대시보드 할일 추가 폼 이벤트 리스너
document.getElementById('dashboardTodoForm').addEventListener('submit', function(e) {
e.preventDefault();
addDashboardTodo();
});
// 대시보드 할일 추가 모달 외부 클릭으로 닫기
document.getElementById('dashboardAddTodoModal').addEventListener('click', function(event) {
if (event.target === this) {
hideDashboardAddTodoModal();
}
});
// 공통 네비게이션 초기화 // 공통 네비게이션 초기화
initNavigation('dashboard'); initNavigation('dashboard');
@@ -1272,6 +1481,7 @@
hidePurchaseNRModal(); hidePurchaseNRModal();
hidePurchaseCRModal(); hidePurchaseCRModal();
hideTodoDetailModal(); hideTodoDetailModal();
hideDashboardAddTodoModal();
} }
}); });
@@ -1307,22 +1517,33 @@
const endDate = item.edate ? new Date(item.edate).toLocaleDateString('ko-KR') : '-'; const endDate = item.edate ? new Date(item.edate).toLocaleDateString('ko-KR') : '-';
const dateRange = startDate !== '-' && endDate !== '-' ? `${startDate} ~ ${endDate}` : '-'; const dateRange = startDate !== '-' && endDate !== '-' ? `${startDate} ~ ${endDate}` : '-';
// 요청일 포맷팅 // 요청일 포맷팅 (holydays 컬럼은 숫자 형태)
const requestDate = item.holyday ? new Date(item.holyday).toLocaleDateString('ko-KR') : '-'; const requestDate = item.holydays || '-';
// 휴가 종류별 색상 구분
let cateColorClass = 'bg-white/20 text-white'; // 기본값 (흰색)
const cateValue = item.cate || '';
if (cateValue === '대체') {
cateColorClass = 'bg-yellow-500/20 text-yellow-300'; // 노란색
} else if (cateValue === '년차') {
cateColorClass = 'bg-green-500/20 text-green-300'; // 녹색
} else if (cateValue === '하기') {
cateColorClass = 'bg-blue-500/20 text-blue-300'; // 파란색
}
tableRows += ` tableRows += `
<tr class="hover:bg-white/5 transition-colors"> <tr class="hover:bg-white/5 transition-colors">
<td class="px-6 py-4 whitespace-nowrap text-white">${item.uid || '-'}</td> <td class="px-6 py-4 whitespace-nowrap text-white">${item.uid || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap text-white">${item.name || '-'}</td> <td class="px-6 py-4 whitespace-nowrap text-white">${item.name || '-'}</td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-500/20 text-primary-300"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${cateColorClass}">
${item.cate || '-'} ${item.cate || '-'}
</span> </span>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${dateRange}</td> <td class="px-6 py-4 whitespace-nowrap text-white/80">${dateRange}</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${requestDate}</td> <td class="px-6 py-4 whitespace-nowrap text-white/80">${requestDate}</td>
<td class="px-6 py-4 whitespace-nowrap text-white/80">${item.holytime || '-'}</td> <td class="px-6 py-4 whitespace-nowrap text-white/80">${item.holytimes || '-'}</td>
<td class="px-6 py-4 text-white/80">${item.remakr || '-'}</td> <td class="px-6 py-4 text-white/80">${item.HolyReason || '-'}</td>
</tr> </tr>
`; `;
}); });

200
Project/Web/wwwroot/Todo/index.html
View File

@@ -137,7 +137,33 @@
새 할일 추가 새 할일 추가
</button> </button>
</div> </div>
<div class="overflow-x-auto">
<!-- 탭 메뉴 -->
<div class="px-6 py-2 border-b border-white/10">
<div class="flex space-x-1 bg-white/5 rounded-lg p-1">
<button id="activeTab" onclick="switchTab('active')" class="flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white bg-white/20 shadow-sm">
<div class="flex items-center justify-center space-x-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
<span>진행중인 할일</span>
<span id="activeCount" class="px-2 py-0.5 text-xs bg-primary-500/30 text-primary-200 rounded-full">0</span>
</div>
</button>
<button id="completedTab" onclick="switchTab('completed')" class="flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white/60 hover:text-white hover:bg-white/10">
<div class="flex items-center justify-center space-x-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>완료된 할일</span>
<span id="completedCount" class="px-2 py-0.5 text-xs bg-success-500/30 text-success-200 rounded-full">0</span>
</div>
</button>
</div>
</div>
<!-- 진행중인 할일 테이블 -->
<div id="activeTabContent" class="overflow-x-auto">
<table class="w-full"> <table class="w-full">
<thead class="bg-white/10"> <thead class="bg-white/10">
<tr> <tr>
@@ -151,8 +177,30 @@
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">작업</th> <th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">작업</th>
</tr> </tr>
</thead> </thead>
<tbody id="todoTable" class="divide-y divide-white/10"> <tbody id="activeTable" class="divide-y divide-white/10">
<!-- 데이터가 여기에 표시됩니다 --> <!-- 진행중인 할일이 여기에 표시됩니다 -->
</tbody>
</table>
</div>
<!-- 완료된 할일 테이블 -->
<div id="completedTabContent" class="overflow-x-auto hidden">
<table class="w-full">
<thead class="bg-white/10">
<tr>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">진행상태</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">플래그</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">제목</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">내용</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">요청자</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">중요도</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">만료일</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">완료일</th>
<th class="px-6 py-4 text-left text-xs font-medium text-white/70 uppercase tracking-wider">작업</th>
</tr>
</thead>
<tbody id="completedTable" class="divide-y divide-white/10">
<!-- 완료된 할일이 여기에 표시됩니다 -->
</tbody> </tbody>
</table> </table>
</div> </div>
@@ -477,13 +525,72 @@
}); });
} }
// 할일 목록 표시 // 할일 목록 표시 (탭별로 분리)
function displayTodos(todos) { function displayTodos(todos) {
const tableBody = document.getElementById('todoTable'); if (!todos || todos.length === 0) {
displayEmptyTodos();
return;
}
// 완료(5)와 진행중(0,1,2,3) 할일 분리
const activeTodos = todos.filter(todo => (todo.status || '0') !== '5');
const completedTodos = todos.filter(todo => (todo.status || '0') === '5');
// 각 탭에 표시
displayActiveTodos(activeTodos);
displayCompletedTodos(completedTodos);
// 카운트 업데이트
document.getElementById('activeCount').textContent = activeTodos.length;
document.getElementById('completedCount').textContent = completedTodos.length;
}
// 진행중인 할일 표시
function displayActiveTodos(todos) {
const tableBody = document.getElementById('activeTable');
let tableRows = ''; let tableRows = '';
if (todos && todos.length > 0) { if (todos && todos.length > 0) {
todos.forEach(todo => { todos.forEach(todo => {
tableRows += generateTodoRow(todo, false); // 완료일 컬럼 제외
});
} else {
tableRows = `
<tr>
<td colspan="8" class="px-6 py-8 text-center text-white/50">
진행중인 할일이 없습니다
</td>
</tr>
`;
}
tableBody.innerHTML = tableRows;
}
// 완료된 할일 표시
function displayCompletedTodos(todos) {
const tableBody = document.getElementById('completedTable');
let tableRows = '';
if (todos && todos.length > 0) {
todos.forEach(todo => {
tableRows += generateTodoRow(todo, true); // 완료일 컬럼 포함
});
} else {
tableRows = `
<tr>
<td colspan="9" class="px-6 py-8 text-center text-white/50">
완료된 할일이 없습니다
</td>
</tr>
`;
}
tableBody.innerHTML = tableRows;
}
// 할일 행 생성 (공통 함수)
function generateTodoRow(todo, includeOkdate = false) {
const statusClass = getStatusClass(todo.status); const statusClass = getStatusClass(todo.status);
const statusText = getStatusText(todo.status); const statusText = getStatusText(todo.status);
@@ -497,7 +604,10 @@
const isExpired = todo.expire && new Date(todo.expire) < new Date(); const isExpired = todo.expire && new Date(todo.expire) < new Date();
const expireClass = isExpired ? 'text-danger-400' : 'text-white/80'; const expireClass = isExpired ? 'text-danger-400' : 'text-white/80';
tableRows += ` const okdateText = todo.okdate ? new Date(todo.okdate).toLocaleDateString('ko-KR') : '-';
const okdateClass = todo.okdate ? 'text-success-400' : 'text-white/80';
return `
<tr class="hover:bg-white/5 transition-colors cursor-pointer" onclick="editTodo(${todo.idx})"> <tr class="hover:bg-white/5 transition-colors cursor-pointer" onclick="editTodo(${todo.idx})">
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}"> <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${statusClass}">
@@ -518,6 +628,7 @@
</span> </span>
</td> </td>
<td class="px-6 py-4 whitespace-nowrap ${expireClass}">${expireText}</td> <td class="px-6 py-4 whitespace-nowrap ${expireClass}">${expireText}</td>
${includeOkdate ? `<td class="px-6 py-4 whitespace-nowrap ${okdateClass}">${okdateText}</td>` : ''}
<td class="px-6 py-4 whitespace-nowrap text-sm" onclick="event.stopPropagation();"> <td class="px-6 py-4 whitespace-nowrap text-sm" onclick="event.stopPropagation();">
<button onclick="editTodo(${todo.idx})" class="text-primary-400 hover:text-primary-300 mr-3 transition-colors"> <button onclick="editTodo(${todo.idx})" class="text-primary-400 hover:text-primary-300 mr-3 transition-colors">
수정 수정
@@ -528,18 +639,26 @@
</td> </td>
</tr> </tr>
`; `;
}); }
} else {
tableRows = ` // 빈 할일 목록 표시
function displayEmptyTodos() {
document.getElementById('activeTable').innerHTML = `
<tr> <tr>
<td colspan="8" class="px-6 py-8 text-center text-white/50"> <td colspan="8" class="px-6 py-8 text-center text-white/50">
등록된 할일이 없습니다 진행중인 할일이 없습니다
</td> </td>
</tr> </tr>
`; `;
} document.getElementById('completedTable').innerHTML = `
<tr>
tableBody.innerHTML = tableRows; <td colspan="9" class="px-6 py-8 text-center text-white/50">
완료된 할일이 없습니다
</td>
</tr>
`;
document.getElementById('activeCount').textContent = '0';
document.getElementById('completedCount').textContent = '0';
} }
// 중요도 클래스 반환 // 중요도 클래스 반환
@@ -645,6 +764,12 @@
loadTodos(); loadTodos();
// 모달 닫기 // 모달 닫기
hideEditModal(); hideEditModal();
// 현재 탭 상태 유지
setTimeout(() => {
if (typeof maintainCurrentTab === 'function') {
maintainCurrentTab();
}
}, 100);
showSuccess(`상태가 '${getStatusText(status)}'(으)로 변경되었습니다.`); showSuccess(`상태가 '${getStatusText(status)}'(으)로 변경되었습니다.`);
} else { } else {
showError(data.Message || '상태 변경에 실패했습니다.'); showError(data.Message || '상태 변경에 실패했습니다.');
@@ -712,6 +837,12 @@
if (data.Success) { if (data.Success) {
hideAddTodoModal(); hideAddTodoModal();
loadTodos(); loadTodos();
// 현재 탭 상태 유지
setTimeout(() => {
if (typeof maintainCurrentTab === 'function') {
maintainCurrentTab();
}
}, 100);
showSuccess(data.Message || '할일이 추가되었습니다.'); showSuccess(data.Message || '할일이 추가되었습니다.');
} else { } else {
showError(data.Message || '할일 추가에 실패했습니다.'); showError(data.Message || '할일 추가에 실패했습니다.');
@@ -795,6 +926,12 @@
if (data.Success) { if (data.Success) {
hideEditModal(); hideEditModal();
loadTodos(); loadTodos();
// 현재 탭 상태 유지
setTimeout(() => {
if (typeof maintainCurrentTab === 'function') {
maintainCurrentTab();
}
}, 100);
showSuccess(data.Message || '할일이 수정되었습니다.'); showSuccess(data.Message || '할일이 수정되었습니다.');
} else { } else {
showError(data.Message || '할일 수정에 실패했습니다.'); showError(data.Message || '할일 수정에 실패했습니다.');
@@ -822,6 +959,12 @@
.then(data => { .then(data => {
if (data.Success) { if (data.Success) {
loadTodos(); loadTodos();
// 현재 탭 상태 유지
setTimeout(() => {
if (typeof maintainCurrentTab === 'function') {
maintainCurrentTab();
}
}, 100);
showSuccess(data.Message || '할일이 삭제되었습니다.'); showSuccess(data.Message || '할일이 삭제되었습니다.');
} else { } else {
showError(data.Message || '할일 삭제에 실패했습니다.'); showError(data.Message || '할일 삭제에 실패했습니다.');
@@ -901,10 +1044,41 @@
} }
}); });
// 탭 전환 기능
let currentTab = 'active';
function switchTab(tabName) {
// 이전 탭 버튼 스타일 제거
document.getElementById('activeTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white/60 hover:text-white hover:bg-white/10';
document.getElementById('completedTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white/60 hover:text-white hover:bg-white/10';
// 이전 탭 컨텐츠 숨기기
document.getElementById('activeTabContent').classList.add('hidden');
document.getElementById('completedTabContent').classList.add('hidden');
// 선택된 탭 버튼 활성화
if (tabName === 'active') {
document.getElementById('activeTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white bg-white/20 shadow-sm';
document.getElementById('activeTabContent').classList.remove('hidden');
} else {
document.getElementById('completedTab').className = 'flex-1 px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 text-white bg-white/20 shadow-sm';
document.getElementById('completedTabContent').classList.remove('hidden');
}
currentTab = tabName;
}
// 할일 상태 변경 후 현재 탭 유지
function maintainCurrentTab() {
switchTab(currentTab);
}
// 페이지 초기화 // 페이지 초기화
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
initNavigation('todo'); initNavigation('todo');
loadTodos(); loadTodos();
switchTab('active'); // 기본적으로 진행중 탭 선택
}); });
</script> </script>
</body> </body>