Merge remote-tracking branch 'upstream/3.0'

# Conflicts:
#	Modules/Core/Foundation/AsgardCms.php
#	Modules/Core/changelog.yml
#	Modules/Workshop/changelog.yml

Modules/Core/Providers/RoutingServiceProvider.php

@@ -52,30 +52,14 @@ abstract class RoutingServiceProvider extends ServiceProvider
             $this->loadApiRoutes($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()];
+        $router->group([
+            'namespace' => $this->namespace,
+            'prefix' => LaravelLocalization::setLocale(),
+            'middleware' => ['localizationRedirect', 'web'],
+        ], function (Router $router) {
+            $this->loadBackendRoutes($router);
+            $this->loadFrontendRoutes($router);
+        });
     }
 
     /**

Modules/Core/changelog.yml

@@ -3,6 +3,9 @@ versions:
     "@unreleased":
         added:
             - Laravel 5.6 compatibility
+    "3.6.1":
+        changed:
+            - Fixed routing issues with localization introduced in 3.6.0
     "3.6.0":
         added:
             - New Hungarian translations

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

 <template>
     <div>
         <label class="el-form-item__label">{{ getFieldLabel() }}</label>
-        <div class="jsThumbnailImageWrapper jsSingleThumbnailWrapper" v-if="hasSelectedMedia" >
+        <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>
@@ -14,9 +14,9 @@
             <el-button type="button" @click="dialogVisible = true">{{ trans('media.Browse') }}</el-button>
         </div>
         <el-dialog
-                :visible.sync="dialogVisible"
-                fullscreen
-                :before-close="handleClose">
+            :visible.sync="dialogVisible"
+            width="75%"
+            :before-close="handleClose">
 
             <media-list single-modal :event-name="this.eventName"></media-list>
 
@@ -29,12 +29,14 @@
 
 <script>
     import axios from 'axios';
-    import UploadZone from '../../../../Media/Assets/js/components/UploadZone.vue';
-    import MediaList from '../../../../Media/Assets/js/components/MediaList.vue';
+    import _ from 'lodash';
+    import UploadZone from './UploadZone.vue';
+    import MediaList from './MediaList.vue';
     import StringHelpers from '../../../../Core/Assets/js/mixins/StringHelpers.vue';
+    import RandomString from '../mixins/RandomString';
 
     export default {
-        mixins: [StringHelpers],
+        mixins: [StringHelpers, RandomString],
         props: {
             zone: { type: String, required: true },
             entity: { type: String, required: true },
@@ -74,10 +76,10 @@
             },
             fetchMedia() {
                 axios.get(route('api.media.get-by-zone-and-entity', {
-                    zone: this.zone,
-                    entity: this.entity,
-                    entity_id: this.entityId,
-                }))
+                        zone: this.zone,
+                        entity: this.entity,
+                        entity_id: this.entityId,
+                    }))
                     .then((response) => {
                         this.selectedMedia = response.data.data;
                         _.forEach(this.selectedMedia, (file) => {
@@ -88,20 +90,12 @@
             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.eventName = `fileWasSelected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
 
             this.$events.listen(this.eventName, (mediaData) => {
                 if (_.find(this.selectedMedia, mediaData) === undefined) {
@@ -114,10 +108,10 @@
     };
 </script>
 <style>
-    .remove-media{
+    .remove-media {
         position: absolute;
         top: 5px;
         left: 5px;
         color: #FA5555;
     }
-</style>
\ No newline at end of file
+</style>

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

@@ -15,9 +15,9 @@
         </div>
 
         <el-dialog
-                :visible.sync="dialogVisible"
-                fullscreen
-                :before-close="handleClose">
+            :visible.sync="dialogVisible"
+            width="75%"
+            :before-close="handleClose">
 
             <media-list single-modal :event-name="this.eventName"></media-list>
 
@@ -30,12 +30,14 @@
 
 <script>
     import axios from 'axios';
+    import _ from 'lodash';
     import UploadZone from './UploadZone.vue';
     import MediaList from './MediaList.vue';
     import StringHelpers from '../../../../Core/Assets/js/mixins/StringHelpers.vue';
+    import RandomString from '../mixins/RandomString';
 
     export default {
-        mixins: [StringHelpers],
+        mixins: [StringHelpers, RandomString],
         props: {
             zone: { type: String, required: true },
             entity: { type: String, required: true },
@@ -75,10 +77,10 @@
             },
             fetchMedia() {
                 axios.get(route('api.media.find-first-by-zone-and-entity', {
-                    zone: this.zone,
-                    entity: this.entity,
-                    entity_id: this.entityId,
-                }))
+                        zone: this.zone,
+                        entity: this.entity,
+                        entity_id: this.entityId,
+                    }))
                     .then((response) => {
                         this.$emit('singleFileSelected', _.merge(response.data.data, { zone: this.zone }));
                         this.selectedMedia = response.data.data;
@@ -87,20 +89,12 @@
             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.eventName = `fileWasSelected${this.randomString()}${Math.floor(Math.random() * 999999)}`;
 
             this.$events.listen(this.eventName, (mediaData) => {
                 this.dialogVisible = false;

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

 export default {
     methods: {
         selectMultipleFile(event, model) {
-            if (!this[model].medias_multi) {
-                this[model].medias_multi = {};
+            if (typeof this[model].medias_multi === 'undefined') {
+                this.$set(model, 'medias_multi', {});
             }
-            if (!this[model].medias_multi[event.zone]) {
-                this[model].medias_multi[event.zone] = { files: [] };
+
+            if (typeof this[model].medias_multi[event.zone] === 'undefined') {
+                this.$set(this[model].medias_multi, event.zone, { files: [], orders: '' });
+            }
+
+            if (event.id !== null && event.id !== undefined) {
+                const medias = new Set(this[model].medias_multi[event.zone].files);
+                medias.add(event.id);
+                this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
             }
-            this[model].medias_multi[event.zone].files.push(event.id);
         },
         unselectFile(event, model) {
-            if (!this[model].medias_multi) {
-                this[model].medias_multi = {};
+            if (event.id !== null && event.id !== undefined) {
+                const medias = new Set(this[model].medias_multi[event.zone].files);
+                medias.delete(event.id);
+                this.$set(this[model].medias_multi[event.zone], 'files', [...medias]);
             }
-            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);
-                    });
-                }
+
+            if (this[model].medias_multi[event.zone].files.length === 0) {
+                this.$delete(this[model].medias_multi, event.zone);
             }
-            this[model].medias_multi[event.zone].files = _.reject(this[model].medias_multi[event.zone].files, media => media === event.id);
         },
     },
-};
\ No newline at end of file
+};

Modules/Media/Assets/js/mixins/RandomString.js

+export default {
+    methods: {
+        randomString(length) {
+            const len = length || 5;
+            let text = '';
+            const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+            for (let i = 0; i < len; i++) {
+                text += possible.charAt(Math.floor(Math.random() * possible.length));
+            }
+
+            return text;
+        },
+    },
+};

Modules/Media/Assets/js/mixins/SingleFileSelector.js

 export default {
     methods: {
         selectSingleFile(event, model) {
-            this[model].medias_single = _.merge(this[model].medias_single, {
-                [event.zone]: event.id,
-            });
+            if (typeof this[model].medias_single === 'undefined') {
+                this.$set(this[model], 'medias_single', {});
+            }
+
+            if (typeof this[model].medias_single[event.zone] === 'undefined') {
+                this.$set(this[model].medias_single, event.zone, null);
+            }
+
+            if (event.id !== null && event.id !== undefined) {
+                this.$set(this[model].medias_single, event.zone, event.id);
+            } else {
+                this.$delete(this[model].medias_single, event.zone);
+            }
         },
-    }
-}
+    },
+};

Modules/Setting/Resources/views/admin/fields/plain/number.blade.php

+<?php $defaultValue = isset($moduleInfo['default']) ? $moduleInfo['default']: ''; ?>
 <div class='form-group'>
     {!! Form::label($settingName, trans($moduleInfo['description'])) !!}
     <?php if (isset($dbSettings[$settingName]) && $dbSettings[$settingName]->plainValue !== null): ?>
-        {!! Form::input('number', $settingName, old($settingName, $dbSettings[$settingName]->plainValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::number($settingName, old($settingName, $dbSettings[$settingName]->plainValue) ?: $defaultValue, ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php else: ?>
-        {!! Form::input('number', $settingName, old($settingName), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::number($settingName, old($settingName, $defaultValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php endif; ?>
 </div>

Modules/Setting/Resources/views/admin/fields/plain/text.blade.php

+<?php $defaultValue = isset($moduleInfo['default']) ? $moduleInfo['default']: ''; ?>
 <div class='form-group'>
     {!! Form::label($settingName, trans($moduleInfo['description'])) !!}
     <?php if (isset($dbSettings[$settingName]) && $dbSettings[$settingName]->plainValue !== null): ?>
-        {!! Form::text($settingName, old($settingName, $dbSettings[$settingName]->plainValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::text($settingName, old($settingName, $dbSettings[$settingName]->plainValue) ?: $defaultValue, ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php else: ?>
-        {!! Form::text($settingName, old($settingName), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::text($settingName, old($settingName, $defaultValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php endif; ?>
 </div>

Modules/Setting/Resources/views/admin/fields/plain/textarea.blade.php

+<?php $defaultValue = isset($moduleInfo['default']) ? $moduleInfo['default']: ''; ?>
 <div class='form-group'>
     {!! Form::label($settingName, trans($moduleInfo['description'])) !!}
     <?php if (isset($dbSettings[$settingName]) && $dbSettings[$settingName]->plainValue !== null): ?>
-        {!! Form::textarea($settingName, old($settingName, $dbSettings[$settingName]->plainValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::textarea($settingName, old($settingName, $dbSettings[$settingName]->plainValue) ?: $defaultValue, ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php else: ?>
-        {!! Form::textarea($settingName, old($settingName), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::textarea($settingName, old($settingName, $defaultValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php endif; ?>
 </div>

Modules/Setting/Resources/views/admin/fields/translatable/number.blade.php

+<?php $defaultValue = isset($moduleInfo['default']) ? $moduleInfo['default']: ''; ?>
 <div class='form-group'>
     {!! Form::label($settingName . "[$lang]", trans($moduleInfo['description'])) !!}
     <?php if (isset($dbSettings[$settingName])): ?>
-        <?php $value = $dbSettings[$settingName]->hasTranslation($lang) ? $dbSettings[$settingName]->translate($lang)->value : ''; ?>
-        {!! Form::input('number', $settingName . "[$lang]", old($settingName . "[$lang]", $value), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        <?php $value = $dbSettings[$settingName]->hasTranslation($lang) ? $dbSettings[$settingName]->translate($lang)->value : $defaultValue; ?>
+        {!! Form::number($settingName . "[$lang]", old($settingName . "[$lang]", $value), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php else: ?>
-        {!! Form::input('number', $settingName . "[$lang]", old($settingName . "[$lang]"), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::number($settingName . "[$lang]", old($settingName . "[$lang]", $defaultValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php endif; ?>
 </div>

Modules/Setting/Resources/views/admin/fields/translatable/text.blade.php

+<?php $defaultValue = isset($moduleInfo['default']) ? $moduleInfo['default']: ''; ?>
 <div class='form-group'>
     {!! Form::label($settingName . "[$lang]", trans($moduleInfo['description'])) !!}
     <?php if (isset($dbSettings[$settingName])): ?>
         <?php $value = $dbSettings[$settingName]->hasTranslation($lang) ? $dbSettings[$settingName]->translate($lang)->value : ''; ?>
-        {!! Form::text($settingName . "[$lang]", old($settingName . "[$lang]", $value), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::text($settingName . "[$lang]", old($settingName . "[$lang]", $value) ?: $defaultValue, ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php else: ?>
-        {!! Form::text($settingName . "[$lang]", old($settingName . "[$lang]"), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::text($settingName . "[$lang]", old($settingName . "[$lang]", $defaultValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php endif; ?>
 </div>

Modules/Setting/Resources/views/admin/fields/translatable/textarea.blade.php

+<?php $defaultValue = isset($moduleInfo['default']) ? $moduleInfo['default']: ''; ?>
 <div class='form-group'>
     {!! Form::label($settingName . "[$lang]", trans($moduleInfo['description'])) !!}
     <?php if (isset($dbSettings[$settingName])): ?>
         <?php $value = $dbSettings[$settingName]->hasTranslation($lang) ? $dbSettings[$settingName]->translate($lang)->value : ''; ?>
-        {!! Form::textarea($settingName . "[$lang]", old($settingName . "[$lang]", $value), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::textarea($settingName . "[$lang]", old($settingName . "[$lang]", $value) ?: $defaultValue, ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php else: ?>
-        {!! Form::textarea($settingName . "[$lang]", old($settingName . "[$lang]"), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
+        {!! Form::textarea($settingName . "[$lang]", old($settingName . "[$lang]", $defaultValue), ['class' => 'form-control', 'placeholder' => trans($moduleInfo['description'])]) !!}
     <?php endif; ?>
 </div>

Modules/Translation/Resources/lang/page/de/pages.php

@@ -5,7 +5,7 @@ return [
     'create page' => 'Seite erstellen',
     'edit page' => 'Bearbeiten einer Seite',
     'name' => 'Name',
-    'slug' => 'Slug',
+    'status' => 'Status',
     'title' => 'Titel',
     'slug' => 'Slug',
     'meta_title' => 'Meta-Titel',

Modules/Workshop/Providers/WorkshopServiceProvider.php

@@ -21,7 +21,7 @@ use Modules\Workshop\Scaffold\Module\Generators\ValueObjectGenerator;
 use Modules\Workshop\Scaffold\Module\ModuleScaffold;
 use Modules\Workshop\Scaffold\Theme\ThemeGeneratorFactory;
 use Modules\Workshop\Scaffold\Theme\ThemeScaffold;
-use Nwidart\Modules\Repository;
+use Nwidart\Modules\Contracts\RepositoryInterface;
 
 class WorkshopServiceProvider extends ServiceProvider
 {
@@ -55,7 +55,7 @@ class WorkshopServiceProvider extends ServiceProvider
         });
 
         app('router')->bind('module', function ($module) {
-            return app(Repository::class)->find($module);
+            return app(RepositoryInterface::class)->find($module);
         });
         app('router')->bind('theme', function ($theme) {
             return app(ThemeManager::class)->find($theme);

Modules/Workshop/Scaffold/Module/ModuleScaffold.php

@@ -227,6 +227,7 @@ class ModuleScaffold
 
         $moduleJson = $this->loadProviders($moduleJson);
         $moduleJson = $this->setModuleOrderOrder($moduleJson);
+        $moduleJson = $this->setModuleVersion($moduleJson);
         $moduleJson = $this->removeStartPhpFile($moduleJson);
 
         $this->finder->put($this->getModulesPath('module.json'), $moduleJson);
@@ -259,6 +260,16 @@ JSON;
         return str_replace('"order": 0,', '"order": 1,', $content);
     }
 
+    /**
+     * Set the module version to 1.0.0 by default
+     * @param string $content
+     * @return string
+     */
+    private function setModuleVersion($content)
+    {
+        return str_replace("\"active\"", "\"version\": \"1.0.0\",\n\t\"active\"", $content);
+    }
+
     /**
      * Remove the start.php start file
      * Also removes the auto loading of that file
@@ -301,7 +312,7 @@ JSON;
         $replace = <<<JSON
 "description": "",
     "type": "asgard-module",
-    "license": "MIT", 
+    "license": "MIT",
     "require": {
         "php": "^7.1.3",
         "composer/installers": "~1.0",

Modules/Workshop/Scaffold/Theme/stubs/themeJson.stub

 {
   "name": "{{theme-name}}",
   "description": "",
-  "type": "{{type}}"
+  "type": "{{type}}",
+  "version": "1.0.0"
 }

Modules/Workshop/Tests/ModuleScaffoldTest.php

@@ -553,6 +553,16 @@ class ModuleScaffoldTest extends BaseTestCase
         $this->cleanUp();
     }
 
+    /** @test */
+    public function it_add_default_version_on_module_json_file()
+    {
+        $this->scaffoldModuleWithEloquent();
+
+        $moduleFile = $this->getModuleFile();
+
+        $this->assertEquals('1.0.0', $moduleFile->version);
+    }
+
     /**
      * Get the contents of composer.json file
      * @return string

Modules/Workshop/Tests/ThemeScaffoldTest.php

@@ -184,4 +184,15 @@ class ThemeScaffoldTest extends BaseTestCase
         $this->assertTrue($this->finder->isFile($this->testThemePath . '/assets/js/.gitignore'));
         $this->assertTrue($this->finder->isFile($this->testThemePath . '/assets/images/.gitignore'));
     }
+
+    /** @test */
+    public function it_has_default_version_in_theme_json_file()
+    {
+        $this->scaffold->setFiles(['themeJson']);
+
+        $this->generateFrontendTheme();
+
+        $this->assertTrue($this->finder->isFile($this->testThemePath . '/theme.json'));
+        $this->assertTrue(str_contains($this->finder->get($this->testThemePath . '/theme.json'), '"version": "1.0.0"'));
+    }
 }

Modules/Workshop/changelog.yml

@@ -3,6 +3,9 @@ versions:
     "@unreleased":
         added:
             - Laravel 5.6 compatibility
+    "3.6.1":
+        changed:
+            - Fixed issue with incorrect binding to the laravel-modules Repository class
     "3.5.1":
         changed:
             - Fixing issue with ThemeManager caused when a theme name has the same name as project name

config/modules.php

@@ -88,7 +88,7 @@ return [
         | Generator path
         |--------------------------------------------------------------------------
         | Customise the paths where the folders will be generated.
-        | Se the generate key to false to not generate that folder
+        | Set the generate key to false to not generate that folder
         */
         'generator' => [
             'config' => ['path' => 'Config', 'generate' => true],

public/modules/media/js/components/MultipleMedia.vue

+<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>
\ No newline at end of file

public/modules/media/js/mixins/MultipleFileSelector.js

+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);
+        },
+    },
+};
\ No newline at end of file