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, (current_user.usertype=="A" ? Rails.application.config.usertypes_for_admin : Rails.application.config.usertypes_for_manager), {: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>
							<% if current_user.usertype == "A" %>
								<div class="form-group hidden" id="warehouse_div">
									<%= f.label :warehouse_id, "", {:class=>"col-md-3 control-label"} do %> Almacen
										<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>               
							<% end %>             
							<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? %>
			$('#pointsale_info_div').removeClass('hidden');
			$('#pointsale_div').removeClass('hidden');
			$("#user_pointsale_id").select2();
		<% else %>
			$('#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() {
		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>