fix(outlet): menghapus clearable di input

-memisahkan opening_hours dan facilities ke masing masing tabel
-membuat tabel opeing hours dan facilities
-menyesuaikan pemisahakan kolom tersebut menjadi tabel
This commit is contained in:
Yoga Pangestu 2025-09-29 11:50:03 +07:00
parent c842b022e7
commit 52e0758419
11 changed files with 235 additions and 55 deletions

View File

@ -2,6 +2,7 @@
namespace App\Livewire\Datatable;
use App\Enums\Day;
use App\Enums\OutletStatus;
use App\Models\Outlet;
use App\Traits\Datatable\WithAppendColumn;
@ -9,6 +10,7 @@
use App\Traits\Datatable\WithPrependColumn;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Str;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Rappasoft\LaravelLivewireTables\Views\Columns\ArrayColumn;
@ -42,22 +44,30 @@ public function columns(): array
})
->html(),
ArrayColumn::make('Jam Buka', 'opening_hours')
->data(fn ($value, $row) => normalizeOpeningHours($row->opening_hours))
ArrayColumn::make('Jam Operasioanl')
->data(
fn ($value, $row) => $row->openingHours
->mapWithKeys(fn ($hour) => [
Str::lower(Day::from($hour->day->value)->label()) => [
'open' => formatTime($hour->open_time),
'close' => formatTime($hour->close_time),
],
])
)
->outputFormat(
fn ($index, $value) => "<span class='flex items-center gap-2 py-1 text-xs'>
<span class='font-semibold'>".ucfirst($index).': </span>
<span>'
.(($value['open'] === null && $value['close'] === null)
? 'Tutup'
: "{$value['open']} - {$value['close']}")
.'</span>
</span>'
<span class='font-semibold'>".Str::ucfirst($index).': </span>
<span class="text-gray-600 dark:text-gray-400">'.(
($value['open'] === null && $value['close'] === null)
? 'Tutup'
: "{$value['open']} - {$value['close']}"
).'</span>
</span>'
)
->flexCol(['class' => 'gap-2 flex-wrap']),
ArrayColumn::make('Fasilitas', 'facilities')
->data(fn ($value, $row) => $row->facilities)
ArrayColumn::make('Fasilitas')
->data(fn ($value, $row) => $row->facilities->pluck('name')->toArray())
->outputFormat(fn ($index, $value) => Blade::render('<flux:badge color="zinc" dot>'.$value.'</flux:badge>'))
->flexRow(['class' => 'gap-2 flex-wrap']),
@ -112,7 +122,7 @@ public function columns(): array
public function builder(): Builder
{
return Outlet::select('id', 'name', 'phone_number', 'landmark', 'address', 'opening_hours', 'facilities', 'opened_date', 'closed_date', 'status');
return Outlet::select('id', 'name', 'phone_number', 'landmark', 'address', 'opened_date', 'closed_date', 'status')->with(['openingHours', 'facilities']);
}
public function filters(): array

View File

@ -2,7 +2,9 @@
namespace App\Livewire\Forms;
use App\Enums\Day;
use App\Enums\OutletStatus;
use App\Models\OpeningHour;
use App\Models\Outlet;
use App\Rules\PhoneNumber;
use App\Traits\WithMediaHandler;
@ -26,21 +28,13 @@ class OutletForm extends Form
public ?string $maps_url = null;
public array $opening_hours = [
'senin' => ['open' => null, 'close' => null],
'selasa' => ['open' => null, 'close' => null],
'rabu' => ['open' => null, 'close' => null],
'kamis' => ['open' => null, 'close' => null],
'jumat' => ['open' => null, 'close' => null],
'sabtu' => ['open' => null, 'close' => null],
'minggu' => ['open' => null, 'close' => null],
];
public array $opening_hours = [];
public array $facilities = [''];
public array $facilities = ['Parkir'];
public string $opened_date = '';
public ?string $status = null;
public string $status = '1';
public array $featured_image = [];
@ -48,13 +42,11 @@ class OutletForm extends Form
public function rules(): array
{
$days = ['senin', 'selasa', 'rabu', 'kamis', 'jumat', 'sabtu', 'minggu'];
$rules = [
'name' => ['required', 'string', 'max:100'],
'phone_number' => ['required', 'string', new PhoneNumber],
'address' => ['required', 'string'],
'landmark' => ['required', 'string', 'max:40'],
'landmark' => ['required', 'string', 'max:20'],
'maps_url' => [
'nullable',
'string',
@ -69,10 +61,10 @@ public function rules(): array
'images' => ['required', 'array', 'max:5'],
];
foreach ($days as $day) {
$rules["opening_hours.$day"] = ['required', 'array'];
$rules["opening_hours.$day.open"] = ['nullable', 'date_format:H:i'];
$rules["opening_hours.$day.close"] = ['nullable', 'date_format:H:i'];
foreach (Day::cases() as $day) {
$rules["opening_hours.{$day->value}"] = ['required', 'array'];
$rules["opening_hours.{$day->value}.open_time"] = ['nullable', 'date_format:H:i'];
$rules["opening_hours.{$day->value}.close_time"] = ['nullable', 'date_format:H:i'];
}
return $rules;
@ -96,6 +88,8 @@ public function validationAttributes(): array
public function setOutlet(Outlet $outlet)
{
$outlet = $outlet->load(['openingHours', 'facilities']);
$this->outlet = $outlet;
$this->name = $outlet->name;
@ -103,11 +97,17 @@ public function setOutlet(Outlet $outlet)
$this->address = $outlet->address;
$this->landmark = $outlet->landmark;
$this->maps_url = $outlet->maps_url;
$this->opening_hours = $outlet->opening_hours;
$this->facilities = $outlet->facilities;
$this->opening_hours = $outlet->openingHours
->mapWithKeys(fn ($item) => [
$item->day->value => [
'open_time' => formatTime($item->open_time),
'close_time' => formatTime($item->close_time),
],
])
->toArray();
$this->facilities = $outlet->facilities->pluck('name')->toArray();
$this->opened_date = $outlet->opened_date;
$this->status = $outlet->status->value;
$this->featured_image = $this->mapMediaCollection($outlet->getMedia('featured_image'));
$this->images = $this->mapMediaCollection($outlet->getMedia('images'));
}
@ -127,6 +127,19 @@ public function store()
DB::transaction(function () use ($data) {
$outlet = Outlet::create($data);
$openingHours = collect($data['opening_hours'])
->map(fn ($time, $day) => [
'outlet_id' => $outlet->id,
'day' => $day,
'open_time' => $time['open_time'],
'close_time' => $time['close_time'],
])
->values()
->toArray();
OpeningHour::insert($openingHours);
$outlet->facilities()->createMany(collect($data['facilities'])->map(fn ($facility) => ['name' => $facility])->toArray());
$this->uploadMedia($this->featured_image, $outlet, 'featured_image');
$this->uploadMedia($this->images, $outlet, 'images');
});
@ -138,9 +151,6 @@ public function update()
$data = $this->all();
$this->syncMedia($data['featured_image'], $this->outlet, 'featured_image');
$this->syncMedia($data['images'], $this->outlet, 'images');
if ($data['status'] == OutletStatus::TERMINATED->value) {
$data['closed_date'] = now()->toDateString();
} else {
@ -150,8 +160,30 @@ public function update()
DB::transaction(function () use ($data) {
$this->outlet->update($data);
$this->uploadMedia($this->featured_image, $this->outlet, 'featured_image');
$this->uploadMedia($this->images, $this->outlet, 'images');
foreach ($data['opening_hours'] as $day => $hours) {
OpeningHour::updateOrCreate(
[
'outlet_id' => $this->outlet->id,
'day' => $day,
],
[
'open_time' => $hours['open_time'] ?? null,
'close_time' => $hours['close_time'] ?? null,
]
);
}
$facilities = collect($data['facilities']);
foreach ($facilities as $facilityName) {
$this->outlet->facilities()->updateOrCreate(
['name' => $facilityName],
['name' => $facilityName]
);
}
$this->syncMedia($data['featured_image'], $this->outlet, 'featured_image');
$this->syncMedia($data['images'], $this->outlet, 'images');
});
}
}

View File

@ -2,6 +2,7 @@
namespace App\Livewire\Studio\Master\Outlet;
use App\Enums\Day;
use App\Livewire\Forms\OutletForm;
use App\Traits\Outlet\WithFacilityHandler;
use App\Traits\WithUpdatedData;
@ -16,10 +17,24 @@ class Create extends Component
public OutletForm $form;
public array $days = [];
public function mount()
{
$this->form->opening_hours = collect(Day::cases())
->mapWithKeys(fn (Day $day) => [
$day->value => ['open_time' => null, 'close_time' => null],
])
->toArray();
$this->days = Day::cases();
}
public function save()
{
$this->form->store();
$this->dispatch('refreshDatatable');
Flux::toast(
heading: 'Berhasil',
text: 'Outlet berhasil ditambahkan.',

View File

@ -2,6 +2,7 @@
namespace App\Livewire\Studio\Master\Outlet;
use App\Enums\Day;
use App\Livewire\Forms\OutletForm;
use App\Models\Outlet;
use App\Traits\Outlet\WithFacilityHandler;
@ -17,9 +18,13 @@ class Edit extends Component
public OutletForm $form;
public array $days = [];
public function mount(Outlet $outlet)
{
$this->form->setOutlet($outlet);
$this->days = Day::cases();
}
public function save()

20
app/Models/Facility.php Normal file
View File

@ -0,0 +1,20 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\SoftDeletes;
class Facility extends Model
{
use HasFactory, SoftDeletes;
protected $guarded = ['id'];
public function outlet(): BelongsTo
{
return $this->belongsTo(Outlet::class);
}
}

View File

@ -0,0 +1,28 @@
<?php
namespace App\Models;
use App\Enums\Day;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;
use Illuminate\Database\Eloquent\SoftDeletes;
class OpeningHour extends Model
{
use HasFactory, SoftDeletes;
protected $guarded = ['id'];
protected function casts(): array
{
return [
'day' => Day::class,
];
}
public function outlet(): BelongsTo
{
return $this->belongsTo(Outlet::class);
}
}

View File

@ -6,6 +6,7 @@
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
use Illuminate\Database\Eloquent\Relations\HasMany;
use Illuminate\Database\Eloquent\SoftDeletes;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
@ -21,8 +22,6 @@ class Outlet extends Model implements HasMedia
protected function casts(): array
{
return [
'opening_hours' => 'array',
'facilities' => 'array',
'status' => OutletStatus::class,
];
}
@ -38,4 +37,14 @@ public function users(): BelongsToMany
{
return $this->belongsToMany(User::class, 'user_outlet')->withPivot('position_id');
}
public function openingHours(): HasMany
{
return $this->hasMany(OpeningHour::class);
}
public function facilities(): HasMany
{
return $this->hasMany(Facility::class);
}
}

View File

@ -20,8 +20,6 @@ public function up(): void
$table->text('address');
$table->string('landmark', 20);
$table->text('maps_url')->nullable();
$table->json('opening_hours');
$table->json('facilities');
$table->enum('status', [OutletStatus::values()])->default(OutletStatus::OPERATIONAL)->comment(OutletStatus::comment());
$table->date('opened_date');
$table->date('closed_date')->nullable();

View File

@ -0,0 +1,33 @@
<?php
use App\Enums\Day;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('opening_hours', function (Blueprint $table) {
$table->id();
$table->foreignId('outlet_id')->constrained()->cascadeOnDelete();
$table->enum('day', Day::values())->comment(Day::comment());
$table->time('open_time')->nullable();
$table->time('close_time')->nullable();
$table->timestamps();
$table->softDeletes();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('opening_hours');
}
};

View File

@ -0,0 +1,30 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('facilities', function (Blueprint $table) {
$table->id();
$table->foreignId('outlet_id')->constrained()->cascadeOnDelete();
$table->string('name', 30);
$table->timestamps();
$table->softDeletes();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('facilities');
}
};

View File

@ -19,27 +19,26 @@
<flux:card class="space-y-6 p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<flux:input label="Nama" placeholder="Masukkan nama outlet"
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off"
clearable />
wire:model.live.debounce.500ms="form.name" autofocus autocomplete="off" />
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon"
mask="9999 9999 99999" wire:model.live.debounce.500ms="form.phone_number"
autocomplete="off" clearable />
autocomplete="off" />
<div class="md:col-span-2">
<flux:textarea label="Alamat" placeholder="Masukkan alamat lengkap"
wire:model.live.debounce.500ms="form.address" autocomplete="off" clearable
wire:model.live.debounce.500ms="form.address" autocomplete="off"
rows="2" />
</div>
<flux:input label="Patokan" placeholder="Masukkan patokan"
wire:model.live.debounce.500ms="form.landmark" autocomplete="off" clearable />
wire:model.live.debounce.500ms="form.landmark" autocomplete="off" />
<flux:input label="Titik Maps" placeholder="Masukkan titik maps"
wire:model.live.debounce.500ms="form.maps_url" autocomplete="off" clearable />
wire:model.live.debounce.500ms="form.maps_url" autocomplete="off" />
<flux:date-picker label="Tanggal Buka" with-today
wire:model.live.debounce.500ms="form.opened_date" autocomplete="off" clearable
wire:model.live.debounce.500ms="form.opened_date" autocomplete="off"
locale="id-ID" value="2023-01-01" />
<flux:radio.group wire:model.live="form.status" variant="buttons"
@ -106,13 +105,14 @@ class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
<flux:card class="space-y-6 p-6">
<div class="space-y-3">
<h3 class="text-sm font-medium">Jam Operasional</h3>
@foreach (['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'] as $day)
<div class="grid grid-cols-3 gap-2 items-center">
<span class="text-sm">{{ $day }}</span>
@foreach ($days as $day)
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 items-center">
<span class="text-sm">{{ $day->label() }}</span>
<flux:input type="time"
wire:model.live.debounce.500ms="form.opening_hours.{{ strtolower($day) }}.open" />
wire:model.live.debounce.500ms="form.opening_hours.{{ $day->value }}.open_time" />
<flux:input type="time"
wire:model.live.debounce.500ms="form.opening_hours.{{ strtolower($day) }}.close" />
wire:model.live.debounce.500ms="form.opening_hours.{{ $day->value }}.close_time" />
</div>
@endforeach
</div>
@ -124,7 +124,7 @@ class="mt-3 text-sm font-medium text-red-500 dark:text-red-400">
@foreach ($form->facilities as $index => $facility)
<div class="flex gap-2 items-center">
<flux:input wire:model.live.debounce.500ms="form.facilities.{{ $index }}"
placeholder="Masukkan fasilitas" class="flex-1" autocomplete="off" clearable />
placeholder="Masukkan fasilitas" class="flex-1" autocomplete="off" />
@if ($index != 0)
<flux:button variant="danger" icon="trash"
wire:click="removeFacility({{ $index }})"