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

refactor(form): membungkus form yang required dengan flux:field dan kasih tanda bintang merah untuk input yang required

Browse Source
This commit is contained in:
Yoga Pangestu 2025-10-02 10:37:20 +07:00
parent 4c43729299
commit 8d67c59f10
10 changed files with 346 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/views/livewire/studio/catalog/bottle/form.blade.php
View File

@ -18,14 +18,22 @@
<div class="col-span-1 lg:col-span-2"> <div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama produk" <flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama produk"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" /> wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
<flux:input label="Ukuran" placeholder="Masukkan ukuran" </flux:field>
wire:model.live.debounce.500ms="form.size" autocomplete="off" />
<flux:field> <flux:field>
<flux:label>Harga Beli</flux:label> <flux:label>Ukuran <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan ukuran"
wire:model.live.debounce.500ms="form.size" autocomplete="off" />
<flux:error name="form.size" />
</flux:field>
<flux:field>
<flux:label>Harga Beli <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga beli" <flux:input placeholder="Masukkan harga beli"
@ -36,7 +44,7 @@
</flux:field> </flux:field>
<flux:field> <flux:field>
<flux:label>Harga Jual</flux:label> <flux:label>Harga Jual <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga jual" <flux:input placeholder="Masukkan harga jual"
@ -59,7 +67,9 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4"> <div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet" <flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids"> wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua <flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option> </flux:select.option>
@ -70,6 +80,8 @@ class="**:data-[slot=content]:min-h-[100px]!" />
</flux:select.option> </flux:select.option>
@endforeach @endforeach
</flux:select> </flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">

9
resources/views/livewire/studio/catalog/brands.blade.php
View File

@ -21,8 +21,12 @@
<div class="p-4 space-y-6"> <div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading> <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama merek" wire:model.live.debounce.500ms="form.name" <flux:field>
autofocus autocomplete="off" /> <flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama merek" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<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>
@ -53,5 +57,4 @@ class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
</div> </div>
</div> </div>
</flux:modal> </flux:modal>
</flux:main> </flux:main>

10
resources/views/livewire/studio/catalog/categories.blade.php
View File

@ -21,8 +21,13 @@
<div class="p-4 space-y-6"> <div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading> <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama kategori" wire:model.live.debounce.500ms="form.name" <flux:field>
autofocus autocomplete="off" /> <flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama kategori" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:editor label="Keterangan" wire:model="form.description" placeholder="Masukkan keterangan" <flux:editor label="Keterangan" wire:model="form.description" placeholder="Masukkan keterangan"
auotocomplete="off" class="**:data-[slot=content]:min-h-[100px]!" /> auotocomplete="off" class="**:data-[slot=content]:min-h-[100px]!" />
@ -35,5 +40,4 @@
</div> </div>
</div> </div>
</flux:modal> </flux:modal>
</flux:main> </flux:main>

45
resources/views/livewire/studio/catalog/perfume/form.blade.php
View File

@ -18,25 +18,33 @@
<div class="col-span-1 lg:col-span-2"> <div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama parfum" <flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama parfum"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" /> wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="SKU" placeholder="Masukkan stock keeping unit" <flux:field>
<flux:label>SKU <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan stock keeping unit"
wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable /> wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable />
<flux:error name="form.sku" />
</flux:field>
<div class="lg:col-span-2"> <div class="lg:col-span-2">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<flux:select variant="listbox" searchable placeholder="Pilih Merek" <flux:select variant="listbox" searchable placeholder="Pilih Merek"
label="Merek" wire:model.live.debounce.500ms="form.brand"> label="Merek" wire:model.live.debounce.500ms="form.brand">
@foreach ($brands as $key => $value) @foreach ($brands as $key => $value)
<flux:select.option value="{{ $key }}"> <flux:select.option value="{{ $key }}">{{ $value }}
{{ $value }}
</flux:select.option> </flux:select.option>
@endforeach @endforeach
</flux:select> </flux:select>
<flux:field> <flux:field>
<flux:label>Harga Beli</flux:label> <flux:label>Harga Beli <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga beli" <flux:input placeholder="Masukkan harga beli"
@ -48,7 +56,8 @@
</flux:field> </flux:field>
<flux:field> <flux:field>
<flux:label>Harga Jual</flux:label> <flux:label>Harga Jual <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga jual" <flux:input placeholder="Masukkan harga jual"
@ -89,18 +98,22 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4"> <div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-2 p-6"> <flux:card class="space-y-2 p-6">
<flux:radio.group wire:model.live="form.concentration" variant="buttons" class="w-full *:flex-1" <flux:field>
label="Concentration"> <flux:label>Concentration <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.concentration" variant="buttons"
class="w-full *:flex-1">
@foreach (\App\Enums\Concentration::cases() as $item) @foreach (\App\Enums\Concentration::cases() as $item)
<flux:radio value="{{ $item->value }}"> <flux:radio value="{{ $item->value }}">{{ $item->label() }}</flux:radio>
{{ $item->label() }}
</flux:radio>
@endforeach @endforeach
</flux:radio.group> </flux:radio.group>
<flux:error name="form.concentration" />
</flux:field>
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih kategori" label="Kategori" <flux:field>
<flux:label>Kategori <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih kategori"
wire:model.live.debounce.500ms="form.category_ids"> wire:model.live.debounce.500ms="form.category_ids">
<flux:select.option wire:click="selectAllCategories" wire:ignore>Pilih Semua <flux:select.option wire:click="selectAllCategories" wire:ignore>Pilih Semua
</flux:select.option> </flux:select.option>
@ -111,10 +124,14 @@ class="**:data-[slot=content]:min-h-[100px]!" />
</flux:select.option> </flux:select.option>
@endforeach @endforeach
</flux:select> </flux:select>
<flux:error name="form.category_ids" />
</flux:field>
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet" <flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids"> wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua <flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option> </flux:select.option>
@ -125,6 +142,8 @@ class="**:data-[slot=content]:min-h-[100px]!" />
</flux:select.option> </flux:select.option>
@endforeach @endforeach
</flux:select> </flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">

26
resources/views/livewire/studio/catalog/product/form.blade.php
View File

@ -18,14 +18,22 @@
<div class="col-span-1 lg:col-span-2"> <div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama produk" <flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama produk"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" /> wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
<flux:input label="SKU" placeholder="Masukkan stock keeping unit" </flux:field>
wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable />
<flux:field> <flux:field>
<flux:label>Harga Beli</flux:label> <flux:label>SKU <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan stock keeping unit"
wire:model.live.debounce.500ms="form.sku" autocomplete="off" copyable />
<flux:error name="form.sku" />
</flux:field>
<flux:field>
<flux:label>Harga Beli <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga beli" <flux:input placeholder="Masukkan harga beli"
@ -36,7 +44,7 @@
</flux:field> </flux:field>
<flux:field> <flux:field>
<flux:label>Harga Jual</flux:label> <flux:label>Harga Jual <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan harga jual" <flux:input placeholder="Masukkan harga jual"
@ -59,7 +67,9 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4"> <div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet" <flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids"> wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua <flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option> </flux:select.option>
@ -70,6 +80,8 @@ class="**:data-[slot=content]:min-h-[100px]!" />
</flux:select.option> </flux:select.option>
@endforeach @endforeach
</flux:select> </flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">

16
resources/views/livewire/studio/loyalty/customers.blade.php
View File

@ -21,20 +21,27 @@
<div class="p-4 space-y-6"> <div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading> <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama customer" wire:model.live.debounce.500ms="form.name" <flux:field>
autofocus autocomplete="off" /> <flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama customer" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon" mask="9999 9999 99999" <flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon" mask="9999 9999 99999"
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" /> wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1" <flux:field>
label="Jenis Kelamin"> <flux:label>Jenis Kelamin <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\Gender::cases() as $gender) @foreach (\App\Enums\Gender::cases() as $gender)
<flux:radio value="{{ $gender->value }}" icon="{{ $gender->icon() }}"> <flux:radio value="{{ $gender->value }}" icon="{{ $gender->icon() }}">
{{ $gender->label() }} {{ $gender->label() }}
</flux:radio> </flux:radio>
@endforeach @endforeach
</flux:radio.group> </flux:radio.group>
<flux:error name="form.gender" />
</flux:field>
<div class="flex"> <div class="flex">
<flux:spacer /> <flux:spacer />
@ -44,5 +51,4 @@
</div> </div>
</div> </div>
</flux:modal> </flux:modal>
</flux:main> </flux:main>

24
resources/views/livewire/studio/loyalty/tiers.blade.php
View File

@ -21,14 +21,26 @@
<div class="p-4 space-y-6"> <div class="p-4 space-y-6">
<flux:heading size="lg">{{ $modalTitle }}</flux:heading> <flux:heading size="lg">{{ $modalTitle }}</flux:heading>
<flux:input label="Nama" placeholder="Masukkan nama tier" wire:model.live.debounce.500ms="form.name" <flux:field>
autofocus autocomplete="off" /> <flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama tier" wire:model.live.debounce.500ms="form.name" autofocus
autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Min. Poin" placeholder="Masukkan minimal poin" <flux:field>
wire:model.live.debounce.500ms="form.min_points" autocomplete="off" /> <flux:label>Min. Poin <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan minimal poin" wire:model.live.debounce.500ms="form.min_points"
autocomplete="off" />
<flux:error name="form.min_points" />
</flux:field>
<flux:input label="Maks. Poin" placeholder="Masukkan maksimal poin" <flux:field>
wire:model.live.debounce.500ms="form.max_points" autocomplete="off" /> <flux:label>Maks. Poin </flux:label>
<flux:input placeholder="Masukkan maksimal poin" wire:model.live.debounce.500ms="form.max_points"
autocomplete="off" />
<flux:error name="form.max_points" />
</flux:field>
<div class="flex"> <div class="flex">
<flux:spacer /> <flux:spacer />

57
resources/views/livewire/studio/loyalty/voucher/form.blade.php
View File

@ -18,11 +18,19 @@
<div class="col-span-1 lg:col-span-2"> <div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama voucher" <flux:field>
<flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama voucher"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" /> wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Kode" placeholder="Masukkan kode voucher" <flux:field>
<flux:label>Kode <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan kode voucher"
wire:model.live.debounce.500ms="form.code" autocomplete="off" copyable /> wire:model.live.debounce.500ms="form.code" autocomplete="off" copyable />
<flux:error name="form.code" />
</flux:field>
<div class="lg:col-span-2"> <div class="lg:col-span-2">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
@ -49,18 +57,26 @@
</div> </div>
</div> </div>
<flux:date-picker label="Tanggal Mulai" with-today <flux:field>
wire:model.live.debounce.500ms="form.start_date" autocomplete="off" <flux:label>Tanggal Mulai <span class="text-red-500 ms-1">*</span></flux:label>
locale="id-ID" /> <flux:date-picker with-today wire:model.live.debounce.500ms="form.start_date"
autocomplete="off" locale="id-ID" />
<flux:error name="form.start_date" />
</flux:field>
<flux:date-picker label="Tanggal Selesai" <flux:date-picker label="Tanggal Selesai"
wire:model.live.debounce.500ms="form.end_date" autocomplete="off" wire:model.live.debounce.500ms="form.end_date" autocomplete="off"
locale="id-ID" /> locale="id-ID" />
<div class="md:col-span-2"> <div class="md:col-span-2">
<flux:editor label="Syarat dan Ketentuan" wire:model="form.terms_conditions" <flux:field>
<flux:label>Syarat dan Ketentuan <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:editor wire:model="form.terms_conditions"
placeholder="Masukkan syarat dan ketentuan" auotocomplete="off" placeholder="Masukkan syarat dan ketentuan" auotocomplete="off"
class="**:data-[slot=content]:min-h-[100px]!" /> class="**:data-[slot=content]:min-h-[100px]!" />
<flux:error name="form.terms_conditions" />
</flux:field>
</div> </div>
</div> </div>
</flux:card> </flux:card>
@ -70,63 +86,68 @@ class="**:data-[slot=content]:min-h-[100px]!" />
<div class="w-full lg:w-1/3 space-y-4"> <div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-2 p-6"> <flux:card class="space-y-2 p-6">
<flux:radio.group wire:model.live="form.type" variant="buttons" class="w-full *:flex-1" <flux:field>
label="Jumlah Diskon"> <flux:label>Jumlah Diskon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.type" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\VoucherType::cases() as $item) @foreach (\App\Enums\VoucherType::cases() as $item)
<flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}"> <flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}">
{{ $item->label() }} {{ $item->label() }}
</flux:radio> </flux:radio>
@endforeach @endforeach
</flux:radio.group> </flux:radio.group>
<flux:error name="form.type" />
</flux:field>
<flux:field> <flux:field>
<flux:label>Jumlah Diskon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group> <flux:input.group>
@if ($form->type == \App\Enums\VoucherType::FIXED->value) @if ($form->type == \App\Enums\VoucherType::FIXED->value)
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan Jumlah Diskon" <flux:input placeholder="Masukkan Jumlah Diskon"
x-mask:dynamic="$money($input, ',')" x-mask:dynamic="$money($input, ',')"
wire:model.live.debounce.500ms="form.discount_amount" autocomplete="off" /> wire:model.live.debounce.500ms="form.discount_amount" autocomplete="off" />
@else @else
<flux:input placeholder="Masukkan Jumlah Diskon" <flux:input placeholder="Masukkan Jumlah Diskon"
wire:model.live.debounce.500ms="form.discount_amount" autocomplete="off" /> wire:model.live.debounce.500ms="form.discount_amount" autocomplete="off" />
<flux:input.group.suffix>%</flux:input.group.suffix> <flux:input.group.suffix>%</flux:input.group.suffix>
@endif @endif
</flux:input.group> </flux:input.group>
<flux:error name="form.discount_amount" /> <flux:error name="form.discount_amount" />
</flux:field> </flux:field>
@if ($form->type == \App\Enums\VoucherType::PERCENTAGE->value) @if ($form->type == \App\Enums\VoucherType::PERCENTAGE->value)
<flux:field> <flux:field>
<flux:label>Maks. Diskon</flux:label> <flux:label>Maks. Diskon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan maksimal diskon" <flux:input placeholder="Masukkan maksimal diskon"
x-mask:dynamic="$money($input, ',')" x-mask:dynamic="$money($input, ',')"
wire:model.live.debounce.500ms="form.max_discount" autocomplete="off" /> wire:model.live.debounce.500ms="form.max_discount" autocomplete="off" />
</flux:input.group> </flux:input.group>
<flux:error name="form.max_discount" /> <flux:error name="form.max_discount" />
</flux:field> </flux:field>
@endif @endif
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<flux:radio.group wire:model.live="form.is_active" variant="buttons" class="w-full *:flex-1" <flux:field>
label="Aktif?"> <flux:label>Aktif? <span class="text-red-500 ms-1">*</span></flux:label>
<flux:radio.group wire:model.live="form.is_active" variant="buttons"
class="w-full *:flex-1">
@foreach (\App\Enums\IsActive::cases() as $item) @foreach (\App\Enums\IsActive::cases() as $item)
<flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}"> <flux:radio value="{{ $item->value }}" icon="{{ $item->icon() }}">
{{ $item->label() }} {{ $item->label() }}
</flux:radio> </flux:radio>
@endforeach @endforeach
</flux:radio.group> </flux:radio.group>
<flux:error name="form.is_active" />
</flux:field>
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet" label="Outlet" <flux:field>
<flux:label>Outlet <span class="text-red-500 ms-1">*</span></flux:label>
<flux:select variant="listbox" multiple searchable placeholder="Pilih Outlet"
wire:model.live.debounce.500ms="form.outlet_ids"> wire:model.live.debounce.500ms="form.outlet_ids">
<flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua <flux:select.option wire:click="selectAllOutlets" wire:ignore>Pilih Semua
</flux:select.option> </flux:select.option>
@ -137,6 +158,8 @@ class="**:data-[slot=content]:min-h-[100px]!" />
</flux:select.option> </flux:select.option>
@endforeach @endforeach
</flux:select> </flux:select>
<flux:error name="form.outlet_ids" />
</flux:field>
</flux:card> </flux:card>
</div> </div>
</div> </div>

63
resources/views/livewire/studio/master/outlet/form.blade.php
View File

@ -18,44 +18,83 @@
<div class="col-span-1 lg:col-span-2"> <div class="col-span-1 lg:col-span-2">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama outlet" <flux:field>
<flux:label>Nama
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan nama outlet"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" /> wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:error name="form.name" />
</flux:field>
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon" <flux:field>
mask="9999 9999 99999" wire:model.live.debounce.500ms="form.phone_number" <flux:label>Nomor Telepon
autocomplete="off" /> <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan nomor telepon" mask="9999 9999 99999"
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
<flux:error name="form.phone_number" />
</flux:field>
<div class="md:col-span-2"> <div class="md:col-span-2">
<flux:textarea label="Alamat" placeholder="Masukkan alamat lengkap" <flux:field>
<flux:label>Alamat
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:textarea placeholder="Masukkan alamat lengkap"
wire:model.live.debounce.500ms="form.address" autocomplete="off" wire:model.live.debounce.500ms="form.address" autocomplete="off"
rows="2" /> rows="2" />
<flux:error name="form.address" />
</flux:field>
</div> </div>
<flux:input label="Patokan" placeholder="Masukkan patokan" <flux:field>
<flux:label>Patokan
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan patokan"
wire:model.live.debounce.500ms="form.landmark" autocomplete="off" /> wire:model.live.debounce.500ms="form.landmark" autocomplete="off" />
<flux:error name="form.landmark" />
</flux:field>
<flux:input label="Titik Maps" placeholder="Masukkan titik maps" <flux:input label="Titik Maps" placeholder="Masukkan titik maps"
wire:model.live.debounce.500ms="form.maps_url" autocomplete="off" /> wire:model.live.debounce.500ms="form.maps_url" autocomplete="off" />
<flux:date-picker label="Tanggal Buka" with-today <flux:field>
wire:model.live.debounce.500ms="form.opened_date" autocomplete="off" <flux:label>Tanggal Buka
locale="id-ID" value="2023-01-01" /> <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:date-picker with-today wire:model.live.debounce.500ms="form.opened_date"
autocomplete="off" locale="id-ID" />
<flux:error name="form.opened_date" />
</flux:field>
<flux:field>
<flux:label>Status
<span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:radio.group wire:model.live="form.status" variant="buttons" <flux:radio.group wire:model.live="form.status" variant="buttons"
class="w-full *:flex-1" label="Status"> class="w-full *:flex-1">
@foreach (\App\Enums\OutletStatus::cases() as $status) @foreach (\App\Enums\OutletStatus::cases() as $status)
<flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}"> <flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}">
{{ $status->label() }} {{ $status->label() }}
</flux:radio> </flux:radio>
@endforeach @endforeach
</flux:radio.group> </flux:radio.group>
<flux:error name="form.status" />
</flux:field>
</div> </div>
</flux:card> </flux:card>
</div> </div>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="space-y-3"> <div class="space-y-3">
<h3 class="text-sm font-medium">Gambar Utama</h3> <h3 class="text-sm font-medium">Gambar Utama <span class="text-red-500 ms-1">*</span>
</h3>
<div class="dropzone-wrapper"> <div class="dropzone-wrapper">
<livewire:dropzone wire:model="form.featured_image" :rules="['image', 'mimes:png,jpeg', 'max:10420']" <livewire:dropzone wire:model="form.featured_image" :rules="['image', 'mimes:png,jpeg', 'max:10420']"
:max-files="1" :key="'featured_image'" :files="$form->featured_image" /> :max-files="1" :key="'featured_image'" :files="$form->featured_image" />
@ -78,7 +117,7 @@ class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<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 <span class="text-red-500 ms-1">*</span></h3>
<div class="dropzone-wrapper"> <div class="dropzone-wrapper">
<livewire:dropzone wire:model="form.images" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="5" <livewire:dropzone wire:model="form.images" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="5"
:key="'images'" :multiple="true" :files="$form->images" /> :key="'images'" :multiple="true" :files="$form->images" />

82
resources/views/livewire/studio/master/user/form.blade.php
View File

@ -19,46 +19,71 @@
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="md:col-span-2"> <div class="md:col-span-2">
<flux:input label="Nama Lengkap" placeholder="Masukkan nama lengkap" <flux:field>
<flux:label>Nama Lengkap <span class="text-red-500 ms-1">*</span>
</flux:label>
<flux:input placeholder="Masukkan nama lengkap"
wire:model.live.debounce.500ms="form.full_name" autofocus wire:model.live.debounce.500ms="form.full_name" autofocus
autocomplete="off" /> autocomplete="off" />
<flux:error name="form.full_name" />
</flux:field>
</div> </div>
<flux:input label="Nama Pengguna" placeholder="Masukkan nama pengguna" <flux:field>
wire:model.live.debounce.500ms="form.username" autofocus autocomplete="off" /> <flux:label>Nama Pengguna <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nama pengguna"
<flux:input label="Email" placeholder="Masukkan email" wire:model.live.debounce.500ms="form.username" autocomplete="off" />
wire:model.live.debounce.500ms="form.email" autofocus autocomplete="off" /> <flux:error name="form.username" />
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon" </flux:field>
mask="9999 9999 99999" wire:model.live.debounce.500ms="form.phone_number"
autocomplete="off" />
<flux:field> <flux:field>
<flux:label>Gaji Pokok</flux:label> <flux:label>Email <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan email"
wire:model.live.debounce.500ms="form.email" autocomplete="off" />
<flux:error name="form.email" />
</flux:field>
<flux:field>
<flux:label>Nomor Telepon <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input placeholder="Masukkan nomor telepon" mask="9999 9999 99999"
wire:model.live.debounce.500ms="form.phone_number" autocomplete="off" />
<flux:error name="form.phone_number" />
</flux:field>
<flux:field>
<flux:label>Gaji Pokok <span class="text-red-500 ms-1">*</span></flux:label>
<flux:input.group> <flux:input.group>
<flux:input.group.prefix>Rp</flux:input.group.prefix> <flux:input.group.prefix>Rp</flux:input.group.prefix>
<flux:input placeholder="Masukkan gaji pokok" <flux:input placeholder="Masukkan gaji pokok"
x-mask:dynamic="$money($input, ',')" x-mask:dynamic="$money($input, ',')"
wire:model.live.debounce.500ms="form.base_salary" autocomplete="off" /> wire:model.live.debounce.500ms="form.base_salary" autocomplete="off" />
</flux:input.group> </flux:input.group>
<flux:error name="form.base_salary" /> <flux:error name="form.base_salary" />
</flux:field> </flux:field>
<flux:date-picker label="Tanggal Lahir" with-today <flux:field>
wire:model.live.debounce.500ms="form.birthdate" autocomplete="off" <flux:label>Tanggal Lahir <span class="text-red-500 ms-1">*</span></flux:label>
locale="id-ID" selectable-header /> <flux:date-picker with-today wire:model.live.debounce.500ms="form.birthdate"
autocomplete="off" locale="id-ID" selectable-header />
<flux:error name="form.birthdate" />
</flux:field>
<flux:date-picker label="Tanggal Bergabung" with-today <flux:field>
wire:model.live.debounce.500ms="form.hire_date" autocomplete="off" <flux:label>Tanggal Bergabung <span class="text-red-500 ms-1">*</span>
locale="id-ID" selectable-header /> </flux:label>
<flux:date-picker with-today wire:model.live.debounce.500ms="form.hire_date"
autocomplete="off" locale="id-ID" selectable-header />
<flux:error name="form.hire_date" />
</flux:field>
<div class="md:col-span-2"> <div class="md:col-span-2">
<flux:textarea label="Alamat" placeholder="Masukkan alamat lengkap" <flux:field>
<flux:label>Alamat <span class="text-red-500 ms-1">*</span></flux:label>
<flux:textarea placeholder="Masukkan alamat lengkap"
wire:model.live.debounce.500ms="form.address" autocomplete="off" wire:model.live.debounce.500ms="form.address" autocomplete="off"
rows="2" /> rows="2" />
<flux:error name="form.address" />
</flux:field>
</div> </div>
</div> </div>
</flux:card> </flux:card>
@ -68,29 +93,31 @@
<div class="w-full lg:w-1/3 space-y-4"> <div class="w-full lg:w-1/3 space-y-4">
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="space-y-3"> <flux:field>
<flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1" <flux:label>Jenis Kelamin <span class="text-red-500 ms-1">*</span></flux:label>
label="Jenis Kelamin"> <flux:radio.group wire:model.live="form.gender" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\Gender::cases() as $gender) @foreach (\App\Enums\Gender::cases() as $gender)
<flux:radio value="{{ $gender->value }}" icon="{{ $gender->icon() }}"> <flux:radio value="{{ $gender->value }}" icon="{{ $gender->icon() }}">
{{ $gender->label() }} {{ $gender->label() }}
</flux:radio> </flux:radio>
@endforeach @endforeach
</flux:radio.group> </flux:radio.group>
</div> <flux:error name="form.gender" />
</flux:field>
</flux:card> </flux:card>
<flux:card class="space-y-6 p-6"> <flux:card class="space-y-6 p-6">
<div class="space-y-2"> <flux:field>
<flux:radio.group wire:model.live="form.status" variant="buttons" label="Status" <flux:label>Status <span class="text-red-500 ms-1">*</span></flux:label>
class="w-full *:flex-1"> <flux:radio.group wire:model.live="form.status" variant="buttons" class="w-full *:flex-1">
@foreach (\App\Enums\UserStatus::cases() as $status) @foreach (\App\Enums\UserStatus::cases() as $status)
<flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}"> <flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}">
{{ $status->label() }} {{ $status->label() }}
</flux:radio> </flux:radio>
@endforeach @endforeach
</flux:radio.group> </flux:radio.group>
</div> <flux:error name="form.status" />
</flux:field>
</flux:card> </flux:card>
</div> </div>
</div> </div>
@ -101,6 +128,5 @@ class="w-full *:flex-1">
</flux:button> </flux:button>
</div> </div>
</div> </div>
</div> </div>
</flux:main> </flux:main>