alumnos_ti/LauckCycles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CAMBIOS:

Browse Source 
- Agregado el autocompletado de direcciones.
- Validacion de numeros en el nombre.
This commit is contained in:
Bryam105
2026-05-27 08:57:20 -03:00
parent 330b9460e6
commit f03890b348
3 changed files with 155 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/ClientController.php
+6 -2
View File
@@ -40,10 +40,12 @@ class ClientController extends Controller
public function store(Request $request)
{
$validated = $request->validate([
'name' => 'required|string|max:255',
'name' => ['required', 'string', 'max:255', 'not_regex:/[0-9]/'],
'phone' => 'nullable|string|max:50',
'email' => 'nullable|email|max:255|unique:clients,email',
'address' => 'nullable|string|max:255',
], [
'name.not_regex' => 'El nombre del cliente no puede contener números.',
]);
// 1. Guardamos el cliente en una variable para tener su ID
@@ -88,10 +90,12 @@ class ClientController extends Controller
public function update(Request $request, Client $client)
{
$validated = $request->validate([
'name' => 'required|string|max:255',
'name' => ['required', 'string', 'max:255', 'not_regex:/[0-9]/'],
'phone' => 'nullable|string|max:50',
'email' => 'nullable|email|max:255|unique:clients,email,' . $client->id, // Ignorar email propio
'address' => 'nullable|string|max:255',
], [
'name.not_regex' => 'El nombre del cliente no puede contener números.',
]);
$client->update($validated);
resources/views/clients/create.blade.php
+75 -2
View File
@@ -23,9 +23,13 @@
<x-forms.input id="email" name="email" type="email" :value="old('email')" placeholder="cliente@ejemplo.com" :error="$errors->first('email')" />
</div>
<!-- Direccion -->
<div class="md:col-span-4">
<div class="md:col-span-4 relative">
<x-forms.label for="address" value="Dirección / Domicilio" />
<textarea id="address" name="address" rows="3" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 placeholder-neutral-600 dark:placeholder-gray-400" placeholder="Calle, número, piso...">{{ old('address') }}</textarea>
<input type="text" id="address" name="address" value="{{ old('address') }}" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 placeholder-neutral-600 dark:placeholder-gray-400" placeholder="Calle, número, piso..." autocomplete="off">
<!-- Sugerencias -->
<div id="address-suggestions" class="absolute z-50 w-full bg-white dark:bg-neutral-800 border border-gray-300 dark:border-neutral-700 rounded-b-lg shadow-xl max-h-60 overflow-y-auto hidden mt-1"></div>
@error('address')
<span class="text-red-500 text-xs mt-1">{{ $message }}</span>
@enderror
@@ -41,4 +45,73 @@
</form>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const addressInput = document.getElementById('address');
const suggestionsBox = document.getElementById('address-suggestions');
let timeout = null;
addressInput.addEventListener('input', function() {
clearTimeout(timeout);
const query = this.value.trim();
if (query.length < 3) {
suggestionsBox.classList.add('hidden');
suggestionsBox.innerHTML = '';
return;
}
// Esperar 500ms de inactividad antes de buscar (debounce)
timeout = setTimeout(() => {
// Coordenadas Centro de Paraná: -31.73197, -60.52897
const url = `https://photon.komoot.io/api/?q=${encodeURIComponent(query)}&limit=5&lat=-31.73197&lon=-60.52897`;
fetch(url)
.then(response => response.json())
.then(data => {
suggestionsBox.innerHTML = '';
if (data.features && data.features.length > 0) {
data.features.forEach(feature => {
const props = feature.properties;
// Construir dirección legible
// let addressParts = [];
// if (props.name) addressParts.push(props.name);
// if (props.street && props.street !== props.name) addressParts.push(props.street);
// if (props.housenumber && !addressParts.includes(props.housenumber)) addressParts.push(props.housenumber);
// if (props.city || props.town) addressParts.push(props.city || props.town);
const fullAddress = `${props.street || props.name} ${props.housenumber??''}${(props.city || props.town) ? ', '+(props.city || props.town) :''}`;
const div = document.createElement('div');
div.className = 'p-3 hover:bg-gray-100 dark:hover:bg-neutral-700 cursor-pointer text-sm text-gray-900 dark:text-white border-b border-gray-200 dark:border-neutral-700 last:border-0 transition-colors';
div.textContent = fullAddress;
div.addEventListener('click', function() {
addressInput.value = fullAddress;
suggestionsBox.classList.add('hidden');
});
suggestionsBox.appendChild(div);
});
suggestionsBox.classList.remove('hidden');
} else {
suggestionsBox.classList.add('hidden');
}
})
.catch(err => console.error('Error fetching address:', err));
}, 500);
});
// Ocultar si se hace clic fuera del input y de las sugerencias
document.addEventListener('click', function(e) {
if (!addressInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
suggestionsBox.classList.add('hidden');
}
});
});
</script>
@endpush
</x-layout>
resources/views/clients/edit.blade.php
+74 -2
View File
@@ -23,10 +23,13 @@
<x-forms.input id="email" name="email" type="email" :value="old('email', $client->email)" placeholder="cliente@ejemplo.com" :error="$errors->first('email')" />
</div>
<!-- Direccion -->
<div class="md:col-span-4">
<div class="md:col-span-4 relative">
<x-forms.label for="address" value="Dirección / Domicilio" />
<textarea id="address" name="address" rows="3" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 placeholder-gray-500" placeholder="Calle, número, piso...">{{ old('address', $client->address) }}</textarea>
<input type="text" id="address" name="address" value="{{ old('address', $client->address) }}" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 dark:text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 placeholder-neutral-600 dark:placeholder-gray-400" placeholder="Calle, número, piso..." autocomplete="off">
<!-- Sugerencias -->
<div id="address-suggestions" class="absolute z-50 w-full bg-white dark:bg-neutral-800 border border-gray-300 dark:border-neutral-700 rounded-b-lg shadow-xl max-h-60 overflow-y-auto hidden mt-1"></div>
@error('address')
<span class="text-red-500 text-xs mt-1">{{ $message }}</span>
@enderror
@@ -42,4 +45,73 @@
</form>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const addressInput = document.getElementById('address');
const suggestionsBox = document.getElementById('address-suggestions');
let timeout = null;
addressInput.addEventListener('input', function() {
clearTimeout(timeout);
const query = this.value.trim();
if (query.length < 3) {
suggestionsBox.classList.add('hidden');
suggestionsBox.innerHTML = '';
return;
}
// Esperar 500ms de inactividad antes de buscar (debounce)
timeout = setTimeout(() => {
// Coordenadas Centro de Paraná: -31.73197, -60.52897
const url = `https://photon.komoot.io/api/?q=${encodeURIComponent(query)}&limit=5&lat=-31.73197&lon=-60.52897`;
fetch(url)
.then(response => response.json())
.then(data => {
suggestionsBox.innerHTML = '';
if (data.features && data.features.length > 0) {
data.features.forEach(feature => {
const props = feature.properties;
// Construir dirección legible
// let addressParts = [];
// if (props.name) addressParts.push(props.name);
// if (props.housenumber && !addressParts.includes(props.housenumber)) addressParts.push(props.housenumber);
// if (props.street && props.street !== props.name) addressParts.push(props.street);
// if (props.city || props.town) addressParts.push(props.city || props.town);
const fullAddress = `${props.street || props.name} ${props.housenumber??''}${(props.city || props.town) ? ', '+(props.city || props.town) :''}`;
const div = document.createElement('div');
div.className = 'p-3 hover:bg-gray-100 dark:hover:bg-neutral-700 cursor-pointer text-sm text-gray-900 dark:text-white border-b border-gray-200 dark:border-neutral-700 last:border-0 transition-colors';
div.textContent = fullAddress;
div.addEventListener('click', function() {
addressInput.value = fullAddress;
suggestionsBox.classList.add('hidden');
});
suggestionsBox.appendChild(div);
});
suggestionsBox.classList.remove('hidden');
} else {
suggestionsBox.classList.add('hidden');
}
})
.catch(err => console.error('Error fetching address:', err));
}, 500);
});
// Ocultar si se hace clic fuera del input y de las sugerencias
document.addEventListener('click', function(e) {
if (!addressInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
suggestionsBox.classList.add('hidden');
}
});
});
</script>
@endpush
</x-layout>