Member Since 2 Months Ago
660 experience to go until the next level!
In case you were wondering, you earn Laracasts experience when you:
Earned once you have completed your first Laracasts lesson.
Earned once you have earned your first 1000 experience points.
Earned when you have been with Laracasts for 1 year.
Earned when you have been with Laracasts for 2 years.
Earned when you have been with Laracasts for 3 years.
Earned when you have been with Laracasts for 4 years.
Earned when you have been with Laracasts for 5 years.
Earned when at least one Laracasts series has been fully completed.
Earned after your first post on the Laracasts forum.
Earned once 100 Laracasts lessons have been completed.
Earned once you receive your first "Best Reply" award on the Laracasts forum.
Earned if you are a paying Laracasts subscriber.
Earned if you have a lifetime subscription to Laracasts.
Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.
Earned once you have achieved 500 forum replies.
Earned once your experience points passes 100,000.
Earned once your experience points hits 10,000.
Earned once 1000 Laracasts lessons have been completed.
Earned once your "Best Reply" award count is 100 or more.
Earned once your experience points passes 1 million.
Earned once your experience points ranks in the top 50 of all Laracasts users.
Earned once your experience points ranks in the top 10 of all Laracasts users.
Replied to Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)
I get it. I did it the other way around :-) I'll let you know when I redo it. Thanks for the clarification.
Replied to Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)
Where should I write this?
//your data is not going to line up properly unless you use normal table tags and rows. You can also try Tailwind's grids
@foreach ($vacancies as $vacancy)
<tr class="bg-white">
<td class="YOUR CLASSES">
{{ $vacancy->id }}
</td>
<td class="YOUR CLASSES">
{{ $vacancy->title }}
</td>
<!-- other table cells as needed -->
<td>
<div class="px-6 py-2 align-middle bg-gray-100 rounded">
<div class="flex justify-evenly">
@can('manage users vacancies')
<button wire:click="editVacancy({{ $vacancy->id }})">
<!--this calls the editVacancy method
in your current component which will
trigger your secondary component -->
......
</button>
<!-- other buttons with other methods as needed -->
@endcan
</div>
</div>
</td>
</tr>
@endforeach
If we write the code in index.blade.php, where do we specify that we want to use the VacancyItem component?
Replied to Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)
and I use app.blade.php in resources/views/vacancies/index.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Vacancies') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div class="p-6 sm:px-20 bg-white border-b border-gray-200">
@cannot('manage users vacancies')
<x-jet-button class="mb-10" href='{{ route("vacancies.create") }}'>Добавить вакансию</x-jet-button>
@endcannot
<div class="sm:flex sm:flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
@livewire('vacancies')
</div>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
I gave up using the table because livewire does not work correctly with components that have the "tr" tag
Replied to Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)
Got it. Thank you. That's a lot of stuff. I'll look into it. I tested the pagination. Forgot to change :-) I will let you know when I do it.
Replied to Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)
routes.web.php
<?php
use App\Http\Controllers\PlanController;
use App\Http\Controllers\TemplateController;
use App\Http\Controllers\VacancyController;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('welcome');
})->name('home');
Route::middleware(['auth:sanctum', 'verified'])->group(function () {
Route::view('/dashboard', 'dashboard')->name('dashboard');
Route::resource('vacancies', VacancyController::class);
Route::get('/templates/{template}/{vacancy?}', [TemplateController::class, 'show'])->name('templates.show');
Route::resource('plans', PlanController::class);
});
views.layouts.app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
@livewireStyles
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
@livewire('navigation-dropdown')
<!-- Page Heading -->
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
@stack('modals')
@livewireScripts
</body>
</html>
App.Http.Livewire.Vacancies.php
<?php
namespace App\Http\Livewire;
use App\Models\Vacancy;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
//use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Livewire\WithPagination;
class Vacancies extends Component
{
use WithPagination;
public $successMessage;
private $user;
protected $listeners = [
'refreshVacancyComponent' => '$refresh',
'renderSuccessMessage',
];
public function mount() {
$this->user = $user = auth()->user();
}
public function hydrate() {
$this->user = $user = auth()->user();
}
public function renderSuccessMessage($message)
{
$this->successMessage = $message;
}
/**
* @return Application|Factory|View
*/
public function render()
{
if ($this->user->can('manage users vacancies')) {
$vacancies = Vacancy::paginate(1);
} else {
$vacancies = Vacancy::where('user_id', auth()->user()->id)->latest()->paginate(20);
}
return view('livewire.vacancies.index', [
'vacancies' => $vacancies,
]);
}
}
resources/views/livewire/vacancies/index.blade.php
<div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@if (count($vacancies) > 0)
@if ($successMessage)
<x-messages.success trigger="successMessage" class="mb-5">
{{ $successMessage }}
</x-messages.success>
@endif
<div class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">
<div class="w-full md:table" x-data="{ isVacancyShowModalVisible: false }">
<div class="hidden md:visible md:table-row">
<div
class="table-cell px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase bg-gray-50">
№ п/п
</div>
<div
class="table-cell px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase bg-gray-50">
Название
</div>
<div
class="table-cell px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase bg-gray-50">
Срок подписки
</div>
<div
class="table-cell px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase bg-gray-50">
Дата создания
</div>
<div class="table-cell px-6 py-3 bg-gray-50"></div>
</div>
@foreach ($vacancies as $vacancy)
@livewire('vacancy-item', compact('vacancy'), key($vacancy->id))
@endforeach
</div>
</div>
<div class="mt-8">
{{ $vacancies->links() }}
</div>
@else
<p>Вакансии не найдены</p>
@endif
</div>
Http/Livewire/VacancyItem.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
/**
* Class VacancyItem
* @package App\Http\Livewire
*/
class VacancyItem extends Component
{
public $vacancy;
public bool $confirmDelete;
public string $privileges;
public bool $isShowVacancy = false;
public function confirmVacancyDelete()
{
$this->emit('refreshVacancyComponent');
$this->confirmDelete = $this->vacancy->id;
}
public function redirectToVacancyEditForm()
{
return redirect()->to(route('vacancies.edit', ['vacancy' => $this->vacancy->id]));
}
public function cloneVacancy()
{
$clone = $this->vacancy->replicate()->fill([
'title' => 'Копия - ' . $this->vacancy->title
]);
$clone->save();
$this->emit('refreshVacancyComponent');
$this->emit('renderSuccessMessage', 'Вакансия успешно клонирована.');
}
public function removeVacancy()
{
$this->vacancy->delete();
$this->emit('refreshVacancyComponent');
$this->emit('renderSuccessMessage', 'Вакансия удалена успешно');
}
public function render()
{
return view('livewire.vacancies.vacancy-item');
}
}
resources/views/livewire/vacancies/vacancy-item.blade.php
<div class="mb-10 rounded hover:bg-gray-100 md:table-row">
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">№ п/п</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
{{ $vacancy->id }}
</div>
</div>
</div>
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">Название</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
{{ $vacancy->title }}
</div>
</div>
</div>
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">Срок подписки</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
@empty($vacancy->subscription)
Нет подписки
@else
{{ $vacancy->subscription }}
@endempty
</div>
</div>
</div>
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">Дата создания</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
{{ $vacancy->created_at->format('d.m.Y H:i:s') }}
</div>
</div>
</div>
<div class="px-6 py-2 align-middle bg-gray-100 rounded md:table-cell md:bg-transparent">
<div class="flex justify-evenly">
@can('manage users vacancies')
<button
wire:click="$toggle('isShowVacancy')"
class="inline-block p-1 mr-2 text-green-500 transition duration-500 ease-in-out border border-transparent rounded cursor-pointer hover:border-green-400 focus:bg-green-400 focus:outline-none focus:text-white"
title="Просмотреть вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</button>
@else
<button wire:click="cloneVacancy"
class="inline-block p-1 mr-2 text-green-500 transition duration-500 ease-in-out border border-transparent rounded cursor-pointer hover:border-green-400 focus:bg-green-400 focus:outline-none focus:text-white"
title="Клонировать вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
</button>
@endcan
<button wire:click="redirectToVacancyEditForm"
class="inline-block p-1 mr-2 text-indigo-500 transition duration-500 ease-in-out border border-transparent rounded cursor-pointer focus:text-white focus:outline-none focus:bg-indigo-400 hover:border-indigo-400"
title="Редактировать вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
</button>
@if ($confirmDelete == $vacancy->id)
<button wire:click="removeVacancy"
class="inline-block px-2 py-1 text-base font-semibold text-white transition duration-500 ease-in-out bg-red-400 border border-red-400 rounded cursor-pointer focus:text-red-400 focus:border-red-400 focus:outline-none focus:bg-transparent hover:border-red-500 hover:bg-red-500"
title="Подтвердите удаление">
Уверены?
</button>
@else
<button wire:click="confirmVacancyDelete" class="inline-block cursor-pointer
text-red-500 focus:text-white focus:outline-none focus:bg-red-400 p-1 border
border-transparent transition duration-500 ease-in-out
hover:border-red-400 rounded" title="Удалить вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24
24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
@endif
</div>
</div>
@include('vacancies.show-modal')
</div>
resources/views/vacancies/show-modal.blade.php
<x-jet-modal wire:model="isShowVacancy" maxWidth="full">
<div class="px-8">
<h2 class="prose prose-lg border-b inline-block mb-5">Данные о вакансии</h2>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">Работодатель</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->user->fullName }}
</p>
</div>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">Название</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->title }}
</p>
</div>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">Описание</h3>
<div class="mt-1 text-sm text-gray-600">
{{ $vacancy->description }}
</div>
</div>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">График работы</h3>
<div class="mt-1 text-sm text-gray-600">
{{ $vacancy->schedule->title }}
</div>
</div>
<div class="mb-5">
<div>
<h3 class="text-lg font-medium text-gray-900">Город вакансии</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->city->name }}
</p>
</div>
</div>
<h2 class="prose prose-lg border-b inline-block mb-5">Сведения о зарплате</h2>
<div class="mb-5 flex space-x-32">
<div>
<h3 class="text-lg font-medium text-gray-900">Минимальная зарплата</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->salary_min . ' ₽' }}
</p>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">Максимальная зарплата</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->salary_max . ' ₽' }}
</p>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">Период выплаты</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->period->title }}
</p>
</div>
</div>
<h2 class="prose prose-lg border-b inline-block mb-5">Требования к соискателю</h2>
<div class="mb-5">
<div class="mt-1 text-sm text-gray-600">
{{ $vacancy->requirements }}
</div>
</div>
<h2 class="prose prose-lg border-b inline-block mb-5">Дополнительные льготы</h2>
<div class="mb-5">
<ul class="mt-1 text-sm text-gray-600">
@if($vacancy->privilegeNames)
<p class="mt-1 text-sm text-gray-600">{{ $vacancy->privilegeNames }}</p>
@else
<p class="mt-1 text-sm text-gray-600">Льготы отсутствуют</p>
@endif
</ul>
</div>
</div>
</x-jet-modal>
resources/views/vendor/jetstream/components/modal.blade.php
@props(['id', 'maxWidth'])
@php
$id = $id ?? md5($attributes->wire('model'));
switch ($maxWidth ?? '2xl') {
case 'sm':
$maxWidth = 'sm:max-w-sm';
break;
case 'md':
$maxWidth = 'sm:max-w-md';
break;
case 'lg':
$maxWidth = 'sm:max-w-lg';
break;
case 'xl':
$maxWidth = 'sm:max-w-xl';
break;
case 'full':
$maxWidth = 'container';
break;
case '2xl':
default:
$maxWidth = 'sm:max-w-2xl';
break;
}
@endphp
<div
x-data="{
show: @entangle($attributes->wire('model')),
focusables() {
// All focusable element types...
let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
return [...$el.querySelectorAll(selector)]
// All non-disabled elements...
.filter(el => ! el.hasAttribute('disabled'))
},
firstFocusable() { return this.focusables()[0] },
lastFocusable() { return this.focusables().slice(-1)[0] },
nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
}"
x-on:close.stop="show = false"
x-on:keydown.escape.window="show = false"
x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
x-show="show"
id="{{ $id }}"
class="fixed top-0 left-0 right-0 max-h-11/12 inset-x-0 px-4 pt-6 z-50 sm:px-0 sm:flex sm:items-top
sm:justify-center"
style="display: none;"
>
<div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<div x-show="show"
class="bg-white rounded-lg overflow-auto shadow-xl transform transition-all sm:w-full {{ $maxWidth }}"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<div class="flex justify-end pr-4 pt-2" x-on:click="show = false">
<button class="text-3xl leading-none text-cool-gray-700 hover:text-cool-gray-500 outline-none
focus:outline-none">×
</button>
</div>
{{ $slot }}
</div>
</div>
Replied to Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)
What files do you need to check?
Started a new Conversation Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)
Greetings.
I have a trouble. Please, help me.
I use show-modal.blade.php
<x-jet-modal wire:model="isShowVacancy" maxWidth="full">
<div class="px-8">
<h2 class="prose prose-lg border-b inline-block mb-5">Данные о вакансии</h2>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">Работодатель</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->user->fullName }}
</p>
</div>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">Название</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->title }}
</p>
</div>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">Описание</h3>
<div class="mt-1 text-sm text-gray-600">
{{ $vacancy->description }}
</div>
</div>
<div class="mb-5">
<h3 class="text-lg font-medium text-gray-900">График работы</h3>
<div class="mt-1 text-sm text-gray-600">
{{ $vacancy->schedule->title }}
</div>
</div>
<div class="mb-5">
<div>
<h3 class="text-lg font-medium text-gray-900">Город вакансии</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->city->name }}
</p>
</div>
</div>
<h2 class="prose prose-lg border-b inline-block mb-5">Сведения о зарплате</h2>
<div class="mb-5 flex space-x-32">
<div>
<h3 class="text-lg font-medium text-gray-900">Минимальная зарплата</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->salary_min . ' ₽' }}
</p>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">Максимальная зарплата</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->salary_max . ' ₽' }}
</p>
</div>
<div>
<h3 class="text-lg font-medium text-gray-900">Период выплаты</h3>
<p class="mt-1 text-sm text-gray-600">
{{ $vacancy->period->title }}
</p>
</div>
</div>
<h2 class="prose prose-lg border-b inline-block mb-5">Требования к соискателю</h2>
<div class="mb-5">
<div class="mt-1 text-sm text-gray-600">
{{ $vacancy->requirements }}
</div>
</div>
<h2 class="prose prose-lg border-b inline-block mb-5">Дополнительные льготы</h2>
<div class="mb-5">
<ul class="mt-1 text-sm text-gray-600">
@if($vacancy->privilegeNames)
<p class="mt-1 text-sm text-gray-600">{{ $vacancy->privilegeNames }}</p>
@else
<p class="mt-1 text-sm text-gray-600">Льготы отсутствуют</p>
@endif
</ul>
</div>
</div>
</x-jet-modal>
In the nested component (vacancy-item.blade.php) I include this file.
<div class="mb-10 rounded hover:bg-gray-100 md:table-row">
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">№ п/п</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
{{ $vacancy->id }}
</div>
</div>
</div>
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">Название</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
{{ $vacancy->title }}
</div>
</div>
</div>
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">Срок подписки</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
@empty($vacancy->subscription)
Нет подписки
@else
{{ $vacancy->subscription }}
@endempty
</div>
</div>
</div>
<div class="whitespace-no-wrap md:table-cell">
<div class="items-center md:py-3 md:px-6">
<div class="inline-block px-2 py-1 text-xs bg-blue-100 rounded md:hidden">Дата создания</div>
<div class="px-6 lg:px-0 py-3 text-sm font-medium text-gray-900">
{{ $vacancy->created_at->format('d.m.Y H:i:s') }}
</div>
</div>
</div>
<div class="px-6 py-2 align-middle bg-gray-100 rounded md:table-cell md:bg-transparent">
<div class="flex justify-evenly">
@can('manage users vacancies')
<button
wire:click="$toggle('isShowVacancy')"
class="inline-block p-1 mr-2 text-green-500 transition duration-500 ease-in-out border border-transparent rounded cursor-pointer hover:border-green-400 focus:bg-green-400 focus:outline-none focus:text-white"
title="Просмотреть вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</button>
@else
<button wire:click="cloneVacancy"
class="inline-block p-1 mr-2 text-green-500 transition duration-500 ease-in-out border border-transparent rounded cursor-pointer hover:border-green-400 focus:bg-green-400 focus:outline-none focus:text-white"
title="Клонировать вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
</svg>
</button>
@endcan
<button wire:click="redirectToVacancyEditForm"
class="inline-block p-1 mr-2 text-indigo-500 transition duration-500 ease-in-out border border-transparent rounded cursor-pointer focus:text-white focus:outline-none focus:bg-indigo-400 hover:border-indigo-400"
title="Редактировать вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
</button>
@if ($confirmDelete == $vacancy->id)
<button wire:click="removeVacancy"
class="inline-block px-2 py-1 text-base font-semibold text-white transition duration-500 ease-in-out bg-red-400 border border-red-400 rounded cursor-pointer focus:text-red-400 focus:border-red-400 focus:outline-none focus:bg-transparent hover:border-red-500 hover:bg-red-500"
title="Подтвердите удаление">
Уверены?
</button>
@else
<button wire:click="confirmVacancyDelete" class="inline-block cursor-pointer
text-red-500 focus:text-white focus:outline-none focus:bg-red-400 p-1 border
border-transparent transition duration-500 ease-in-out
hover:border-red-400 rounded" title="Удалить вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24
24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
@endif
</div>
</div>
@include('vacancies.show-modal')
</div>
Component VacancyItem.php:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class VacancyItem extends Component
{
public bool $isShowVacancy = false;
After that the modal window works fine. But doesn't work a pagination and I get an error:
index.js:31 Uncaught (in promise) TypeError: Cannot read property '$wire' of undefined
at Livewire.value (index.js:31)
at eval (eval at saferEval (alpine.js:118), <anonymous>:4:31)
at saferEval (alpine.js:118)
at new Component (alpine.js:1423)
at alpine.js:1574
at alpine.js:1556
at walk (alpine.js:90)
at walk (alpine.js:94)
at walk (alpine.js:94)
at Component.walkAndSkipNestedComponents (alpine.js:1550)
I use livewire v.2.3.5 and Alpine.js v.2.7.3
I don't understand what I need to do.
Awarded Best Reply on How Can I Create Table Row Component In *.blade.php?
I haven't found a solution to the problem. I rewrote everything using "div.table" instead of "table".
Replied to How Can I Create Table Row Component In *.blade.php?
I haven't found a solution to the problem. I rewrote everything using "div.table" instead of "table".
Started a new Conversation How Can I Create Table Row Component In *.blade.php?
Hello. I have a trouble. I have a nested component with table row.
<div>
<tr class="flex flex-col items-start md:table-row justify-center mb-10
sm:hover:bg-gray-100">
<td class="whitespace-no-wrap">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">№ п/п</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900">
{{ $vacancy->id }}
</div>
</div>
</td>
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Название</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900">
{{ $vacancy->title }}
</div>
</div>
</td>
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Срок подписки</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900 whitespace-nowrap">
@empty($vacancy->subscription)
Нет подписки
@else
{{ $vacancy->subscription }}
@endempty
</div>
</div>
</td>
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Дата создания</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900 whitespace-nowrap">
{{ $vacancy->created_at->format('d.m.Y H:i:s') }}
</div>
</div>
</td>
<td class="flex px-6 py-2 md:py-4 w-full bg-gray-100 md:bg-transparent justify-evenly">
@if ($confirmDelete == $vacancy->id)
<button wire:click="removeVacancy" class="inline-block cursor-pointer text-white bg-red-400 focus:text-red-400 focus:border-red-400 focus:outline-none focus:bg-transparent py-1 px-2 border
border-red-400 transition duration-500 ease-in-out text-base font-semibold
hover:border-red-500 hover:bg-red-500 rounded" title="Подтвердите удаление">
Уверены?
</button>
@else
<button wire:click="confirmVacancyDelete" class="inline-block cursor-pointer
text-red-500 focus:text-white focus:outline-none focus:bg-red-400 p-1 border
border-transparent transition duration-500 ease-in-out
hover:border-red-400 rounded" title="Удалить вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24
24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
@endif
</td>
</tr>
</div>
When I click on "confirmVacancyDelete" button I get an error "confirmVacancyDelete not found in parent component".
But, if I simplify code to (without tr):
<div>
<div class="flex justify-between">
<div>{{ 'VacancyId: ' . $vacancy->id }} / {{ 'ConfirmDelete: '. $confirmDelete }}</div>
@if ($confirmDelete == $vacancy->id)
<button wire:click="removeVacancy" class="inline-block cursor-pointer text-white bg-red-400 focus:text-red-400 focus:border-red-400 focus:outline-none focus:bg-transparent py-1 px-2 border
border-red-400 transition duration-500 ease-in-out text-base font-semibold
hover:border-red-500 hover:bg-red-500 rounded" title="Подтвердите удаление">
Уверены?
</button>
@else
<button wire:click="confirmVacancyDelete" class="inline-block cursor-pointer
text-red-500 focus:text-white focus:outline-none focus:bg-red-400 p-1 border
border-transparent transition duration-500 ease-in-out
hover:border-red-400 rounded" title="Удалить вакансию">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24
24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
@endif
</div>
</div>
it works fine. How do I change the code of the "table tr" component to make everything work?
Replied to Blade Format Question
Hi. Try this. You can do it.
<tr class="@if($loop->even) bg-gray-200 @else bg-white @endif">
Replied to Using Markdown For The Textarea Field
Thank you, but I only need to save the data from the textarea field to the database. Your option may come in handy later. I did not know about it. :-)
Started a new Conversation Using Markdown For The Textarea Field
Hello, everybody. Tell me, please, how can I use markdown for textarea fields in the form?
Replied to How To Format Laravel Blade Codes In Visual Studio Code ?
This plugin doesn't work anymore.
Replied to After Delete Nested Component I Get An Error 404
I found a solution. It turned out to be much easier than I thought. I just removed the parent div in the vacancy-item.blade.php file :-)
<tr class="flex flex-col items-start md:table-row justify-center mb-10 sm:hover:bg-gray-100">
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Title</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900">
{{ $vacancy->title }}
</div>
</div>
</td>
<td class="whitespace-now-rap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Status</div>
<div class="items-center py-3 px-6">
<x-badges.error>Disabled</x-badges.error>
</div>
</td>
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Subscription</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900 whitespace-nowrap">
@empty($vacancy->subscription)
No subscription
@else
{{ $vacancy->subscription }}
@endempty
</div>
</div>
</td>
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Created At</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900 whitespace-nowrap">
{{ $vacancy->created_at->format('d.m.Y h:i:s') }}
</div>
</div>
</td>
<td class="flex px-6 py-2 md:py-4 w-full bg-gray-100 md:bg-transparent justify-evenly">
<button wire:click="cloneVacancy({{ $vacancy->id }})" class="inline-block cursor-pointer p-1 border border-transparent transition duration-500 ease-in-out hover:border-green-400 text-green-500 rounded mr-2 focus:bg-green-400 focus:outline-none focus:text-white" title="Clone vacancy">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
<button wire:click="redirectToVacancyEditForm" class="inline-block cursor-pointer p-1 text-indigo-500 focus:text-white focus:outline-none focus:bg-indigo-400 border border-transparent transition duration-500 ease-in-out hover:border-indigo-400 rounded mr-2" title="Edit vacancy">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
@if ($confirmDelete == $vacancy->id)
<button wire:click="removeVacancy" class="inline-block cursor-pointer text-white bg-red-400 focus:text-red-400 focus:border-red-400 focus:outline-none focus:bg-transparent py-1 px-2 border border-red-400 transition duration-500 ease-in-out text-base font-semibold hover:border-red-500 hover:bg-red-500 rounded" title="Confirm delete">
Sure?
</button>
@else
<button wire:click="$emit('confirmVacancyDelete', {{ $vacancy->id }})" class="inline-block cursor-pointer text-red-500 focus:text-white focus:outline-none focus:bg-red-400 p-1 border border-transparent transition duration-500 ease-in-out hover:border-red-400 rounded" title="Delete vacancy">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
@endif
</td>
</tr>
Thanks for your help :-)
Replied to After Delete Nested Component I Get An Error 404
I don't understand whats happening. It's written that no methods have been found.
Replied to After Delete Nested Component I Get An Error 404
I made everything as you have on the screenshots. I get an error:
Livewire\Exceptions\MethodNotFoundException
Unable to call component method. Public method [removeVacancy] not found on component: [vacancies]
Livewire\Exceptions\MethodNotFoundException
Unable to call component method. Public method [redirectToVacancyEditForm] not found on component: [vacancies]
Replied to After Delete Nested Component I Get An Error 404
Thank you for answer. Nothing happens. I get the same error. Any ideas?
Started a new Conversation After Delete Nested Component I Get An Error 404
Hello, everybody. I cannot solve the problem myself. I just started working with Livewire.
I have a parent component (Vacancies.php):
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Vacancy;
use Livewire\WithPagination;
class Vacancies extends Component
{
use WithPagination;
public $successMessage;
public $confirmDelete;
protected $listeners = [
'confirmVacancyDelete' => 'changeConfirmDeleteProperty',
'refreshVacancyComponent' => '$refresh',
'renderSuccessMessage'
];
public function renderSuccessMessage($message)
{
$this->successMessage = $message;
}
public function changeConfirmDeleteProperty($id)
{
$this->confirmDelete = $id;
}
/**
* render
*
* @param mixed $vacancy
* @return object
*/
public function render(Vacancy $vacancy)
{
return view('livewire.vacancies', [
'vacancies' => $vacancy->where('user_id', auth()->user()->id)->latest()->paginate(20)
]);
}
}
I use foreach on $vacancies in vacancy.blade.php and pass the $vacancy object to the nested component:
@foreach ($vacancies as $vacancy)
@livewire('vacancy-item', compact(['vacancy', 'confirmDelete']), key(rand() * $vacancy->id))
@endforeach
My VacancyItem.php:
<?php
namespace App\Http\Livewire;
use App\Models\Vacancy;
use Livewire\Component;
class VacancyItem extends Component
{
public $vacancy;
public $confirmDelete;
protected $listeners = [
'redirectToVacancyEditForm',
'removeVacancy'
];
public function mount($vacancy)
{
$this->vacancy = $vacancy;
}
/**
* render
*
* @return void
*/
public function render()
{
return view('livewire.vacancy-item');
}
/**
* redirectToVacancyForm
*
* @param mixed $vacancy
* @return void
*/
public function redirectToVacancyEditForm(Vacancy $vacancy)
{
return redirect()->to(route('vacancies.edit', ['vacancy' => $vacancy->id]));
}
/**
* removeVacancy
*
* @param mixed $vacancy
* @return void
*/
public function removeVacancy(Vacancy $vacancy)
{
$vacancy->delete();
$this->emit('refreshVacancyComponent');
$this->emit('renderSuccessMessage', 'Vacancy deleted successfully');
}
}
File vacancy-item.blade.php
<div>
<tr class="flex flex-col items-start md:table-row justify-center mb-10
sm:hover:bg-gray-100">
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Title</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900">
{{ $vacancy->title }}
</div>
</div>
</td>
<td class="whitespace-now-rap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Status</div>
<div class="items-center py-3 px-6">
<x-badges.error>Disabled</x-badges.error>
</div>
</td>
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Subscription period</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900 whitespace-nowrap">
@empty($vacancy->subscription)
No subscription
@else
{{ $vacancy->subscription }}
@endempty
</div>
</div>
</td>
<td class="whitespace-no-wrap w-full">
<div class="bg-blue-100 inline-block py-1 px-2 text-xs md:hidden rounded">Created At</div>
<div class="items-center py-3 px-6">
<div class="text-sm font-medium text-gray-900 whitespace-nowrap">
{{ $vacancy->created_at->format('d.m.Y h:i:s') }}
</div>
</div>
</td>
<td class="flex px-6 py-2 md:py-4 w-full bg-gray-100 md:bg-transparent justify-evenly">
<button wire:click="cloneVacancy({{ $vacancy->id }})" class="inline-block cursor-pointer p-1 border border-transparent transition duration-500 ease-in-out hover:border-green-400 text-green-500 rounded mr-2 focus:bg-green-400 focus:outline-none focus:text-white" title="Clone vacancy">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
<button wire:click="$emit('redirectToVacancyEditForm', {{ $vacancy->id }})" class="inline-block cursor-pointer p-1 text-indigo-500 focus:text-white focus:outline-none focus:bg-indigo-400 border border-transparent transition duration-500 ease-in-out hover:border-indigo-400 rounded mr-2" title="Edit vacancy">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
@if ($confirmDelete == $vacancy->id)
<button wire:click="$emit('removeVacancy', {{ $vacancy->id }})" class="inline-block cursor-pointer text-white bg-red-400 focus:text-red-400 focus:border-red-400 focus:outline-none focus:bg-transparent py-1 px-2 border border-red-400 transition duration-500 ease-in-out text-base font-semibold hover:border-red-500 hover:bg-red-500 rounded" title="Confirm delete">
Sure?
</button>
@else
<button wire:click="$emit('confirmVacancyDelete', {{ $vacancy->id }})" class="inline-block cursor-pointer text-red-500 focus:text-white focus:outline-none focus:bg-red-400 p-1 border border-transparent transition duration-500 ease-in-out hover:border-red-400 rounded" title="Delete vacancy">
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
@endif
</td>
</tr>
</div>
The database entry shall be deleted successfully, but error 404 shall appear.
What am I doing wrong?
Commented on Automatically Resolve Dependencies
It's very difficult to understand. Could you explain a ServiceProvider by a real example? Where can I use it?