mirror of https://github.com/kcal-app/kcal.git
Begin work on non-livewire ingredient picker (WIP)
This commit is mostly a PoC and looks like it will work in place of the initial Livewire-based component for a repeatable picker.
This commit is contained in:
Christopher C. Wells
Christopher Charbonneau Wells
parent
856bfb39b9
commit
cb7483ae06
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\JsonResponse;
|
||||
|
||||
class IngredientPickerController extends Controller
|
||||
{
|
||||
/**
|
||||
* Search for ingredients.
|
||||
*/
|
||||
public function search(): JsonResponse
|
||||
{
|
||||
return response()->json([
|
||||
['id' => 1, 'name' => 'Flour'],
|
||||
['id' => 2, 'name' => 'Eggs'],
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -38,10 +38,6 @@ class RouteServiceProvider extends ServiceProvider
|
|||
$this->configureRateLimiting();
|
||||
|
||||
$this->routes(function () {
|
||||
Route::middleware('api')
|
||||
->namespace($this->namespace)
|
||||
->group(base_path('routes/api.php'));
|
||||
|
||||
Route::middleware('web')
|
||||
->namespace($this->namespace)
|
||||
->group(base_path('routes/web.php'));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<div x-data="{ searching: false, results: [] }">
|
||||
<div>
|
||||
<div>
|
||||
<x-inputs.input type="hidden"
|
||||
name="ingredients[{{ $index }}]"
|
||||
value="{{ $defaultId ?? '' }}"
|
||||
x-ref="ingredients{{ $index }}"/>
|
||||
<x-inputs.input type="text"
|
||||
name="ingredients_name[{{ $index }}]"
|
||||
value="{{ $defaultName ?? '' }}"
|
||||
placeholder="Search..."
|
||||
autocomplete="off"
|
||||
x-on:input.debounce.400ms="if ($event.target.value != '') {
|
||||
fetch('{{ route('ingredient-picker.search') }}')
|
||||
.then(response => response.json())
|
||||
.then(data => { results = data; searching = true; }); }"
|
||||
x-on:focusout.debounce.200ms="searching = false;"
|
||||
x-ref="ingredients_name{{ $index }}" />
|
||||
</div>
|
||||
<div x-show="searching" x-cloak>
|
||||
<div class="absolute border-2 border-gray-500 border-b-0 bg-white"
|
||||
x-on:click="selected = $event.target; if (selected.dataset.id) { $refs.ingredients_name{{ $index }}.value = selected.dataset.value; $refs.ingredients{{ $index }}.value = selected.dataset.id; searching = false; }">
|
||||
<template x-for="result in results" :key="result.id">
|
||||
<div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer"
|
||||
x-bind:data-id="result.id"
|
||||
x-bind:data-value="result.name">
|
||||
<div class="pointer-events-none">
|
||||
<div x-text="result.name"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -63,43 +63,47 @@
|
|||
|
||||
<!-- Ingredients -->
|
||||
<h3 class="pt-2 mb-2 font-extrabold">Ingredients</h3>
|
||||
<div x-data="{ingredients: 0}">
|
||||
@foreach($recipe->foodAmounts as $foodAmount)
|
||||
<div class="flex flex-row space-x-4 mb-4">
|
||||
<x-inputs.input type="text"
|
||||
name="foods_amount[]"
|
||||
size="5"
|
||||
:value="old('foods_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />
|
||||
<x-inputs.select name="foods_unit[]"
|
||||
:options="$food_units"
|
||||
:selectedValue="old('foods_unit.' . $loop->index, $foodAmount->unit)">
|
||||
<option value=""></option>
|
||||
</x-inputs.select>
|
||||
<livewire:food-picker :index="$loop->index"
|
||||
:default-id="old('foods.' . $loop->index, $foodAmount->food->id)"
|
||||
:default-name="old('foods_name.' . $loop->index, $foodAmount->food->name)" />
|
||||
<x-inputs.input type="text"
|
||||
class="block"
|
||||
name="foods_detail[]"
|
||||
:value="old('foods_detail.' . $loop->index, $foodAmount->detail)" />
|
||||
</div>
|
||||
@endforeach
|
||||
<div x-data="{ ingredients: 0 }">
|
||||
{{-- @foreach($recipe->foodAmounts as $foodAmount)--}}
|
||||
{{-- <div class="flex flex-row space-x-4 mb-4">--}}
|
||||
{{-- <x-inputs.input type="text"--}}
|
||||
{{-- name="foods_amount[]"--}}
|
||||
{{-- size="5"--}}
|
||||
{{-- :value="old('foods_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />--}}
|
||||
{{-- <x-inputs.select name="foods_unit[]"--}}
|
||||
{{-- :options="$food_units"--}}
|
||||
{{-- :selectedValue="old('foods_unit.' . $loop->index, $foodAmount->unit)">--}}
|
||||
{{-- <option value=""></option>--}}
|
||||
{{-- </x-inputs.select>--}}
|
||||
{{-- <livewire:food-picker :index="$loop->index"--}}
|
||||
{{-- :default-id="old('foods.' . $loop->index, $foodAmount->food->id)"--}}
|
||||
{{-- :default-name="old('foods_name.' . $loop->index, $foodAmount->food->name)" />--}}
|
||||
{{-- <x-inputs.input type="text"--}}
|
||||
{{-- class="block"--}}
|
||||
{{-- name="foods_detail[]"--}}
|
||||
{{-- :value="old('foods_detail.' . $loop->index, $foodAmount->detail)" />--}}
|
||||
{{-- </div>--}}
|
||||
{{-- @endforeach--}}
|
||||
<template x-for="i in ingredients + 1">
|
||||
<div class="flex flex-row space-x-4 mb-4">
|
||||
<x-inputs.input type="text"
|
||||
name="foods_amount[]"
|
||||
size="5" />
|
||||
<x-inputs.select name="foods_unit[]"
|
||||
:options="$food_units" >
|
||||
<option value=""></option>
|
||||
</x-inputs.select>
|
||||
<!-- TODO: Get this working in the template. See wire:init or use wire:click? -->
|
||||
<livewire:food-picker index="1" />
|
||||
<x-inputs.input type="text"
|
||||
class="block"
|
||||
name="foods_detail[]" />
|
||||
</div>
|
||||
<x-ingredient-picker index="1" />
|
||||
</template>
|
||||
|
||||
{{-- <template x-for="i in ingredients + 1">--}}
|
||||
{{-- <div class="flex flex-row space-x-4 mb-4">--}}
|
||||
{{-- <x-inputs.input type="text"--}}
|
||||
{{-- name="foods_amount[]"--}}
|
||||
{{-- size="5" />--}}
|
||||
{{-- <x-inputs.select name="foods_unit[]"--}}
|
||||
{{-- :options="$food_units" >--}}
|
||||
{{-- <option value=""></option>--}}
|
||||
{{-- </x-inputs.select>--}}
|
||||
{{-- <!-- TODO: Get this working in the template. See wire:init or use wire:click? -->--}}
|
||||
{{-- <livewire:food-picker index="1" />--}}
|
||||
{{-- <x-inputs.input type="text"--}}
|
||||
{{-- class="block"--}}
|
||||
{{-- name="foods_detail[]" />--}}
|
||||
{{-- </div>--}}
|
||||
{{-- </template>--}}
|
||||
<x-inputs.button type="button" class="ml-3" x-on:click="ingredients++;">
|
||||
Add Ingredient
|
||||
</x-inputs.button>
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<?php
|
||||
|
||||
use CloudCreativity\LaravelJsonApi\Facades\JsonApi;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| API Routes
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Here is where you can register API routes for your application. These
|
||||
| routes are loaded by the RouteServiceProvider within a group which
|
||||
| is assigned the "api" middleware group. Enjoy building your API!
|
||||
|
|
||||
*/
|
||||
|
||||
Route::middleware('auth:api')->get('/user', function (Request $request) {
|
||||
return $request->user();
|
||||
});
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<?php
|
||||
|
||||
use App\Http\Controllers\FoodController;
|
||||
use App\Http\Controllers\IngredientPickerController;
|
||||
use App\Http\Controllers\JournalEntryController;
|
||||
use App\Http\Controllers\RecipeController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
|
@ -34,4 +35,8 @@ Route::get('/journal-entries/{journalEntry}/delete', [JournalEntryController::cl
|
|||
->middleware(['auth'])
|
||||
->name('journal-entries.delete');
|
||||
|
||||
Route::get('/ingredient-picker/search', [IngredientPickerController::class, 'search'])
|
||||
->middleware(['auth'])
|
||||
->name('ingredient-picker.search');
|
||||
|
||||
require __DIR__.'/auth.php';
|
||||
|
|
|
|||
Loading…
Reference in New Issue