Add interactive map to project form for setting coordinates and updating address/country

This commit is contained in:
2026-05-27 20:28:44 +02:00
parent 52f586f815
commit cf3d32a6fa
2 changed files with 243 additions and 1 deletions
+72
View File
@@ -3,9 +3,81 @@
namespace App\Livewire;
use Livewire\Component;
use App\Models\Project;
class ProjectForm extends Component
{
public $projectId = null;
public $name = '';
public $address = '';
public $lat = null;
public $lng = null;
public $country = '';
public $start_date = '';
public $end_date_estimated = '';
public $status = 'planning';
protected $rules = [
'name' => 'required|string|max:255',
'address' => 'required|string',
'lat' => 'nullable|numeric',
'lng' => 'nullable|numeric',
'start_date' => 'required|date',
'end_date_estimated' => 'nullable|date',
'status' => 'required|in:planning,in_progress,paused,completed',
];
public function mount($projectId = null)
{
if ($projectId) {
$this->projectId = $projectId;
$project = Project::findOrFail($projectId);
$this->name = $project->name;
$this->address = $project->address;
$this->lat = $project->lat;
$this->lng = $project->lng;
$this->start_date = $project->start_date->format('Y-m-d');
$this->end_date_estimated = $project->end_date_estimated?->format('Y-m-d');
$this->status = $project->status;
// country? we don't have stored, maybe we can leave blank or compute from lat/lng? We'll leave blank for now.
}
}
public function setCoordinates($lat, $lng)
{
$this->lat = $lat;
$this->lng = $lng;
// Optionally, we could trigger reverse geocoding here via JS and update address and country.
// But we'll do that entirely in JavaScript for better UX.
// We'll emit an event to JS to fetch address.
$this->dispatch('coordinatesUpdated', lat: $lat, lng: $lng);
}
public function save()
{
$this->validate();
if ($this->projectId) {
$project = Project::findOrFail($this->projectId);
} else {
$project = new Project();
$project->created_by = auth()->id();
}
$project->name = $this->name;
$project->address = $this->address;
$project->lat = $this->lat;
$project->lng = $this->lng;
$project->start_date = $this->start_date;
$project->end_date_estimated = $this->end_date_estimated;
$project->status = $this->status;
$project->save();
session()->flash('message', 'Project saved successfully.');
return redirect()->route('projects.index');
}
public function render()
{
return view('livewire.projects.project-form');