Merge pull request #312 from uasoft-indonesia/enhancement/v1/file-man…

…ager

Change concept for media getters (Resolve #295)

src/Helpers/ApiResponse.php

@@ -4,22 +4,20 @@
 
 use Exception;
 use Illuminate\Database\QueryException;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Log;
-use Illuminate\Support\Facades\Storage;
 use Illuminate\Validation\ValidationException;
 use Uasoft\Badaso\Exceptions\SingleException;
 
 class ApiResponse
 {
     private static function send($data, $http_status = 200)
     {
-        if (is_object($data)) {
-            $data->meta = ['media_base_url' => Storage::url('/')];
-        } else {
-            $data['meta']['media_base_url'] = Storage::url('/');
-        }
-
+        $request = new Request;
         $response = CaseConvert::camel($data);
+        if ($request->method() === 'GET') {
+            $response = HandleFile::handle($response);
+        }
 
         return response()->json($response, $http_status);
     }

src/Helpers/HandleFile.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace Uasoft\Badaso\Helpers;
+
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+class HandleFile
+{
+    public static function handle($dto)
+    {
+        $objects = [];
+        foreach ($dto as $key => $value) {
+            if (is_array($value)) {
+                $objects[$key] = self::handle($value);
+            } else {
+                $objects[$key] = self::handleUrl($value);
+            }
+        }
+
+        return $objects;
+    }
+
+    protected static function handleUrl($val)
+    {
+        if (stristr($val, 'http://') ?: stristr($val, 'https://')) {
+            return $val;
+        }
+
+        if (preg_match('/^.*\.(jpg|jpeg|gif|svg|ico|tif|tiff|webp|heif|png|bmp)$/i', $val)) {
+            return Storage::url($val);
+        }
+
+        if (Str::contains($val, config('lfm.folder_categories.file.folder_name').'/')) {
+            return str_replace(
+                config('lfm.folder_categories.file.folder_name').'/',
+                Storage::url('/').config('lfm.folder_categories.file.folder_name').'/',
+                $val
+            );
+        }
+
+        return $val;
+    }
+
+    public static function normalize($val)
+    {
+        $objects = [];
+        foreach ($val as $key => $value) {
+            if (is_array($value)) {
+                $objects[$key] = self::normalize($value);
+            } else {
+                $objects[$key] = self::removeBaseUrl($value);
+            }
+        }
+
+        return $objects;
+    }
+
+    protected static function removeBaseUrl($val)
+    {
+        if (Str::contains($val, Storage::url('/'))) {
+            return str_replace(Storage::url('/'), '', $val);
+        }
+
+        return $val;
+    }
+}

src/Middleware/ApiRequest.php

@@ -6,6 +6,7 @@
 use Illuminate\Contracts\Foundation\Application;
 use Uasoft\Badaso\Helpers\ApiResponse;
 use Uasoft\Badaso\Helpers\CaseConvert;
+use Uasoft\Badaso\Helpers\HandleFile;
 use Uasoft\Badaso\Models\Configuration;
 use Uasoft\Badaso\Models\DataType;
 
@@ -52,6 +53,7 @@ public function handle($request, Closure $next)
         app()->setLocale($lang);
 
         $request->merge(CaseConvert::snake($request->all()));
+        $request->merge(HandleFile::normalize($request->all()));
 
         if ($this->isUnderMaintenance() || $this->app->isDownForMaintenance() || $this->isCrudGeneratedMaintenance($request)) {
             if ($this->isAdministrator()) {

src/Seeder/Configurations/ConfigurationsSeeder.php

@@ -128,6 +128,17 @@ public function run()
                     'group' => 'adminPanel',
                     'can_delete' => 0,
                 ],
+                10 => [
+                    'id' => 11,
+                    'key' => 'maintenanceImage',
+                    'display_name' => 'Image for maintenance page',
+                    'value' => 'files/shares/maintenance.png',
+                    'details' => '{"type":"shares-only"}',
+                    'type' => 'upload_image',
+                    'order' => 10,
+                    'group' => 'adminPanel',
+                    'can_delete' => 0,
+                ],
             ];
 
             foreach ($settings as $key => $value) {

src/resources/js/assets/scss/module/_upload-file-multiple.scss

@@ -120,6 +120,12 @@
     margin-top: 10px;
     overflow: hidden;
     position: relative;
+
+    &:hover {
+      & > .badaso-upload-file-multiple__remove-button {
+        opacity: 1;
+      }
+    }
   }
 
   &__preview-text {

src/resources/js/assets/scss/module/_upload-file.scss

@@ -120,6 +120,12 @@
     margin-top: 10px;
     overflow: hidden;
     position: relative;
+
+    &:hover {
+      & > .badaso-upload-file__remove-button {
+        opacity: 1;
+      }
+    }
   }
 
   &__preview-text {

src/resources/js/assets/scss/module/_upload-image-multiple.scss

@@ -131,6 +131,12 @@
       width: auto;
       margin: 0 auto;
     }
+
+    &:hover {
+      & > .badaso-upload-image-multiple__remove-button {
+        opacity: 1;
+      }
+    }
   }
 
   &__preview-image {

src/resources/js/assets/scss/module/_upload-image.scss

@@ -14,6 +14,14 @@
     }
   }
 
+  &__menu {
+    &--disabled {
+      opacity: 0.25;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+  }
+
   &__popup {
     &--bottom-bar {
       grid-column: 1/3;
@@ -131,6 +139,12 @@
       width: auto;
       margin: 0 auto;
     }
+
+    &:hover {
+      & > .badaso-upload-image__remove-button {
+        opacity: 1;
+      }
+    }
   }
 
   &__preview-image {

src/resources/js/components/BadasoLogoDisplay.vue

@@ -17,12 +17,7 @@ export default {
     adminPanelLogo: {
       get() {
         let config = this.$store.getters["badaso/getConfig"];
-        let meta = this.$store.getters["badaso/getMeta"];
-        if (config.adminPanelLogo && config.adminPanelLogo != "") {
-          return meta.mediaBaseUrl + config.adminPanelLogo;
-        } else {
-          return null;
-        }
+        return config.adminPanelLogo;
       },
     },
     adminPanelHeaderColor: {

src/resources/js/components/BadasoUploadFile.vue

@@ -179,11 +179,13 @@ export default {
     showOverlay() {
       this.show = true
       document.body.style.setProperty('position', 'fixed')
+      document.body.style.setProperty("width", "100%");
       this.getFiles()
     },
     closeOverlay() {
       this.show = false
       document.body.style.removeProperty('position')
+      document.body.style.removeProperty("width");
     },
     onFilePicked(e) {
       const files = e.target.files;
@@ -234,7 +236,7 @@ export default {
       }
     },
     emitInput() {
-      var url = this.files.items[this.activeFile].url.replace(this.$store.state.badaso.meta.mediaBaseUrl, '')
+      let url = this.files.items[this.activeFile].url
       this.$emit('input', url)
       this.closeOverlay()
     },

src/resources/js/components/BadasoUploadFileMultiple.vue

@@ -184,11 +184,13 @@ export default {
     showOverlay() {
       this.show = true
       document.body.style.setProperty('position', 'fixed')
+      document.body.style.setProperty("width", "100%");
       this.getFiles()
     },
     closeOverlay() {
       this.show = false
       document.body.style.removeProperty('position')
+      document.body.style.removeProperty("width");
     },
     onFilePicked(e) {
       let files = e.target.files;
@@ -235,7 +237,7 @@ export default {
     emitInput() {
       let url = []
       this.activeFile.forEach(element => {
-        url.push(this.files.items[element].url.replace(this.$store.state.badaso.meta.mediaBaseUrl, ''))
+        url.push(this.files.items[element].url)
       });
       this.filesName = url.join(', ')
       this.$emit('input', url)

src/resources/js/components/BadasoUploadImage.vue

@@ -5,7 +5,7 @@
       <vs-col vs-lg="4" vs-sm="12">
         <div class="badaso-upload-image__preview" v-if="imageUrl !== null && imageUrl !== ''">
           <vs-button class="badaso-upload-image__remove-button" color="danger" icon="close" @click="deleteFilePicked(value)" />
-          <img :src="getImageSrc(value)" class="badaso-upload-image__preview-image" />
+          <img :src="value" class="badaso-upload-image__preview-image" />
         </div>
       </vs-col>
     </vs-row>
@@ -21,7 +21,7 @@
         <ul class="badaso-upload-image__popup--left-bar">
           <li :class="[getSelected === 'private'  ? 'active' : '' ]" @click="selected = 'private'" v-if="privateOnly || (!privateOnly && !sharesOnly)">Private</li>
           <li :class="[getSelected === 'shares' ? 'active' : '' ]" @click="selected = 'shares'" v-if="sharesOnly || (!sharesOnly && !privateOnly)">Shares</li>
-          <li :class="[getSelected === 'url' ? 'active' : '' ]" @click="selected = 'url'">Insert by URL</li>
+          <li :class="[getSelected === 'url' ? 'active' : '', $store.state.badaso.isOnline ? '' : 'badaso-upload-image__menu--disabled' ]" @click="selected = 'url'">Insert by URL</li>
         </ul>
         <div class="badaso-upload-image__popup--right-bar" v-if="getSelected !== 'url'">
           <div class="badaso-upload-image__popup-add-image" @click="pickFile">
@@ -187,12 +187,14 @@ export default {
     showOverlay() {
       this.show = true
       document.body.style.setProperty('position', 'fixed')
+      document.body.style.setProperty("width", "100%");
       this.getImages()
     },
     closeOverlay() {
       this.show = false
       this.activeImage = null
-      document.body.style.setProperty('position', 'relative')
+      document.body.style.removeProperty('position')
+      document.body.style.removeProperty("width");
     },
     onFilePicked(e) {
       this.$refs.image.tabindex = -1;
@@ -224,13 +226,6 @@ export default {
       if (typeof str === "string" || str instanceof String) return true;
       else return false;
     },
-    getImageSrc(value) {
-      if (this.$helper.isValidHttpUrl(value)) {
-        return value
-      }
-
-      return this.$store.state.badaso.meta.mediaBaseUrl + value
-    },
     getImages() {
       this.images.items = []
       if (this.getSelectedFolder) {
@@ -251,7 +246,7 @@ export default {
     },
     emitInput() {
       if (this.selected !== 'url') {
-        var url = this.images.items[this.activeImage].url.replace(this.$store.state.badaso.meta.mediaBaseUrl, '')
+        var url = this.images.items[this.activeImage].url
         this.$emit('input', url)
       } else {
         this.$emit('input', this.inputByUrl)

src/resources/js/components/BadasoUploadImageMultiple.vue

@@ -5,7 +5,7 @@
       <vs-col vs-lg="4" vs-sm="12" v-for="(imageData, index) in value" :key="index">
         <div class="badaso-upload-image-multiple__preview">
           <vs-button class="badaso-upload-image-multiple__remove-button" color="danger" icon="close" @click="deleteFilePicked(imageData)" />
-          <img :src="getImageSrc(imageData)" class="badaso-upload-image-multiple__preview-image" />
+          <img :src="imageData" class="badaso-upload-image-multiple__preview-image" />
         </div>
       </vs-col>
     </vs-row>
@@ -21,7 +21,7 @@
         <ul class="badaso-upload-image-multiple__popup--left-bar">
           <li :class="[getSelected === 'private'  ? 'active' : '' ]" @click="selected = 'private'" v-if="privateOnly || !privateOnly && !sharesOnly">Private</li>
           <li :class="[getSelected === 'shares' ? 'active' : '' ]" @click="selected = 'shares'" v-if="sharesOnly || !sharesOnly && !privateOnly">Shares</li>
-          <li :class="[getSelected === 'url' ? 'active' : '' ]" @click="selected = 'url'">Insert by URL</li>
+          <li :class="[getSelected === 'url' ? 'active' : '', $store.state.badaso.isOnline ? '' : 'badaso-upload-image__menu--disabled' ]" @click="selected = 'url'">Insert by URL</li>
         </ul>
         <div class="badaso-upload-image-multiple__popup--right-bar" v-if="getSelected !== 'url'">
           <div class="badaso-upload-image-multiple__popup-add-image" @click="pickFile">
@@ -172,11 +172,13 @@ export default {
     showOverlay() {
       this.show = true
       document.body.style.setProperty('position', 'fixed')
+      document.body.style.setProperty("width", "100%");
       this.getImages()
     },
     closeOverlay() {
       this.show = false
       document.body.style.removeProperty('position')
+      document.body.style.removeProperty("width");
     },
     onFilePicked(e) {
       let files = e.target.files;
@@ -200,13 +202,6 @@ export default {
         console.error(error);
       })
     },
-    getImageSrc(value) {
-      if (this.$helper.isValidHttpUrl(value)) {
-        return value
-      } 
-
-      return this.$store.state.badaso.meta.mediaBaseUrl + value
-    },
     getImages() {
       this.images.items = []
       if (this.getSelectedFolder) {
@@ -229,7 +224,7 @@ export default {
       if (this.selected !== 'url') {
         let url = []
         this.activeImage.forEach(element => {
-          url.push(this.images.items[element].url.replace(this.$store.state.badaso.meta.mediaBaseUrl, ''))
+          url.push(this.images.items[element].url)
         });
         this.imagesName = url.join(', ')
         this.$emit('input', url)

src/resources/js/layout/admin/Container.vue

@@ -55,8 +55,7 @@ export default {
     adminPanelLogo: {
       get() {
         let config = this.$store.getters["badaso/getConfig"];
-        let url = this.$store.state.badaso.meta.mediaBaseUrl + config.adminPanelLogo
-        return url ? url : '/storage/' + config.adminPanelLogo;
+        return config.adminPanelLogo;
       },
     },
     adminPanelHeaderColor: {

src/resources/js/layout/admin/sidebar/SideBar.vue

@@ -284,9 +284,7 @@ export default {
     },
     getAvatar() {
       let user = this.$store.getters["badaso/getUser"];
-      return user.avatar 
-        ? this.$store.state.badaso.meta.mediaBaseUrl + user.avatar
-        : '/storage/files/shares/default-user.png';
+      return user.avatar
     }
   },
   methods: {

src/resources/js/layout/auth/Container.vue

@@ -13,8 +13,7 @@ export default {
   computed: {
     authBackgroundImage() {
       let config = this.$store.getters["badaso/getConfig"];
-      let url = this.$store.getters["badaso/getMeta"];
-      return config.authBackgroundImage ? url.mediaBaseUrl + config.authBackgroundImage : url.mediaBaseUrl + "files/shares/auth-bg.jpg";
+      return config.authBackgroundImage;
     }
   }
 };