Skip to content

Commit

Permalink
feat(media-library) commit inicial
Browse files Browse the repository at this point in the history
  • Loading branch information
irineujunior committed Apr 30, 2024
1 parent ea9bfae commit 0579833
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 27 deletions.
65 changes: 46 additions & 19 deletions src/Traits/WithMediaSync.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,42 +11,59 @@ trait WithMediaSync
// Remove media
public function removeMedia(string $uuid, string $filesModelName, string $library, string $url): void
{
$filesModelName = str($filesModelName)
->afterLast('.')
->toString();

// Updates library
$this->{$library} = $this->{$library}->filter(static fn ($image) => $image['uuid'] != $uuid);
$this->form->{$library} = $this->form->{$library}->filter(static fn($image) => $image['uuid'] != $uuid);

// Remove file
$name = str($url)->after('preview-file/')->before('?expires')->toString();
$this->{$filesModelName} = collect($this->{$filesModelName})->filter(static fn ($file) => $file->getFilename() != $name)->all();
$name = str($url)
->after('preview-file/')
->before('?expires')
->toString();
$this->form->{$filesModelName} = collect($this->form->{$filesModelName})
->filter(static fn($file) => $file->getFilename() != $name)
->all();
}

// Set order
public function refreshMediaOrder(array $order, string $library): void
{
$this->{$library} = $this->{$library}->sortBy(static function ($item) use ($order) {
$this->form->{$library} = $this->form->{$library}->sortBy(static function ($item) use ($order) {
return array_search($item['uuid'], $order);
});
}

// Bind temporary files with respective previews and replace existing ones, if necessary
public function refreshMediaSources(string $filesModelName, string $library)
{
// New files area
foreach ($this->{$filesModelName}['*'] ?? [] as $key => $file) {
$this->{$library} = $this->{$library}->add(['uuid' => Str::uuid()->toString(), 'url' => $file->temporaryUrl()]);
$filesModelName = str($filesModelName)
->afterLast('.')
->toString();

$key = $this->{$library}->keys()->last();
$this->{$filesModelName}[$key] = $file;
// New files area
foreach ($this->form->{$filesModelName}['*'] ?? [] as $key => $file) {
$this->form->{$library} = $this->form->{$library}->add([
'uuid' => Str::uuid()
->toString(), 'url' => $file->temporaryUrl()
]);

$key = $this->form->{$library}->keys()
->last();
$this->form->{$filesModelName}[$key] = $file;
}

// Reset new files area
unset($this->{$filesModelName}['*']);
unset($this->form->{$filesModelName}['*']);

//Replace existing files
foreach ($this->{$filesModelName} as $key => $file) {
$media = $this->{$library}->get($key);
foreach ($this->form->{$filesModelName} as $key => $file) {
$media = $this->form->{$library}->get($key);
$media['url'] = $file->temporaryUrl();

$this->{$library} = $this->{$library}->replace([$key => $media]);
$this->form->{$library} = $this->form->{$library}->replace([$key => $media]);
}

$this->validateOnly($filesModelName . '.*');
Expand All @@ -67,20 +84,27 @@ public function syncMedia(
$media = $this->{$library}->get($index);
$name = $this->getFileName($media);

$file = Storage::disk($disk)->putFileAs($storage_subpath, $file, $name, $visibility);
$url = Storage::disk($disk)->url($file);
$file = Storage::disk($disk)
->putFileAs($storage_subpath, $file, $name, $visibility);
$url = Storage::disk($disk)
->url($file);

// Update library
$media['url'] = $url . '?updated_at=' . time();
$media['path'] = str($storage_subpath)->finish('/')->append($name)->toString();
$media['path'] = str($storage_subpath)
->finish('/')
->append($name)
->toString();
$this->{$library} = $this->{$library}->replace([$index => $media]);
}

// Delete removed files from library
$diffs = $model->{$model_field}?->filter(fn ($item) => $this->{$library}->doesntContain('uuid', $item['uuid'])) ?? [];
$diffs = $model->{$model_field}?->filter(fn($item) => $this->{$library}->doesntContain('uuid',
$item['uuid'])) ?? [];

foreach ($diffs as $diff) {
Storage::disk($disk)->delete($diff['path']);
Storage::disk($disk)
->delete($diff['path']);
}

// Updates model
Expand All @@ -93,7 +117,10 @@ public function syncMedia(
private function getFileName(?array $media): ?string
{
$name = $media['uuid'] ?? null;
$extension = str($media['url'] ?? null)->afterLast('.')->before('?expires')->toString();
$extension = str($media['url'] ?? null)
->afterLast('.')
->before('?expires')
->toString();

return "{$name}.{$extension}";
}
Expand Down
16 changes: 8 additions & 8 deletions src/View/Components/Forms/Inputs/ImageLibrary.php
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ public function __construct(
public ?string $hint = null,
public ?bool $hideErrors = false,
public ?bool $hideProgress = false,
public ?string $changeText = 'Change',
public ?string $changeText = 'Move',
public ?string $cropText = 'Crop',
public ?string $removeText = 'Remove',
public ?string $cropTitleText = 'Crop image',
Expand Down Expand Up @@ -187,7 +187,7 @@ class="list-group card-list-group cursor-move"
>
@foreach($preview as $key => $image)
<div class="list-group-item" data-id="{{ $image['uuid'] }}">
<div wire:key="preview-{{ $image['uuid'] }}" class="row g-2 align-items-center" title="{{ $changeText }}">
<div wire:key="preview-{{ $image['uuid'] }}" class="row g-2 align-items-center" title="{{ __($changeText) }}">
<div class="col-auto">
<img src="{{ $image['url'] }}" class="rounded" alt="{{ $image['url'] }}" width="40" height="40"
@click="document.getElementById('file-{{ $uuid}}-{{ $key }}').click()"
Expand Down Expand Up @@ -215,8 +215,8 @@ class="d-none"
<div class="col-auto">
<!-- ACTIONS -->
<div class="absolute flex flex-col gap-2 top-3 left-3 cursor-pointer p-2 rounded-lg">
<a class="link-muted" @click="removeMedia('{{ $image['uuid'] }}', '{{ $image['url'] }}')" title="{{ $removeText }}"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg></a>
<a class="link-muted" @click="crop('image-{{ $modelName().'.'.$key }}-{{ $uuid }}')" title="{{ $cropText }}"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-scissors" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M8.6 8.6l10.4 10.4" /><path d="M8.6 15.4l10.4 -10.4" /></svg></a>
<a class="link-muted" @click="removeMedia('{{ $image['uuid'] }}', '{{ $image['url'] }}')" title="{{ __($removeText) }}"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg></a>
<a class="link-muted" @click="crop('image-{{ $modelName().'.'.$key }}-{{ $uuid }}')" title="{{ __($cropText) }}"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-scissors" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M6 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M8.6 8.6l10.4 10.4" /><path d="M8.6 15.4l10.4 -10.4" /></svg></a>
</div>
</div>
</div>
Expand All @@ -231,11 +231,11 @@ class="d-none"
<!-- CROP MODAL -->
<div @click.prevent="" x-ref="crop" wire:ignore>
<x-modal id="cropModal{{ $uuid }}" x-ref="cropModal" title="{{ $cropTitleText }}">
<x-modal id="cropModal{{ $uuid }}" x-ref="cropModal" title="{{ __($cropTitleText) }}">
<img src="#" crossOrigin="Anonymous" />
<x-slot:footer>
<x-btn label="{{ $cropCancelText }}" class="me-auto" data-bs-dismiss="modal"/>
<x-btn label="{{ $cropSaveText }}" class="btn-primary" @click="save()"/>
<x-btn label="{{ __($cropCancelText) }}" class="me-auto" data-bs-dismiss="modal"/>
<x-btn label="{{ __($cropSaveText) }}" class="btn-primary" @click="save()"/>
</x-slot:footer>
</x-modal>
</div>
Expand All @@ -250,7 +250,7 @@ class="d-none"
<!-- ADD FILES -->
<a @click="$refs.files.click()" class="btn btn-info w-100 mb-1" :class="(processing || indeterminate) && 'disabled'">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-upload" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 9l5 -5l5 5" /><path d="M12 4l0 12" /></svg>
Adicionar arquivos
{{ __($addFilesText) }}
</a>
<!-- MAIN FILE INPUT -->
Expand Down

0 comments on commit 0579833

Please sign in to comment.