Refactor file renaming logic and error handling in upload.js and library.js

Author: ferdiunal

dist/css/field.css

@@ -133,7 +133,7 @@ const onChoose = () => {
         <div v-if="selected.length > 0 && !mediaDetail" class="ln-absolute ln-bottom-5 ln-w-full ln-p-4"
             style="z-index: 100;">
             <div
-                class="ln-bg-white ln-w-full ln-max-w-sm ln-mx-auto ln-border ln-gap-x-4 ln-border-gray-200 ln-py-1.5 ln-rounded-lg ln-px-2.5 ln-gap-x-4 ln-flex ln-flex-row ln-items-center ln-justify-between">
+                class="ln-bg-white ln-w-full ln-max-w-sm ln-mx-auto ln-border ln-border-gray-200 ln-py-1.5 ln-rounded-lg ln-px-2.5 ln-gap-x-4 ln-flex ln-flex-row ln-items-center ln-justify-between">
                 <DefaultButton class="ln-bg-primary-500 ln-w-full" @click.prevent.stop="onChoose">
                     Choose
                 </DefaultButton>

dist/js/field.js

@@ -1,8 +1,8 @@
 <script setup>
-import { useLocalization } from 'laravel-nova-useLocalization';
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue';
 import { XMarkIcon } from '@heroicons/vue/20/solid';
-import { computed, defineProps, ref, watch } from 'vue';
+import { useLocalization } from 'laravel-nova-useLocalization';
+import { computed, defineProps } from 'vue';
 
 const { __ } = useLocalization()
 
@@ -20,7 +20,7 @@ const files = computed(() => {
 
     return [...previewFiles, ...files]?.sort((a, b) => a.order - b.order).filter(file => !file.hide)
 })
-const onClose = () => {
+const onClose = (e) => {
     window.NovaMedia.commit("drawer", "close")
 }
 const onOpen = async () => {
@@ -40,12 +40,12 @@ const onOpen = async () => {
         <previews-container :field="field" :files="files" />
     </div>
     <TransitionRoot as="template" :show="open">
-        <Dialog class="ln-relative ln-z-50" @close="onClose">
-            <TransitionChild as="template" enter="ln-ease-in-out ln-duration-500" enter-from="ln-opacity-0"
+        <Dialog class="ln-relative ln-z-50">
+            <!-- <TransitionChild as="template" enter="ln-ease-in-out ln-duration-500" enter-from="ln-opacity-0"
                 enter-to="ln-opacity-100" leave="ln-ease-in-out ln-duration-500" leave-from="ln-opacity-100"
                 leave-to="ln-opacity-0">
-                <div class="ln-fixed ln-inset-0 ln-bg-gray-500 ln-bg-opacity-75 ln-transition-opacity" />
-            </TransitionChild>
+                <div class="ln-fixed ln-inset-0 ln-bg-gray-400/40 ln-transition-opacity"  @close="onClose"/>
+            </TransitionChild> -->
 
             <div class="ln-fixed ln-inset-0 ln-overflow-hidden">
                 <div class="ln-absolute ln-inset-0 ln-overflow-hidden">

resources/js/components/Tabs/LibraryTab.vue

@@ -1,27 +1,27 @@
 import App from './app'
-import LibraryStore from './store/library'
 import DrawerStore from './store/drawer'
+import LibraryStore from './store/library'
 import UploadStore from './store/upload'
 
-import IndexField from './fields/IndexField.vue'
 import DetailField from './fields/DetailField.vue'
 import FormField from './fields/FormField.vue'
+import IndexField from './fields/IndexField.vue'
 
 import Drawer from './components/drawer.vue'
 import UploadField from './components/UploadField.vue'
 
-import Tabs from './components/Tabs/Tabs.vue'
-import UploadTab from './components/Tabs/UploadTab.vue'
-import LibraryTab from './components/Tabs/LibraryTab.vue'
 import ImageCard from './components/Tabs/ImageCard.vue'
 import ImageDetail from './components/Tabs/ImageDetail.vue'
+import LibraryTab from './components/Tabs/LibraryTab.vue'
+import Tabs from './components/Tabs/Tabs.vue'
+import UploadTab from './components/Tabs/UploadTab.vue'
 
-import RowPreview from './components/Previews/Row.vue'
-import BlockPreview from './components/Previews/Block.vue'
 import Gallery from './components/Gallery/Gallery.vue'
 import GalleryItem from './components/Gallery/GalleryItem.vue'
+import BlockPreview from './components/Previews/Block.vue'
 import Preview from './components/Previews/Preview.vue'
 import PreviewsContainer from './components/Previews/PreviewsContainer.vue'
+import RowPreview from './components/Previews/Row.vue'
 import Tools from './components/Previews/Tools.vue'
 
 Nova.booting((app, store) => {

resources/js/components/drawer.vue

@@ -85,9 +85,7 @@ export default {
   },
   actions: {
     async fetchLoadMore({ commit, state }) {
-      if (state.fetchLoadMoreCanceller) {
-        state.fetchLoadMoreCanceller.value()
-      }
+      state.fetchLoadMoreCanceller?.()
 
       try {
         const request = await Nova.request().get(state.media.links.next, {
@@ -110,9 +108,7 @@ export default {
       { commit, state },
       { resourceName, resourceId, attribute, id }
     ) {
-      if (state.fetchMediaDetailCanceller !== undefined) {
-        await state.fetchMediaDetailCanceller()
-      }
+      state.fetchMediaDetailCanceller?.()
       if (!id) {
         return
       }
@@ -147,9 +143,7 @@ export default {
       }
     },
     async fetchMediaData({ state, commit }, s = undefined) {
-      if (state.fetchMediaCanceller !== undefined) {
-        state.fetchMediaCanceller.value()
-      }
+      state.fetchMediaCanceller?.()
 
       if (s && s.length < 3) {
         return

resources/js/field.js

@@ -147,6 +147,7 @@ export default {
     renameFile(state, { file, name }) {
       const files = [...state.files]
       const index = files.findIndex(f => f.mediaId === file.id)
+      if (index === -1) return
       files[index].name = name
       files[index].file_name = `${name}.${_file.extension}`
       state.files = files
@@ -242,10 +243,10 @@ export default {
           commit('setFiles', files)
         })
         .catch(error => {
-          console.log(error)
           if (error.response.status === 403) {
+            const msg= 'Sorry! You are not authorized to perform this action.'
             Nova.error(
-              this.__('Sorry! You are not authorized to perform this action.')
+              Nova.config('translations')[msg] ?? msg
             )
           }
         })