Merge pull request #63 from BBS-Lab/feature/multi-disk

[0.5.x] Improved multi disk support, added image cropping

config/nova-file-manager.php

@@ -83,9 +83,9 @@
     */
 
     'file_analysis' => [
-        'enabled' => env('NOVA_FILE_MANAGER_ENABLE_FILE_ANALYSIS', true),
+        'enabled' => env('NOVA_FILE_MANAGER_FILE_ANALYSIS_ENABLED', true),
         'cache' => [
-            'enable' => env('NOVA_FILE_MANAGER_FILE_ANALYSIS_CACHE_ENABLE', true),
+            'enabled' => env('NOVA_FILE_MANAGER_FILE_ANALYSIS_CACHE_ENABLED', true),
             'ttl_in_seconds' => env('NOVA_FILE_MANAGER_FILE_ANALYSIS_CACHE_TTL_IN_SECONDS', 60 * 60 * 24),
         ],
     ],
@@ -119,7 +119,7 @@
     | Uses: Storage::temporaryUrl()
     */
     'url_signing' => [
-        'enabled' => env('NOVA_FILE_MANAGER_ENABLED_URL_SIGNING', false),
+        'enabled' => env('NOVA_FILE_MANAGER_URL_SIGNING_ENABLED', false),
         'unit' => 'minutes',
         'value' => 10,
     ],

lang/en/errors.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    'file' => [
+        'upload' => 'The file could not be uploaded!',
+        'rename' => 'The file could not be renamed!',
+        'delete' => 'The file could not be deleted!',
+    ],
+
+    'folder' => [
+        'create' => 'The folder could not be created!',
+        'rename' => 'The folder could not be renamed!',
+        'delete' => 'The folder could not be deleted!',
+    ],
+];

lang/en/messages.php

@@ -0,0 +1,15 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    'file' => [
+        'upload' => 'The file was uploaded successfully!',
+    ],
+
+    'folder' => [
+        'create' => 'Folder created successfully!',
+        'rename' => 'Folder renamed successfully!',
+        'delete' => 'Folder deleted successfully!',
+    ],
+];

lang/en/validation.php

@@ -0,0 +1,13 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+    'disk' => [
+        'missing' => 'The selected disk (:disk) is missing.',
+    ],
+    'path' => [
+        'exists' => 'The selected path (:path) already exists.',
+        'missing' => 'The selected path (:path) is missing.',
+    ],
+];

resources/js/components/Browser.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import Toolbar from '@/components/Toolbar'
 import Pagination from '@/components/Pagination'
@@ -72,10 +72,6 @@ onMounted(() => {
     store.dispatch('nova-file-manager/getData')
 })
 
-onBeforeUnmount(() => {
-    store.commit('nova-file-manager/destroy')
-})
-
 const isDragging = ref(false)
 const draggedFiles = ref([])
 

resources/js/components/Cards/FieldCard.vue

@@ -1,23 +1,24 @@
 <template>
   <File
-    :file="entity"
+    :file="file"
     :selected="false"
-    @click.prevent.stop="preview(entity)"
+    @click.prevent.stop="preview(file)"
     :on-deselect="onDeselect"
+    :has-custom-disk="hasCustomDisk"
   />
 </template>
 
 <script setup>
 import { useStore } from 'vuex'
 import File from '@/components/Cards/File'
 import { computed } from 'vue'
-import { entity as mapEntity } from '@/transformers/entityTransformer'
+import Entity from '@/types/Entity'
 
 const store = useStore()
 
 const props = defineProps({
     file: {
-        type: Object,
+        type: Entity,
         required: true,
     },
     detail: {
@@ -33,9 +34,9 @@ const props = defineProps({
     },
 })
 
-const openPreview = file => store.commit('nova-file-manager/previewFile', file)
+const hasCustomDisk = computed(() => store.state['nova-file-manager'].customDisk)
 
-const entity = computed(() => mapEntity(props.file))
+const openPreview = file => store.commit('nova-file-manager/previewFile', file)
 
 const preview = file => {
     if (!props.detail) {

resources/js/components/Cards/File.vue

@@ -47,10 +47,7 @@
             <DocumentIcon class="w-16 h-16" v-if="!isUploading" />
           </div>
 
-          <ImageLoader
-            v-if="isImage"
-            :src="file.url"
-          />
+          <ImageLoader v-if="isImage" :src="file.url" />
 
           <template v-if="isVideo">
             <video class="pointer-events-none w-full h-full object-cover">
@@ -93,15 +90,15 @@
       {{ __('NovaFileManager.fileMissing', { path: file.path }) }}
     </p>
 
-    <p
-      :class="[
-        'pointer-events-none block font-medium text-gray-500 text-left break-all',
-        isUploading || onDeselect ? 'text-xs' : 'text-sm',
-      ]"
-      v-if="file.size"
+    <div
+      class="gap-x-0.5 inline-flex flex-wrap items-center text-xs pointer-events-none block font-medium text-gray-500 text-left break-all"
     >
-      {{ file.size }}
-    </p>
+      <span v-if="file.size">{{ file.size }}</span>
+      <span v-if="!hasCustomDisk && file.disk?.length > 0" class="ml-0.5"
+        >&centerdot; {{ file.disk }}</span
+      >
+    </div>
+
     <span class="absolute top-1 right-1" v-if="selected">
       <CheckCircleIcon class="h-5 w-5 text-blue-500" aria-hidden="true" />
     </span>
@@ -145,7 +142,11 @@ const props = defineProps({
     },
     onDeselect: {
         type: Function,
-    }
+    },
+    hasCustomDisk: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const isImage = computed(() => props.file.type === 'image')

resources/js/components/Elements/CropIcon.vue

@@ -1,5 +1,13 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
     <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
     <path d="M8 5v10a1 1 0 0 0 1 1h10"></path>
     <path d="M5 8h10a1 1 0 0 1 1 1v10"></path>

resources/js/components/Elements/ImageLoader.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="flex justify-center items-center h-full max-h-[80vh]"
-    ref="card"
-    :class="cardClasses"
-  >
+  <div class="flex justify-center items-center h-full max-h-[80vh]" ref="card" :class="cardClasses">
     <Spinner v-if="loading" class="w-6 h-6" />
   </div>
 </template>
@@ -13,22 +9,22 @@ import { computed, onMounted, ref } from 'vue'
 import Spinner from '@/components/Elements/Spinner'
 
 const props = defineProps({
-  src: String,
-
-  fullWidth: {
-    type: Boolean,
-    default: true,
-  },
-
-  isThumbnail: {
-    type: Boolean,
-    default: true,
-  },
-
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
+    src: String,
+
+    fullWidth: {
+        type: Boolean,
+        default: true,
+    },
+
+    isThumbnail: {
+        type: Boolean,
+        default: true,
+    },
+
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const emit = defineEmits(['missing'])
@@ -39,53 +35,35 @@ const missing = ref(false)
 const card = ref(null)
 
 const cardClasses = computed(() => {
-  return {
-    'rounded-full': props.rounded,
-    'w-full': props.fullWidth,
-  }
-})
-
-const cardStyles = computed(() => {
-  return loading.value
-    ? { height: props.maxWidth + 'px', width: props.maxWidth + 'px' }
-    : null
+    return {
+        'rounded-full': props.rounded,
+        'w-full': props.fullWidth,
+    }
 })
 
 onMounted(() => {
-  console.log('onMounted')
-  new Promise((resolve, reject) => {
-    let image = new Image()
+    new Promise((resolve, reject) => {
+        let image = new Image()
 
-    image.addEventListener('load', () => resolve(image))
-    image.addEventListener('error', () => reject())
+        image.addEventListener('load', () => resolve(image))
+        image.addEventListener('error', () => reject())
 
-    image.src = props.src
-  })
-    .then(image => {
-      console.log('then', image)
-      image.className = 'pointer-events-none w-full h-full'
-      if (!props.isThumbnail) {
-        image.classList.add('object-contain')
-      }
-      image.draggable = false
-
-      card.value.appendChild(image)
-    })
-    .catch((e) => {
-      console.log('catch', e)
-      missing.value = true
-
-      emit('missing', true)
-    })
-    .finally(() => {
-      console.log('finally')
-      loading.value = false
+        image.src = props.src
     })
+        .then(image => {
+            image.className = 'pointer-events-none w-full h-full'
+            image.classList.add(props.isThumbnail ? 'object-cover' : 'object-contain')
+            image.draggable = false
+
+            card.value.appendChild(image)
+        })
+        .catch(() => {
+            missing.value = true
+
+            emit('missing', true)
+        })
+        .finally(() => {
+            loading.value = false
+        })
 })
 </script>
-
-<style scoped>
-.card {
-  padding: 0 !important;
-}
-</style>