Is it true, in terms of architecture I did?
I'm not sure if I can use model access in section view.
Do you need to change something.
<!-- Navigation Links -->
<x-section :sectionNumber="1"></x-section>
section.blade.php
#php
$sections = \App\Models\BasicSection::all()->where('section_number', '=', $sectionNumber);
#endphp
<div class="hidden sm:flex sm:items-center sm:ml-10">
<x-dropdown :href="route('dashboard')" :active="request()->routeIs('dashboard')">
<x-slot name="trigger">
<button
class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
{{ __($sectionNumber) }}
<div class="ml-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"/>
</svg>
</div>
</button>
</x-slot>
<x-slot name="content">
#foreach($sections as $section)
<x-dropdown-link :href="route('dashboard')">
{{ $section->name }}
</x-dropdown-link>
#endforeach
</x-slot>
</x-dropdown>
</div>
Related
I'm building a full page Livewire component that filters Meilisearch results.
When I check one of the filters the remaning checkboxes disappear, and I am struggling to understand why. I followed a tutorial to figure out how to build the bulk of the component and in the tutorial the behaviour didn't occur. I've deconstructed the component to the bare minimum and the behaviour happens as soon as I wire up the checkboxes.
Here is the component:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\CourseDate;
use App\Models\Course;
class CourseBrowser extends Component
{
public $queryFilters = [];
public $priceRange = [
'min' => null,
'max' => null
];
public function mount()
{
$this->queryFilters = [
'venue' => [],
'type' => [],
'category' => [],
'days' => [],
'supplier' => []
];
}
public function render()
{
$search = CourseDate::search(
'',
function ($meilisearch, string $query, array $options) {
$filters = collect($this->queryFilters)
->filter(fn ($filter) => !empty($filter))
->recursive()
->map(function ($value, $key) {
return $value->map(fn ($value) => $key . ' = "' . $value . '"');
})
->flatten()
->join(' AND ');
$options['facets'] = ['venue', 'category', 'type', 'supplier', 'days'];
$options['filter'] = null;
if ($filters) {
$options['filter'] = $filters;
}
if ($this->priceRange['max']) {
$options['filter'] .= (isset($options['filter']) ? ' AND ' : '') . 'price <= ' . $this->priceRange['max'];
}
return $meilisearch->search($query, $options);
}
)->raw();
$coursedates = CourseDate::find(collect($search['hits'])->pluck('id'));
$minPrice = Course::all()->min('price');
$maxPrice = Course::all()->max('price');
$this->priceRange['min'] = $this->priceRange['min'] ?: $minPrice;
$this->priceRange['max'] = $this->priceRange['max'] ?: $maxPrice;
return view('livewire.course-browser')
->with(
[
'coursedates' => $coursedates,
'filters' => $search['facetDistribution'],
'minPrice' => $minPrice,
'maxPrice' => $maxPrice,
]
);
}
}
Here is the Blade view. I had originally posted an edited section showing just the checkboxes but I have edited this question to show the view in its entirety.
<div>
<div class="mb-4 text-gray-500">
Home / Courses
</div>
<div class="align-center mt-8 mb-10 flex items-center justify-between">
<div class="text-3xl font-bold">
All Courses
</div>
</div>
<div class="grid w-full grid-cols-4 gap-6">
<div class="col-span-1 rounded-sm bg-white shadow">
<div class="space-y-2 px-6 py-6">
<h6 class="text-sm font-bold uppercase">Filters</h6>
<hr class="mt-4 mb-6 border-gray-200 pb-2">
<h6 class="text-sm font-bold uppercase">Price </h6>
<div class="flex gap-1">
<input type="range"
min="{{ $minPrice }}"
max="{{ $maxPrice }}"
step="25"
class="accent-pink-700"
wire:model="priceRange.max" />
<span class="font-sm">
(£{{ $priceRange['max'] }})
</span>
</div>
#foreach ($filters as $title => $filter)
<h6 class="pt-2 text-sm font-bold uppercase">{{ Str::title($title) }}</h6>
#foreach ($filter as $option => $count)
<div wire:ignore.self
class="flex items-center space-x-2">
<input type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-sm text-pink-600 focus:ring-0 focus:ring-offset-0"
wire:model="queryFilters.{{ $title }}"
id="{{ $title }}_{{ strtolower($option) }}"
value="{{ $option }}">
<label class="text-sm"
for="{{ $title }}_{{ strtolower($option) }}">{{ $option }} ({{ $count }})</label>
</div>
#endforeach
#endforeach
</div>
</div>
<div class="col-span-3">
<h6 class="text-md my-4 mb-4">{{ $coursedates->count() }} {{ Str::plural('course', $coursedates) }} matching your filters</h6>
#forelse ($coursedates as $coursedate)
<div wire:loading.class="opacity-50"
class="relative mb-6 w-full rounded-sm bg-white shadow">
<span class="absolute top-2 left-2 rounded bg-pink-800 px-3 py-1 font-bold text-white">{{ $coursedate->course->category->name }}</span>
<span class="absolute top-2 right-2 rounded bg-pink-600 px-3 py-1 font-bold text-white">{{ $coursedate->course->supplier->name }}</span>
<a href="{{ route('course.show', $coursedate->course->slug) }}">
<img src="{{ asset('storage/courses/images/' . $coursedate->course->title_image) }}"
alt="{{ $coursedate->course->slug }}"
class="h-40 w-full object-cover">
</a>
<div class="px-6 py-4">
<h6 class="mb-2 text-lg font-bold">{{ $coursedate->course->name }} </h6>
<p class="mb-6 text-sm leading-tight">{{ $coursedate->course->tagline }}</p>
{{-- Pills Container --}}
<div class="flex">
<div class="mr-1 flex items-center rounded bg-pink-300 font-bold text-pink-800">
<div class="flex h-full items-center rounded-l bg-pink-400 px-2 py-1">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-4 w-4 text-pink-200">
<path d="M4.5 3.75a3 3 0 00-3 3v.75h21v-.75a3 3 0 00-3-3h-15z" />
<path fill-rule="evenodd"
d="M22.5 9.75h-21v7.5a3 3 0 003 3h15a3 3 0 003-3v-7.5zm-18 3.75a.75.75 0 01.75-.75h6a.75.75 0 010 1.5h-6a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h3a.75.75 0 000-1.5h-3z"
clip-rule="evenodd" />
</svg>
</div>
<div class="flex h-full items-center rounded bg-pink-300 px-3 py-1">
£{{ $coursedate->course->price }}
</div>
</div>
<div class="mr-1 flex items-center rounded bg-pink-500 font-bold text-white">
<div class="flex h-full items-center rounded-l bg-pink-600 px-2 py-1">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="h-4 w-4">
<path fill-rule="evenodd"
d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd" />
</svg>
</div>
<div class="flex h-full items-center rounded bg-pink-500 px-3 py-1">
{{ $coursedate->venue->city }}
</div>
</div>
#foreach ($coursedate->actualdates as $dates)
#if ($coursedate->course->number_of_days > 1)
<div class="mr-1 flex items-center rounded bg-pink-200 font-bold text-pink-800">
<div class="flex h-full items-center gap-1 rounded-l bg-pink-200 px-2 py-1 text-xs">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="inline-flex h-5 w-5">
<path d="M12.75 12.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM7.5 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM8.25 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.75 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM10.5 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM12.75 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM14.25 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM15 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM16.5 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM15 12.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM16.5 13.5a.75.75 0 100-1.5.75.75 0 000 1.5z" />
<path fill-rule="evenodd"
d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
clip-rule="evenodd" />
</svg>
{{ $dates->label }}
</div>
<div class="flex h-full items-center rounded-r bg-pink-700 px-2 py-1 text-pink-100">
{{ $dates->date->format('jS M Y') }}
</div>
</div>
#else
<div class="mr-1 flex items-center rounded bg-pink-200 text-sm font-bold text-pink-800">
<div class="flex h-full rounded-l bg-pink-200 py-1 px-2 text-sm font-bold text-pink-800">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
class="inline-flex h-5 w-5">
<path d="M12.75 12.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM7.5 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM8.25 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.75 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM10.5 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM12.75 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM14.25 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM15 17.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM16.5 15.75a.75.75 0 100-1.5.75.75 0 000 1.5zM15 12.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM16.5 13.5a.75.75 0 100-1.5.75.75 0 000 1.5z" />
<path fill-rule="evenodd"
d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
clip-rule="evenodd" />
</svg>
</div>
<div class="flex h-full items-center rounded-r bg-pink-700 px-2 py-1 text-pink-100"> {{ $dates->date->format('jS M Y') }} </div>
</div>
#endif
#endforeach
</div>
<div class="mt-6 mb-4">
</div>
</div>
</div>
#empty
No Course Dates to show
#endforelse
</div>
</div>
</div>
The component in itself works fine. But as you can see in the gif below, the non selected checkboxes disappear, so I cannot apply multiple filters.
I suspect the problem lies in the way I'm storing the filters in the array but I can't see the woods for the trees at the moment. The filtering itself currently works, and any attempt to change the format of the array results in it not working at all.
Thanks in advance.
After some perusal of the Meilisearch docs:
facetDistribution contains an object for every given facet. For each of these facets, there is another object containing all the different values and the count of matching documents. Note that zero values will not be returned: if there are no romance movies matching the query, romance is not displayed.
That suggests that the behaviour is normal 😳
On updating the search results, the facetDistribution array is updated with the filters belonging to the results that have been returned, and doesn't retain the ones with a zero value.
Before filtering:
"facetDistribution":{
"category":{
"Hair":8
},
"days":{
"1":4,
"2":4
},
"supplier":{
"Matrix":8
},
"type":{
"In Person":8
},
"venue":{
"Colchester":2,
"Ipswich":1,
"Norwich":1,
"Peterborough":1,
"Romford":3
}
},
After filtering:
"facetDistribution":{
"category":{
"Hair":2
},
"days":{
"1":1,
"2":1
},
"supplier":{
"Matrix":2
},
"type":{
"In Person":2
},
"venue":{
"Colchester":2
}
},
To be honest, I'd expected to retain the filters with a value of zero so I could re-filter and find courses that were present in Colchester OR Norwich, for example. In fact the tutorial I learned the process from appeared to show this behaviour.
I'm going to rewatch it again in case I misunderstood something!
Or perhaps the older version of Meilisearch being used in the tutorial allowed this?
There are certain bugs in Livewire, and this is also one of them.
Try enclosing the each checkbox in a div.
<div class="">
<input type="checkbox" wire:model="queryFilters.{{ $title }}"
id="{{ $title }}_{{ strtolower($option) }}"
value="{{ $option }}">
</div>
If the issue still presist, add wire:ignore.self to container
<div class="" wire:ignore.self>
......
</div>
I've dumped the contents of the array as it's being filled up on the page
Each time you check a box it adds the value into the array. Obviously In the case of the Venue group of checkboxes I can't add a second value because the unselected ones disappear. But what I'd expect is an array that looks like this for example:
$this->queryFilters = [
'venue' => ['Norwich', 'Peterborough'],
'type' => ['In Person'],
'category' => ['Hair'],
'days' => [],
'supplier' => []
];
I'd then map through the values and build the filter string for Mielesearch, which happens in the closure futher down.
"venue = "Norwich" AND venue = "Peterborough" AND type = "In Person" AND category = "Hair""
I'm trying to change the navigation box a bit so that instead of nav-link it's a dropdown and a dropdown-link. I seem to be able to do this, but I can't turn on the section highlight in the navigation if it's selected. This is how I changed the navigation-links:
<!-- Navigation Links -->
<div class="hidden sm:flex sm:items-center sm:ml-6">
<x-dropdown :href="route('dashboard')" :active="request()->routeIs('dashboard')">
<x-slot name="trigger">
<button
class="flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out">
{{ __('Dashboard') }}
<div class="ml-1">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"/>
</svg>
</div>
</button>
</x-slot>
<x-slot name="content">
<x-dropdown-link :href="route('dashboard')">
{{ __('Dashboard') }}
</x-dropdown-link>
<x-dropdown-link :href="route('dashboard')">
{{ __('Dashboard') }}
</x-dropdown-link>
<x-dropdown-link :href="route('dashboard')">
{{ __('Dashboard') }}
</x-dropdown-link>
</x-slot>
</x-dropdown>
</div>
This is how I am trying to change the dropdown.blade.php file. Just trying to drag enable enable from nav-link.blade.php file.
#props(['align' => 'right', 'width' => '48', 'contentClasses' => 'py-1 bg-white', 'active'])
#php
switch ($align) {
case 'left':
$alignmentClasses = 'origin-top-left left-0';
break;
case 'top':
$alignmentClasses = 'origin-top';
break;
case 'right':
default:
$alignmentClasses = 'origin-top-right right-0';
break;
}
switch ($width) {
case '48':
$width = 'w-48';
break;
}
$classes = ($active ?? false)
? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out'
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out';
#endphp
<div class="relative" x-data="{ open: false }" #click.outside="open = false" #close.stop="open = false" {{ $attributes->merge(['class' => $classes]) }} >
<div #click="open = ! open">
{{ $trigger }}
</div>
<div x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="transform opacity-0 scale-95"
x-transition:enter-end="transform opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute z-50 mt-2 {{ $width }} rounded-md shadow-lg {{ $alignmentClasses }}"
style="display: none;"
#click="open = false">
<div class="rounded-md ring-1 ring-black ring-opacity-5 {{ $contentClasses }}">
{{ $content }}
</div>
</div>
</div>
As I see it, according to the developer tool in the browser, in this line
<div class="relative" x-data="{ open: false }" #click.outside="open = false" #close.stop="open = false" {{ $attributes->merge(['class' => $classes]) }} >
I do not apply
{{ $attributes->merge(['class' => $classes]) }}
Rather, it is applied, but somehow strange, it just adds an href link to the div properties.
<div class="relative" x-data="{ open: false }" #click.outside="open = false" #close.stop="open = false" href="http://localhost/dashboard">
Please tell me what I'm doing wrong.
I've built a nested comment system and it works fine, but I have a problem.
when I want to show the comments, it runs too many queries. for example if I have 10 comments and two replies each, laravel debugger shows 40+ queries, and I want to reduce them, here is my code :
Query
$comments = $post->mentions()->with(['author', 'reply'])->get();
Relationship in Post.php Model
public function mentions()
{
return $this->hasMany(Comment::class, 'post_id')->where('approved',1)->where('parent_id',0);
}
Comments Relationships
public function author()
{
return $this->belongsTo(User::class, 'author_id')->select('id', 'name', 'avatar', 'role');
}
public function reply()
{
return $this->hasMany(Comment::class, 'parent_id')->where('approved', 1);
}
Blade File
#foreach ($comments as $comment)
<div x-data="{reply:false}" class="break-words bg-white border-2 rounded-lg p-4 my-5" id="answer-{1}">
<div wire:ignore class="flex justify-between items-center">
<div class="flex items-center">
<img class="rounded-full w-20 border-4 #if ($comment->author->role == 'administrator') border-blue-500 #else border-gray-500 #endif " src="{{ $comment->author->avatar }}"
alt="{{ $comment->author->name }}">
<div>
<div class="flex pr-3">
<a href="/#username"
class="font-bold text-lg text-gray-800 hover:text-gray-900">{{ $comment->author->name }}</a>
#if ($comment->author->role == 'administrator')
<img class="w-5 mr-1" src="/img/verified.svg" alt="" title="admin">
#endif
</div>
<p class="font-light cursor-default text-gray-700 pt-1 pr-3">
{{ $comment->created_at->diffForHumans() }}</p>
</div>
</div>
<svg #click="reply = true" xmlns="http://www.w3.org/2000/svg" class="h-6 cursor-pointer hover:text-rose-600"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
</svg>
</div>
<div class="comment_body leading-8 pt-3 text-gray-800 cursor-default">
<div wire:ignore>
{!! nl2br($comment->body) !!}
</div>
<div x-cloak x-show="reply">
<form class="py-3" wire:submit.prevent="SubmitComment({{ $comment->id }})">
<textarea wire:model.defer="commentBody"
class="w-full focus:ring-0 bg-zinc-200 border shadow focus:bg-zinc-100 mt-3 p-4 rounded-lg"
id="editor" rows="6" placeholder=""></textarea>
#error('commentBody') <p class="text-red-600 mt-1 text-sm">{{ $message }}</p>
#enderror
<div class="flex mt-3">
<div #click="reply = false"
class="bg-red-600 rounded-lg ml-3 text-white px-3 py-2 cursor-pointer">
Cancel
</div>
<button wire:loading.remove wire:target="SubmitComment" type="submit"
class="inline-block bg-gray-800 hover:bg-gray-900 transition duration-300 px-3 py-2 text-white rounded-md">
Send
</button>
<button wire:loading="" wire:target="SubmitComment" type="button"
class="flex bg-gray-800 hover:bg-gray-900 transition duration-300 px-3 py-2 text-white rounded-md"
disabled>
<span class="flex justify-center">
<svg class="animate-spin w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
</span>
</button>
</div>
</form>
</div>
<div class="my-3">
#include('partials.comment',['comments'=>$comment->reply])
</div>
</div>
</div>
#endforeach
You can use dot seperator to get the nested relationship
$comments = $post->with(['mentions.author','mentions.reply'])
->first()
->mentions;
Weird issue with my Livewire: the validation, when I send a file, always fails on the first time. If I have the criteria that it must be a pdf, I will put the PDF, submit the form, get a message telling me I have the wrong format, I won't change anything, resubmit and it will go through with no issue.
Does anyone knows why it might be happening?
<?php
namespace App\Http\Livewire\Branch\Documents;
use App\Models\BranchDocument;
use Livewire\Component;
use Livewire\WithFileUploads;
class Upload extends Component
{
use WithFileUploads;
public BranchDocument $document;
public $file;
public $saved = false;
public function render()
{
return view('livewire.branch.documents.upload');
}
public function save() {
$this->validate([
'file' => 'mimes:jpg,bmp,png,pdf|max:10240', // 1MB Max
]);
$this->document->file = $this->file;
$this->saved = true;
}
}
<div x-data="{ open: false }">
<li class="#if(!$saved) hover:bg-gray-100 py-2 px-2 rounded cursor-pointer #endif" #click="open = true">
<div class="relative">
<div class="relative flex space-x-3">
<div class="min-w-0 flex-1 flex justify-between space-x-4 items-center">
<div>
<p class="text-sm text-porange">{{ $document->document_type->title }}#if($saved)<span class="text-sm text-gray-600"> - {{ __('Document sent!') }}</span>#endif</p>
<p class="text-xs text-gray-600">{{ $document->created_at->diffForHumans() }}</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" >
#if(!$saved)
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
#else
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
#endif
</svg>
</div>
</div>
</div>
</li>
#if(!$saved)
<div x-show="open" class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div #click.away="open = false" class="inline-block align-bottom bg-white rounded-lg px-4 py-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div>
<div class="text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
{{ __('Upload ":title"', ['title' => $document->document_type->title])}}
</h3>
</div>
</div>
<form wire:submit.prevent="save">
<input type="file" wire:model="file" class="file-input-business block mx-auto mt-4"/>
#error('file') <span class="error">{{ $message }}</span> #enderror
<div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
<button type="submit" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-porange text-base font-medium text-white hover:bg-porange-darker focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:col-start-2 sm:text-sm">
{{ __('Send')}}
</button>
<button #click="open = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-porange sm:mt-0 sm:col-start-1 sm:text-sm">
{{ __('Cancel')}}
</button>
</div>
</form>
</div>
</div>
</div>
#endif
</div>
Thank you!
Is the file uploaded before you hit submit? If not then the file is null hence the wrong format error. Check its value in the save method before validation. You can also use wire.loading on a div to determine if the file is still uploading.
You may also run into issues with built in artisan development server (the one you start with php artisan serve command). It has different limitations to a 'real' server - upload file size, formats, etc.
im doing the Laravel 8 from Scratch Tutorial but get the Error "Syntax error, unexpected 'endif' (T_ENDIF)".
Cant find where the problem is because there is not even a "#if" statement in the file which is throwing the error.
The file is the header for filtering posts.
It seems the dropdown component which is responsible for selecting a post category is the reason for the problem, because everything workes fine when i comment this out.
I have shared the Error Code on flareapp.io
Dropdown Component:
#props(['trigger'])
<div x-data="{ show:false }" #click.away="show = false">
<div #click="show = ! show">
{{ $trigger }}
</div>
<div x-show="show" class="py-2 absolute bg-gray-100 mt-2 rounded-xl w-32 z-50" style="display: none">
{{ $slot }}
</div>
</div>
Dropdown-item Component:
#props(['active' => false])
#php
$classes = 'block text-left px-3 text-sm loading-6 hover:bg-blue-500 focues:bg-blue-500 hover:text-white focus:text-white';
if ($active) {
$classes += 'bg-blue-500 text-white';
}
#endphp
<a {{ $attributes(['class' => $classes]) }}>
{{ $slot }}
</a>
Posts header:
<header class="max-w-xl mx-auto mt-20 text-center">
<h1 class="text-4xl">
Latest <span class="text-blue-500">Laravel From Scratch</span> News
</h1>
<h2 class="inline-flex mt-2">By Lary Laracore <img src="./images/lary-head.svg" alt="Head of Lary the mascot"></h2>
<p class="text-sm mt-14">
Another year. Another update. We're refreshing the popular Laravel series with new content.
I'm going to keep you guys up to speed with what's going on!
</p>
<div class="space-y-2 lg:space-y-0 lg:space-x-4 mt-8">
<!-- Category -->
<div class="relative lg:inline-flex bg-gray-100 rounded-xl">
<x-dropdown>
<x-slot name="trigger">
<button class="py-2 pl-3 pr-9 text-sm font-semibold w-full lg:w-32 text-left flex lg:inline-flex">
{{ isset($currentCategory) ? ucwords($currentCategory->name) : 'Categories' }}
<svg class="transform -rotate-90 absolute pointer-events-none" style="right: 12px;" width="22"
height="22" viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd">
<path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
</path>
<path fill="#222"
d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z"></path>
</g>
</svg>
</button>
</x-slot>
<x-dropdown-item href="/blog/" :active="request()->routeIs(" none")">
All
</x-dropdown-item>
#foreach ($categories as $category)
<x-dropdown-item href="/blog/categories/{{ $category->slug }}" :active="request()->is("
categories/{$category->slug}")"
>
{{ ucwords($category->name) }}
</x-dropdown-item>
#endforeach
</x-dropdown>
</div>
<!-- Other Filters -->
<div class="relative flex lg:inline-flex items-center bg-gray-100 rounded-xl">
<select class="flex-1 appearance-none bg-transparent py-2 pl-3 pr-9 text-sm font-semibold">
<option value="category" disabled selected>Other Filters
</option>
<option value="foo">Foo
</option>
<option value="bar">Bar
</option>
</select>
{{-- ERROR THROWN IN NEXT LINE --}}
<svg class="transform -rotate-90 absolute pointer-events-none" style="right: 12px;" width="22" height="22"
viewBox="0 0 22 22">
<g fill="none" fill-rule="evenodd">
<path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z">
</path>
<path fill="#222" d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z">
</path>
</g>
</svg>
</div>
<!-- Search -->
<div class="relative flex lg:inline-flex items-center bg-gray-100 rounded-xl px-3 py-2">
<form method="GET" action="#">
<input type="text" name="search" placeholder="Find something"
class="bg-transparent placeholder-black font-semibold text-sm">
</form>
</div>
</div>
</header>
Try this
#foreach ($categories as $category)
<x-dropdown-item href="/blog/categories/{{ $category->slug }}" :active="request()->is('categories/' . $category->slug)">
{{ ucwords($category->name) }}
</x-dropdown-item>
#endforeach