Laracasts Member Profile

Dec

1 month ago

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?

Dec

1 month ago

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">&times;
            </button>
        </div>
        {{ $slot }}
    </div>
</div>

Replied to Cannot Read Property '$wire' Of Undefined (Livewire + Alpine.js)

What files do you need to check?

Dec

1 month ago

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.

Dec

1 month ago

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".

Dec

1 month ago

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">

Dec

1 month ago

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. :-)

Replied to Using Markdown For The Textarea Field

Very quickly. Thanks for you answer :-)

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?

Dec

1 month ago

Replied to How To Format Laravel Blade Codes In Visual Studio Code ?

This plugin doesn't work anymore.

Nov

1 month ago

Replied to After Delete Nested Component I Get An Error 404

You too :-)

Nov

1 month ago

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

Thank you for this :-)

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]

Nov

1 month ago

Replied to Where Are You All From?

Nizhnevartovsk, Russia

Replied to After Delete Nested Component I Get An Error 404

Thank you for answer. Nothing happens. I get the same error. Any ideas?

Nov

1 month ago

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?

Nov

2 months ago

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?

xiolog

Start Your Engines

First Thousand

One Year Member

Two Year Member

Three Year Member

Four Year Member

Five Year Member

School In Session

Welcome To The Community

Full Time Learner

Pay It Forward

Subscriber

Lifer

Laracasts Evangelist

Chatty Cathy

Laracasts Veteran

Ten Thousand Strong

Laracasts Master

Laracasts Tutor

Laracasts Sensei

Top 50

Community Pillar

Want us to email you occasionally with Laracasts news?