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 }"

resources/js/views/Admin.vue

@@ -4,7 +4,11 @@
         <FilePreview />
         <Spotlight />
 
-        <!--Mobile Navigation-->
+		<!--Spotlight Addons-->
+		<CreateUploadRequestPopup />
+		<CreateTeamFolderPopup />
+
+		<!--Mobile Navigation-->
         <MobileNavigation />
 
         <!--ConfirmPopup Popup-->
@@ -82,6 +86,8 @@ import {
     UsersIcon,
 } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
+import CreateUploadRequestPopup from "../components/Others/CreateUploadRequestPopup";
+import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup";
 
 export default {
     name: 'Admin',
@@ -186,6 +192,8 @@ export default {
         },
     },
     components: {
+		CreateTeamFolderPopup,
+		CreateUploadRequestPopup,
         MobileNavigationToolbar,
         FilePreview,
         Spotlight,

resources/js/views/FileView/UploadRequestFiles.vue

@@ -142,7 +142,7 @@
 					{{ emptyPageDescription }}
 				</p>
 
-				<InfoBox class="max-w-[420px] mx-auto">
+				<InfoBox v-if="uploadRequest.data.attributes.notes && uploadRequest.data.attributes.status === 'active'" class="max-w-[420px] mx-auto">
 					<b>{{ $t('{name} leave you a message', {name: userName}) }}: </b>
 					<p>{{ uploadRequest.data.attributes.notes }}</p>
 				</InfoBox>

resources/js/views/Profile.vue

@@ -4,6 +4,10 @@
         <FilePreview />
         <Spotlight />
 
+		<!--Spotlight Addons-->
+		<CreateUploadRequestPopup />
+		<CreateTeamFolderPopup />
+
         <ConfirmPopup />
 
         <ConfirmPassword />
@@ -87,10 +91,14 @@ import { mapGetters } from 'vuex'
 import CardNavigation from '../components/Admin/CardNavigation'
 import ConfirmPassword from '../components/Others/ConfirmPassword'
 import MobileNavigationToolbar from '../components/Mobile/MobileNavigationToolbar'
+import CreateUploadRequestPopup from "../components/Others/CreateUploadRequestPopup";
+import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup";
 
 export default {
     name: 'Settings',
     components: {
+		CreateTeamFolderPopup,
+		CreateUploadRequestPopup,
         MobileNavigationToolbar,
         MobileNavigation,
         ConfirmPassword,