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

Use `x-spread` for ingredients picker JS

This commit is contained in:
Christopher C. Wells 2021-01-23 08:52:51 -08:00 committed by Christopher Charbonneau Wells
parent e335c249d8
commit ff829d9d8d
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
resources/views/components/ingredient-picker.blade.php
View File

@ -1,4 +1,4 @@
<div x-data="{ searching: false, results: [] }">
<div x-data="picker()">
<div>
<div>
<x-inputs.input type="hidden"
@ -10,16 +10,12 @@
value="{{ $defaultName ?? '' }}"
placeholder="Search..."
autocomplete="off"
x-on:input.debounce.400ms="if ($event.target.value != '') {
fetch('{{ route('ingredient-picker.search') }}?term=' + $event.target.value)
.then(response => response.json())
.then(data => { results = data; searching = true; }); }"
x-on:focusout.debounce.200ms="searching = false;"
x-ref="ingredients_name" />
x-ref="ingredients_name"
x-spread="search" />
</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.value = selected.dataset.value; $refs.ingredients.value = selected.dataset.id; searching = false; }">
x-spread="ingredient">
<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"
@ -44,3 +40,39 @@
</div>
</div>
</div>
@once
@push('scripts')
<script type="text/javascript">
let picker = () => {
return {
searching: false,
results: [],
search: {
['@input.debounce.400ms']($event) {
if ($event.target.value !== '') {
fetch('{{ route('ingredient-picker.search') }}?term=' + $event.target.value)
.then(response => response.json())
.then(data => { this.results = data; this.searching = true; });
}
},
['@focusout.debounce.200ms']() {
this.searching = false;
}
},
ingredient: {
['@click']($event) {
let selected = $event.target;
if (selected.dataset.id) {
this.$refs.ingredients_name.value = selected.dataset.value;
this.$refs.ingredients.value = selected.dataset.id;
this.searching = false;
}
}
}
}
}
</script>
@endpush
@endonce

2
resources/views/layouts/app.blade.php
View File

@ -50,6 +50,6 @@
</main>
</div>
@isset($scripts) {{ $scripts }} @endisset
@stack('scripts')
</body>
</html>