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->configureRateLimiting();
|
||||||
|
|
||||||
$this->routes(function () {
|
$this->routes(function () {
|
||||||
Route::middleware('api')
|
|
||||||
->namespace($this->namespace)
|
|
||||||
->group(base_path('routes/api.php'));
|
|
||||||
|
|
||||||
Route::middleware('web')
|
Route::middleware('web')
|
||||||
->namespace($this->namespace)
|
->namespace($this->namespace)
|
||||||
->group(base_path('routes/web.php'));
|
->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 -->
|
<!-- Ingredients -->
|
||||||
<h3 class="pt-2 mb-2 font-extrabold">Ingredients</h3>
|
<h3 class="pt-2 mb-2 font-extrabold">Ingredients</h3>
|
||||||
<div x-data="{ingredients: 0}">
|
<div x-data="{ ingredients: 0 }">
|
||||||
@foreach($recipe->foodAmounts as $foodAmount)
|
{{-- @foreach($recipe->foodAmounts as $foodAmount)--}}
|
||||||
<div class="flex flex-row space-x-4 mb-4">
|
{{-- <div class="flex flex-row space-x-4 mb-4">--}}
|
||||||
<x-inputs.input type="text"
|
{{-- <x-inputs.input type="text"--}}
|
||||||
name="foods_amount[]"
|
{{-- name="foods_amount[]"--}}
|
||||||
size="5"
|
{{-- size="5"--}}
|
||||||
:value="old('foods_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />
|
{{-- :value="old('foods_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />--}}
|
||||||
<x-inputs.select name="foods_unit[]"
|
{{-- <x-inputs.select name="foods_unit[]"--}}
|
||||||
:options="$food_units"
|
{{-- :options="$food_units"--}}
|
||||||
:selectedValue="old('foods_unit.' . $loop->index, $foodAmount->unit)">
|
{{-- :selectedValue="old('foods_unit.' . $loop->index, $foodAmount->unit)">--}}
|
||||||
<option value=""></option>
|
{{-- <option value=""></option>--}}
|
||||||
</x-inputs.select>
|
{{-- </x-inputs.select>--}}
|
||||||
<livewire:food-picker :index="$loop->index"
|
{{-- <livewire:food-picker :index="$loop->index"--}}
|
||||||
:default-id="old('foods.' . $loop->index, $foodAmount->food->id)"
|
{{-- :default-id="old('foods.' . $loop->index, $foodAmount->food->id)"--}}
|
||||||
:default-name="old('foods_name.' . $loop->index, $foodAmount->food->name)" />
|
{{-- :default-name="old('foods_name.' . $loop->index, $foodAmount->food->name)" />--}}
|
||||||
<x-inputs.input type="text"
|
{{-- <x-inputs.input type="text"--}}
|
||||||
class="block"
|
{{-- class="block"--}}
|
||||||
name="foods_detail[]"
|
{{-- name="foods_detail[]"--}}
|
||||||
:value="old('foods_detail.' . $loop->index, $foodAmount->detail)" />
|
{{-- :value="old('foods_detail.' . $loop->index, $foodAmount->detail)" />--}}
|
||||||
</div>
|
{{-- </div>--}}
|
||||||
@endforeach
|
{{-- @endforeach--}}
|
||||||
<template x-for="i in ingredients + 1">
|
<template x-for="i in ingredients + 1">
|
||||||
<div class="flex flex-row space-x-4 mb-4">
|
<x-ingredient-picker index="1" />
|
||||||
<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>
|
</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++;">
|
<x-inputs.button type="button" class="ml-3" x-on:click="ingredients++;">
|
||||||
Add Ingredient
|
Add Ingredient
|
||||||
</x-inputs.button>
|
</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
|
<?php
|
||||||
|
|
||||||
use App\Http\Controllers\FoodController;
|
use App\Http\Controllers\FoodController;
|
||||||
|
use App\Http\Controllers\IngredientPickerController;
|
||||||
use App\Http\Controllers\JournalEntryController;
|
use App\Http\Controllers\JournalEntryController;
|
||||||
use App\Http\Controllers\RecipeController;
|
use App\Http\Controllers\RecipeController;
|
||||||
use Illuminate\Support\Facades\Route;
|
use Illuminate\Support\Facades\Route;
|
||||||
|
|
@ -34,4 +35,8 @@ Route::get('/journal-entries/{journalEntry}/delete', [JournalEntryController::cl
|
||||||
->middleware(['auth'])
|
->middleware(['auth'])
|
||||||
->name('journal-entries.delete');
|
->name('journal-entries.delete');
|
||||||
|
|
||||||
|
Route::get('/ingredient-picker/search', [IngredientPickerController::class, 'search'])
|
||||||
|
->middleware(['auth'])
|
||||||
|
->name('ingredient-picker.search');
|
||||||
|
|
||||||
require __DIR__.'/auth.php';
|
require __DIR__.'/auth.php';
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue