Add image database

classes/UploadStorage.php

@@ -30,14 +30,22 @@ class UploadStorage {
         $uploadedFile->storeAs('', $sourceFile->path, $this->disk);
         $sourceFile->save();
 
-        $attachment = $sourceFile->attachments()->create([
+        return $this->storeAttachment($sourceFile, [
             'title' => $this->data['title'],
-            'description' => $this->data['description'] ?? ''
+            'description' => $this->data['description'] ?? '',
+            'crop' => $this->data['crop']
+        ]);
+    }
+
+    public function storeAttachment($sourceFile, $data) {
+        $attachment = $sourceFile->attachments()->create([
+            'title' => $data['title'],
+            'description' => $data['description']
         ]);
 
         Queue::push(CompressJob::class, [
             'attachment_id' => $attachment->id,
-            'crop' => $this->data['crop']
+            'crop' => $data['crop']
         ]);
 
         return $attachment;
@@ -46,13 +54,13 @@ class UploadStorage {
     public function getFileData($id) {
         $attachment = Attachment::find($id);
 
-        return [
+        return $attachment ? [
             'url' => $this->storage()->url($attachment->source->path),
             'type' => $this->storage()->mimeType($attachment->source->path),
             'size' => $this->storage()->size($attachment->source->path),
             'name' => $attachment->slug,
             'id' => $id
-        ];
+        ] : null;
     }
 
     public function removeAttachment($id) {

formwidgets/Responsiveimage.php

@@ -15,6 +15,7 @@ use Exception;
 use Aweos\Resizer\Traits\ResponsiveSaver;
 use Aweos\Resizer\Traits\ResponsiveWidget;
 use Aweos\Resizer\Classes\UploadStorage;
+use Aweos\Resizer\Models\SourceFile;
 
 /**
  * File upload field
@@ -102,6 +103,10 @@ class Responsiveimage extends FormWidgetBase
         return $value;
     }
 
+    public function getLoadValue() {
+        return is_numeric(parent::getLoadValue()) ? parent::getLoadValue() : null;
+    }
+
     /**
      * Upload handler for the server-side processing of uploaded files
      */
@@ -127,4 +132,47 @@ class Responsiveimage extends FormWidgetBase
         app(UploadStorage::class)->removeAttachment(Input::get('file_id'));
     }
 
+    public function onOpenDatabase() {
+        $files = (new SourceFile)->newQuery();
+
+        if ($aspectRatio = Input::get('databasePopup.crop.aspectRatio', null)) {
+            $files->where('aspect_ratio', json_encode($aspectRatio));
+        }
+        if ($minWidth = Input::get('databasePopup.crop.minWidth', null)) {
+            $files->where('min_width', '>=', $minWidth);
+        }
+
+        return $this->makePartial('database', [
+            'images' => $files->get()
+        ]);
+    }
+
+    public function onSelectDatabase() {
+        $v = Validator::make(Input::get(), [
+            'image' => 'required|exists:responsive_source_files,id',
+            'title' => 'required'
+        ], [
+            'image.required' => 'Bitte ein Bild auswählen',
+            'title.required' => 'Bitte einen Titel angeben'
+        ]);
+
+        if ($v->fails()) {
+            throw new ValidationException($v);
+        }
+
+        $attachment = app(UploadStorage::class)->storeAttachment(SourceFile::find(Input::get('image')), [
+            'title' => Input::get('title', ''),
+            'description' => Input::get('description', ''),
+            'crop' => null
+        ]);
+
+        return Response::json([
+            'id' => $attachment->id,
+            'url' => $attachment->url,
+            'name' => $attachment->slug,
+            'type' => $attachment->source->type,
+            'size' => $attachment->source->size
+        ]);
+    }
+
 }

formwidgets/responsiveimage/assets/css/main.css

@@ -218,3 +218,30 @@
         }
     }
 }
+
+.responsive-database-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-gap: 1.5rem;
+    margin-bottom: 1.5rem;
+    label {
+        position: relative;
+        display: block;
+        cursor: pointer;
+        input {
+            visibility: hidden;
+            z-index: -999;
+            position: relative;
+            & + img {
+                max-width: 100%;
+                height: auto;
+            }
+        }
+        input:checked + img {
+            box-shadow: 3px 3px 1px hsl(200.9, 78.6%, 45.9%),
+            -3px 3px 1px hsl(200.9, 78.6%, 45.9%),
+            3px -3px 1px hsl(200.9, 78.6%, 45.9%),
+            -3px -3px 1px hsl(200.9, 78.6%, 45.9%);
+        }
+    }
+}

formwidgets/responsiveimage/assets/src/App.vue

@@ -125,8 +125,24 @@ export default {
                 this.addVisible = true;
             });
         },
-        openDatabase() {
-            
+        openDatabase(e) {
+            var _cls = this;
+
+            var data = {
+                file_id: this.value,
+                crop: this.cropOptions
+            };
+
+            $(e.target).popup({ handler: this.handlers.onOpenDatabase, size: 'giant', extraData: { databasePopup: data } }).on('complete.oc.popup', function(e) {
+                $(e.relatedTarget).on('ajaxSuccess', 'form', function(event, context, data) {
+                    _cls.content = data.id;
+                    _cls.addVisible = false;
+                    var file = { size: data.size, name: data.name, type: data.type };
+                    _cls.$refs.dropzone.manuallyAddFile(file, data.url);
+
+                    $(e.relatedTarget).popup('hide');
+                });
+            });
         },
         onSend(file, xhr, formData) {
             formData.append('extraData', JSON.stringify({

formwidgets/responsiveimage/partials/_database.htm

@@ -0,0 +1,30 @@
+<form data-request="<?= $this->getEventHandler('onSelectDatabase') ?>">
+    <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title">Bild aus Datenbank einfügen</h4>
+    </div>
+    <div class="modal-body">
+        <p>Wähle hier ein Bild aus</p>
+
+        <div class="responsive-database-grid">
+            <?php foreach ($images as $file): ?>
+                <label for="responsive-image-<?= $file->id ?>">
+                    <input type="radio" name="image" id="responsive-image-<?= $file->id ?>" value="<?= $file->id ?>" data-select>
+                    <img src="<?= $file->url ?>">
+                </label>
+            <?php endforeach; ?>
+        </div>
+
+        <div class="form-group textarea-field span-full">
+            <textarea name="title" class="form-control field-textarea size-tiny" placeholder="Titel"></textarea>
+        </div>
+
+        <div class="form-group textarea-field span-full">
+            <textarea name="description" class="form-control field-textarea size-tiny" placeholder="Beschreibung"></textarea>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
+        <button type="submit" class="btn btn-primary">Bild wählen</button>
+    </div>
+</form>

formwidgets/responsiveimage/partials/_responsiveimage.htm

@@ -7,6 +7,7 @@
         <div>
             <app formid="<?php echo $this->getId(); ?>" name="<?= $name ?>" :handlers="{
                 onUpload: '<?= $this->getEventHandler('onUpload') ?>',
+                onOpenDatabase: '<?= $this->getEventHandler('onOpenDatabase') ?>',
                 onDelete: '<?= $this->getEventHandler('onDelete') ?>'
                 }"
                 :crop-options="{

models/SourceFile.php

@@ -1,6 +1,7 @@
 <?php namespace Aweos\Resizer\Models;
 
 use Model;
+use Storage;
 
 /**
  * Setting Model
@@ -46,4 +47,16 @@ class SourceFile extends Model
     public function getPathAttribute() {
         return 'source/'.$this->slug.'.'.$this->extension;
     }
+
+    public function getUrlAttribute() {
+        return Storage::disk('uploads')->url($this->path);
+    }
+
+    public function getTypeAttribute() {
+        return Storage::disk('uploads')->mimeType($this->path);
+    }
+
+    public function getSizeAttribute() {
+        return Storage::disk('uploads')->size($this->path);
+    }
 }