POS-Server/app/views/users/_form.html.erb

<div id="form_wizard_1">
	<%= form_for(@user, html: { class: "form-horizontal", id: "submit_form" }) do |f| %>
		<div class="portlet-body form">
			<% if @user.errors.any? %>
				<div class="alert alert-danger">
					<strong>Tiene <%= pluralize(@user.errors.count, "error") %> no se puede guardar el usuario</strong><br>
				</div>
			<% end %>
			<div id="error_explanation"></div>
			<div class="form-wizard">
				<div class="form-body">
					<ul class="nav nav-pills nav-justified steps">
						<li class="active">
							<a href="#tab1" data-toggle="tab" class="step" aria-expanded="true">
							<span class="number">1 </span>
							<span class="desc">
								<i class="fa fa-check"></i> Usuario del sistema </span>
							</a>
						</li>
						<li>
							<a href="#tab2" data-toggle="tab" class="step">
							<span class="number">2 </span>
							<span class="desc">
								<i class="fa fa-check"></i> Información del usuario </span>
							</a>
						</li>
						<li>
							<a href="#tab3" data-toggle="tab" class="step">
							<span class="number">3 </span>
							<span class="desc">
								<i class="fa fa-check"></i> Confirmar </span>
							</a>
						</li>
					</ul>
					<div id="bar" class="progress progress-striped" role="progressbar">
						<div class="progress-bar progress-bar-success" style="width: 25%;">
						</div>
					</div>
					<div class="tab-content">
						<div class="alert alert-error hide">
							<button class="close" data-dismiss="alert"></button>
							Tienes algunos errores. Favor de verificar.
						</div>
						<div class="alert alert-success hide">
							<button class="close" data-dismiss="alert"></button>
							Información Correcta!
						</div>
						<div class="tab-pane active" id="tab1">
							<h3 class="block">Proporciona la información de la cuenta de usuario</h3>
							<div id="error_explanation"></div>
							<div class="form-group">
								<%= f.label :usertype, "", { class: "col-md-3 control-label" } do %> Tipo de usuario <span class="required">*</span> <% end %>
								<div class="col-md-4">
									<%= f.select :usertype, (@options_for_select), { prompt: "Seleccione" }, { class: 'form-control select2' } %>
								</div>
							</div>
							<div class="form-group hidden" id="pointsale_div">
								<%= f.label :pointsale_id, "", {:class=>"col-md-3 control-label"} do %> Punto de venta <span class="required">*</span> <% end %>
								<div class="col-md-4">
									<%= f.collection_select :pointsale_id, Pointsale.activos, :id, :name, { prompt: "Seleccione", selected: (current_user.usertype == 'G' ? current_user.pointsale_id : @user.pointsale_id) }, { class: "form-control select2",
										disabled: (true if current_user.usertype == 'G') } %>
									<%= f.hidden_field :pointsale_id, value: (current_user.usertype == 'G' ? current_user.pointsale_id : @user.pointsale_id), id: 'pointsale_id' %>
								</div>
							</div>
							<div class="form-group hidden" id="warehouse_div">
								<%= f.label :warehouse_id, "", { class: "col-md-3 control-label" } do %> Almacén <span class="required">*</span> <% end %>
								<div class="col-md-4">
									<%= f.collection_select :warehouse_id, Warehouse.activos, :id, :name, { prompt: "Seleccione" }, { class: "form-control select2" } %>
								</div>
							</div>
							<div class="form-group">
								<%= f.label :userid, "Nombre de usuario", { class: "col-md-3 control-label" } do %> Usuario <span class="required">*</span> <% end %>
								<div class="col-md-4">
									<%= f.text_field :userid, { class: "form-control", disabled: @user.persisted? } %>
									<span class="help-block"> El usuario no debe de contener espacios. </span>
								</div>
							</div>
							<% unless @user.persisted? %>
								<div class="form-group">
									<%= f.label :password, "Contraseña", { class: "col-md-3 control-label" } do %> Contraseña <span class="required">*</span> <% end %>
									<div class="col-md-4">
										<%= f.password_field :password, { class: "form-control"} %>
									</div>
								</div>
								<div class="form-group">
									<%= f.label :password_confirmation, "Confirmar contraseña", { class: "col-md-3 control-label" } do %> Confirmar Contraseña <span class="required">*</span> <% end %>
									<div class="col-md-4">
										<%= f.password_field :password_confirmation, { class: "form-control" } %>
									</div>
								</div>
							<% end %>
						</div>
						<div class="tab-pane" id="tab2">
							<h3 class="block">Proporciona los datos particulares del usuario</h3>
							<div class="form-group">
								<%= f.label :first_name, "Nombre", { class: "col-md-3 control-label" } do %> Nombre <span class="required">*</span> <% end %>
								<div class="col-md-4">
									<%= f.text_field :first_name, { class: "form-control" } %>
								</div>
							</div>
							<div class="form-group">
								<%= f.label :last_name, "Apellidos", { class: "col-md-3 control-label" } do %> Apellidos <span class="required">*</span> <% end %>
								<div class="col-md-4">
									<%= f.text_field :last_name, { class: "form-control" } %>
								</div>
							</div>
							<div class="form-group">
								<%= f.label :email, "Correo", { class: "col-md-3 control-label" } do %> Correo electrónico <span class="required">*</span> <% end %>
								<div class="col-md-4">
									<div class="input-icon">
										<i class="fa fa-envelope"></i>
										<%= f.text_field :email, { class: "form-control", placeholder: "ejemplo@correo.com" } %>
									</div>
								</div>
							</div>
						</div>
						<div class="tab-pane" id="tab3">
							<h3 class="block">Confirma la cuenta</h3>
							<h4 class="form-section">Información del usuario</h4>
							<div class="form-group">
								<label class="control-label col-md-3">Usuario</label>
								<div class="col-md-4">
									<span class="form-control-static" data-display="user[userid]"></span>
								</div>
							</div>
							<div class="form-group hidden" id="pointsale_info_div">
								<label class="control-label col-md-3">Punto de venta</label>
								<div class="col-md-4">
									<span class="form-control-static" data-display="user[pointsale_id]"></span>
								</div>
							</div>
							<div class="form-group hidden" id="warehouse_info_div">
								<label class="control-label col-md-3">Almacén</label>
								<div class="col-md-4">
									<span class="form-control-static" data-display="user[warehouse_id]"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-md-3">Tipo de usuario</label>
								<div class="col-md-4">
									<span class="form-control-static" data-display="user[usertype]"></span>
								</div>
							</div>
							<h4 class="form-section">Datos particulares del usuario</h4>
							<div class="form-group">
								<label class="control-label col-md-3">Nombre:</label>
								<div class="col-md-4">
									<span class="form-control-static" data-display="user[first_name]"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-md-3">Apellidos:</label>
								<div class="col-md-4">
									<span class="form-control-static" data-display="user[last_name]"></span>
								</div>
							</div>
							<div class="form-group">
								<label class="control-label col-md-3">Correo electrónico:</label>
								<div class="col-md-4">
									<span class="form-control-static" data-display="user[email]"></span>
								</div>
							</div>
						</div>
						<div class="form-actions">
							<div class="row">
								<div class="col-md-offset-3 col-md-9">
									<a href="javascript:;" class="btn default button-previous disabled" style="display: none;">
										<i class="fa fa-angle-left"></i> Regresar </a>
										<a href="javascript:;" class="btn blue button-next">
											Siguiente <i class="fa fa-angle-right"></i>
										</a>
										<a href="javascript:;" class="btn green button-submit" style="display: none;">
											Guardar <i class="fa fa-check"></i>
										</a>
									</div>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	<% end %>
</div>
<script type="text/javascript">
	$(document).on("page:change", function() {
		App.init();

	<% if @user.persisted? %>
		<% if @user.pointsale.present? && @user.usertype != 'A'%>
			$('#pointsale_info_div').removeClass('hidden');
			$('#pointsale_div').removeClass('hidden');
			$("#user_pointsale_id").select2();
		<% elsif @user.warehouse.present? && @user.usertype != 'A'%>
			$('#warehouse_info_div').removeClass('hidden');
			$('#warehouse_div').removeClass('hidden');
			$("#user_warehouse_id").select2();
		<% end %>
	<% end %>

	});

	$('#user_pointsale_id').on('change', function() {
		$('#pointsale_id').val($(this).val());
	});

	$('#user_usertype').on('change', function() {
		var type = $(this).val();
		switch(type) {
			case 'A':
				$('#pointsale_info_div').addClass('hidden');
				$('#warehouse_info_div').addClass('hidden');
				$('#warehouse_div').addClass('hidden');
				$('#pointsale_div').addClass('hidden');
				$('#user_warehouse_id').select2('val', null);
				$('#user_pointsale_id').select2('val', null);
				break;
			case 'G':
				$('#pointsale_info_div').removeClass('hidden');
				$('#warehouse_info_div').addClass('hidden');
				$('#user_warehouse_id').select2('val', null);
				$('#pointsale_div').removeClass('hidden');
				$("#user_pointsale_id").select2();
				$('#warehouse_div').addClass('hidden');
				break;
			case 'S':
				$('#warehouse_info_div').removeClass('hidden');
				$('#pointsale_info_div').addClass('hidden');
				$('#user_pointsale_id').select2('val', null);
				$('#warehouse_div').removeClass('hidden');
				$("#user_warehouse_id").select2();
				$('#pointsale_div').addClass('hidden');
				break;
			case 'C':
				$('#pointsale_info_div').removeClass('hidden');
				$('#warehouse_info_div').addClass('hidden');
				$('#user_warehouse_id').select2('val', null);
				$('#pointsale_div').removeClass('hidden');
				$("#user_pointsale_id").select2();
				$('#warehouse_div').addClass('hidden');
				break;
		}


		// if($(this).val() == 'S') {
		// 	$('#warehouse_info_div').removeClass('hidden');
		// 	$('#pointsale_info_div').addClass('hidden');
		// 	$('#user_pointsale_id').select2('val', null);
		// 	$('#warehouse_div').removeClass('hidden');
		// 	$("#user_warehouse_id").select2();
		// 	$('#pointsale_div').addClass('hidden');
		// } else {
		// 	$('#pointsale_info_div').removeClass('hidden');
		// 	$('#warehouse_info_div').addClass('hidden');
		// 	$('#user_warehouse_id').select2('val', null);
		// 	$('#pointsale_div').removeClass('hidden');
		// 	$("#user_pointsale_id").select2();
		// 	$('#warehouse_div').addClass('hidden');
		// }
	});

</script>