Version 1.0.0

InfinetyEs · Aug 30, 2018 · 0b7aac6 · 0b7aac6
1 parent 1b09603
commit 0b7aac6
Show file tree

Hide file tree

Showing 20 changed files with 69,217 additions and 83 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to `nova-filemanager` will be documented in this file
 
-## 1.0.0 - 2018-08-29
+## 0.0.1 - 2018-08-29
+
+Beta release for some tests
+
+## 1.0.0 - 2018-08-30 
+
+Filemanager ready for Production with version 1.0.0
 
-- Test release
diff --git a/README.md b/README.md
@@ -1,15 +1,20 @@
 # Filemanager tool for Laravel Nova
 
 [![Latest Version on Packagist](https://img.shields.io/packagist/v/infinety-es/nova-filemanager.svg?style=flat-square)](https://packagist.org/packages/infinety-es/nova-filemanager)
-![CircleCI branch](https://img.shields.io/circleci/project/github/spatie/nova-tags-field/master.svg?style=flat-square)
+[![CircleCI branch](https://img.shields.io/circleci/project/github/spatie/nova-tags-field/master.svg?style=flat-square)](https://circleci.com/gh/InfinetyES/Nova-Filemanager)
 [![StyleCI](https://github.styleci.io/repos/146585053/shield?branch=master)](https://github.styleci.io/repos/146585053)
 [![Total Downloads](https://img.shields.io/packagist/dt/infinety-es/nova-filemanager.svg?style=flat-square)](https://packagist.org/packages/infinety-es/nova-filemanager)
 
-A Filemanager tool and Field for Laravel Nova
+A Filemanager Tool and Field for Laravel Nova
 
-[Image ToDo]
+##### Filemanager Tool preview
+
+![FileManager Tool](https://user-images.githubusercontent.com/42798230/44862985-d3d57b80-ac73-11e8-9169-2e76a3584ea4.gif)
+
+##### Filemanager Field preview
+
+![FileManager Field](https://user-images.githubusercontent.com/42798230/44864362-5f9cd700-ac77-11e8-9e0f-330d18a81598.gif)
 
-[Field ToDo]
 
 ## Installation
 
@@ -35,26 +40,46 @@ public function tools()
 }
 ```
 
-## Usage
+Nova Filemanager works with Laravel Flysystem. Default disk is `public`. You can change the Flysystem disk writing that line in your `env.` file:
+
+
+```env
+FILEMANAGER_DISK=public
+```
+
+## Tool Usage
 
 Click on the "FileManager" menu item in your Nova app to see the Filemanager Tool
 
 
-## Field Use
+## Field Usage
 
 ```php
 use Infinety\Filemanager\FilemanagerField;
 
 FilemanagerField::make('field');
 
+
+// You can set also if you want preview Images in Index and Detail views
+
+FilemanagerField::make('field')->displayAsImage();
+
 ```
 
 ### Testing
 
 ``` bash
 composer test
+yarn lint
+yarn check-format
 ```
 
+### ToDo
+
+* Grid / List views
+* DIfferent upload method
+* FIles actions
+
 ### Changelog
 
 Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/resources/js/components/CreateFolderModal.vue b/resources/js/components/CreateFolderModal.vue
@@ -2,11 +2,11 @@
     <portal to="modals" name="Create Folder">
         <transition name="fade">
             <modal v-if="active">
-                <div class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 800px;">
+                <div class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 600px;">
                     <div class="p-8">
                         <heading :level="2" class="mb-6">Create Folder</heading>
-                        <input type="text" class="w-full h-full form-control form-input form-input-bordered py-3" placeholder="Write a folder name" v-model="folderName" required>
-                        <p class="my-2 text-danger" v-if="error">The folder name is required.</p>
+                        <input type="text" class="w-full h-full form-control form-input form-input-bordered py-3" placeholder="Write a folder name" v-model="folderName" autofocus required>
+                        <p class="my-2 text-danger" v-if="error">{{ errorMsg }}</p>
                     </div>
 
                     <div class="bg-30 px-6 py-3 flex">
@@ -44,6 +44,7 @@ export default {
     data: () => ({
         folderName: null,
         error: false,
+        errorMsg: 'The folder name is required.',
         showUpload: false,
         isSaving: false,
     }),
@@ -63,7 +64,16 @@ export default {
                     this.$toasted.show(this.__('Folder created successfully'), { type: 'success' });
                     this.$emit('refresh', true);
                 } else {
-                    this.$toasted.show(this.__('Error creating the folder'), { type: 'error' });
+                    this.error = true;
+                    if (result.error) {
+                        this.errorMsg = result.error;
+                        this.$toasted.show(this.__('Error:') + ' ' + result.error, {
+                            type: 'error',
+                        });
+                    } else {
+                        this.errorMsg = 'The folder name is required.';
+                        this.$toasted.show(this.__('Error creating the folder'), { type: 'error' });
+                    }
                 }
             });
         },

diff --git a/resources/js/components/DetailPopup.vue b/resources/js/components/DetailPopup.vue
@@ -21,6 +21,14 @@
                             <template v-if="info.type == 'image'">
                                 <ImageInfo :file="info" />
                             </template>
+
+                            <template v-else-if="info.type == 'others'">
+
+                                  <audio controls>
+                                    <source :src="info.src" :type="info.mime"/>
+                                  </audio>
+
+                            </template>
 
                             <template v-else>
                                 <object class="no-preview" v-html="info.image">
@@ -82,7 +90,7 @@
 
 
                                     <template v-if="popup">
-                                        <button @click="showUpload = !showUpload" class="btn btn-default btn-primary">
+                                        <button @click="selectFile" class="btn btn-default btn-primary">
                                             {{ __('Select file') }}
                                         </button>
                                     </template>
@@ -107,6 +115,7 @@ import ImageInfo from '../modules/Image';
 import ConfirmationButton from './ConfirmationButton';
 import { copy } from 'v-copy';
 
+
 export default {
     props: {
         active: {
@@ -129,8 +138,8 @@ export default {
     },
 
     components: {
-        ImageInfo: ImageInfo,
-        ConfirmationButton: ConfirmationButton,
+        'ImageInfo': ImageInfo,
+        'ConfirmationButton': ConfirmationButton,
     },
 
     directives: {
@@ -168,7 +177,30 @@ export default {
                 }
             });
         },
+
+        selectFile() {
+            this.closePreview();
+            this.$emit('selectFile', this.info);
+        },
     },
+
+    computed: {
+        playerOptions() {
+            if (this.info) {
+                return {
+                    video: {
+                        url: this.info.name,
+                    },
+                    autoplay: false,
+                    contextmenu: [{
+                        text: 'GitHub',
+                        link: 'https://github.com/MoePlayer/vue-dplayer'
+                    }]
+                }
+            }
+            return {}
+        }
+    }
 };
 </script>
 

diff --git a/resources/js/components/Manager.vue b/resources/js/components/Manager.vue
@@ -37,13 +37,25 @@
                     </template>
 
                     <template v-if="!files.error" v-for="file in files">
-                        <div class="w-1/6 h-40  px-2 mb-3" v-bind:key="file.id">
-                            <template v-if="file.type == 'file'">
-                                <ImageLoader :file="file" class="h-40" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
+                        <div :class="filemanagerClass" v-bind:key="file.id">
+                            <template v-if="view == 'grid'">
+                                <template v-if="file.type == 'file'">
+                                    <ImageLoader :file="file" class="h-40" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
+                                </template>
+                                <template v-if="file.type == 'dir'">
+                                    <Folder :file="file" class="h-40" v-on:goToFolderEvent="goToFolder" />
+                                </template>
                             </template>
-                            <template v-if="file.type == 'dir'">
-                                <Folder :file="file" class="h-40"  v-on:goToFolderEvent="goToFolder" />
+
+                            <template v-else>
+                                <template v-if="file.type == 'file'">
+                                    <ImageLoader :file="file" :view="view" class="h-8" @missing="(value) => missing = value" v-on:showInfo="showInfo" />
+                                </template>
+                                <template v-if="file.type == 'dir'">
+                                    <Folder :file="file" :view="view" class="h-8" v-on:goToFolderEvent="goToFolder" />
+                                </template>
                             </template>
+
                         </div>
                     </template>
 
@@ -55,7 +67,16 @@
 
 
         </transition>
-        <DetailPopup :info="info" :active="activeInfo" :popup="popupLoaded" v-on:closePreview="closePreview" v-on:refresh="refresh"></DetailPopup>
+        <DetailPopup 
+            :info="info"
+            :active="activeInfo"
+            :popup="popupLoaded"
+            v-on:closePreview="closePreview" 
+            v-on:refresh="refresh"
+            v-on:selectFile="selectFile"
+        >
+
+        </DetailPopup>
     </div>
 </template>
 
@@ -101,6 +122,11 @@ export default {
             defalut: false,
             required: false,
         },
+        view: {
+            type: String,
+            default: 'grid',
+            required: false,
+        },
     },
 
     data: () => ({
@@ -151,6 +177,10 @@ export default {
         refresh() {
             this.$emit('refresh');
         },
+
+        selectFile(file) {
+            this.$emit('selectFile', file);
+        },
     },
 
     computed: {
@@ -161,6 +191,22 @@ export default {
         filesCount() {
             return _.size(this.files);
         },
+
+        filemanagerClass() {
+            if (this.view == 'grid') {
+                return 'w-1/6 h-40  px-2 mb-3';
+            } else {
+                return 'w-full h-8  px-2 mb-3';
+            }
+        },
+
+        filemanagerIconClass() {
+            if (this.view == 'grid') {
+                return 'h-40';
+            } else {
+                return 'h-8';
+            }
+        },
     },
 };
 </script>

diff --git a/resources/js/components/ModalFileManager.vue b/resources/js/components/ModalFileManager.vue
@@ -15,7 +15,7 @@
                     </div>
 
                     <div class="flex flex-wrap">
-                        <div class="card relative">
+                        <div class="card relative w-full">
 
                             <transition name="fade">
                                 <div class="w-full border-dashed border-grey border-50 mb-4" v-if="showUpload">
@@ -41,6 +41,7 @@
                                 v-on:goToFolderManager="goToFolder"
                                 v-on:goToFolderManagerNav="goToFolderNav"
                                 v-on:refresh="refreshCurrent"
+                                v-on:selectFile="setFileValue"
                             />
 
                         </div>
@@ -135,6 +136,11 @@ export default {
         closeModal() {
             this.$emit('close-modal');
         },
+
+        setFileValue(file) {
+            this.closeModal();
+            this.$emit('setFileValue', file);
+        },
     },
 
     watch: {