Vuejs component: Multiple file selector

Modules/Core/Config/core.php

@@ -172,4 +172,11 @@
     | useViewNamespaces.backend-theme needs to be enabled at module level
     */
     'enable-theme-overrides' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Check if asgard was installed
+    |--------------------------------------------------------------------------
+    */
+    'is_installed' => env('INSTALLED', false)
 ];

Modules/Core/Foundation/AsgardCms.php

@@ -8,5 +8,5 @@ class AsgardCms
      * The AsgardCms version.
      * @var string
      */
-    const VERSION = '3.5.2';
+    const VERSION = '3.5.3';
 }

Modules/Core/Http/Middleware/Authorization.php

@@ -49,7 +49,7 @@ public function handle($request, \Closure $next, $permission)
      */
     private function handleUnauthorizedRequest(Request $request, $permission)
     {
-        if ($request->ajax()) {
+        if ($request->ajax() || $request->wantsJson()) {
             return response('Unauthorized.', Response::HTTP_FORBIDDEN);
         }
         if ($request->user() === null) {

Modules/Core/Providers/CoreServiceProvider.php

@@ -70,7 +70,7 @@ public function boot()
     public function register()
     {
         $this->app->singleton('asgard.isInstalled', function () {
-            return true === env('INSTALLED', false);
+            return true === config('asgard.core.core.is_installed');
         });
         $this->app->singleton('asgard.onBackend', function () {
             return $this->onBackend();
@@ -349,7 +349,7 @@ public function bladeDirectives()
      */
     private function onBackend()
     {
-        $url = app(Request::class)->url();
+        $url = app(Request::class)->path();
         if (str_contains($url, config('asgard.core.core.admin-prefix'))) {
             return true;
         }

Modules/Core/Providers/RoutingServiceProvider.php

@@ -52,14 +52,30 @@ public function map(Router $router)
             $this->loadApiRoutes($router);
         });
 
-        $router->group([
-            'namespace' => $this->namespace,
-            'prefix' => LaravelLocalization::setLocale(),
-            'middleware' => ['localizationRedirect', 'web'],
-        ], function (Router $router) {
-            $this->loadBackendRoutes($router);
-            $this->loadFrontendRoutes($router);
-        });
+        $prefixes = $this->getPrefixes();
+        foreach ($prefixes as $prefix) {
+            $router->group([
+                'namespace' => $this->namespace,
+                'prefix' => $prefix,
+                'middleware' => ['localizationRedirect', 'web'],
+            ], function (Router $router) {
+                $this->loadBackendRoutes($router);
+                $this->loadFrontendRoutes($router);
+            });
+        }
+    }
+
+    /**
+     * Get locale prefixes
+     * @return array
+     */
+    private function getPrefixes()
+    {
+        if (app('asgard.isInstalled')) {
+            return array_merge(json_decode(setting('core::locales')), ['']);
+        }
+
+        return [LaravelLocalization::setLocale()];
     }
 
     /**

Modules/Core/changelog.yml

@@ -1,5 +1,16 @@
 url: https://github.com/AsgardCms/Platform
 versions:
+    "@unreleased":
+        added:
+            - New Hungarian translations
+        changed:
+            - Updating Dutch translations
+            - Fix Carbon locale
+            - Fixed how the admin url is parsed by reading the <code>path</code> instead of <code>url</code>
+    "3.5.3":
+        changed:
+            - Updating Polish translations
+            - Updating Spanish  translations
     "3.5.2":
         changed:
             - Correctly returning the Query object from <code>allWithBuilder</code> method in base repository

Modules/Media/Assets/js/components/MultipleMedia.vue

@@ -0,0 +1,123 @@
+<template>
+    <div>
+        <label class="el-form-item__label">{{ getFieldLabel() }}</label>
+        <div class="jsThumbnailImageWrapper jsSingleThumbnailWrapper" v-if="hasSelectedMedia" >
+            <figure v-for="media in this.selectedMedia" :key="media.id">
+                <img :src="media.small_thumb" alt="" v-if="media.is_image"/>
+                <i :class="`fa ${media.fa_icon}`" style="font-size: 60px;" v-if="! media.is_image"></i>
+                <span v-if="! media.is_image" style="display:block;">{{ media.filename }}</span>
+                <span class="el-icon-error remove-media" @click="unSelectMedia(media.id)"></span>
+            </figure>
+            <div class="clearfix"></div>
+        </div>
+        <div>
+            <el-button type="button" @click="dialogVisible = true">{{ trans('media.Browse') }}</el-button>
+        </div>
+        <el-dialog
+                :visible.sync="dialogVisible"
+                fullscreen
+                :before-close="handleClose">
+
+            <media-list single-modal :event-name="this.eventName"></media-list>
+
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="dialogVisible = false">{{ trans('core.button.cancel') }}</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios';
+    import UploadZone from '../../../../Media/Assets/js/components/UploadZone.vue';
+    import MediaList from '../../../../Media/Assets/js/components/MediaList.vue';
+    import StringHelpers from '../../../../Core/Assets/js/mixins/StringHelpers.vue';
+
+    export default {
+        mixins: [StringHelpers],
+        props: {
+            zone: { type: String, required: true },
+            entity: { type: String, required: true },
+            entityId: { default: null },
+            label: { type: String },
+        },
+        components: {
+            'upload-zone': UploadZone,
+            'media-list': MediaList,
+        },
+        watch: {
+            entityId() {
+                if (this.entityId) {
+                    this.fetchMedia();
+                }
+            },
+        },
+        data() {
+            return {
+                dialogVisible: false,
+                selectedMedia: [],
+                eventName: '',
+            };
+        },
+        computed: {
+            hasSelectedMedia() {
+                return this.selectedMedia !== undefined && !_.isEmpty(this.selectedMedia);
+            },
+        },
+        methods: {
+            handleClose(done) {
+                done();
+            },
+            unSelectMedia(id) {
+                this.selectedMedia = _.reject(this.selectedMedia, media => media.id === id);
+                this.$emit('fileUnselected', { id, zone: this.zone });
+            },
+            fetchMedia() {
+                axios.get(route('api.media.get-by-zone-and-entity', {
+                    zone: this.zone,
+                    entity: this.entity,
+                    entity_id: this.entityId,
+                }))
+                    .then((response) => {
+                        this.selectedMedia = response.data.data;
+                        _.forEach(this.selectedMedia, (file) => {
+                            this.$emit('multipleFileSelected', { id: file.id, zone: this.zone });
+                        });
+                    });
+            },
+            getFieldLabel() {
+                return this.label || this.ucwords(this.zone.replace('_', ' '));
+            },
+            makeId() {
+                let text = '';
+                const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+                for (let i = 0; i < 5; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)); }
+
+                return text;
+            },
+        },
+        mounted() {
+            if (this.entityId) {
+                this.fetchMedia();
+            }
+            this.eventName = `fileWasSelected${this.makeId()}${Math.floor(Math.random() * 999999)}`;
+
+            this.$events.listen(this.eventName, (mediaData) => {
+                if (_.find(this.selectedMedia, mediaData) === undefined) {
+                    if (!this.selectedMedia) this.selectedMedia = [];
+                    this.selectedMedia.push(mediaData);
+                    this.$emit('multipleFileSelected', _.merge(mediaData, { zone: this.zone }));
+                }
+            });
+        },
+    };
+</script>
+<style>
+    .remove-media{
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        color: #FA5555;
+    }
+</style>

Modules/Media/Assets/js/mixins/MultipleFileSelector.js

@@ -0,0 +1,27 @@
+export default {
+    methods: {
+        selectMultipleFile(event, model) {
+            if (!this[model].medias_multi) {
+                this[model].medias_multi = {};
+            }
+            if (!this[model].medias_multi[event.zone]) {
+                this[model].medias_multi[event.zone] = { files: [] };
+            }
+            this[model].medias_multi[event.zone].files.push(event.id);
+        },
+        unselectFile(event, model) {
+            if (!this[model].medias_multi) {
+                this[model].medias_multi = {};
+            }
+            if (!this[model].medias_multi[event.zone]) {
+                this[model].medias_multi[event.zone] = { files: [] };
+                if (this.$refs['multiple-media'] !== undefined && this.$refs['multiple-media'].selectedMedia !== undefined && !_.isEmpty(this.$refs['multiple-media'].selectedMedia)) {
+                    _.forEach(this.$refs['multiple-media'].selectedMedia, (file, key) => {
+                        this[model].medias_multi[event.zone].files.push(file.id);
+                    });
+                }
+            }
+            this[model].medias_multi[event.zone].files = _.reject(this[model].medias_multi[event.zone].files, media => media === event.id);
+        },
+    },
+};

Modules/Media/Http/Controllers/Admin/MediaGridController.php

@@ -2,9 +2,11 @@
 
 namespace Modules\Media\Http\Controllers\Admin;
 
+use Illuminate\Http\Request;
 use Modules\Core\Http\Controllers\Admin\AdminBaseController;
 use Modules\Media\Image\ThumbnailManager;
 use Modules\Media\Repositories\FileRepository;
+use Modules\Media\Transformers\MediaTransformer;
 
 class MediaGridController extends AdminBaseController
 {
@@ -39,13 +41,34 @@ public function index()
 
     /**
      * A grid view of uploaded files used for the wysiwyg editor
+     * @param Request $request
      * @return \Illuminate\View\View
      */
-    public function ckIndex()
+    public function ckIndex(Request $request)
     {
-        $files = $this->file->allForGrid();
-        $thumbnails = $this->thumbnailsManager->all();
+        if ($request->isXmlHttpRequest()) {
+            $cols = $request->get('columns');
+            $start = $request->get('start', 0);
+            $length = $request->get('length', 25);
+            $page = ($start/$length) + 1;
+            $requestData = ['per_page' => $length, 'page' => $page];
+            foreach ($cols as $col) {
+                if ($col['searchable'] && isset($col['search']['value'])) {
+                    $requestData[$col['data']] = $col['search']['value'];
+                }
+            }
+            $request->merge($requestData);
+            $files = $this->file->pagingForGrid($request);
+
+            $output = [
+                "draw" => $request->get('draw'),
+                "recordsTotal" => $files->total(),
+                "recordsFiltered" => $files->total(),
+                'data' => MediaTransformer::collection($files)
+            ];
+            return response()->json($output);
 
-        return view('media::admin.grid.ckeditor', compact('files', 'thumbnails'));
+        }
+        return view('media::admin.grid.ckeditor');
     }
 }

Modules/Media/Http/Controllers/Api/MediaController.php

@@ -93,6 +93,23 @@ public function findFirstByZoneEntity(Request $request)
         return new MediaTransformer($file);
     }
 
+    /**
+     * Get a media collection by zone and entity object. Require some params that were passed to request: entity (Full class name of entity), entity_id and zone
+     *
+     * @param Request $request
+     * @return JsonResponse|\Illuminate\Http\Resources\Json\AnonymousResourceCollection
+     */
+    public function getByZoneEntity(Request $request)
+    {
+        $entityName = (string)$request->get('entity');
+        $entityModel = new $entityName;
+        $entity = $entityModel::find($request->get('entity_id'));
+        if ($entity && in_array('Modules\Media\Support\Traits\MediaRelation', class_uses($entity)) && $entity->files()->count()) {
+            $files = $this->file->findMultipleFilesByZoneForEntity($request->get('zone'), $entity);
+            return MediaTransformer::collection($files);
+        }
+        return response()->json(['data' => null]);
+    }
     /**
      * Store a newly created resource in storage.
      *

Modules/Media/Http/apiRoutes.php

@@ -70,6 +70,11 @@
         'as' => 'api.media.find-first-by-zone-and-entity',
     ]);
 
+    $router->get('media/get-by-zone-and-entity', [
+        'uses' => 'MediaController@getByZoneEntity',
+        'as' => 'api.media.get-by-zone-and-entity',
+    ]);
+
     $router->get('media/{media}', [
         'uses' => 'MediaController@find',
         'as' => 'api.media.media.find',

Modules/Media/Http/backendRoutes.php

@@ -3,10 +3,6 @@
 use Illuminate\Routing\Router;
 
 /** @var Router $router */
-$router->bind('media', function ($id) {
-    return app(\Modules\Media\Repositories\FileRepository::class)->find($id);
-});
-
 $router->group(['prefix' => '/media'], function (Router $router) {
     $router->get('media', [
         'as' => 'admin.media.media.index',

Modules/Media/Providers/MediaServiceProvider.php

@@ -72,6 +72,10 @@ public function register()
             $event->load('media', array_dot(trans('media::media')));
             $event->load('folders', array_dot(trans('media::folders')));
         });
+
+        app('router')->bind('media', function ($id) {
+            return app(FileRepository::class)->find($id);
+        });
     }
 
     public function boot(DispatcherContract $events)

Modules/Media/Repositories/Eloquent/EloquentFileRepository.php

@@ -196,6 +196,34 @@ public function allForGrid(): Collection
         return $this->model->where('is_folder', 0)->get();
     }
 
+    /**
+     * @param Request $request
+     * @return \Illuminate\Contracts\Pagination\LengthAwarePaginator
+     */
+    public function pagingForGrid(Request $request)
+    {
+
+        $media = $this->allWithBuilder();
+        $media->where('is_folder', 0);
+        if ($request->get('search') !== null) {
+            $term = $request->get('search');
+            if (is_array($term)) {
+                $term = $term['value'];
+            }
+            $media->where('filename', 'LIKE', "%{$term}%");
+        }
+
+        if ($request->get('order_by') !== null && $request->get('order') !== 'null') {
+            $order = $request->get('order') === 'ascending' ? 'asc' : 'desc';
+
+            $media->orderBy($request->get('order_by'), $order);
+        } else {
+            $media->orderBy('created_at', 'desc');
+        }
+
+        return $media->paginate($request->get('per_page', 10));
+    }
+
     public function move(File $file, File $destination) : File
     {
         $previousData = [