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

Add basic tags front end support

This commit is contained in:
Christopher C. Wells 2021-02-27 05:53:52 -08:00 committed by Christopher Charbonneau Wells
parent 1b1260bece
commit 794c0712bc
6 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/FoodController.php
View File

@ -19,7 +19,7 @@ class FoodController extends Controller
*/
public function index(): View
{
return view('foods.index');
return view('foods.index')->with('tags', Food::getTagTotals());
}
/**

2
app/Http/Controllers/RecipeController.php
View File

@ -27,7 +27,7 @@ class RecipeController extends Controller
*/
public function index(): View
{
return view('recipes.index');
return view('recipes.index')->with('tags', Recipe::getTagTotals());
}
/**

6
app/Models/Traits/Ingredient.php
View File

@ -43,11 +43,7 @@ trait Ingredient
public static function getTagTotals(string $locale = null): Collection {
$locale = $locale ?? app()->getLocale();
return Tag::query()->join('taggables', 'taggables.tag_id', '=', 'id')
->select([
'id',
"name->{$locale} as name",
DB::raw('count(*) as total')
])
->select(['id', 'name', DB::raw('count(*) as total')])
->where('taggables.taggable_type', '=', static::class)
->groupBy('id')
->orderBy("name->{$locale}")

50
resources/views/components/search-view.blade.php
View File

@ -1,22 +1,35 @@
<div x-data="searchView()" x-init="loadMore()">
<x-inputs.input type="text"
name="search"
placeholder="Search..."
autocomplete="off"
class="w-full mb-4"
@input.debounce.400ms="search($event)" />
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
{{ $results }}
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
<div class="md:w-1/4">
<x-inputs.input type="text"
name="search"
placeholder="Search..."
autocomplete="off"
class="w-full mb-4"
@input.debounce.400ms="search($event)" />
<details open>
<summary>Tags</summary>
@foreach($tags as $tag)
<a class="m-1 bg-gray-200 hover:bg-gray-300 rounded-full px-2 font-bold text-sm leading-loose cursor-pointer"
x-on:click="filterByTag($event);">{{ $tag->name }}</a>
@endforeach
</details>
</div>
<div class="md:w-3/4">
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
{{ $results }}
</div>
<x-inputs.button
class="text-xl mt-4"
color="blue"
type="button"
x-show="morePages"
x-cloak
@click.prevent="loadMore()">
Load more
</x-inputs.button>
</div>
</div>
<x-inputs.button
class="text-xl mt-4"
color="blue"
type="button"
x-show="morePages"
x-cloak
@click.prevent="loadMore()">
Load more
</x-inputs.button>
</div>
@once
@ -61,6 +74,9 @@
else {
this.loadMore();
}
},
filterByTag(e) {
console.log(e.target.text);
}
}
}

2
resources/views/foods/index.blade.php
View File

@ -15,7 +15,7 @@
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<x-search-view :route="route('api:v1:foods.index')">
<x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
<x-slot name="results">
<template x-for="food in results" :key="food">
<div class="p-1 border-2 border-black font-sans">

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

@ -15,7 +15,7 @@
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<x-search-view :route="route('api:v1:recipes.index')">
<x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
<x-slot name="results">
<template x-for="recipe in results" :key="recipe">
<div class="p-1 border-2 border-black font-sans">