yadiparfum/parfum
yadiparfum/parfum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Livewire/Studio/Master/Category.php
View File

@ -2,6 +2,7 @@
namespace App\Livewire\Studio\Master;
use App\Enums\CategoryType;
use App\Livewire\Forms\Studio\Master\CategoryForm;
use App\Models\Category as CategoryModel;
use App\Traits\Authorization\WithAuthorization;
@ -27,6 +28,8 @@ class Category extends Component
public string $modalTitle = '';
public bool $showDescriptionAndImage = true;
public function create(): void
{
$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));
}
public function updatedFormType(string $value): void
{
$this->showDescriptionAndImage = $value == CategoryType::PERFUME->value;
}
public function render(): View
{
return view('livewire.studio.master.categories', [

50
resources/views/livewire/studio/master/categories.blade.php
View File

@ -36,13 +36,9 @@
<flux:error name="form.name" />
</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: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)
<flux:radio value="{{ $item->value }}">
{{ $item->label() }}
@ -52,26 +48,32 @@
<flux:error name="form.type" />
</flux:field>
<div class="space-y-3">
<h3 class="text-sm font-medium">Gambar</h3>
<div class="dropzone-wrapper">
<livewire:dropzone wire:model="form.image" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="1" :key="'image'"
:files="$form->image ?? []" />
@error('form.image')
<div role="alert" aria-live="polite" aria-atomic="true"
class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
<svg class="shrink-0 [:where(&amp;)]:size-5 inline" data-flux-icon=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
clip-rule="evenodd"></path>
</svg>
{{ $message }}
</div>
@enderror
@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">
<h3 class="text-sm font-medium">Gambar</h3>
<div class="dropzone-wrapper">
<livewire:dropzone wire:model="form.image" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="1" :key="'image'"
:files="$form->image ?? []" />
@error('form.image')
<div role="alert" aria-live="polite" aria-atomic="true"
class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
<svg class="shrink-0 [:where(&amp;)]:size-5 inline" data-flux-icon=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
clip-rule="evenodd"></path>
</svg>
{{ $message }}
</div>
@enderror
</div>
</div>
</div>
@endif
<div class="flex">
<flux:spacer />