Skip to content

Commit

Permalink
fixed hasOne/hasMany Image/File
Browse files Browse the repository at this point in the history
  • Loading branch information
@lee-to
lee-to committed Dec 15, 2022
1 parent 6ce650d commit 7d40b7a
Show file tree
Hide file tree
Showing 11 changed files with 263 additions and 112 deletions.
101 changes: 77 additions & 24 deletions resources/views/fields/file.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,82 @@
@if($field->formViewValue($item))
@if($field->isMultiple())
<div class="my-2">
<div class="border border-gray-200 rounded-md">
@foreach($field->formViewValue($item) as $index => $file)
<div x-data="{}" x-ref="hidden_parent_{{ $field->id() }}" class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<input x-ref="hidden_{{ $field->id() }}" type="hidden" name="hidden_{{ $field->name() }}" value="{{ $file }}" />

@include('moonshine::fields.shared.file', [
'index' => $index+1,
'canDownload' => $field->canDownload(),
'value' => $file,
'field' => $field,
])

@if($field->isRemovable())
<div class="ml-4 flex-shrink-0">
<a href="#" @click="$refs.hidden_parent_{{ $field->id() }}.remove();" class="font-medium text-pink hover:text-pink transition duration-150 ease-in-out">
{{ trans('moonshine::ui.delete') }}
</a>
@if($field->attributes()->has('x-model'))
<div x-data="{fileValue: {{ $field->attributes()->get('x-model', '') }}}" class="border border-gray-200 rounded-md">
<template x-for="(file, index) in fileValue" :key="index">
<div :id="'hidden_parent_{{ $field->id() }}' + index" class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<input x-ref="hidden_{{ $field->id() }}"
type="hidden"
:value="file"
:name="'hidden_' + {{ $field->attributes()->get('x-bind:name') }} + '[]'"
/>

<div class="my-2">
<div class="flex-1 flex items-center">
@include('moonshine::shared.icons.clip', [
'class' => 'flex-shrink-0'
])

<span class="ml-2 flex-1 truncate"
x-text="'@lang('moonshine::ui.file') ' + (index + 1)"
></span>

@if($field->canDownload())
<div class="ml-4 flex-shrink-0">
<a :href="file ? ('{{ Storage::url('') }}') + file : ''"
download
class="font-medium text-pink hover:text-pink transition duration-150 ease-in-out">
{{ trans('moonshine::ui.download') }}
</a>
</div>
@endif
</div>
</div>
@endif
</div>
@endforeach
</div>

@if($field->isRemovable())
<div class="ml-4 flex-shrink-0">
<a href="#" @click="$event.target.closest('#hidden_parent_{{ $field->id() }}' + index).remove()"
class="font-medium text-pink hover:text-pink transition duration-150 ease-in-out">
{{ trans('moonshine::ui.delete') }}
</a>
</div>
@endif
</div>
</template>
</div>
@else
<div class="border border-gray-200 rounded-md">
@foreach($field->formViewValue($item) as $index => $file)
<div x-data="{}"
x-ref="hidden_parent_{{ $field->id() }}"
class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5"
>

<input x-ref="hidden_{{ $field->id() }}"
type="hidden"
value="{{ $file }}"
name="hidden_{{ $field->name() }}"
/>

@include('moonshine::fields.shared.file', [
'index' => $index+1,
'canDownload' => $field->canDownload(),
'value' => $file,
'field' => $field,
])

@if($field->isRemovable())
<div class="ml-4 flex-shrink-0">
<a href="#" @click="$refs.hidden_parent_{{ $field->id() }}.remove();"
class="font-medium text-pink hover:text-pink transition duration-150 ease-in-out">
{{ trans('moonshine::ui.delete') }}
</a>
</div>
@endif
</div>
@endforeach
</div>
@endif
</div>
@else
@include('moonshine::fields.shared.file', [
Expand All @@ -35,8 +89,7 @@
@endif

@include("moonshine::fields.input", [
'field' => $field,
'item' => $item
"field" => $field,
"item" => $item
])
</div>

91 changes: 67 additions & 24 deletions resources/views/fields/image.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,80 @@
@if($field->formViewValue($item))
@if($field->isMultiple())
<div>
<div class="grid md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-3 m-5 mb-10">
@foreach($field->formViewValue($item) as $index => $file)
<div x-data="{}" x-ref="hidden_parent_{{ $field->id() }}"
class="relative bg-white p-3 m-2 border-1 border-dashed border-gray-100 shadow-md rounded-lg overflow-hidden">
<input x-ref="hidden_{{ $field->id() }}" type="hidden" name="hidden_{{ $field->name() }}"
value="{{ $file }}"/>
@if($field->attributes()->has('x-model'))
<div x-data="{imageValue: {{ $field->attributes()->get('x-model', '') }}}" class="grid md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-3 m-5 mb-10">
<template x-for="(image, index) in imageValue" :key="index">
<div :id="'hidden_parent_{{ $field->id() }}' + index" class="relative bg-white p-3 m-2 border-1 border-dashed border-gray-100 shadow-md rounded-lg overflow-hidden">
<input x-ref="hidden_{{ $field->id() }}"
type="hidden"
:value="image"
:name="'hidden_' + {{ $field->attributes()->get('x-bind:name') }} + '[]'"
/>

<img @click.stop="$dispatch('img-modal', {imgModalSrc: '{{ Storage::url($file) }}' })"
class="w-full object-cover object-center rounded"
src="{{ Storage::url($file) }}"
/>
<img class="w-full"
:src="image ? ('{{ Storage::url('') }}') + image : ''"
/>

@if($field->isRemovable())
<div class="p-4 absolute top-0 right-0">
<div class="text-center">
<a href="#" @click="$refs.hidden_parent_{{ $field->id() }}.remove();"
class="px-4 py-2 bg-red-500 shadow-lg border rounded-lg text-white uppercase font-semibold tracking-wider focus:outline-none focus:shadow-outline hover:bg-red-400 active:bg-red-400">
{{ trans('moonshine::ui.delete') }}
</a>
@if($field->isRemovable())
<div class="p-4 absolute top-0 right-0">
<div class="text-center">
<a href="#" @click="$event.target.closest('#hidden_parent_{{ $field->id() }}' + index).remove()"
class="px-4 py-2 bg-red-500 shadow-lg border rounded-lg text-white uppercase font-semibold tracking-wider focus:outline-none focus:shadow-outline hover:bg-red-400 active:bg-red-400">
{{ trans('moonshine::ui.delete') }}
</a>
</div>
</div>
</div>
@endif
</div>
@endforeach
</div>
@endif
</div>
</template>
</div>
@else
<div class="grid md:grid-cols-2 sm:grid-cols-1 lg:grid-cols-3 m-5 mb-10">
@foreach($field->formViewValue($item) as $index => $file)
<div x-data="{}"
x-ref="hidden_parent_{{ $field->id() }}"
class="relative bg-white p-3 m-2 border-1 border-dashed border-gray-100 shadow-md rounded-lg overflow-hidden"
>

<input x-ref="hidden_{{ $field->id() }}"
type="hidden"
value="{{ $file }}"
name="hidden_{{ $field->name() }}"
/>

<img class="w-full"
@click.stop="$dispatch('img-modal', {imgModal: true, imgModalSrc: '{{ Storage::url($file) }}' })"
src="{{ Storage::url($file) }}"
/>

@if($field->isRemovable())
<div class="p-4 absolute top-0 right-0">
<div class="text-center">
<a href="#" @click="$refs.hidden_parent_{{ $field->id() }}.remove();"
class="px-4 py-2 bg-red-500 shadow-lg border rounded-lg text-white uppercase font-semibold tracking-wider focus:outline-none focus:shadow-outline hover:bg-red-400 active:bg-red-400">
{{ trans('moonshine::ui.delete') }}
</a>
</div>
</div>
@endif
</div>
@endforeach
</div>
@endif
</div>
@else
<div x-data="{}" class="max-w-sm rounded overflow-hidden shadow-lg my-2">
<div
@if($field->attributes()->has('x-model'))
x-data="{imageValue: {{ $field->attributes()->get('x-model', '') }}}"
@else
x-data="{imageValue: ''}"
@endif

class="max-w-sm rounded overflow-hidden shadow-lg my-2"
>
<img class="w-full"
@if($field->attributes()->has('x-model'))
:src="({{ $field->attributes()->get('x-model') }}) ? ('{{ Storage::url('') }}' + {{ $field->attributes()->get('x-model') }}) : ''"
:src="imageValue ? ('{{ Storage::url('') }}') + imageValue : ''"
@else
@click.stop="$dispatch('img-modal', {imgModal: true, imgModalSrc: '{{ Storage::url($field->formViewValue($item)) }}' })"
src="{{ Storage::url($field->formViewValue($item)) }}"
Expand Down
19 changes: 11 additions & 8 deletions resources/views/fields/shared/file.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
<div class="my-2">
<div class="my-2"
@if(isset($field) && $field->attributes()->has('x-model'))
x-data="{fileValue: {{ $field->attributes()->get('x-model', '') }}}"
@else
x-data="{fileValue: ''}"
@endif
>
<div class="flex-1 flex items-center">
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" x-description="Heroicon name: paper-clip" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
clip-rule="evenodd"></path>
</svg>
@include('moonshine::shared.icons.clip', [
'class' => 'flex-shrink-0'
])

<span class="ml-2 flex-1 truncate">
@lang('moonshine::ui.file') {{ $index ?? '' }}
Expand All @@ -14,7 +17,7 @@
@if($canDownload)
<div class="ml-4 flex-shrink-0">
<a @if(isset($field) && $field->attributes()->has('x-model'))
:href="({{ $field->attributes()->get('x-model') }}) ? ('{{ Storage::url('') }}' + {{ $field->attributes()->get('x-model') }}) : ''"
:href="fileValue ? ('{{ Storage::url('') }}') + fileValue : ''"
@else
href="{{ Storage::url($value) }}"
@endif
Expand Down
40 changes: 20 additions & 20 deletions resources/views/fields/shared/full-fields.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div x-data="handler_{{ $field->id() }}()" x-init="handler_init_{{ $field->id() }}">
<template x-for="(item, index{{ $level }}) in items" :key="index{{ $level }}">
<template x-for="(item, index{{ $level }}) in items" :key="Object.values(item)[0] ? Object.values(item)[0] : index{{ $level }}">
<div :data-id="item.id" class="full_fields_{{ $field->id() }}">
@if(!$field->toOne())
<div class="font-bold text-purple my-4" x-text="index{{ $level }} + 1"></div>
Expand All @@ -26,41 +26,41 @@
<div class="my-4">
@if(!$field->toOne())
<button type="button"
class="bg-gradient-to-r from-purple to-pink text-white
class="bg-gradient-to-r from-purple to-pink text-white
text-white font-semibold py-2 px-4 rounded"
@click="addNewField()"
>
@lang('moonshine::ui.add')
</button>
@else
<button x-show="items.length == 0" type="button"
class="bg-gradient-to-r from-purple to-pink text-white
class="bg-gradient-to-r from-purple to-pink text-white
text-white font-semibold py-2 px-4 rounded"
@click="addNewField()"
>
@lang('moonshine::ui.create')
</button>
@endif
@endif
</div>
</div>

<script>
function handler_{{ $field->id() }}() {
return {
handler_init_{{ $field->id() }} () {
this.items = @json($field->jsonValues($item));
},
items: [],
addNewField() {
if(Array.isArray(this.items)) {
this.items.push(@json($field->jsonValues()));
} else {
this.items = [@json($field->jsonValues())];
function handler_{{ $field->id() }}() {
return {
handler_init_{{ $field->id() }} () {
this.items = @json($field->jsonValues($item));
},
items: [],
addNewField() {
if(Array.isArray(this.items)) {
this.items.push(@json($field->jsonValues()));
} else {
this.items = [@json($field->jsonValues())];
}
},
removeField(index) {
this.items.splice(index, 1);
},
}
},
removeField(index) {
this.items.splice(index, 1);
},
}
}
</script>
34 changes: 17 additions & 17 deletions resources/views/fields/shared/table-fields.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</thead>

<tbody class="bg-white dark:bg-darkblue text-black dark:text-white">
<template x-for="(item, index{{ $level }}) in items" :key="index{{ $level }}"
<template x-for="(item, index{{ $level }}) in items" :key="Object.values(item)[0] ? Object.values(item)[0] : index{{ $level }}"
>
<tr :data-id="item.id" class="table_fields_{{ $field->id() }}">
@if(!$field->toOne())
Expand Down Expand Up @@ -78,22 +78,22 @@ class="bg-gradient-to-r from-purple to-pink text-white
</div>

<script>
function handler_{{ $field->id() }}() {
return {
handler_init_{{ $field->id() }}() {
this.items = @json($field->jsonValues($item));
},
items: [],
addNewField() {
if(Array.isArray(this.items)) {
this.items.push(@json($field->jsonValues()));
} else {
this.items = [@json($field->jsonValues())];
function handler_{{ $field->id() }}() {
return {
handler_init_{{ $field->id() }}() {
this.items = @json($field->jsonValues($item));
},
items: [],
addNewField() {
if(Array.isArray(this.items)) {
this.items.push(@json($field->jsonValues()));
} else {
this.items = [@json($field->jsonValues())];
}
},
removeField(index) {
this.items.splice(index, 1);
},
}
},
removeField(index) {
this.items.splice(index, 1);
},
}
}
</script>
6 changes: 6 additions & 0 deletions resources/views/shared/icons/clip.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<svg class="fill-current w-{{ $size ?? 5 }} h-{{ $size ?? 5 }} {{ $class ?? '' }} {{ isset($color) ? "text-$color" : '' }}" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
clip-rule="evenodd"></path>
</svg>
4 changes: 2 additions & 2 deletions src/Fields/File.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ public function indexViewValue(Model $item, bool $container = true): mixed
if ($this->isMultiple()) {
return collect($item->{$this->field()})
->map(fn($value, $index) => view('moonshine::fields.shared.file', [
'value' => Storage::url($this->prefixedValue($value)),
'value' => Storage::url($this->unPrefixedValue($value)),
'index' => $index + 1,
'canDownload' => $this->canDownload(),
])->render())->implode('');
Expand All @@ -50,7 +50,7 @@ public function indexViewValue(Model $item, bool $container = true): mixed
return view(
'moonshine::fields.shared.file',
[
'value' => Storage::url($this->prefixedValue($item->{$this->field()})),
'value' => Storage::url($this->unPrefixedValue($item->{$this->field()})),
'canDownload' => $this->canDownload(),
]
);
Expand Down
Loading

0 comments on commit 7d40b7a

Please sign in to comment.