xiolog

Member Since 2 Months Ago

Experience Points
9,340
Total
Experience

660 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
86
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    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.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 2
9,340 XP
Dec
14
1 month ago
Activity icon

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.

Activity icon

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
13
1 month ago
Activity icon

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

Activity icon

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.

Activity icon

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>
Activity icon

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

What files do you need to check?

Dec
12
1 month ago
Activity icon

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
07
1 month ago
Activity icon

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

Activity icon

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
03
1 month ago
Activity icon

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?

Activity icon

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
02
1 month ago
Activity icon

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

Activity icon

Replied to Using Markdown For The Textarea Field

Very quickly. Thanks for you answer :-)

Activity icon

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
01
1 month ago
Activity icon

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

This plugin doesn't work anymore.

Nov
29
1 month ago
Nov
28
1 month ago
Activity icon

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

Activity icon

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.

Activity icon

Replied to After Delete Nested Component I Get An Error 404

Thank you for this :-)

Activity icon

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
27
1 month ago
Activity icon

Replied to Where Are You All From?

Nizhnevartovsk, Russia

Activity icon

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
26
1 month ago
Activity icon

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
15
2 months ago
Activity icon

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?