From bffa99b042430900a2a17e09d295cde3e0e8cbc4 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Tue, 27 Oct 2020 02:18:30 +0100
Subject: [PATCH] Add AspectRatio to attachment

---
 classes/UploadStorage.php                             |  3 ++-
 formwidgets/Responsiveimage.php                       |  4 +++-
 formwidgets/responsiveimage/assets/src/App.vue        | 10 ++++++++--
 formwidgets/responsiveimage/assets/src/popup.mixin.js |  7 ++++++-
 models/SourceFile.php                                 |  4 ++--
 updates/create_file_attachments_table.php             |  1 +
 6 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/classes/UploadStorage.php b/classes/UploadStorage.php
index bab99f2..b991911 100644
--- a/classes/UploadStorage.php
+++ b/classes/UploadStorage.php
@@ -21,7 +21,8 @@ class UploadStorage {
         $sourceFile = new SourceFile([
             'basename' => pathinfo($this->file->getClientOriginalName(), PATHINFO_FILENAME),
             'extension' => $this->file->getClientOriginalExtension(),
-            'tags' => []
+            'tags' => [],
+            'aspect_ratio' => $this->data['resAspectRatio']
         ]);
         $sourceFile->slugAttributes();
 
diff --git a/formwidgets/Responsiveimage.php b/formwidgets/Responsiveimage.php
index 2461fd4..73d1335 100644
--- a/formwidgets/Responsiveimage.php
+++ b/formwidgets/Responsiveimage.php
@@ -73,7 +73,9 @@ class Responsiveimage extends FormWidgetBase
      */
     protected function prepareVars()
     {
-        $this->vars['aspectRatio'] = $this->aspectRatio ?: 'null';
+        $this->vars['aspectRatio'] = $this->aspectRatio
+            ? str_replace('"', "'", json_encode(explode(' / ', $this->aspectRatio)))
+            : 'null';
         $this->vars['minWidth'] = $this->minWidth ?: '0';
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue() ?: 'null';
diff --git a/formwidgets/responsiveimage/assets/src/App.vue b/formwidgets/responsiveimage/assets/src/App.vue
index f7c57b8..bb30251 100644
--- a/formwidgets/responsiveimage/assets/src/App.vue
+++ b/formwidgets/responsiveimage/assets/src/App.vue
@@ -151,7 +151,6 @@ export default {
             }
 
             if (file.width < this.cropOptions.minWidth) {
-                console.log('zu klein');
                 $.oc.flashMsg({
                     text: `Dieses Bild ist zu klein. Bitte wähle ein Bild mit mindestens ${this.cropOptions.minWidth} Pixel Breite.`,
                     class: 'error'
@@ -173,10 +172,17 @@ export default {
             });
         },
         onSend(file, xhr, formData) {
-            formData.append('extraData', JSON.stringify(this.extraData[file.name]));
+            formData.append('extraData', JSON.stringify({
+                ...this.extraData[file.name],
+                resAspectRatio: this.cropOptions.aspectRatio
+            }));
+            formData.append('resAspectRatio', this.aspectRatio);
             this.formData.forEach((v) => {
                 formData.append(v.name, v.value);
             });
+            Object.keys(this.cropOptions).forEach((v) => {
+                formData.append(v, this.cropOptions[v]);
+            });
         },
         onMount() {
             if (!this.value) { return; }
diff --git a/formwidgets/responsiveimage/assets/src/popup.mixin.js b/formwidgets/responsiveimage/assets/src/popup.mixin.js
index dd986de..c30cb0d 100644
--- a/formwidgets/responsiveimage/assets/src/popup.mixin.js
+++ b/formwidgets/responsiveimage/assets/src/popup.mixin.js
@@ -35,7 +35,7 @@ export default {
                         shade: true,
                         boxWidth: $cropContainer.width(),
                         onChange: _cls.onChangeCrop,
-                        aspectRatio: _cls.cropOptions.aspectRatio,
+                        aspectRatio: _cls.realAspectRatio,
                         minSize: [_cls.cropOptions.minWidth, 0]
                     };
 
@@ -67,6 +67,11 @@ export default {
     },
 
     computed: {
+        realAspectRatio() {
+            return this.cropOptions.aspectRatio
+                ? this.cropOptions.aspectRatio[0] / this.cropOptions.aspectRatio[1]
+                : null;
+        },
         popupId() {
             return `subform-popup-${this.formid}`;
         },
diff --git a/models/SourceFile.php b/models/SourceFile.php
index 482ddad..3401cc2 100644
--- a/models/SourceFile.php
+++ b/models/SourceFile.php
@@ -24,9 +24,9 @@ class SourceFile extends Model
     /**
      * @var array Fillable fields
      */
-    protected $fillable = ['id', 'basename', 'extension', 'tags', 'slug'];
+    protected $fillable = ['id', 'basename', 'extension', 'tags', 'slug', 'aspect_ratio'];
 
-    public $jsonable = ['tags'];
+    public $jsonable = ['tags', 'aspect_ratio'];
 
     /**
      * @var array Relations
diff --git a/updates/create_file_attachments_table.php b/updates/create_file_attachments_table.php
index 93eca53..5bc6483 100644
--- a/updates/create_file_attachments_table.php
+++ b/updates/create_file_attachments_table.php
@@ -15,6 +15,7 @@ class CreateResponsiveFilesTable extends Migration
             $table->string('slug');
             $table->string('extension');
             $table->json('tags');
+            $table->string('aspect_ratio')->nullable();
             $table->timestamps();
         });