twg_

Hi Everyone,

I have a route setup that uses /books/category/{slug} to get books based off a slug but I'm having an issue getting the data to return quickly.

Tables

/**
 * Books
 */
UUID
Name
ISBN
....


/**
 *  Categories
 */
UUID
Name
Slug
...


/**
 *  Book_Category
 */
UUID
Book_id (foreign)
Category_id (foreign)
...

I'm using the following in my controller to get the data but nothing is coming back.

public function getBooksByCategory($slug)
{
	$books = Book::with('related')
		->whereHas('categories', function ($query) use ($slug) {
			$query->where('category.slug', $slug);
		});
}

@snapey That is Livewire's pagination. If I leave the collection as is, I can paginate just fine. When I turn the collection into an array so that I can store it in a public variable in Livewire, since it doesn't support collections, I loose the pagination.

When I do setup everything like what's below, I get pagination but I can't get my select to work.

Http/Livewire/classes.php

<?php

namespace App\Http\Livewire;

use App\Models\Class;
use App\Models\Categories;
use Livewire\Component;
use Livewire\WithPagination;

class Classess extends Component
{
    use WithPagination;

    public $selectedCategory;

    public function updating($value)
    {
        $this->selectedCategory = $value;
    }

    public function mount($selectedCategory = 0)
    {
        $this->selectedCategory = $selectedCategory;
    }


    public function render()
    {

        $categories = Categories::all();
        $classes = Class::with('categories')->paginate(20);
        $selectedCategory = $this->selectedCategory;
        return view(
            'livewire.classes',
            compact('categories', 'classess', 'selectedCategory')
        );
    }

    public function paginationView()
    {
        return 'livewire/pagination';
    }
}

I've even tried making the data a public variable but to do that I then had to cast my collection to an array which displayed all fo the data fine and the category select worked. However pagination did not.

So I have everything working now but pagination since I had to cast my data to an array. Anyway to still create pagination?

@snapey So I was able to get my select saving to a public variable so that I could interact with it. Now my issue is how do I filter the data to only show those.

Forgot to mention this is what my select looks like on my page.

<select id="classesCategories" wire:click="searchCategory"
                    class="form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
                    @foreach($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>

I hate to sound so dumb but this is what I was doing but it's not working.

class Classes extends Component
{
	use With Pagination;

	public $searchCategory;

	public function updating()
	{
		dd($this->searchCategory);
	}

	public function render()
	{
		$categories = Categories::all();
		$classes = Class::with('categories')->paginate(20);
		return view('livewire.classes', compact('classes', 'categories'));
	}
}

When i run this, I get the following:

Unable to call component method. Public method [searchCategory] not found on component: [classes]

I have a page loading via livewire with pagination. I have a dropdown that has categories I need to use to filter the data being shown. How could I do this?

Hi Everyone,

I'm playing around with one of the Tailwind UI hero items and I'm trying to add a simple image switcher. The animation happens but only to the first image and only every 16 seconds. The first image will fade out and then back in.

Javascript

<script type="text/javascript">
	var slides = document.getElementById('slide').querySelectorAll('img');
	var slideDuration = 4;
	var slideSeconds = 0;
	slides.forEach(function(x){
  		x.style.animationDuration = slideDuration*x.length+"s";
  		x.style.animationDelay = slideSeconds+"s";
  		slideSeconds+=slideDuration;
	})
</script>

HTML/PHP

<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2" id="slide">
        @if(!is_null($data->homepage_image_01))
                <img class="" src="{{ asset('storage/' . $data->homepage_image_01) }}" alt="" />
        @endif
        @if(!is_null($data->homepage_image_02))
                <img class="" src="{{ asset('storage/' . $data->homepage_image_02) }}" alt="" />
        @endif
        @if(!is_null($data->homepage_image_03))
                <img class="" src="{{ asset('storage/' . $data->homepage_image_03) }}" alt="" />
        @endif
        @if(!is_null($data->homepage_image_04))
                <img class="" src="{{ asset('storage/' . $data->homepage_image_04) }}" alt="" />
        @endif
        @if(!is_null($data->homepage_image_05))
                <img class="" src="{{ asset('storage/' . $data->homepage_image_05) }}" alt="" />
        @endif
       	@if(!is_null($data->homepage_image_06))
         	<img class="" src="{{ asset('storage/' . $data->homepage_image_06) }}" alt="" />
	@endif
</div>

CSS/SCSS

#imageSwitching {
    >img {
        @apply h-full w-full object-cover;
        animation: slide 16s cubic-bezier(.8, .01, .55, .74) 0s infinite;
    }
}

@keyframes slide {
    0% {
        opacity: 0;
        z-index: 40;
        filter: grayscale(100%);
    }

    10% {
        opacity: 1;
        filter: grayscale(0);
    }

    90% {
        opacity: 1;
        filter: grayscale(0);
    }

    100% {
        opacity: 0;
        filter: grayscale(100%);
        z-index: -5;
    }
}

I'm having an issue with a BelongsTo that points to itself.

App/Models/Categories.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Categories extends Model
{
	public function getParent()
	{
		return $this->belongsTo(SELF::class, 'parent_id', 'id');
	}

	public function getChildren()
	{
		return $this->hasMany(SELF::class, 'parent_id', 'id');
	}
}

App/Nova/Category.php

<?php

namespace App\Nova;

class Category extends Resource
{
	public function fields(Request $request)
	{
		return [
			ID::make()->sortable(),
			BelongsTo::make('Parent Category', 'getParent', SELF::class)->nullable()
		];
	}
}

I keep getting an error of Call to undefined method App\Nova\Category::fieldsMethod().