mitsumuri

//i.e.3 Edit 
->HTML Edit Button maker_list.php
<button class="action-buyer" onClick="oneditMaker(<?php echo "'".$maker2['id']."'" ?>)">編集</button>

//then (Function Call By button) maker_list.php
function oneditMaker(makerId){
	editMaker(makerId);
	if(hideViewMessageChoiceBuyer && typeof hideViewMessageChoiceBuyer === 'function'){
		hideViewMessageChoiceBuyer();
	}
}

//then (Ajax Request) maker_helpers.php
function editMaker(maker_id){
	if (typeof hideViewMakerList === 'function'){
		//hideViewMakerList();
	}
	
	$.ajax({
		url: baseUrl+'Maker/showDislogEditMaker',
		type: 'GET',
		data:{maker_id: maker_id},
		success: function(result){
			$('#maker').append(result);
		},
		error: function(error){
			log('Error editMaker');
		}
	});
}

//then (Controller) Maker.php
function showDislogEditMaker(){
	$makerId = $this->input->get('makerId');
	$data['maker'] = $this->MAKER_MODEL->getMakerAccount($makerId);
	$this->load->view('dialogs/buyer_edit_account', $data);
}
//then (Model) Maker_model.php
function getMakerAccount($id){
	$this->db->where('id', $id);
	$result = $this->db->get('maker')->row_array();
	if(empty($result)){
		return null;
	}else{
		$result['type'] = 'maker';
		return $result; //maker is array_index of controller_data that is return by model and access maker['field_name']
	}
}

//then db data being loaded in (view) maker_edit_account.php


//01// File Uploading System With file name
<table class="tb-register-buyer">
	<?php 
	if($makers!=null){
		for ($index=0; $index<count($makers)/2; $index ++ ) {

			$maker1 = $makers[$index*2];

			if(isset($makers[$index*2+1])){
				$maker2 = $makers[$index*2+1];
			}else{
				$maker2 = null;
			}

			?>
			<tr style='margin-bottom: -1px'>
				<td id="maker_edit_buttons" style='width: 50%; border: 1px solid #ccc; padding: 5px;'>
					<button id="<?php echo 'item-buyer-'.$maker1['id'] ?>" style="width: 68%; border: none; padding: 0 0 0 5px; margin: 0; height: 100%;" onClick="onChoiseMaker(<?php echo "'".$maker1['id']."'" ?>, <?php echo "'".$maker1['name']."'" ?>)" class='item-buyer'><?php echo $maker1['name'] ?></button>
					<button class="action-buyer" onClick="editMaker(<?php echo "'".$maker1['id']."'" ?>)" >編集</button>
					<button class="action-buyer" onClick="deletedMaker(<?php echo "'".$maker1['id']."'" ?>)">削除</button>
					</td>

					<td id="maker_edit_buttons"  style='width: 50%; border: 1px solid #ccc; padding: 5px;'>
						<?php if(isset($maker2)){ ?>
							<button id="<?php echo 'item-buyer-'.$maker2['id']; ?>" style="width: 68%; border: none; padding: 0 0 0 5px; margin: 0; height: 100%;" onClick="onChoiseMaker(<?php echo "'".$maker2['id']."'" ?>, <?php echo "'".$maker2['name']."'" ?>)" class='item-buyer'><?php echo $maker2['name'] ?></button>
							<button class="action-buyer" onClick="onEditMaker(<?php echo "'".$maker2['id']."'" ?>)">編集</button>
					<button class="action-buyer" onClick="onDeletedMaker(<?php echo "'".$maker2['id']."'" ?>)">削除</button>
					<?php } ?>
				</td>

			</tr>
	<?php }
 } ?>
</table> 

<!-- selection maker company popup -->
<div id="maker_choice_popup" class="maker_choice_popup">
	<p style="max-width: 300px; font-size: 14px; font-weight: bold; padding: 10px; text-align: center;">選択したメーカーは下記の通りです。<br>各メーカーのジャコス標準ファイルを選択してください。</p>
	<div class="selection_maker_item">
		
	</div>
	<div class="selection_maker_item_back">
		<button id="maker_selection_back" class="button1" style=" position: absolute; top: 10px; right: 10px; margin: 0;">戻る</button>
	</div>
	<div class="clear"></div>
	<div class="selection_maker_item_next">
		<button id="maker_selection_next" class="button2" style="text-align:center;">次へ</button>
	</div>
</div>
<!-- /selection maker company popup -->

<script>

	function onChoiseMaker(maker_id, maker_name){
		console.log(maker_id+" "+maker_name);
		//$('.buyer_choice_popup').remove();
		$('.maker_choice_popup').css({"display":"block"});

	var html = [];
		//html = "<h4><span>"+maker_name+"</span>を選びました。</h4>"

html = "<div style='margin-bottom: 10px;'>"+
			"<span>"+maker_name+"</span>"+
			"<button style='display: inline-block; background: #2471a3; border: 1px solid #2E86C1; font-size: 13px; padding: 10px; border-radius: 5px; color: white;' onclick="+"$('#input_excel_file_maker-"+maker_id+"').click()"+">ファイル選択</button>"+
			"<input id='input_excel_file_maker-"+maker_id+"' data-id='"+maker_id+"' data-name='"+maker_name+"' type='file' accept='application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' style='display: none; width:0; height: 0;' required='' onchange='readExcelFileMaker(this)'>"+
			"<span id='file_name-"+maker_id+"'></span>"+
		"</div>";

		$('.maker_choice_popup .selection_maker_item').append(html);
}

</script>

//02// Sample Script
	function readExcelFileMaker(input) {
		var file = $(input)[0].files[0];
		$('#file_name-' + $(input)[0].dataset.id).text(file.name);
	}

	function uploadExcelForMakers() {
		var promises = [];
		var html = [];
		showLoading();

		$('#current-maker-name input[type=file]').each(function() {
			var makerName = $(this)[0].dataset.name;
			var formData = new FormData();
			var file = $(this)[0].files[0];
			if (file) {
				formData.append('quotation', $(this)[0].files[0]);
				promises.push(sendExcelFile(formData, makerName));
			}
		});

		Promise.all(promises).then(function (values) {
			for (var i = 0; i < values.length; i++) {
				html = html + values[i];
			}
			$('#content-goods').html(html);
			hideLoading();
		}, function (e) {
			window.alert('Internal error');
			console.log(e);
			hideLoading();
		})
	}

	function sendExcelFile (formData, makerName) {
		return new Promise(function (resolve, reject) {
			$.ajax({
				url: baseUrl + "Maker/uploadExcel/QUOTATION",
				type: "POST",
				processData : false,
				contentType : false,
				data: formData,
				success: function(result){
					console.log(JSON.parse(result));
					$('#maker_nav').hide();
					hideView('maker-list');
					// reset table before rendering
					resolve(fileData2View(makerName, result));
				},
				error: function(error){
					reject("ERROR: uploadExcelForBuyer error!");
				}
			});
		});
	}

	function fileData2View(makerName, result) {
		var data = JSON.parse(result).data;

		// maker info
		var extras = `<p>${makerName}</p>`;
		// table header
		var tableHeaderTpl = `<tr>`;
		for (var i = 0; i < data[0].length; i++) {
			var trimmed = data[0][i].replace(/(\s)/g, " ")
			tableHeaderTpl = tableHeaderTpl + `<th style="width: 170px; height: 50px;">${trimmed}</th>`;
		}
		tableHeaderTpl = tableHeaderTpl + "</th>";

		// table body
		if (data.length > 1) {
			var tableBodyTpl = "";
			for (var i = 1; i < data.length; i++) {
				tableBodyTpl = tableBodyTpl + "<tr>"
				for (var j = 0; j <= data[0].length; j++) {
					if (data[i].hasOwnProperty(j)) {
						var trimmed = data[i][j].replace(/(\s)/g, " ")
						tableBodyTpl = tableBodyTpl + `<td style="width: 170px; height: 50px;">${trimmed}</td>`;
					} else {
						tableBodyTpl = tableBodyTpl + `<td style="width: 170px; height: 50px;">　</td>`;
					}
				}
				tableBodyTpl = tableBodyTpl + "</tr>"
			}
		}

		return `<table style="margin-bottom: 30px;">`
					+ extras + tableHeaderTpl + tableBodyTpl
				+ "</table>";
	}

	function onRegisterMaker(){
		registerMaker();
		if(hideViewMessageChoiceBuyer && typeof hideViewMessageChoiceBuyer === 'function'){
			hideViewMessageChoiceBuyer();
		}
	}


	function onEditMaker(makerId){
		editMaker(makerId);

		if($("#maker_choice_guide, #buyer_choice_guide").css({"display": "none"})) {
			console.log('Log: right bottom maker choice guide working...');
			return false;
		}

		if(hideViewMessageChoiceBuyer && typeof hideViewMessageChoiceBuyer === 'function'){
			hideViewMessageChoiceBuyer();
		}
	}

	function onDeletedMaker(makerId){
		deletedMaker(makerId);
		if(hideViewMessageChoiceBuyer && typeof hideViewMessageChoiceBuyer === 'function'){
			hideViewMessageChoiceBuyer();
		}
	}

	function onChoiseMaker(makerId, makerName){
		makerNameChoice = makerName;
		makerIdChoice = makerId;
		$('#item-maker-' + makerIdChoice).css({background: '#B6B6B6'});
		$('#maker_choice_guide').hide();
		choiseMaker(makerIdChoice, makerNameChoice);
		$('#maker_nav').show();
	}

	function resetChoicedMakers() {
		// reset choiced style
		for (var i = 0; i < choicedMakers.length; i++) {
			$('#item-maker-' + choicedMakers[i].makerId).css({background: 'white'});
		}
		// reset value
		makerIdChoice = 0;
		makerNameChoice = '';
		choicedMakers = [];
		$('#current-maker-name').html('');
		// show choice guide
		$('#maker_nav').hide();
		$('#maker_choice_guide').show();
	}

	function nextToSelectFile() {
		$('#maker_nav').hide();
		hideView('maker-list');
		showViewMessageChoiceBuyer();
	}

	function hideViewMakerList(){
		subShowDialog();
		if(hideViewMessageChoiceBuyer && typeof hideViewMessageChoiceBuyer === 'function'){
			hideViewMessageChoiceBuyer('close');
		}
		hideView('maker-list');
	}
//03//Sample html for file upload
<div id="maker_nav" class="dialog bottom" style="border-radius: 8px; border: 1px solid rgb(0, 0, 0); min-height: 75px; background: rgb(255, 251, 202); padding: 25px; right: 100px; bottom: 120px;">
	<p>選択したメーカーは下記の通りです。<br>各メーカーのジャコス標準ファイルを選択してください。</p>
	<p style="margin: 5px;" id="current-maker-name">
		<div style="margin-bottom: 10px;">
			<span>E社</span>&nbsp;&nbsp;
			<button style="display: inline-block; background: #2471a3; border: 1px solid #2E86C1; font-size: 13px; padding: 10px; border-radius: 5px; color: white;" onclick="$('#input_excel_file_maker-20').click()">ファイル選択</button>
			<input id="input_excel_file_maker-20" data-id="20" data-name="E社" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none; width:0; height: 0;" required="" onchange="readExcelFileMaker(this)">
			<span id="file_name-20"></span>
		</div>
	
		<div style="margin-bottom: 10px;">
			<span>C社</span>&nbsp;&nbsp;
			<button style="display: inline-block; background: #2471a3; border: 1px solid #2E86C1; font-size: 13px; padding: 10px; border-radius: 5px; color: white;" onclick="$('#input_excel_file_maker-9').click()">ファイル選択</button>
			<input id="input_excel_file_maker-9" data-id="9" data-name="C社" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none; width:0; height: 0;" required="" onchange="readExcelFileMaker(this)">
			<span id="file_name-9"></span>
		</div>
	
		<div style="margin-bottom: 10px;">
			<span>A社</span>&nbsp;&nbsp;
			<button style="display: inline-block; background: #2471a3; border: 1px solid #2E86C1; font-size: 13px; padding: 10px; border-radius: 5px; color: white;" onclick="$('#input_excel_file_maker-1').click()">ファイル選択</button>
			<input id="input_excel_file_maker-1" data-id="1" data-name="A社" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none; width:0; height: 0;" required="" onchange="readExcelFileMaker(this)">
			<span id="file_name-1"></span>
		</div>
	</p>
	<form id="form_choice_excel_maker" novalidate=""></form>
	<button class="action-buyer" type="button" onclick="resetChoicedMakers();" style="float: left;">戻る</button>
	<button class="action-buyer" type="button" onclick="uploadExcelForMakers();" style="float: right;">次へ</button>
	<div id="choice_file_maker_tpl" style="display: none">
		<div style="margin-bottom: 10px;">
			<span>###maker_name###</span>&nbsp;&nbsp;
			<button style="display: inline-block; background: #2471a3; border: 1px solid #2E86C1; font-size: 13px; padding: 10px; border-radius: 5px; color: white;" onclick="$('#input_excel_file_maker-###maker_id###').click()">ファイル選択</button>
			<input id="input_excel_file_maker-###maker_id###" data-id="###maker_id###" data-name="###maker_name###" type="file" accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" style="display: none; width:0; height: 0;" required="" onchange="readExcelFileMaker(this)">
			<span id="file_name-###maker_id###"></span>
		</div>
	</div>
</div>

//04//