Refaktoring dodawania leków

Za pierwszym razem przy dodawania leku chciałem użyć jakiegoś autocompleta jquery do wyszukiwania leków. Problem polegał na tym, iż za każdym razem jak user coś wpisywał to json musiałbyć pobierany na nowo. Jak wolno wpisywał to długo program odpowiadał – coś było nie tak. Korzystałem z jakiegoś gotowca.

Postanowiłem to poprawić i stworzyłem na nowo całego forma do dodawania leku.

<div id="page-content-wrapper">
<form:form method="POST" modelAttribute="medicament" action="add.html" id="form">
<form:label path="name">Wpisz nazwę leku i kliknij w lupkę (min 3 znaki)</form:label>
<div class="form-group" id="idMedicamentSearchFormGroup">
<div class="input-group">
<span class="input-group-addon" id="searchButt">
<span class="glyphicon glyphicon-search"></span>
</span>
<form:input path="name" id="search" type="search" name="search" placeholder="Wpisz nazwę leku (min 3 znaki)" class="form-control"/>
<form:errors path="name" cssClass="form-error" />
</div>
<form:hidden path="idMedicamentDb" id="hiddenId" />
<form:errors path="idMedicamentDb" cssClass="form-error text-danger" />
</div>
<table class="table table-striped" id="table" hidden="true"></table>
<form:label path="dateStringExpiration">Wybierz datę ważności klikająć w kalendarz</form:label>
<div class="form-group">
<div class="input-group">
<label for="expirationDateValue" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span></label>
<form:input path="dateStringExpiration" cssClass="datepicker form-control" placeholder="Kliknij kalendarz" id="expirationDateValue"/>
</div>
<form:errors path="dateStringExpiration" cssClass="form-error text-danger" />
</div>
<h5 hidden="true">Wybrany lek</h5>
<table class="table table-bordered text-left" id=table-choosed-medicament></table>
<input type="submit" value="Dodaj lek" Class="btn btn-default" />
</form:form>
</div>

Bez tytułu

Teraz user musi wpisać min 3 znaki (jak mniej to dostanie czerwone info). Jak nic nie znajdzie to dostanie czerwone info. Jak będą błędne dane wprowadzone to czerwone info.Bez tytułuŻeby nie obciążać bazy pierwsza walidacja jest w javascript.

Wyniki wyszukiwania pokazane są w tabelce. User zaznaczając pozycję w input:hidden wrzuca id leku. Przyjazne dla usera pola wrzucane są w tabelkę nad przyciskiem dodajBez tytułu

W kontrolerze nic nie było zmieniane – zmiany tylko w html i duuuuże zmiany w javascript.

Funkcja do zaznaczania pozycji na liście wyników:

var expirationDate = '';
$(document).ready(function() {
$('#table').on('click', '.tableRow', function(){
$('.to-remove').remove();
$('#hiddenId').val($(this).children('.medicament-list-id').html());
$(this).addClass('info');
$(this).siblings().removeClass('info');
$('h5').show();
$('#table-choosed-medicament').append("
<tr class=\"to-remove\">
<td class=\"col-md-2\">Nazwa</td>
<td>" + $(this).children('.medicament-list-name').html() + "</td>
</tr>
" +
"
<tr class=\"to-remove\">
<td class=\"col-md-2\">Producent</td>
<td>" + $(this).children('.medicament-list-producent').html() + "</td>
</tr>
" +
"
<tr class=\"to-remove\">
<td class=\"col-md-2\">Rodzaj</td>
<td>" + $(this).children('.medicament-list-kind').html() + "</td>
</tr>
" +
"
<tr class=\"to-remove\">
<td class=\"col-md-2\">Cena</td>
<td>" + $(this).children('.medicament-list-price').html() + "</td>
</tr>
" +
"
<tr class=\"to-remove\">
<td class=\"col-md-2\">Data ważności</td>
<td id=\"expirationDateId\">" + expirationDate + "</td>
</tr>
");
});
});

i funkcja do szukania leków wraz z walidacją

$(function() {
$('#searchButt').click(function() {
$('.to-remove').remove();
$('.tableRow').remove();
$('.table-row-header').remove();
$("[for=hiddenId]").remove();
$('#hiddenId').val('');
$('h5').hide();
var addedTableTitle = false;
if($('#search').val().length >= 3)
{
$.getJSON("medicaments-db.json", function(result)
{
$.each(result, function(i, medicament)
{
if(medicament.name.toLowerCase().indexOf($('#search').val().toLowerCase()) >= 0)
{
if(i >= 0 & addedTableTitle == false)
{
addedTableTitle = true;
$('#table').append("
<tr class=\"table-row-header\">
<th>Nazwa</th>
<th>Producent</th>
<th>Opakowanie</th>
<th>Cena</th>
</tr>
");
}
$('#idMedicamentSearchFormGroup').removeClass('has-error');
$('#table').append("
<tr class=\"tableRow\">
<td class=\"medicament-list-name\">" + medicament.name +
"</td>
<td class=\"medicament-list-id\" hidden=\"true\">" + medicament.id +
"</td>
<td class=\"medicament-list-producent\">" + medicament.producent +
"</td>
<td class=\"medicament-list-kind\">" + medicament.kind +
"</td>
<td class=\"medicament-list-price\">" + medicament.price + "</td>
</tr>
");
return;
}
});
if(addedTableTitle == false)
{
$('#idMedicamentSearchFormGroup').append("<span class=\"help-block tableRow\">Nic nie znaleziono</span>")
$('#idMedicamentSearchFormGroup').addClass('has-error');
}
});
}
else
{
$('#idMedicamentSearchFormGroup').append("<span class=\"help-block tableRow\">Wpisz minimun 3 znaki</span>")
$('#idMedicamentSearchFormGroup').addClass('has-error');
}
$('#table').show();
});
})

 

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google

Komentujesz korzystając z konta Google. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Połączenie z %s