UI enhancements for file request

resources/js/components/Others/CreateUploadRequestPopup.vue

@@ -16,11 +16,12 @@
 				v-slot="{ invalid }"
 				tag="form"
 			>
+				<!--Send Request by Email-->
                 <AppInputSwitch
 					:title="$t('Send Request by Email')"
 					:description="$t('Send your file request on recipients email')"
 				>
-                    <SwitchInput v-model="shareViaEmail" :state="shareViaEmail" class="switch" />
+                    <SwitchInput v-model="shareViaEmail" :state="shareViaEmail" />
                 </AppInputSwitch>
 
 				<!--Set email-->
@@ -44,6 +45,35 @@
                     </AppInputText>
                 </ValidationProvider>
 
+				<!--Custom Folder Name-->
+                <AppInputSwitch
+					:title="$t('Custom Folder Name')"
+					:description="$t('Created folder with files will be named with your own name.')"
+				>
+                    <SwitchInput v-model="customFolderName" :state="customFolderName" />
+                </AppInputSwitch>
+
+				<!--Set email-->
+                <ValidationProvider
+					v-if="customFolderName"
+					tag="div"
+					mode="passive"
+					name="Name"
+					rules="required"
+					v-slot="{ errors }"
+				>
+                    <AppInputText :error="errors[0]" class="-mt-2">
+                        <input
+							v-model="form.name"
+							:class="{ 'border-red': errors[0] }"
+							type="text"
+							ref="input"
+							class="focus-border-theme input-dark"
+							:placeholder="$t('Type name...')"
+						/>
+                    </AppInputText>
+                </ValidationProvider>
+
 				<!--Set note-->
                 <ValidationProvider tag="div" mode="passive" name="Note" v-slot="{ errors }">
                     <AppInputText :title="$t('Message (optional)')" :description="$t('This message will be showed for your email recipient or in the upload page.')" :error="errors[0]" :is-last="true">
@@ -124,9 +154,11 @@ export default {
 				email: undefined,
 				notes: undefined,
 				folder_id: undefined,
+				name: undefined,
 			},
 			generatedUploadRequest: undefined,
 			shareViaEmail: false,
+			customFolderName: false,
 			pickedItem: undefined,
 			isLoading: false,
 		}
@@ -159,8 +191,10 @@ export default {
 	},
 	created() {
 		events.$on('popup:open', (args) => {
-			if (args.name === 'create-file-request') this.pickedItem = args.item
-			this.form.folder_id = args.item.data.id
+			if (args.name === 'create-file-request')
+				this.pickedItem = args.item
+
+			this.form.folder_id = args.item?.data.id
 		})
 
 		// Close popup
@@ -172,8 +206,10 @@ export default {
 				this.pickedItem = undefined
 
 				this.shareViaEmail = false
+				this.customFolderName = false
 
 				this.form = {
+					name: undefined,
 					email: undefined,
 					notes: undefined,
 					folder_id: undefined,

resources/js/components/Others/MoveItemPopup.vue

@@ -53,7 +53,7 @@ import ThumbnailItem from './ThumbnailItem'
 import ButtonBase from '../FilesView/ButtonBase'
 import Spinner from '../FilesView/Spinner'
 import TreeMenu from './TreeMenu'
-import { isArray, isNull } from 'lodash'
+import { isArray } from 'lodash'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 

resources/js/components/Others/Popup/ConfirmPopup.vue

@@ -2,7 +2,7 @@
     <PopupWrapper>
         <div class="flex h-full -translate-y-7 transform items-center justify-center px-8 text-center md:translate-y-0">
             <div>
-                <img src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f914.svg" alt="" class="mx-auto mb-4 w-20 md:mt-6" />
+                <img src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f914.svg" alt="" class="mx-auto mb-4 w-20 md:mt-6 min-h-[80px]" />
 
                 <h1 v-if="title" class="mb-2 text-2xl font-bold">
                     {{ title }}

resources/js/components/Others/TreeMenu.vue

@@ -25,7 +25,7 @@
 
             <!--Item icon-->
             <hard-drive-icon
-                v-if="['public', 'files'].includes(nodes.location)"
+                v-if="['public', 'files', 'upload-request'].includes(nodes.location)"
                 size="17"
                 class="icon vue-feather shrink-0"
                 :class="{ 'text-theme dark-text-theme': isSelectedItem }"