feat: install spatie media-library and implement to outlet, add trait for handler image
This commit is contained in:
Yoga Pangestu
parent
4bf3f0cbdd
commit
078b72d2ed
@ -5,11 +5,15 @@
|
||||
use App\Enums\OutletStatus;
|
||||
use App\Models\Outlet;
|
||||
use App\Rules\PhoneNumber;
|
||||
use App\Traits\WithMediaHandler;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Validation\Rule;
|
||||
use Livewire\Form;
|
||||
|
||||
class OutletForm extends Form
|
||||
{
|
||||
use WithMediaHandler;
|
||||
|
||||
public ?Outlet $outlet;
|
||||
|
||||
public string $name = '';
|
||||
@ -38,6 +42,10 @@ class OutletForm extends Form
|
||||
|
||||
public ?string $status = null;
|
||||
|
||||
public array $featured_image = [];
|
||||
|
||||
public array $images = [];
|
||||
|
||||
public function rules(): array
|
||||
{
|
||||
$days = ['senin', 'selasa', 'rabu', 'kamis', 'jumat', 'sabtu', 'minggu'];
|
||||
@ -57,6 +65,8 @@ public function rules(): array
|
||||
'facilities.*' => ['required', 'string', 'max:20'],
|
||||
'opened_date' => ['required', 'date'],
|
||||
'status' => ['required', Rule::in(OutletStatus::cases())],
|
||||
'featured_image' => ['required', 'array', 'max:1'],
|
||||
'images' => ['required', 'array', 'max:5'],
|
||||
];
|
||||
|
||||
foreach ($days as $day) {
|
||||
@ -79,6 +89,8 @@ public function validationAttributes(): array
|
||||
'opening_hours.*' => 'jam beroperasi',
|
||||
'facilities.*' => 'fasilitas',
|
||||
'opened_date' => 'tanggal buka',
|
||||
'featured_image' => 'gambar utama',
|
||||
'images' => 'gambar',
|
||||
];
|
||||
}
|
||||
|
||||
@ -95,6 +107,9 @@ public function setOutlet(Outlet $outlet)
|
||||
$this->facilities = $outlet->facilities;
|
||||
$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'));
|
||||
}
|
||||
|
||||
public function store()
|
||||
@ -109,7 +124,12 @@ public function store()
|
||||
$data['closed_date'] = null;
|
||||
}
|
||||
|
||||
Outlet::create($data);
|
||||
DB::transaction(function () use ($data) {
|
||||
$outlet = Outlet::create($data);
|
||||
|
||||
$this->uploadMedia($this->featured_image, $outlet, 'featured_image');
|
||||
$this->uploadMedia($this->images, $outlet, 'images');
|
||||
});
|
||||
}
|
||||
|
||||
public function update()
|
||||
@ -118,12 +138,20 @@ 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 {
|
||||
$data['closed_date'] = null;
|
||||
}
|
||||
|
||||
$this->outlet->update($data);
|
||||
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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,12 +7,14 @@
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsToMany;
|
||||
use Illuminate\Database\Eloquent\SoftDeletes;
|
||||
use Spatie\MediaLibrary\HasMedia;
|
||||
use Spatie\MediaLibrary\InteractsWithMedia;
|
||||
use Spatie\Sluggable\HasSlug;
|
||||
use Spatie\Sluggable\SlugOptions;
|
||||
|
||||
class Outlet extends Model
|
||||
class Outlet extends Model implements HasMedia
|
||||
{
|
||||
use HasFactory, HasSlug, SoftDeletes;
|
||||
use HasFactory, HasSlug, InteractsWithMedia, SoftDeletes;
|
||||
|
||||
protected $guarded = ['id'];
|
||||
|
||||
|
||||
49
app/Traits/WithMediaHandler.php
Normal file
49
app/Traits/WithMediaHandler.php
Normal file
@ -0,0 +1,49 @@
|
||||
<?php
|
||||
|
||||
namespace App\Traits;
|
||||
|
||||
use Illuminate\Support\Str;
|
||||
use Spatie\MediaLibrary\MediaCollections\Models\Collections\MediaCollection;
|
||||
use Spatie\MediaLibrary\MediaCollections\Models\Media;
|
||||
|
||||
trait WithMediaHandler
|
||||
{
|
||||
public function mapMediaCollection(MediaCollection $mediaCollection)
|
||||
{
|
||||
return $mediaCollection->map(fn ($media) => [
|
||||
'id' => $media->id,
|
||||
'extension' => pathinfo($media->file_name, PATHINFO_EXTENSION),
|
||||
'temporaryUrl' => $media->getFullUrl(),
|
||||
'name' => Str::limit($media->file_name, 15),
|
||||
'size' => $media->size,
|
||||
'tmpFilename' => $media->getPath(),
|
||||
])->toArray();
|
||||
}
|
||||
|
||||
protected function syncMedia(array $newMedia, $model, string $collectionName): void
|
||||
{
|
||||
$existingMediaIds = $model->getMedia($collectionName)->pluck('id')->toArray();
|
||||
|
||||
$newMediaIds = collect($newMedia)->pluck('id')->filter()->toArray();
|
||||
|
||||
$toDeleteIds = array_diff($existingMediaIds, $newMediaIds);
|
||||
|
||||
foreach ($toDeleteIds as $id) {
|
||||
$media = Media::find($id);
|
||||
if ($media) {
|
||||
$media->delete();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected function uploadMedia(array $mediaArray, $model, string $collectionName): void
|
||||
{
|
||||
foreach ($mediaArray as $file) {
|
||||
if (isset($file['path'])) {
|
||||
$model->addMedia($file['path'])
|
||||
->preservingOriginal()
|
||||
->toMediaCollection($collectionName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,7 @@
|
||||
"livewire/flux-pro": "2.2.5",
|
||||
"livewire/livewire": "^3.6",
|
||||
"rappasoft/laravel-livewire-tables": "^3.7",
|
||||
"spatie/laravel-medialibrary": "^11.15",
|
||||
"spatie/laravel-sluggable": "^3.7"
|
||||
},
|
||||
"repositories": [
|
||||
|
||||
291
config/media-library.php
Normal file
291
config/media-library.php
Normal file
@ -0,0 +1,291 @@
|
||||
<?php
|
||||
|
||||
return [
|
||||
|
||||
/*
|
||||
* The disk on which to store added files and derived images by default. Choose
|
||||
* one or more of the disks you've configured in config/filesystems.php.
|
||||
*/
|
||||
'disk_name' => env('MEDIA_DISK', 'public'),
|
||||
|
||||
/*
|
||||
* The maximum file size of an item in bytes.
|
||||
* Adding a larger file will result in an exception.
|
||||
*/
|
||||
'max_file_size' => 1024 * 1024 * 10, // 10MB
|
||||
|
||||
/*
|
||||
* This queue connection will be used to generate derived and responsive images.
|
||||
* Leave empty to use the default queue connection.
|
||||
*/
|
||||
'queue_connection_name' => env('QUEUE_CONNECTION', 'sync'),
|
||||
|
||||
/*
|
||||
* This queue will be used to generate derived and responsive images.
|
||||
* Leave empty to use the default queue.
|
||||
*/
|
||||
'queue_name' => env('MEDIA_QUEUE', ''),
|
||||
|
||||
/*
|
||||
* By default all conversions will be performed on a queue.
|
||||
*/
|
||||
'queue_conversions_by_default' => env('QUEUE_CONVERSIONS_BY_DEFAULT', true),
|
||||
|
||||
/*
|
||||
* Should database transactions be run after database commits?
|
||||
*/
|
||||
'queue_conversions_after_database_commit' => env('QUEUE_CONVERSIONS_AFTER_DB_COMMIT', true),
|
||||
|
||||
/*
|
||||
* The fully qualified class name of the media model.
|
||||
*/
|
||||
'media_model' => Spatie\MediaLibrary\MediaCollections\Models\Media::class,
|
||||
|
||||
/*
|
||||
* The fully qualified class name of the media observer.
|
||||
*/
|
||||
'media_observer' => Spatie\MediaLibrary\MediaCollections\Models\Observers\MediaObserver::class,
|
||||
|
||||
/*
|
||||
* When enabled, media collections will be serialised using the default
|
||||
* laravel model serialization behaviour.
|
||||
*
|
||||
* Keep this option disabled if using Media Library Pro components (https://medialibrary.pro)
|
||||
*/
|
||||
'use_default_collection_serialization' => false,
|
||||
|
||||
/*
|
||||
* The fully qualified class name of the model used for temporary uploads.
|
||||
*
|
||||
* This model is only used in Media Library Pro (https://medialibrary.pro)
|
||||
*/
|
||||
'temporary_upload_model' => Spatie\MediaLibraryPro\Models\TemporaryUpload::class,
|
||||
|
||||
/*
|
||||
* When enabled, Media Library Pro will only process temporary uploads that were uploaded
|
||||
* in the same session. You can opt to disable this for stateless usage of
|
||||
* the pro components.
|
||||
*/
|
||||
'enable_temporary_uploads_session_affinity' => true,
|
||||
|
||||
/*
|
||||
* When enabled, Media Library pro will generate thumbnails for uploaded file.
|
||||
*/
|
||||
'generate_thumbnails_for_temporary_uploads' => true,
|
||||
|
||||
/*
|
||||
* This is the class that is responsible for naming generated files.
|
||||
*/
|
||||
'file_namer' => Spatie\MediaLibrary\Support\FileNamer\DefaultFileNamer::class,
|
||||
|
||||
/*
|
||||
* The class that contains the strategy for determining a media file's path.
|
||||
*/
|
||||
'path_generator' => Spatie\MediaLibrary\Support\PathGenerator\DefaultPathGenerator::class,
|
||||
|
||||
/*
|
||||
* The class that contains the strategy for determining how to remove files.
|
||||
*/
|
||||
'file_remover_class' => Spatie\MediaLibrary\Support\FileRemover\DefaultFileRemover::class,
|
||||
|
||||
/*
|
||||
* Here you can specify which path generator should be used for the given class.
|
||||
*/
|
||||
'custom_path_generators' => [
|
||||
// Model::class => PathGenerator::class
|
||||
// or
|
||||
// 'model_morph_alias' => PathGenerator::class
|
||||
],
|
||||
|
||||
/*
|
||||
* When urls to files get generated, this class will be called. Use the default
|
||||
* if your files are stored locally above the site root or on s3.
|
||||
*/
|
||||
'url_generator' => Spatie\MediaLibrary\Support\UrlGenerator\DefaultUrlGenerator::class,
|
||||
|
||||
/*
|
||||
* Moves media on updating to keep path consistent. Enable it only with a custom
|
||||
* PathGenerator that uses, for example, the media UUID.
|
||||
*/
|
||||
'moves_media_on_update' => false,
|
||||
|
||||
/*
|
||||
* Whether to activate versioning when urls to files get generated.
|
||||
* When activated, this attaches a ?v=xx query string to the URL.
|
||||
*/
|
||||
'version_urls' => false,
|
||||
|
||||
/*
|
||||
* The media library will try to optimize all converted images by removing
|
||||
* metadata and applying a little bit of compression. These are
|
||||
* the optimizers that will be used by default.
|
||||
*/
|
||||
'image_optimizers' => [
|
||||
Spatie\ImageOptimizer\Optimizers\Jpegoptim::class => [
|
||||
'-m85', // set maximum quality to 85%
|
||||
'--force', // ensure that progressive generation is always done also if a little bigger
|
||||
'--strip-all', // this strips out all text information such as comments and EXIF data
|
||||
'--all-progressive', // this will make sure the resulting image is a progressive one
|
||||
],
|
||||
Spatie\ImageOptimizer\Optimizers\Pngquant::class => [
|
||||
'--force', // required parameter for this package
|
||||
],
|
||||
Spatie\ImageOptimizer\Optimizers\Optipng::class => [
|
||||
'-i0', // this will result in a non-interlaced, progressive scanned image
|
||||
'-o2', // this set the optimization level to two (multiple IDAT compression trials)
|
||||
'-quiet', // required parameter for this package
|
||||
],
|
||||
Spatie\ImageOptimizer\Optimizers\Svgo::class => [
|
||||
'--disable=cleanupIDs', // disabling because it is known to cause troubles
|
||||
],
|
||||
Spatie\ImageOptimizer\Optimizers\Gifsicle::class => [
|
||||
'-b', // required parameter for this package
|
||||
'-O3', // this produces the slowest but best results
|
||||
],
|
||||
Spatie\ImageOptimizer\Optimizers\Cwebp::class => [
|
||||
'-m 6', // for the slowest compression method in order to get the best compression.
|
||||
'-pass 10', // for maximizing the amount of analysis pass.
|
||||
'-mt', // multithreading for some speed improvements.
|
||||
'-q 90', // quality factor that brings the least noticeable changes.
|
||||
],
|
||||
Spatie\ImageOptimizer\Optimizers\Avifenc::class => [
|
||||
'-a cq-level=23', // constant quality level, lower values mean better quality and greater file size (0-63).
|
||||
'-j all', // number of jobs (worker threads, "all" uses all available cores).
|
||||
'--min 0', // min quantizer for color (0-63).
|
||||
'--max 63', // max quantizer for color (0-63).
|
||||
'--minalpha 0', // min quantizer for alpha (0-63).
|
||||
'--maxalpha 63', // max quantizer for alpha (0-63).
|
||||
'-a end-usage=q', // rate control mode set to Constant Quality mode.
|
||||
'-a tune=ssim', // SSIM as tune the encoder for distortion metric.
|
||||
],
|
||||
],
|
||||
|
||||
/*
|
||||
* These generators will be used to create an image of media files.
|
||||
*/
|
||||
'image_generators' => [
|
||||
Spatie\MediaLibrary\Conversions\ImageGenerators\Image::class,
|
||||
Spatie\MediaLibrary\Conversions\ImageGenerators\Webp::class,
|
||||
Spatie\MediaLibrary\Conversions\ImageGenerators\Avif::class,
|
||||
Spatie\MediaLibrary\Conversions\ImageGenerators\Pdf::class,
|
||||
Spatie\MediaLibrary\Conversions\ImageGenerators\Svg::class,
|
||||
Spatie\MediaLibrary\Conversions\ImageGenerators\Video::class,
|
||||
],
|
||||
|
||||
/*
|
||||
* The path where to store temporary files while performing image conversions.
|
||||
* If set to null, storage_path('media-library/temp') will be used.
|
||||
*/
|
||||
'temporary_directory_path' => null,
|
||||
|
||||
/*
|
||||
* The engine that should perform the image conversions.
|
||||
* Should be either `gd` or `imagick`.
|
||||
*/
|
||||
'image_driver' => env('IMAGE_DRIVER', 'gd'),
|
||||
|
||||
/*
|
||||
* FFMPEG & FFProbe binaries paths, only used if you try to generate video
|
||||
* thumbnails and have installed the php-ffmpeg/php-ffmpeg composer
|
||||
* dependency.
|
||||
*/
|
||||
'ffmpeg_path' => env('FFMPEG_PATH', '/usr/bin/ffmpeg'),
|
||||
'ffprobe_path' => env('FFPROBE_PATH', '/usr/bin/ffprobe'),
|
||||
|
||||
/*
|
||||
* Here you can override the class names of the jobs used by this package. Make sure
|
||||
* your custom jobs extend the ones provided by the package.
|
||||
*/
|
||||
'jobs' => [
|
||||
'perform_conversions' => Spatie\MediaLibrary\Conversions\Jobs\PerformConversionsJob::class,
|
||||
'generate_responsive_images' => Spatie\MediaLibrary\ResponsiveImages\Jobs\GenerateResponsiveImagesJob::class,
|
||||
],
|
||||
|
||||
/*
|
||||
* When using the addMediaFromUrl method you may want to replace the default downloader.
|
||||
* This is particularly useful when the url of the image is behind a firewall and
|
||||
* need to add additional flags, possibly using curl.
|
||||
*/
|
||||
'media_downloader' => Spatie\MediaLibrary\Downloaders\DefaultDownloader::class,
|
||||
|
||||
/*
|
||||
* When using the addMediaFromUrl method the SSL is verified by default.
|
||||
* This is option disables SSL verification when downloading remote media.
|
||||
* Please note that this is a security risk and should only be false in a local environment.
|
||||
*/
|
||||
'media_downloader_ssl' => env('MEDIA_DOWNLOADER_SSL', true),
|
||||
|
||||
/*
|
||||
* The default lifetime in minutes for temporary urls.
|
||||
* This is used when you call the `getLastTemporaryUrl` or `getLastTemporaryUrl` method on a media item.
|
||||
*/
|
||||
'temporary_url_default_lifetime' => env('MEDIA_TEMPORARY_URL_DEFAULT_LIFETIME', 5),
|
||||
|
||||
'remote' => [
|
||||
/*
|
||||
* Any extra headers that should be included when uploading media to
|
||||
* a remote disk. Even though supported headers may vary between
|
||||
* different drivers, a sensible default has been provided.
|
||||
*
|
||||
* Supported by S3: CacheControl, Expires, StorageClass,
|
||||
* ServerSideEncryption, Metadata, ACL, ContentEncoding
|
||||
*/
|
||||
'extra_headers' => [
|
||||
'CacheControl' => 'max-age=604800',
|
||||
],
|
||||
],
|
||||
|
||||
'responsive_images' => [
|
||||
/*
|
||||
* This class is responsible for calculating the target widths of the responsive
|
||||
* images. By default we optimize for filesize and create variations that each are 30%
|
||||
* smaller than the previous one. More info in the documentation.
|
||||
*
|
||||
* https://docs.spatie.be/laravel-medialibrary/v9/advanced-usage/generating-responsive-images
|
||||
*/
|
||||
'width_calculator' => Spatie\MediaLibrary\ResponsiveImages\WidthCalculator\FileSizeOptimizedWidthCalculator::class,
|
||||
|
||||
/*
|
||||
* By default rendering media to a responsive image will add some javascript and a tiny placeholder.
|
||||
* This ensures that the browser can already determine the correct layout.
|
||||
* When disabled, no tiny placeholder is generated.
|
||||
*/
|
||||
'use_tiny_placeholders' => true,
|
||||
|
||||
/*
|
||||
* This class will generate the tiny placeholder used for progressive image loading. By default
|
||||
* the media library will use a tiny blurred jpg image.
|
||||
*/
|
||||
'tiny_placeholder_generator' => Spatie\MediaLibrary\ResponsiveImages\TinyPlaceholderGenerator\Blurred::class,
|
||||
],
|
||||
|
||||
/*
|
||||
* When enabling this option, a route will be registered that will enable
|
||||
* the Media Library Pro Vue and React components to move uploaded files
|
||||
* in a S3 bucket to their right place.
|
||||
*/
|
||||
'enable_vapor_uploads' => env('ENABLE_MEDIA_LIBRARY_VAPOR_UPLOADS', false),
|
||||
|
||||
/*
|
||||
* When converting Media instances to response the media library will add
|
||||
* a `loading` attribute to the `img` tag. Here you can set the default
|
||||
* value of that attribute.
|
||||
*
|
||||
* Possible values: 'lazy', 'eager', 'auto' or null if you don't want to set any loading instruction.
|
||||
*
|
||||
* More info: https://css-tricks.com/native-lazy-loading/
|
||||
*/
|
||||
'default_loading_attribute_value' => null,
|
||||
|
||||
/*
|
||||
* You can specify a prefix for that is used for storing all media.
|
||||
* If you set this to `/my-subdir`, all your media will be stored in a `/my-subdir` directory.
|
||||
*/
|
||||
'prefix' => env('MEDIA_PREFIX', ''),
|
||||
|
||||
/*
|
||||
* When forcing lazy loading, media will be loaded even if you don't eager load media and you have
|
||||
* disabled lazy loading globally in the service provider.
|
||||
*/
|
||||
'force_lazy_loading' => env('FORCE_MEDIA_LIBRARY_LAZY_LOADING', true),
|
||||
];
|
||||
32
database/migrations/2025_09_19_132017_create_media_table.php
Normal file
32
database/migrations/2025_09_19_132017_create_media_table.php
Normal file
@ -0,0 +1,32 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
Schema::create('media', function (Blueprint $table) {
|
||||
$table->id();
|
||||
|
||||
$table->morphs('model');
|
||||
$table->uuid()->nullable()->unique();
|
||||
$table->string('collection_name');
|
||||
$table->string('name');
|
||||
$table->string('file_name');
|
||||
$table->string('mime_type')->nullable();
|
||||
$table->string('disk');
|
||||
$table->string('conversions_disk')->nullable();
|
||||
$table->unsignedBigInteger('size');
|
||||
$table->json('manipulations');
|
||||
$table->json('custom_properties');
|
||||
$table->json('generated_conversions');
|
||||
$table->json('responsive_images');
|
||||
$table->unsignedInteger('order_column')->nullable()->index();
|
||||
|
||||
$table->nullableTimestamps();
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -13,42 +13,93 @@
|
||||
<div class="mt-6">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="w-full lg:w-3/4">
|
||||
<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 />
|
||||
<div class="w-full lg:w-3/4 space-y-4">
|
||||
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 items-start">
|
||||
<div class="col-span-1 lg:col-span-2">
|
||||
<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 />
|
||||
|
||||
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon"
|
||||
mask="9999 9999 99999" wire:model.live.debounce.500ms="form.phone_number"
|
||||
autocomplete="off" clearable />
|
||||
<flux:input label="Nomor Telepon" placeholder="Masukkan nomor telepon"
|
||||
mask="9999 9999 99999" wire:model.live.debounce.500ms="form.phone_number"
|
||||
autocomplete="off" clearable />
|
||||
|
||||
<div class="md:col-span-2">
|
||||
<flux:textarea label="Alamat" placeholder="Masukkan alamat lengkap"
|
||||
wire:model.live.debounce.500ms="form.address" autocomplete="off" clearable
|
||||
rows="2" />
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<flux:textarea label="Alamat" placeholder="Masukkan alamat lengkap"
|
||||
wire:model.live.debounce.500ms="form.address" autocomplete="off" clearable
|
||||
rows="2" />
|
||||
</div>
|
||||
|
||||
<flux:input label="Patokan" placeholder="Masukkan patokan"
|
||||
wire:model.live.debounce.500ms="form.landmark" autocomplete="off" clearable />
|
||||
<flux:input label="Patokan" placeholder="Masukkan patokan"
|
||||
wire:model.live.debounce.500ms="form.landmark" autocomplete="off" clearable />
|
||||
|
||||
<flux:input label="Titik Maps" placeholder="Masukkan titik maps"
|
||||
wire:model.live.debounce.500ms="form.maps_url" autocomplete="off" clearable />
|
||||
<flux:input label="Titik Maps" placeholder="Masukkan titik maps"
|
||||
wire:model.live.debounce.500ms="form.maps_url" autocomplete="off" clearable />
|
||||
|
||||
<flux:date-picker label="Tanggal Buka" with-today
|
||||
wire:model.live.debounce.500ms="form.opened_date" autocomplete="off" clearable
|
||||
locale="id-ID" value="2023-01-01" />
|
||||
<flux:date-picker label="Tanggal Buka" with-today
|
||||
wire:model.live.debounce.500ms="form.opened_date" autocomplete="off" clearable
|
||||
locale="id-ID" value="2023-01-01" />
|
||||
|
||||
<flux:radio.group wire:model.live="form.status" variant="buttons" class="w-full *:flex-1"
|
||||
label="Status">
|
||||
@foreach (\App\Enums\OutletStatus::cases() as $status)
|
||||
<flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}">
|
||||
{{ $status->label() }}
|
||||
</flux:radio>
|
||||
@endforeach
|
||||
</flux:radio.group>
|
||||
<flux:radio.group wire:model.live="form.status" variant="buttons"
|
||||
class="w-full *:flex-1" label="Status">
|
||||
@foreach (\App\Enums\OutletStatus::cases() as $status)
|
||||
<flux:radio value="{{ $status->value }}" icon="{{ $status->icon() }}">
|
||||
{{ $status->label() }}
|
||||
</flux:radio>
|
||||
@endforeach
|
||||
</flux:radio.group>
|
||||
</div>
|
||||
</flux:card>
|
||||
</div>
|
||||
</flux:card>
|
||||
|
||||
<flux:card class="space-y-6 p-6">
|
||||
<div class="space-y-3">
|
||||
<h3 class="text-sm font-medium">Gambar Utama</h3>
|
||||
<div class="dropzone-wrapper">
|
||||
<livewire:dropzone wire:model="form.featured_image" :rules="['image', 'mimes:png,jpeg', 'max:10420']"
|
||||
:max-files="1" :key="'featured_image'" :files="$form->featured_image" />
|
||||
@error('form.featured_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(&)]: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>
|
||||
</flux:card>
|
||||
|
||||
<flux:card class="space-y-6 p-6">
|
||||
<div class="space-y-3">
|
||||
<h3 class="text-sm font-medium">Gambar</h3>
|
||||
<div class="dropzone-wrapper">
|
||||
<livewire:dropzone wire:model="form.images" :rules="['image', 'mimes:png,jpeg', 'max:10420']" :max-files="5"
|
||||
:key="'images'" :multiple="true" :files="$form->images" />
|
||||
@error('form.images')
|
||||
<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(&)]: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>
|
||||
</flux:card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full lg:w-1/3 space-y-4">
|
||||
@ -76,7 +127,8 @@
|
||||
placeholder="Masukkan fasilitas" class="flex-1" autocomplete="off" clearable />
|
||||
@if ($index != 0)
|
||||
<flux:button variant="danger" icon="trash"
|
||||
wire:click="removeFacility({{ $index }})" class="cursor-pointer" />
|
||||
wire:click="removeFacility({{ $index }})"
|
||||
class="cursor-pointer" />
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@ -1,169 +1,197 @@
|
||||
<div
|
||||
x-cloak
|
||||
x-data="dropzone({
|
||||
_this: @this,
|
||||
uuid: @js($uuid),
|
||||
multiple: @js($multiple),
|
||||
})"
|
||||
@dragenter.prevent.document="onDragenter($event)"
|
||||
@dragleave.prevent="onDragleave($event)"
|
||||
@dragover.prevent="onDragover($event)"
|
||||
@drop.prevent="onDrop"
|
||||
class="dz-block dz-antialiased"
|
||||
>
|
||||
<div class="dz-flex dz-flex-col dz-items-start dz-h-full dz-w-full dz-justify-center dz-bg-transparent dz-dark:border-gray-600 dz-dark:hover:border-gray-500">
|
||||
@if(! is_null($error))
|
||||
<div x-cloak x-data="dropzone({
|
||||
_this: @this,
|
||||
uuid: @js($uuid),
|
||||
multiple: @js($multiple),
|
||||
})" @dragenter.prevent.document="onDragenter($event)"
|
||||
@dragleave.prevent="onDragleave($event)" @dragover.prevent="onDragover($event)" @drop.prevent="onDrop"
|
||||
class="dz-block dz-antialiased">
|
||||
<div
|
||||
class="dz-flex dz-flex-col dz-items-start dz-h-full dz-w-full dz-justify-center dz-bg-transparent dz-dark:border-gray-600 dz-dark:hover:border-gray-500">
|
||||
@if (!is_null($error))
|
||||
<div class="dz-bg-red-50 dz-p-4 dz-w-full dz-mb-4 dz-rounded dz-dark:bg-red-600">
|
||||
<div class="dz-flex dz-gap-3 dz-items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="dz-w-5 dz-h-5 dz-text-red-400 dz-dark:text-red-200">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
||||
class="dz-w-5 dz-h-5 dz-text-red-400 dz-dark:text-red-200">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
<h3 class="dz-text-sm dz-text-red-800 dz-font-medium dz-dark:text-red-100">{{ $error }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
<div @click="$refs.input.click()" class="dz-border dz-border-dashed dz-rounded dz-border-gray-500 dz-w-full dz-cursor-pointer">
|
||||
<div @click="$refs.input.click()"
|
||||
class="dz-border dz-border-dashed dz-rounded dz-border-gray-500 dz-w-full dz-cursor-pointer">
|
||||
<div>
|
||||
<div x-show="!isDragging" class="dz-flex dz-items-center dz-bg-gray-50 dz-justify-center dz-gap-3 dz-py-8 dz-h-full dz-dark:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="dz-w-4 dz-h-4 dz-md:w-6 dz-md:h-6 dz-text-gray-500 dz-dark:text-gray-400">
|
||||
<path d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z" />
|
||||
<path d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
|
||||
<div x-show="!isDragging"
|
||||
class="dz-flex dz-items-center dz-bg-gray-50 dz-justify-center dz-gap-3 dz-py-8 dz-h-full dz-dark:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
||||
class="dz-w-4 dz-h-4 dz-md:w-6 dz-md:h-6 dz-text-gray-500 dz-dark:text-gray-400">
|
||||
<path
|
||||
d="M9.25 13.25a.75.75 0 001.5 0V4.636l2.955 3.129a.75.75 0 001.09-1.03l-4.25-4.5a.75.75 0 00-1.09 0l-4.25 4.5a.75.75 0 101.09 1.03L9.25 4.636v8.614z" />
|
||||
<path
|
||||
d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z" />
|
||||
</svg>
|
||||
<p class="dz-text-sm dz-md:text-base dz-text-gray-600 dz-dark:text-gray-400">Drop here or <span class="dz-font-semibold dz-text-black dz-dark:text-white">Browse files</span></p>
|
||||
<p class="dz-text-sm dz-md:text-base dz-text-gray-600 dz-dark:text-gray-400">Drop here or <span
|
||||
class="dz-font-semibold dz-text-black dz-dark:text-white">Browse files</span></p>
|
||||
</div>
|
||||
<div x-show="isDragging" class="dz-flex dz-items-center dz-bg-gray-100 dz-dark:bg-gray-800 dz-justify-center dz-gap-3 dz-py-8 dz-h-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="dz-w-4 dz-h-4 dz-md:w-6 dz-md:h-6 dz-text-gray-500 dz-dark:text-gray-400">
|
||||
<path d="M10 2a.75.75 0 01.75.75v5.59l1.95-2.1a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0L6.2 7.26a.75.75 0 111.1-1.02l1.95 2.1V2.75A.75.75 0 0110 2z" />
|
||||
<path d="M5.273 4.5a1.25 1.25 0 00-1.205.918l-1.523 5.52c-.006.02-.01.041-.015.062H6a1 1 0 01.894.553l.448.894a1 1 0 00.894.553h3.438a1 1 0 00.86-.49l.606-1.02A1 1 0 0114 11h3.47a1.318 1.318 0 00-.015-.062l-1.523-5.52a1.25 1.25 0 00-1.205-.918h-.977a.75.75 0 010-1.5h.977a2.75 2.75 0 012.651 2.019l1.523 5.52c.066.239.099.485.099.732V15a2 2 0 01-2 2H3a2 2 0 01-2-2v-3.73c0-.246.033-.492.099-.73l1.523-5.521A2.75 2.75 0 015.273 3h.977a.75.75 0 010 1.5h-.977z" />
|
||||
<div x-show="isDragging"
|
||||
class="dz-flex dz-items-center dz-bg-gray-100 dz-dark:bg-gray-800 dz-justify-center dz-gap-3 dz-py-8 dz-h-full">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
||||
class="dz-w-4 dz-h-4 dz-md:w-6 dz-md:h-6 dz-text-gray-500 dz-dark:text-gray-400">
|
||||
<path
|
||||
d="M10 2a.75.75 0 01.75.75v5.59l1.95-2.1a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0L6.2 7.26a.75.75 0 111.1-1.02l1.95 2.1V2.75A.75.75 0 0110 2z" />
|
||||
<path
|
||||
d="M5.273 4.5a1.25 1.25 0 00-1.205.918l-1.523 5.52c-.006.02-.01.041-.015.062H6a1 1 0 01.894.553l.448.894a1 1 0 00.894.553h3.438a1 1 0 00.86-.49l.606-1.02A1 1 0 0114 11h3.47a1.318 1.318 0 00-.015-.062l-1.523-5.52a1.25 1.25 0 00-1.205-.918h-.977a.75.75 0 010-1.5h.977a2.75 2.75 0 012.651 2.019l1.523 5.52c.066.239.099.485.099.732V15a2 2 0 01-2 2H3a2 2 0 01-2-2v-3.73c0-.246.033-.492.099-.73l1.523-5.521A2.75 2.75 0 015.273 3h.977a.75.75 0 010 1.5h-.977z" />
|
||||
</svg>
|
||||
<p class="dz-text-sm dz-md:text-base dz-text-gray-600 dz-dark:text-gray-400">Drop here to upload</p>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
x-ref="input"
|
||||
wire:model="upload"
|
||||
type="file"
|
||||
class="dz-hidden"
|
||||
x-on:livewire-upload-start="isLoading = true"
|
||||
x-on:livewire-upload-cancel="isLoading = false"
|
||||
x-on:livewire-upload-finish="isLoading = false"
|
||||
x-on:livewire-upload-error="console.log('livewire-dropzone upload error')"
|
||||
@if(! is_null($this->accept)) accept="{{ $this->accept }}" @endif
|
||||
@if($multiple === true) multiple @endif
|
||||
>
|
||||
<input x-ref="input" wire:model="upload" type="file" class="dz-hidden"
|
||||
x-on:livewire-upload-start="isLoading = true" x-on:livewire-upload-cancel="isLoading = false"
|
||||
x-on:livewire-upload-finish="isLoading = false"
|
||||
x-on:livewire-upload-error="console.log('livewire-dropzone upload error')"
|
||||
@if (!is_null($this->accept)) accept="{{ $this->accept }}" @endif
|
||||
@if ($multiple === true) multiple @endif>
|
||||
</div>
|
||||
|
||||
<div class="dz-flex dz-justify-between dz-w-full dz-mt-2">
|
||||
<div class="dz-flex dz-gap-3 dz-text-gray-500 dz-text-xs dz-md:text-sm">
|
||||
@php
|
||||
$hasMaxFileSize = ! is_null($this->maxFileSize);
|
||||
$hasMimes = ! empty($this->mimes);
|
||||
$hasMaxFileSize = !is_null($this->maxFileSize);
|
||||
$hasMimes = !empty($this->mimes);
|
||||
@endphp
|
||||
|
||||
@if($hasMaxFileSize)
|
||||
<p>{{ __('Up to :size', ['size' => \Illuminate\Support\Number::fileSize($this->maxFileSize * 1024)]) }}</p>
|
||||
@if ($hasMaxFileSize)
|
||||
<p>{{ __('Up to :size', ['size' => \Illuminate\Support\Number::fileSize($this->maxFileSize * 1024)]) }}
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@if($hasMaxFileSize && $hasMimes)
|
||||
@if ($hasMaxFileSize && $hasMimes)
|
||||
<span class="dz-w-1 dz-h-1 dz-text-gray-400">·</span>
|
||||
@endif
|
||||
|
||||
@if($hasMimes)
|
||||
@if ($hasMimes)
|
||||
<p>{{ Str::upper($this->mimes) }}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div x-show="isLoading" class="dz-flex dz-gap-1 dz-items-center">
|
||||
<svg aria-hidden="true" width="15" height="15" class="dz-text-gray-200 dz-animate-spin dz-dark:text-gray-700 dz-fill-gray-800 dz-dark:fill-gray-200" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
|
||||
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
|
||||
<svg aria-hidden="true" width="15" height="15"
|
||||
class="dz-text-gray-200 dz-animate-spin dz-dark:text-gray-700 dz-fill-gray-800 dz-dark:fill-gray-200"
|
||||
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
||||
fill="currentFill" />
|
||||
</svg>
|
||||
<span class="dz-sr-only">Loading...</span>
|
||||
<div @click="cancelUpload" class="dz-text-xs dz-md:text-sm dz-text-gray-800 dz-dark:text-gray-200 dz-hover:cursor-pointer dz-underline">Cancel upload</div>
|
||||
<div @click="cancelUpload"
|
||||
class="dz-text-xs dz-md:text-sm dz-text-gray-800 dz-dark:text-gray-200 dz-hover:cursor-pointer dz-underline">
|
||||
Cancel upload</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if(isset($files) && count($files) > 0)
|
||||
<div class="dz-flex dz-flex-wrap dz-gap-x-10 dz-gap-y-2 dz-justify-start dz-w-full dz-mt-5">
|
||||
@foreach($files as $file)
|
||||
<div class="dz-flex dz-items-center dz-justify-between dz-gap-2 dz-border dz-rounded dz-border-gray-200 dz-w-full dz-h-auto dz-overflow-hidden dz-dark:border-gray-700">
|
||||
<div class="dz-flex dz-items-center dz-gap-3">
|
||||
@if($this->isImageMime($file['extension']))
|
||||
<div class="dz-flex-none dz-w-14 dz-h-14">
|
||||
<img src="{{ $file['temporaryUrl'] }}" class="dz-object-fill dz-w-full dz-h-full" alt="{{ $file['name'] }}">
|
||||
@if (isset($files) && count($files) > 0)
|
||||
<div class="dz-flex dz-flex-wrap dz-gap-x-10 dz-gap-y-2 dz-justify-start dz-w-full dz-mt-5">
|
||||
@foreach ($files as $file)
|
||||
<div
|
||||
class="dz-flex dz-items-center dz-justify-between dz-gap-2 dz-border dz-rounded dz-border-gray-200 dz-w-full dz-h-auto dz-overflow-hidden dz-dark:border-gray-700">
|
||||
<div class="dz-flex dz-items-center dz-gap-3">
|
||||
@if ($this->isImageMime($file['extension']))
|
||||
<div class="dz-flex-none dz-w-14 dz-h-14">
|
||||
<img src="{{ $file['temporaryUrl'] }}" class="dz-object-fill dz-w-full dz-h-full"
|
||||
alt="{{ $file['name'] }}">
|
||||
</div>
|
||||
@else
|
||||
<div
|
||||
class="dz-flex dz-justify-center dz-items-center dz-w-14 dz-h-14 dz-bg-gray-100 dz-dark:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1" stroke="currentColor" class="dz-w-8 dz-h-8 dz-text-gray-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="dz-flex dz-flex-col dz-items-start dz-gap-1">
|
||||
<div
|
||||
class="dz-text-start dz-line-clamp-1 dz-text-slate-900 dz-text-xs dz-md:text-sm dz-font-medium dz-dark:text-slate-100">
|
||||
{{ $file['name'] }}</div>
|
||||
<div class="dz-text-start dz-text-gray-500 dz-text-xs dz-md:text-sm dz-font-medium">
|
||||
{{ \Illuminate\Support\Number::fileSize($file['size']) }}</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="dz-flex dz-justify-center dz-items-center dz-w-14 dz-h-14 dz-bg-gray-100 dz-dark:bg-gray-700">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="dz-w-8 dz-h-8 dz-text-gray-500">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
|
||||
</div>
|
||||
<div class="dz-flex dz-items-center dz-mr-3">
|
||||
<button type="button" @click="removeUpload('{{ $file['tmpFilename'] }}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
||||
class="dz-w-6 dz-h-6 dz-text-black dz-dark:text-white">
|
||||
<path fill-rule="evenodd"
|
||||
d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="dz-flex dz-flex-col dz-items-start dz-gap-1">
|
||||
<div class="dz-text-start dz-line-clamp-1 dz-text-slate-900 dz-text-xs dz-md:text-sm dz-font-medium dz-dark:text-slate-100">{{ $file['name'] }}</div>
|
||||
<div class="dz-text-start dz-text-gray-500 dz-text-xs dz-md:text-sm dz-font-medium">{{ \Illuminate\Support\Number::fileSize($file['size']) }}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dz-flex dz-items-center dz-mr-3">
|
||||
<button type="button" @click="removeUpload('{{ $file['tmpFilename'] }}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="dz-w-6 dz-h-6 dz-text-black dz-dark:text-white">
|
||||
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@script
|
||||
<script>
|
||||
Alpine.data('dropzone', ({ _this, uuid, multiple }) => {
|
||||
return ({
|
||||
isDragging: false,
|
||||
isDropped: false,
|
||||
isLoading: false,
|
||||
<script>
|
||||
Alpine.data('dropzone', ({
|
||||
_this,
|
||||
uuid,
|
||||
multiple
|
||||
}) => {
|
||||
return ({
|
||||
isDragging: false,
|
||||
isDropped: false,
|
||||
isLoading: false,
|
||||
|
||||
onDrop(e) {
|
||||
this.isDropped = true
|
||||
this.isDragging = false
|
||||
onDrop(e) {
|
||||
this.isDropped = true
|
||||
this.isDragging = false
|
||||
|
||||
const file = multiple ? e.dataTransfer.files : e.dataTransfer.files[0]
|
||||
const file = multiple ? e.dataTransfer.files : e.dataTransfer.files[0]
|
||||
|
||||
const args = ['upload', file, () => {
|
||||
// Upload completed
|
||||
this.isLoading = false
|
||||
}, (error) => {
|
||||
// An error occurred while uploading
|
||||
console.log('livewire-dropzone upload error', error);
|
||||
}, () => {
|
||||
// Uploading is in progress
|
||||
this.isLoading = true
|
||||
}];
|
||||
|
||||
// Upload file(s)
|
||||
multiple ? _this.uploadMultiple(...args) : _this.upload(...args)
|
||||
},
|
||||
onDragenter() {
|
||||
this.isDragging = true
|
||||
},
|
||||
onDragleave() {
|
||||
this.isDragging = false
|
||||
},
|
||||
onDragover() {
|
||||
this.isDragging = true
|
||||
},
|
||||
cancelUpload() {
|
||||
_this.cancelUpload('upload')
|
||||
|
||||
const args = ['upload', file, () => {
|
||||
// Upload completed
|
||||
this.isLoading = false
|
||||
}, (error) => {
|
||||
// An error occurred while uploading
|
||||
console.log('livewire-dropzone upload error', error);
|
||||
}, () => {
|
||||
// Uploading is in progress
|
||||
this.isLoading = true
|
||||
}];
|
||||
|
||||
// Upload file(s)
|
||||
multiple ? _this.uploadMultiple(...args) : _this.upload(...args)
|
||||
},
|
||||
onDragenter() {
|
||||
this.isDragging = true
|
||||
},
|
||||
onDragleave() {
|
||||
this.isDragging = false
|
||||
},
|
||||
onDragover() {
|
||||
this.isDragging = true
|
||||
},
|
||||
cancelUpload() {
|
||||
_this.cancelUpload('upload')
|
||||
|
||||
this.isLoading = false
|
||||
},
|
||||
removeUpload(tmpFilename) {
|
||||
// Dispatch an event to remove the temporarily uploaded file
|
||||
_this.dispatch(uuid + ':fileRemoved', { tmpFilename })
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
},
|
||||
removeUpload(tmpFilename) {
|
||||
// Dispatch an event to remove the temporarily uploaded file
|
||||
_this.dispatch(uuid + ':fileRemoved', {
|
||||
tmpFilename
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
@endscript
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user