業務アプリ開発講座

<div class="modal-dialog">
	<div class="modal-content">
		<form id="UpdateForm" class="form-horizontal">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h4 class="modal-title">スタッフを編集します。</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-1"> </div>
					<div class="col-md-10">
	
	<div class="form-group">
		<label class="col-md-5 control-label">ID</label>
		<div class="col-md-7">
			<label id="StaffId" class="control-label optional"></label>
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-5 control-label">氏名</label>
		<div class="col-md-7">
			<input id="StaffName" name="StaffName" type="text" class="form-control required">
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-5 control-label">メールアドレス</label>
		<div class="col-md-7">
			<input id="StaffMail" name="StaffMail" type="text" class="form-control email required">
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-5 control-label">スタッフ区分</label>
		<div class="col-md-7">
			<select id="StaffType" name="StaffType" class="form-control required">
				<option value="0">社員</option>
				<option value="1">アルバイト</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-5 control-label">管理区分</label>
		<div class="col-md-7">
			<select id="JobType" name="JobType" class="form-control required">
				<option value="0">管理者</option>
				<option value="1">管理補佐</option>
				<option value="2">レジ</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-5 control-label">有効</label>
		<div class="col-md-7">
			<select id="ValidType" name="ValidType" class="form-control required">
				<option value="1">有効</option>
				<option value="0">無効</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-5 control-label">採用日</label>
		<div class="col-md-7">
			<input id="HireDate" name="HireDate" type="date" class="form-control date required">
		</div>
	</div>
	<div class="form-group">
		<label class="col-md-5 control-label">退社日</label>
		<div class="col-md-7">
			<input id="LeaveDate" name="LeaveDate" type="date" class="form-control date optional">
		</div>
	</div>

					</div>
					<div class="col-md-1"> </div>
				</div>
			</div>
			<div class="modal-footer">
				<div class="row">

	<div class="col-xs-6 text-left">
		<a href="#" class="btn btn-warning btn-repass">パスワード再発行</a>
	</div>
	<div class="col-xs-6 btn-update-block">
		<div class='btn-group'>
			<a href="#" class="btn btn-default" data-dismiss="modal">閉じる</a>
			<a href="#" class="btn btn-primary btn-update">更新</a>
		</div>
	</div>

				</div>
			</div>
		</form>
	</div>
</div>

<!-- Update Staff Modal Window -->
<div class="staff-modal-update modal fade"></div>
<!-- /Update Staff Modal Window -->

//一覧のスタッフ名をクリック
$('.staff-name').on('click', function () {
	openUpdateModal(this);
	return false;
});
//編集モーダルウィンドウが閉じられた
$(".staff-modal-update").on('hidden.bs.modal', function(){
	$(this).children().remove();
});

//スタッフ編集モーダルウィンドウを開く
function openUpdateModal(obj){
	var modalWin;
	$.ajaxSetup({async:false});
	modalWin	= $(".staff-modal-update");
	modalWin.load("../assets/template/staff/modal-update.html");
	modalWin.modal('show');
	appendUpdateStaffInfo(obj);
	$('.btn-update').on('click', function(){
		updateStaff(this);
		return false;
	});
	$('.btn-repass').confirmation({
		trigger:'click',
		title:"ログインパスワードを再発行します。\nよろしいですか？",
		popout:true,
		onConfirm:function(){
			var block = $(this).parent();
			block.text("パスワードを再発行しました。");
			block.css("color", "#00D");
			$(this).css("display", "none");
		}
	});
	appendFormCaption();
}
//開いた編集モーダルウィンドウのフォームへ一覧上から取得した各値をセット
function appendUpdateStaffInfo(obj){
	var current	= $(obj);
	var modal	= $(".staff-modal-update");
	var form	= $("#UpdateForm");
	var row	= current.parent().parent();
	var idCell	= $("td:first-child", row);
	$("#StaffId",	form).text(current.attr('data'));
	$("#StaffName",	form).val($("td:nth-child(2)", row).text());
	$("#StaffMail",	form).val($("td:nth-child(3)", row).text());
	$("#StaffType",	form).val($("td:nth-child(4)", row).attr("data"));
	$("#JobType",	form).val($("td:nth-child(5)", row).attr("data"));
	$("#ValidType",	form).val($("td:nth-child(6)", row).attr("data"));
	$("#HireDate",	form).val(idCell.attr('hireDate'));
	$("#LeaveDate",	form).val(idCell.attr('LeaveDate'));
	$(".modal-title", modal).text($("td:nth-child(2)", row).text() + "さんを編集します。");
}
//更新ボタンをクリックした際の処理
function updateStaff(obj){
	if(!$("#UpdateForm").valid())	return false;

	var	modalTitle	= $(".staff-modal-update .modal-title");
	modalTitle.text(modalTitle.text().replace('す', 'した'));
	modalTitle.css("color", "#00D");
	$('.btn-update').attr("disabled", "disabled");
}