feat: Conditionally display category description and image fields based on selected type.

This commit is contained in:
Yoga Pangestu 2026-01-02 18:28:10 +07:00
parent 598ca3500f
commit 53554a0260
2 changed files with 34 additions and 24 deletions

View File

@ -2,6 +2,7 @@
namespace App\Livewire\Studio\Master; namespace App\Livewire\Studio\Master;
use App\Enums\CategoryType;
use App\Livewire\Forms\Studio\Master\CategoryForm; use App\Livewire\Forms\Studio\Master\CategoryForm;
use App\Models\Category as CategoryModel; use App\Models\Category as CategoryModel;
use App\Traits\Authorization\WithAuthorization; use App\Traits\Authorization\WithAuthorization;
@ -27,6 +28,8 @@ class Category extends Component
public string $modalTitle = ''; public string $modalTitle = '';
public bool $showDescriptionAndImage = true;
public function create(): void public function create(): void
{ {
$this->canOrAbort('create category'); $this->canOrAbort('create category');
@ -92,6 +95,11 @@ public function openModal(string $method, string $modalTitle, ?string $id = null
$id && $this->form->setCategory(CategoryModel::byHashOrFail($id)); $id && $this->form->setCategory(CategoryModel::byHashOrFail($id));
} }
public function updatedFormType(string $value): void
{
$this->showDescriptionAndImage = $value == CategoryType::PERFUME->value;
}
public function render(): View public function render(): View
{ {
return view('livewire.studio.master.categories', [ return view('livewire.studio.master.categories', [

View File

@ -36,13 +36,9 @@
<flux:error name="form.name" /> <flux:error name="form.name" />
</flux:field> </flux:field>
<flux:editor label="Keterangan" wire:model="form.description"
placeholder="Aromaterapi merupakan wewangian yang dapat membantu meredakan stress dan meredakan perasaan sakit kepala."
auotocomplete="off" class="**:data-[slot=content]:min-h-[100px]!" />
<flux:field> <flux:field>
<flux:label>Jenis <span class="text-red-500 ms-1">*</span></flux:label> <flux:label>Jenis <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model="form.type" variant="buttons" class="w-full *:flex-1"> <flux:radio.group wire:model.live="form.type" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\CategoryType::cases() as $item) @foreach (\App\Enums\CategoryType::cases() as $item)
<flux:radio value="{{ $item->value }}"> <flux:radio value="{{ $item->value }}">
{{ $item->label() }} {{ $item->label() }}
@ -52,6 +48,11 @@
<flux:error name="form.type" /> <flux:error name="form.type" />
</flux:field> </flux:field>
@if ($showDescriptionAndImage)
<flux:editor label="Keterangan" wire:model="form.description"
placeholder="Aromaterapi merupakan wewangian yang dapat membantu meredakan stress dan meredakan perasaan sakit kepala."
auotocomplete="off" class="**:data-[slot=content]:min-h-[100px]!" />
<div class="space-y-3"> <div class="space-y-3">
<h3 class="text-sm font-medium">Gambar</h3> <h3 class="text-sm font-medium">Gambar</h3>
<div class="dropzone-wrapper"> <div class="dropzone-wrapper">
@ -72,6 +73,7 @@ class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
@enderror @enderror
</div> </div>
</div> </div>
@endif
<div class="flex"> <div class="flex">
<flux:spacer /> <flux:spacer />