RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactor as food-specific picker

This commit is contained in:
Christopher C. Wells 2021-01-18 19:31:02 -08:00 committed by Christopher Charbonneau Wells
parent 18d15db375
commit f48249d9e5
4 changed files with 45 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/Http/Livewire/Picker.php → app/Http/Livewire/FoodPicker.php
View File

@ -2,11 +2,11 @@
namespace App\Http\Livewire;
use App\Models\Food;
use Livewire\Component;
class Picker extends Component
class FoodPicker extends Component
{
public string $model;
public string $term = '';
/**
@ -17,10 +17,10 @@ class Picker extends Component
public function render()
{
if (!empty($this->term)) {
$results = $this->model::search($this->term);
$foods = Food::search($this->term);
} else {
$results = [];
$foods = [];
}
return view('livewire.picker')->with('results', $results);
return view('livewire.food-picker')->with('foods', $foods);
}
}

39
resources/views/livewire/food-picker.blade.php Normal file
View File

@ -0,0 +1,39 @@
<div x-data="{isTyped: false}">
<div>
<div>
<x-inputs.input type="text"
name="food"
placeholder="{{__('Search ...')}}"
x-on:input.debounce.400ms="isTyped = ($event.target.value != '')"
x-on:focusout="isTyped = false; $event.target.value = ''"
autocomplete="off"
wire:model.debounce.500ms="term"
aria-label="Search input" />
</div>
<div x-show="isTyped" x-cloak>
<div class="absolute border-2 border-gray-500 border-b-0 bg-white">
@forelse($foods as $food)
<div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer">
<div class="text">
{{ $food->name }}@if($food->detail), <span class="text-gray-500">{{ $food->detail }}</span>@endif
</div>
@if($food->brand)
<div class="text-sm text-gray-600">
{{ $food->brand }}
</div>
@endif
<div class="text-sm">
Serving size {{ \App\Support\Number::fractionStringFromFloat($food->serving_size) }}
{{ $food->serving_unit }}
({{ $food->serving_weight }}g)
</div>
</div>
@empty
<div class="border-b-2 border-gray-500" x-cloak>
No results found.
</div>
@endforelse
</div>
</div>
</div>
</div>

31
resources/views/livewire/picker.blade.php
View File

@ -1,31 +0,0 @@
<div x-data="{isTyped: false}">
<div>
<div>
<x-inputs.input type="text"
name="picker"
placeholder="{{__('Search ...')}}"
x-on:input.debounce.400ms="isTyped = ($event.target.value != '')"
autocomplete="off"
wire:model.debounce.500ms="term"
aria-label="Search input" />
</div>
<!-- TODO: Implement as a library like Select2 or Chosen. -->
<div x-show="isTyped" x-cloak>
<div class="absolute bg-white">
@forelse($results as $result)
<div class="p-1 hover:bg-yellow-300 cursor-pointer">
<ul>
<li>
{{ Str::limit($result->name, 40) }}
</li>
</ul>
</div>
@empty
<div x-cloak>
No results found.
</div>
@endforelse
</div>
</div>
</div>
</div>

2
resources/views/recipes/edit.blade.php
View File

@ -91,7 +91,7 @@
{{-- :selectedValue="old('foods.' . $i, $food_id)">--}}
{{-- <option value=""></option>--}}
{{-- </x-inputs.select>--}}
<livewire:picker model="\App\Models\Food">
<livewire:food-picker>
<x-inputs.input type="text"
class="block"
name="foods_detail[]"