anon90444

@iamamirsalehi Check out https://github.com/henryleeworld/laravel-livewire-2-step-registration

Here he has implemented a 2 step registration. Not exactly what you looking for but you can modify it.

Is there no possible way to add teams after you created the jetstream project?

I am faced with three issues which all are related where I am struggling to add a event @click="isQuestion = true" on radios within a loop and validate on certain conditions based on which radio button is selected for example if authenticated then store the user id but if not its anonymous feedback if optional email not provided.

There are four entries in the database for ticket type see image for better explanation:

Three issues I need assistance with:

1. Only show I have a question if user is authenticated
2. Show subject and hide emailand data_protection if radio button I have a question is selected if something else is selected show emailand data_protection and hide subject
3. Only validate and save the information based on the radio button selection
   • If any radio button is selected besides I have a question validate and save emailand data_protection
   • If I have a questionis selected validate and save everything besides emailand data_protection

PLEASE NOTE: most of the logic is already in place to hide certain fields if not I have a question radio button is selected by doing this x-show="!isQuestion" just not sure how to tie it to the radio buttons.

Any help or guidance is greatly appreciated

Create ticket Livewire component

<div x-data="{ isOpen: false, isQuestion: false, send: false }" @keydown.window.escape="isOpen = false" x-init="
         @this.on('change-send', () => {
             send = !send;
         })
    ">
    <div class="fixed bottom-0 right-0 top-0 flex items-center">
        <div class="transform -rotate-90 origin-bottom-right">
            <x-jet-button @click="isOpen = !isOpen" class="!rounded-none !rounded-t-lg !p-3">
                {{ __('Feedback') }}
            </x-jet-button>
        </div>
    </div>
    <div class="fixed inset-0 overflow-hidden pointer-events-none" x-cloak>
        <div class="absolute inset-0 overflow-hidden">
            <div x-show="isOpen" x-description="Background overlay, show/hide based on slide-over state." x-transition:enter="ease-in-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in-out duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
            <section class="absolute inset-y-0 right-0 pl-10 max-w-full flex" aria-labelledby="slide-over-heading">
                <div x-show="isOpen" x-description="Slide-over panel, show/hide based on slide-over state." x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative w-screen max-w-md pointer-events-auto">
                    <div x-show="isOpen" x-description="Close button, show/hide based on slide-over state." x-transition:enter="ease-in-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in-out duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
                        <button type="button" @click="isOpen = !isOpen" class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
                            <span class="sr-only">Close panel</span>
                            <!-- Heroicon name: outline/x -->
                            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <div class="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
                        <div x-show="!send" class="px-4 sm:px-6">
                            <h2 id="slide-over-heading" class="text-lg font-medium text-gray-900">
                                {{ __('Do you have any feedback?') }}
                            </h2>
                            <p class="text-sm leading-5 text-gray-700">
                                {{__('We appreciate your feedback. Would you change something? Do you think something is good? We look forward to any kind of feedback.')}}
                            </p>
                        </div>
                        <div x-show="send" class="mt-6 relative flex-1 flex px-4 sm:px-6 justify-center items-center">
                            <div class="flex flex-col justify-center">
                                <div class="flex justify-center">
                                    <!-- Heroicon name: outline/emoji-happy -->
                                    <svg class="h-24 w-24" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </div>
                                <h3 class="text-lg leading-6 font-medium text-gray-900 px-3 mt-4 text-center">
                                    {{ __('Thanks') }}
                                </h3>
                                <p class="p-3 text-center">
                                    {{ __('Thank you for your feedback, it was saved successfully.') }}
                                </p>
                            </div>
                        </div>
                        <div x-show="!send" class="mt-6 relative flex-1 flex flex-col justify-between px-4 sm:px-6">
                            <div class="px-4 divide-y divide-gray-200 sm:px-6">
                                <fieldset class="space-y-2 my-4">
                                    <x-jet-label for="feedback_type">
                                        {{ __('Type of feedback') }}
                                    </x-jet-label>
                                    <div class="space-y-5">
                                        @foreach ($ticket_types as $ticket_type)
                                        <div>
                                            <div class="relative flex items-start">
                                                <div class="absolute flex items-center h-5">
                                                    <x-radio-button wire:model="ticket_type" @click="isQuestion = false" id="{{ $ticket_type->id }}" aria-describedby="{{ $ticket_type->id }}_description" value="{{ $ticket_type->id }}" class="h-4 w-4 transition duration-150 ease-in-out" />
                                                </div>
                                                <div class="pl-7 text-sm leading-5">
                                                    <x-jet-label for="{{ $ticket_type->id }}_title">
                                                        {{ $ticket_type->title }}
                                                    </x-jet-label>
                                                    <p id="{{ $ticket_type->id }}_description" class="text-gray-500">
                                                        {{ $ticket_type->description }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <x-input-error for="ticket_type" />
                                </fieldset>
                                <div class="space-y-6 pt-6 pb-5">
                                    <div class="space-y-1" x-show="isQuestion">
                                        <x-jet-label for="subject">{{ __('Subject') }}</x-jet-label>
                                        <x-jet-input wire:model="subject" id="subject" class="block mt-1 w-full" type="text" name="subject" aria-describedby="subject" />
                                        <x-input-error for="description" />
                                    </div>
                                    <div class="space-y-1">
                                        <x-jet-label for="description">
                                            {{ __('Feedback') }}
                                        </x-jet-label>
                                        <x-textarea wire:model="description" id="description" rows="4" class="block mt-1 w-full"></x-textarea>
                                        <x-input-error for="description" />
                                    </div>
                                    <div class="space-y-1" x-show="!isQuestion">
                                        <div class="flex justify-between">
                                            <x-jet-label for="email_optional">{{ __('E-mail address') }}</x-jet-label>
                                            <span id="email_optional" class="font-normal text-sm leading-5 text-gray-500">
                                                {{ __('optional') }}
                                            </span>
                                        </div>
                                        <x-jet-input wire:model="email_optional" id="email_optional" class="block mt-1 w-full" type="email" name="email_optional" aria-describedby="email_optional" />
                                    </div>
                                    <div class="space-y-1" x-show="!isQuestion">
                                        <label for="data_protection" class="flex items-center">
                                            <x-jet-checkbox wire:model="data_protection" id="data_protection" name="data_protection" />
                                            <span class="ml-2 text-sm text-gray-600">{{ __('I have read the privacy policy and accept it.') }}</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="space-y-4 pt-4 pb-6" x-show="!isQuestion">
                                    <div class="text-sm leading-5" x-data="{extra: false}">
                                        <a href="#" x-on:click.prevent="extra = !extra" class="group space-x-2 inline-flex items-center text-gray-500 hover:text-gray-900 transition ease-in-out duration-150">
                                            <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500 transition ease-in-out duration-150" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
                                            </svg>
                                            <span>
                                                {{ __('Why should you provide your email address?') }}
                                            </span>
                                        </a>
                                        <div x-show.transition="extra">
                                            <p class="ml-7">
                                                {{ __('If you include your email address, we will give you feedback on your feedback. We will never use your email address for any other purpose.') }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div x-show="!send" class="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
                            <span class="inline-flex rounded-md shadow-sm">
                                <x-jet-secondary-button @click="isOpen = false">
                                    {{ __('cancel') }}
                                </x-jet-secondary-button>
                            </span>
                            <span class="inline-flex rounded-md shadow-sm">
                                <x-jet-button wire:click="send">
                                    {{ __('send') }}
                                </x-jet-button>
                            </span>
                        </div>
                        <div x-show="send" class="flex-shrink-0 px-4 py-4 space-x-4 flex justify-end">
                            <span class="inline-flex rounded-md shadow-sm">
                                <x-jet-secondary-button @click="isOpen = false">
                                    {{ __('close') }}
                                </x-jet-secondary-button>
                            </span>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

Livewire backend logic

<?php

namespace App\Http\Livewire\Tickets;

use App\Models\Ticket;
use App\Rules\SpamFree;
use Livewire\Component;

class CreateTicketSlideOver extends Component
{
    public $ticket_type;

    public $subject;

    public $description;

    public $email_optional;

    public $data_protection = false;

    public $currentPage;

    public function mount()
    {
        $this->currentPage = url()->current();
    }

    public function send()
    {
        $this->validate([
            'ticket_type' => 'required',
            'subject' => ['required', new SpamFree],
            'description' => ['required', new SpamFree],
            'email_optional' => ['nullable', 'email'],
            'data_protection' => 'accepted',
        ]);

        Ticket::create([
            'user_id' => auth()->id(),
            'ticket_type' => $this->ticket_type_id,
            'slug' => $this->subject,
            'subject' => $this->subject,
            'description' => $this->body,
            'email' => $this->email,
            'url' => $this->currentPage,
        ]);


        $this->emitSelf('change-send');
    }

    public function render()
    {
        return view('tickets.create-ticket-slide-over');
    }
}

Database migration for ticket

Schema::create('tickets', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id');
            $table->foreignId('ticket_type_id');
            $table->string('slug')->unique();
            $table->string('title');
            $table->text('body');
            $table->string('email')->nullable();
            $table->string('url')->nullable();
            $table->boolean('locked')->default(false);
            $table->unsignedInteger('visits')->default(0);
            $table->timestamps();
        });

Fixed the issue my doing this:

public function render()
{
    $this->ticketTypes = TicketType::all();

    return view('livewire.tickets.create-ticket-slide-over');
 }

Fixed the issue my doing this:

public function render()
{
    $this->ticketTypes = TicketType::all();

    return view('livewire.tickets.create-ticket-slide-over');
 }

Which is why I posted a question here so someone can provide me with solution or guide me in the right direction and not tell me "Livewire can't just read my mind and know exactly you'd like to do.

Hi,

Please see the below code blocks I am trying to achieve listing all my ticket types with radio buttons but not coming right I am receiving this error:

ErrorException foreach() argument must be of type array|object, null given (View: /Users/nicotravassos/code/template/resources/views/livewire/tickets/create-ticket-slide-over.blade.php)

There is data in the database I just think I am doing something completely wrong. Please note I have not implemented the validation of the slide over form I just want to achieve listing the ticket types.

Slide over livewire component

...
@foreach ($ticketTypes as $ticketType)
<div>
  <div class="relative flex items-start">
    <div class="absolute flex items-center h-5">
      <input wire:model="ticketType" id="{{ $ticketType->id }}" aria-describedby="{{ $ticketType->description }}" type="radio" value="{{ $ticketType->title }}" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
    </div>
    <div class="pl-7 text-sm leading-5">
      <label for="{{ $ticketType->title }}" class="font-medium text-gray-900">
        {{ $ticketType->title }}
      </label>
      <p id="{{ $ticketType-description }}" class="text-gray-500">
        {{ $ticketType->description }}
      </p>
    </div>
  </div>
</div>
@endforeach
...

Livewire

<?php

namespace App\Http\Livewire\Tickets;

use Livewire\Component;

class CreateTicketSlideOver extends Component
{
    public $ticketTypes;

    public $feedback = "";

    public $email = "";

    public function send()
    {
        $this->emitSelf('change-send');
    }

    public function render()
    {
        return view('livewire.tickets.create-ticket-slide-over');
    }
}

Ticket Model

...
public function ticketType()
{
    return $this->belongsTo(TicketType::class, 'ticket_type_id');
}
...

TicketType Model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class TicketType extends Model
{
    use HasFactory;

    public function tickets()
    {
        return $this->hasMany(Ticket::class);
    }
}

Hi,

I am currently using Laravel Jetstream and now I have decided I would like to use the functionality of teams. How would I go by adding teams to my existing Laravel Jetstream project? Please note I am using the livewire stack.

Thanks @michaloravec

Hi,

I have created the below migration script to add username and after name column but the after works with MySQL but not PostgreSQL does anyone have alternative solution?

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddUsernameColumnToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('username')->unique()->after('name');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('username');
        });
    }
}

Everyone recommends I just alter the 2014_10_12_000000_create_users_table.php but I do not want to take that approach.

Thanks @snapey I completely agree with you but if you have severe OCD I think having your file ending with Notification just looks cleaner I guess thank you.

What's best practice when creating a notifications or anything via artisan what is the best naming convention

php artisan make:notification YouWereMentionedNotification

OR

php artisan make:notification YouWereMentioned

I feel like it's better to use php artisan make:notification YouWereMentionedNotification I would like hear your opinions.

I am seeking a assistance with the below tailwind css snippet:

<div class="min-h-screen flex items-center justify-center bg-gray-100 py-6">
    <div class="flex w-full max-w-xs p-4 bg-white">
        <ul class="flex flex-col w-full">
            <li class="my-px">
                <a href="#" class="flex flex-row items-center h-12 px-4 rounded-lg text-gray-600 bg-gray-100">
                    <span class="flex items-center justify-center text-lg text-gray-400">
                        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
                            <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                        </svg>
                    </span>
                    <span class="ml-3">Dashboard</span>
                    <span class="flex items-center justify-center text-sm text-gray-500 font-semibold bg-gray-200 h-6 px-2 rounded-full ml-auto">3</span>
                </a>
            </li>
            <li class="my-px">
                <span class="flex font-medium text-sm text-gray-400 px-4 my-4 uppercase">Account</span>
            </li>
            <li class="my-px">
                <a href="#" class="flex flex-row items-center h-12 px-4 rounded-lg text-gray-600 hover:bg-gray-100">
                    <span class="flex items-center justify-center text-lg text-gray-400">
                        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
                            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                        </svg>
                    </span>
                    <span class="ml-3">Profile</span>
                </a>
            </li>
            <li class="my-px">
                <a href="#" class="flex flex-row items-center h-12 px-4 rounded-lg text-gray-600 hover:bg-gray-100">
                    <span class="flex items-center justify-center text-lg text-gray-400">
                        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
                            <path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                        </svg>
                    </span>
                    <span class="ml-3">Notifications</span>
                    <span class="flex items-center justify-center text-sm text-gray-500 font-semibold bg-gray-200 h-6 px-2 rounded-full ml-auto">10</span>
                </a>
            </li>
            <li class="my-px">
                <a href="#" class="flex flex-row items-center h-12 px-4 rounded-lg text-gray-600 hover:bg-gray-100">
                    <span class="flex items-center justify-center text-lg text-gray-400">
                        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
                            <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                            <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                    </span>
                    <span class="ml-3">Settings</span>
                </a>
            </li>
            <li class="my-px">
                <a href="#" class="flex flex-row items-center h-12 px-4 rounded-lg text-gray-600 hover:bg-gray-100">
                    <span class="flex items-center justify-center text-lg text-red-400">
                        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6">
                            <path d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
                        </svg>
                    </span>
                    <span class="ml-3">Logout</span>
                </a>
            </li>
        </ul>
    </div>
</div>

I am trying to stick it next to the <main> within Laravel 8 Livewire - Dashboard page but must have a margin between the two containers and both the navigation and container must not touch either side of the page it must centered like the current Laravel 8 Jetstream Dashboard:

...

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

Any assistance would be greatly appreciated

Thanks @sinnbeck

I know both methods work but which one is best practice @nakov sorry I am still in learning faze.

Thank you @nakov you legend

Hi I am trying to do something like this {{ __('Open your authentication app and enter the code for {{ config('app.name', 'Laravel') }}.') }} but I am receiving the following error ErrorException syntax error, unexpected 'app' (T_STRING), expecting ')' It's probably a noob moment but how do I fix this?

@snapey Agreed

@snapey thank you so much not sure how I missed that

@nakov Thank you for response I would like to remove it because if the user types in the incorrect password he can just reset it using forgot password

I have removed the below:

<div class="mt-4">
     <x-jet-label value="Confirm Password" />
     <x-jet-input class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
</div>

But the CreateNewUser.php only contains:

Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'username' => ['required', 'string', 'max:255', new UsernameRule, 'unique:users'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => $this->passwordRules(),
        ])->validate();

There is no confirmed will I need to to tweak something within the fortify config file

'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication([
            'confirmPassword' => true,
        ]),
    ],

Good day,

I am using Laravel 8 Jetstream with Livewire stack and pondering on how to remove the password confirmation on the register page can anyone assist?