init
This commit is contained in:
Jaybe
@@ -0,0 +1,533 @@
|
||||
<?=$this->extend('templates/front_example.php');?>
|
||||
|
||||
<?=$this->section('content');?>
|
||||
<div class="sub-contents-wrap container-user-management">
|
||||
<div class="modal fade" id="modalUpdate" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">사용자 수정</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="frm">
|
||||
<input type="hidden" name="id" id="hidden_id">
|
||||
<div class="form-group">
|
||||
<label for="username">이름</label>
|
||||
<input type="text" name="username" id="username" class="form-control">
|
||||
<span id="username_error" class="text-danger"></span>
|
||||
</div>
|
||||
<?php if(auth()->user()->inGroup('superadmin', 'admin', 'developer')){?>
|
||||
<div class="form-group">
|
||||
<label for="group">권한</label>
|
||||
<select name="group" class="form-control" multiple="multiple" id="userGroup">
|
||||
<option value="superadmin">최고관리자</option>
|
||||
<option value="admin">관리자</option>
|
||||
<option value="developer">개발자</option>
|
||||
<option value="agency">광고대행사</option>
|
||||
<option value="advertiser">광고주</option>
|
||||
<option value="user">사용자</option>
|
||||
<option value="guest">게스트</option>
|
||||
</select>
|
||||
<span id="groups_error" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="permission">세부 권한</label>
|
||||
<select name="permission" class="form-control" multiple="multiple" id="userPermission">
|
||||
<option value="admin.access">관리자만 가능한 페이지 접근 가능</option>
|
||||
<option value="admin.settings">관리자만 가능한 설정 접근 가능</option>
|
||||
<option value="users.create">회원 생성</option>
|
||||
<option value="users.edit">회원 수정</option>
|
||||
<option value="users.delete">회원 삭제</option>
|
||||
<option value="agency.access">대행사 목록 페이지</option>
|
||||
<option value="agency.advertisers">대행사 하위 광고주 관리</option>
|
||||
<option value="agency.create">대행사 생성</option>
|
||||
<option value="agency.edit">대행사 수정</option>
|
||||
<option value="agency.delete">대행사 삭제</option>
|
||||
<option value="advertiser.access">광고주 목록 페이지</option>
|
||||
<option value="advertiser.create">광고주 생성</option>
|
||||
<option value="advertiser.edit">광고주 수정</option>
|
||||
<option value="advertiser.delete">광고주 삭제</option>
|
||||
</select>
|
||||
<span id="permission_error" class="text-danger"></span>
|
||||
</div>
|
||||
<?php }?>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" id="userUpdateBtn">저장</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modalView" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header justify-content-start">
|
||||
<h5 class="modal-title"><i class="bi bi-person-fill"></i>사용자</h5>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">이름</th>
|
||||
<th>소속</th>
|
||||
<th>권한</th>
|
||||
<th>가입일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span id="viewName"></span></td></td>
|
||||
<td><span id="viewCompany"></span></td>
|
||||
<td><span id="viewGroup"></span></td>
|
||||
<td><span id="viewDate"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<?php if(auth()->user()->inGroup('superadmin', 'admin', 'developer')){
|
||||
echo '<a href="/users/belong" class="btn btn-primary" id="userBelong">소속 수정</a>';
|
||||
}?>
|
||||
<button type="button" class="btn btn-primary" id="userUpdateModal">수정</button>
|
||||
<button type="button" class="btn btn-danger" id="userDelete">삭제</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="title-area">
|
||||
<h2 class="page-title">사용자 관리</h2>
|
||||
</div>
|
||||
|
||||
<div class="search-wrap">
|
||||
<form class="search d-flex justify-content-center">
|
||||
<div class="term d-flex align-items-center">
|
||||
<input type="text" class="form-control" id="fromDate" name="fromDate" placeholder="날짜 선택" readonly="readonly">
|
||||
|
||||
<button type="button"><i class="bi bi-calendar2-week"></i></button>
|
||||
<span> ~ </span>
|
||||
|
||||
<input type="text" class="form-control" id="toDate" name="toDate" placeholder="날짜 선택" readonly="readonly">
|
||||
<button type="button"><i class="bi bi-calendar2-week"></i></button>
|
||||
</div>
|
||||
<div class="input">
|
||||
<input type="text" class="form-control" id="search" name="search" placeholder="검색어를 입력하세요">
|
||||
<button class="btn-primary" type="submit">조회</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="row d-flex justify-content-between align-items-center filter-btn-wrap">
|
||||
<!-- <dl class="col">
|
||||
<dt>
|
||||
<select name="sort" id="sort" class="form-control text-center">
|
||||
<option value="정렬">정렬</option>
|
||||
<option value="recent">최근순</option>
|
||||
<option value="old">오래된 순</option>
|
||||
</select>
|
||||
</dt>
|
||||
</dl> -->
|
||||
|
||||
<!-- <dl class="col">
|
||||
<dt>
|
||||
<select name="pageLimit" id="pageLimit" class="form-control text-center">
|
||||
<option value="게시물수">게시물수</option>
|
||||
<option value="10">10개</option>
|
||||
<option value="50">50개</option>
|
||||
<option value="100">100개</option>
|
||||
</select>
|
||||
</dt>
|
||||
</dl> -->
|
||||
<div class="btn-wrap">
|
||||
<button type="button" class="btn btn-danger"><input type="radio" name="sort" vlaue="recent">최근순</button>
|
||||
<button type="button" class="btn btn-danger"><input type="radio" name="sort" vlaue="old">오래된 순</button>
|
||||
<button type="button" class="btn btn-danger"><input type="radio" name="pageLimit" vlaue="10">10개</button>
|
||||
<button type="button" class="btn btn-danger"><input type="radio" name="pageLimit" vlaue="50">50개</button>
|
||||
<button type="button" class="btn btn-danger"><input type="radio" name="pageLimit" vlaue="100">100개</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<button id="DataResetBtn" class="btn btn-reset">초기화</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section client-list">
|
||||
<h3 class="content-title"><i class="bi bi-chevron-up"></i>검색결과:<span id="allCount"></span></h3>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="table-wrap">
|
||||
<div class="table-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover table-default" id="user">
|
||||
<colgroup>
|
||||
<col style="width:10%">
|
||||
<col style="width:*">
|
||||
<col style="width:*">
|
||||
<col style="width:*">
|
||||
</colgroup>
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th scope="col">번호</th>
|
||||
<th scope="col">이름</th>
|
||||
<th scope="col">권한</th>
|
||||
<th scope="col">가입일</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row pagination-container m-4">
|
||||
<ul class="pagination justify-content-center"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<?=$this->endSection();?>
|
||||
|
||||
<?=$this->section('script');?>
|
||||
<script>
|
||||
$('input[name="sort"]').bind('click', function(){
|
||||
console.log($('input[name="sort"]').val());
|
||||
});
|
||||
|
||||
|
||||
var alertMessage = "<?php echo session('message'); ?>";
|
||||
if(alertMessage) {
|
||||
alert(alertMessage);
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
getUserList();
|
||||
function getUserList(page, limit, search, sort, startDate, endDate){
|
||||
data = {
|
||||
'page': page ? page : 1,
|
||||
'limit': limit ? limit : 10,
|
||||
'search': search ? search : '',
|
||||
'sort': sort ? sort : 'recent',
|
||||
'startDate': startDate ? startDate : '',
|
||||
'endDate': endDate ? endDate : '',
|
||||
}
|
||||
console.log(data);
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "<?=base_url()?>/users",
|
||||
data: data,
|
||||
dataType: "json",
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
success: function(xhr){
|
||||
setTable(xhr);
|
||||
setPaging(xhr);
|
||||
setAllCount(xhr);
|
||||
setDate(xhr);
|
||||
},
|
||||
error: function(error, status, msg){
|
||||
alert("상태코드 " + status + "에러메시지" + msg );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setPaging(xhr){
|
||||
if(xhr.pager.pageCount == 0){
|
||||
xhr.pager.pageCount = 1;
|
||||
}
|
||||
$('.pagination').twbsPagination('destroy');
|
||||
$('.pagination').twbsPagination({
|
||||
totalPages: xhr.pager.pageCount, // 총 페이지 번호 수
|
||||
visiblePages: 5, // 하단에서 한번에 보여지는 페이지 번호 수
|
||||
startPage : xhr.pager.currentPage, // 시작시 표시되는 현재 페이지
|
||||
initiateStartPageClick: false, // 플러그인이 시작시 페이지 버튼 클릭 여부 (default : true)
|
||||
first : "첫 페이지", // 페이지네이션 버튼중 처음으로 돌아가는 버튼에 쓰여 있는 텍스트
|
||||
prev : "이전 페이지", // 이전 페이지 버튼에 쓰여있는 텍스트
|
||||
next : "다음 페이지", // 다음 페이지 버튼에 쓰여있는 텍스트
|
||||
last : "마지막 페이지", // 페이지네이션 버튼중 마지막으로 가는 버튼에 쓰여있는 텍스트
|
||||
nextClass : "page-item next", // 이전 페이지 CSS class
|
||||
prevClass : "page-item prev", // 다음 페이지 CSS class
|
||||
lastClass : "page-item last", // 마지막 페이지 CSS calss
|
||||
firstClass : "page-item first", // 첫 페이지 CSS class
|
||||
pageClass : "page-item", // 페이지 버튼의 CSS class
|
||||
activeClass : "active", // 클릭된 페이지 버튼의 CSS class
|
||||
disabledClass : "disabled", // 클릭 안된 페이지 버튼의 CSS class
|
||||
anchorClass : "page-link", //버튼 안의 앵커에 대한 CSS class
|
||||
|
||||
onPageClick: function (event, page) {
|
||||
console.log(xhr.pager.limit);
|
||||
getUserList(page, xhr.pager.limit, xhr.pager.search, xhr.pager.sort, xhr.pager.startDate, xhr.pager.endDate)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setTable(xhr){
|
||||
$('#user tbody').empty();
|
||||
console.log(xhr);
|
||||
|
||||
$.each(xhr.result, function(index, item){
|
||||
index++
|
||||
item.groups = item.groups.map(function(group) {
|
||||
group = group.replace('superadmin', '최고관리자');
|
||||
group = group.replace('admin', '관리자');
|
||||
group = group.replace('developer', '개발자');
|
||||
group = group.replace('user', '사용자');
|
||||
group = group.replace('agency', '광고대행사');
|
||||
group = group.replace('advertiser', '광고주');
|
||||
group = group.replace('guest', '게스트');
|
||||
return group;
|
||||
});
|
||||
$('<tr id="userView" data-id="'+item.id+'">').append('<td>'+item.id+'</td>')
|
||||
.append('<td>'+item.username+'</td>')
|
||||
.append('<td>'+item.groups+'</td>')
|
||||
.append('<td>'+item.created_at.date.substr(0, 16)+'</td>')
|
||||
.appendTo('#user');
|
||||
});
|
||||
}
|
||||
|
||||
function setAllCount(xhr){
|
||||
console.log(xhr.pager.total);
|
||||
if(xhr.pager.total == 0){
|
||||
$total = 0;
|
||||
}else{
|
||||
$total = xhr.pager.total;
|
||||
}
|
||||
$('#allCount').text("총 "+$total+"개");
|
||||
}
|
||||
|
||||
function setDate(xhr){
|
||||
if($('#fromDate, #toDate').length){
|
||||
var currentDate = moment().format("YYYY-MM-DD");
|
||||
$('#fromDate, #toDate').daterangepicker({
|
||||
locale: {
|
||||
"format": 'YYYY-MM-DD', // 일시 노출 포맷
|
||||
"applyLabel": "확인", // 확인 버튼 텍스트
|
||||
"cancelLabel": "취소", // 취소 버튼 텍스트
|
||||
"daysOfWeek": ["일", "월", "화", "수", "목", "금", "토"],
|
||||
"monthNames": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
|
||||
},
|
||||
"alwaysShowCalendars": true, // 시간 노출 여부
|
||||
showDropdowns: true, // 년월 수동 설정 여부
|
||||
autoApply: true, // 확인/취소 버튼 사용여부
|
||||
maxDate: new Date(),
|
||||
autoUpdateInput: false,
|
||||
ranges: {
|
||||
'오늘': [moment(), moment()],
|
||||
'어제': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'지난 일주일': [moment().subtract(6, 'days'), moment()],
|
||||
'지난 한달': [moment().subtract(29, 'days'), moment()],
|
||||
'이번달': [moment().startOf('month'), moment().endOf('month')],
|
||||
}
|
||||
}, function(start, end, label) {
|
||||
// console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
|
||||
// Lets update the fields manually this event fires on selection of range
|
||||
startDate = start.format('YYYY-MM-DD'); // selected start
|
||||
endDate = end.format('YYYY-MM-DD'); // selected end
|
||||
|
||||
$checkinInput = $('#fromDate');
|
||||
$checkoutInput = $('#toDate');
|
||||
|
||||
// Updating Fields with selected dates
|
||||
$checkinInput.val(startDate);
|
||||
$checkoutInput.val(endDate);
|
||||
|
||||
// Setting the Selection of dates on calender on CHECKOUT FIELD (To get this it must be binded by Ids not Calss)
|
||||
var checkOutPicker = $checkoutInput.data('daterangepicker');
|
||||
checkOutPicker.setStartDate(startDate);
|
||||
checkOutPicker.setEndDate(endDate);
|
||||
|
||||
// Setting the Selection of dates on calender on CHECKIN FIELD (To get this it must be binded by Ids not Calss)
|
||||
var checkInPicker = $checkinInput.data('daterangepicker');
|
||||
checkInPicker.setStartDate($checkinInput.val(startDate));
|
||||
checkInPicker.setEndDate(endDate);
|
||||
|
||||
getUserList(1, $('#pageLimit').val(), $('#search').val(), $('#sort').val(), startDate, endDate);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//페이지 게시글 갯수
|
||||
$('body').on('change', '#pageLimit', function(){
|
||||
getUserList(
|
||||
1,
|
||||
$(this).val(),
|
||||
$('#search').val(),
|
||||
$('#sort').val(),
|
||||
$('#fromDate').val(),
|
||||
$('#toDate').val(),
|
||||
console.log(`이것은`, $('#sort').val())
|
||||
);
|
||||
})
|
||||
|
||||
//검색
|
||||
$('body').on('keyup', '#search', function(){
|
||||
getUserList(
|
||||
1,
|
||||
$('#pageLimit').val(),
|
||||
$(this).val(),
|
||||
$('#sort').val(),
|
||||
$('#fromDate').val(),
|
||||
$('#toDate').val(),
|
||||
);
|
||||
})
|
||||
|
||||
//분류
|
||||
$('body').on('change', '#sort', function(){
|
||||
getUserList(
|
||||
1,
|
||||
$('#pageLimit').val(),
|
||||
$('#search').val(),
|
||||
$(this).val(),
|
||||
$('#fromDate').val(),
|
||||
$('#toDate').val(),
|
||||
);
|
||||
})
|
||||
|
||||
$('#dateRange').on('cancel.daterangepicker', function (ev, picker) {
|
||||
$(this).val('');
|
||||
getUserList(1, $('#pageLimit').val(), $('#search').val(), $('#sort').val());
|
||||
});
|
||||
|
||||
//유저보기
|
||||
$('body').on('click', '#userView', function(){
|
||||
let id = $(this).attr('data-id');
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "<?=base_url()?>/users/"+id,
|
||||
dataType: "json",
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
success: function(data){
|
||||
data.result.groups = data.result.groups.map(function(group) {
|
||||
group = group.replace('superadmin', '최고관리자');
|
||||
group = group.replace('admin', '관리자');
|
||||
group = group.replace('developer', '개발자');
|
||||
group = group.replace('user', '사용자');
|
||||
group = group.replace('agency', '광고대행사');
|
||||
group = group.replace('advertiser', '광고주');
|
||||
group = group.replace('guest', '게스트');
|
||||
return group;
|
||||
});
|
||||
$('#modalView .modal-body #viewName').html(data.result.username);
|
||||
$('#modalView .modal-body #viewCompany').html(data.result.companyType+" "+data.result.companyName);
|
||||
$('#modalView .modal-body #viewGroup').html(data.result.groups.join(","));
|
||||
$('#modalView .modal-body #viewDate').html(data.result.created_at.substr(0, 16));
|
||||
$('#modalView #userBelong').attr('href', '/user/belong/'+data.result.id);
|
||||
$('#modalView #userUpdateModal').attr('data-id', data.result.id);
|
||||
$('#modalView #userDelete').attr('data-id', data.result.id);
|
||||
var myModal = new bootstrap.Modal(document.getElementById('modalView'))
|
||||
myModal.show()
|
||||
},
|
||||
error: function(error, status, msg){
|
||||
alert("상태코드 " + status + "에러메시지" + msg );
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
//유저 수정
|
||||
$('body').on('click', '#userUpdateModal', function(){
|
||||
$('#modalView').modal('hide');
|
||||
|
||||
let id = $(this).attr('data-id');
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: "<?=base_url()?>/users/"+id,
|
||||
dataType: "json",
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
success: function(data){
|
||||
console.log(data.result.groups);
|
||||
$('#userGroup').val('');
|
||||
$('#modalUpdate #username').val(data.result.username);
|
||||
for (let i = 0; i < data.result.groups.length; i++) {
|
||||
$('#userGroup option[value="' + data.result.groups[i] + '"]').prop('selected', true);
|
||||
}
|
||||
for (let i = 0; i < data.result.permission.length; i++) {
|
||||
$('#userPermission option[value="' + data.result.permission[i] + '"]').prop('selected', true);
|
||||
}
|
||||
$('#modalUpdate #hidden_id').val(data.result.id);
|
||||
$('#modalUpdate #frm span').text('');
|
||||
var myModal = new bootstrap.Modal(document.getElementById('modalUpdate'))
|
||||
myModal.show()
|
||||
},
|
||||
error: function(error, status, msg){
|
||||
alert("상태코드 " + status + "에러메시지" + msg );
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
//글수정
|
||||
$('body').on('click', '#userUpdateBtn', function(){
|
||||
let id = $("#modalUpdate input:hidden[name=id]").val();
|
||||
data = {
|
||||
username: $('#modalUpdate input:text[name=username]').val(),
|
||||
groups: $('#modalUpdate #userGroup').val(),
|
||||
permission: $('#modalUpdate #userPermission').val()
|
||||
};
|
||||
console.log(data);
|
||||
$.ajax({
|
||||
type: "put",
|
||||
url: "<?=base_url()?>/users/"+id,
|
||||
data: data,
|
||||
dataType: "json",
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
headers:{'X-Requested-With':'XMLHttpRequest'},
|
||||
success: function(response){
|
||||
$('#modalUpdate').modal('hide');
|
||||
$('#modalUpdate').find('input').val('');
|
||||
$('#modalUpdate #frm span').text('');
|
||||
getUserList();
|
||||
},
|
||||
error: function(error){
|
||||
var errorText = error.responseJSON.messages;
|
||||
$.each(errorText, function(key, val){
|
||||
$("#modalUpdate #" + key + "_error").text(val);
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
//글삭제
|
||||
$('body').on('click', '#userDelete', function(){
|
||||
let id = $(this).attr('data-id');
|
||||
if(confirm('정말 삭제하시겠습니까?')){
|
||||
$.ajax({
|
||||
type: "delete",
|
||||
url: "<?=base_url()?>/users/"+id,
|
||||
dataType: "json",
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
success: function(data){
|
||||
$('#modalView').modal('hide');
|
||||
getUserList();
|
||||
},
|
||||
error: function(error, status, msg){
|
||||
alert("상태코드 " + status + "에러메시지" + msg );
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
$('body').on('keyup', '#username', function(){
|
||||
$(this).siblings('span').text("");
|
||||
});
|
||||
|
||||
$('body').on('change', '#userGroup', function(){
|
||||
$(this).siblings('span').text("");
|
||||
});
|
||||
//reset 버튼
|
||||
$('body').on('click', '#DataResetBtn', function(){
|
||||
$('#sort option:first').prop('selected',true);
|
||||
$('#pageLimit option:first').prop('selected',true);
|
||||
$('#fromDate').val('');
|
||||
$('#toDate').val('');
|
||||
$('#search').val('');
|
||||
getUserList();
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<?=$this->endSection();?>
|
||||
Reference in New Issue
Block a user