Integrated rename popup

resources/js/App.vue

@@ -19,6 +19,9 @@
             <ShareCreate/>
             <ShareEdit/>
 
+            <!--Rename folder or file item-->
+            <RenameItem/>
+
             <!--Move item setup-->
             <MoveItem/>
 
@@ -54,6 +57,7 @@
     import MobileMenu from '@/components/FilesView/MobileMenu'
     import ShareCreate from '@/components/Others/ShareCreate'
     import Confirm from '@/components/Others/Popup/Confirm'
+    import RenameItem from '@/components/Others/RenameItem'
     import ShareEdit from '@/components/Others/ShareEdit'
     import MoveItem from '@/components/Others/MoveItem'
     import Vignette from '@/components/Others/Vignette'
@@ -71,6 +75,7 @@
             FileFullPreview,
             ToastrWrapper,
             ShareCreate,
+            RenameItem,
             MobileMenu,
             ShareEdit,
             MoveItem,

resources/js/components/FilesView/ContextMenu.vue

@@ -96,7 +96,7 @@
 
         <!--ContextMenu for Base location with MASTER permission-->
         <div v-if="$isThisLocation(['shared']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
-            <ul class="menu-option-group" v-if="item && isFolder &&  multiSelectContextMenu">
+            <ul class="menu-option-group" v-if="item && isFolder && multiSelectContextMenu">
                 <li class="menu-option" @click="addToFavourites">
                     <div class="icon">
                         <star-icon size="17"></star-icon>
@@ -111,6 +111,14 @@
                 </li>
             </ul>
             <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="renameItem">
+                    <div class="icon">
+                        <edit2-icon size="17"></edit2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.rename') }}
+                    </div>
+                </li>
                 <li class="menu-option" @click="shareItem" v-if="multiSelectContextMenu">
                     <div class="icon">
                         <link-icon size="17"></link-icon>
@@ -132,7 +140,7 @@
                     </div>
                 </li>
             </ul>
-            <ul class="menu-option-group" v-if="item &&  multiSelectContextMenu">
+            <ul class="menu-option-group" v-if="item && multiSelectContextMenu">
                 <li class="menu-option" @click="ItemDetail" v-if="item">
                     <div class="icon">
                         <eye-icon size="17"></eye-icon>
@@ -180,6 +188,14 @@
                 </li>
             </ul>
             <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="renameItem">
+                    <div class="icon">
+                        <edit2-icon size="17"></edit2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.rename') }}
+                    </div>
+                </li>
                 <li class="menu-option" @click="moveItem">
                     <div class="icon">
                         <corner-down-right-icon size="17"></corner-down-right-icon>
@@ -242,6 +258,14 @@
                 </li>
             </ul>
             <ul class="menu-option-group" v-if="item">
+                <li class="menu-option" @click="renameItem">
+                    <div class="icon">
+                        <edit2-icon size="17"></edit2-icon>
+                    </div>
+                    <div class="text-label">
+                        {{ $t('context_menu.rename') }}
+                    </div>
+                </li>
                 <li class="menu-option" @click="moveItem">
                     <div class="icon">
                         <corner-down-right-icon size="17"></corner-down-right-icon>
@@ -381,33 +405,17 @@ export default {
 
     methods: {
         renameItem() {
-            let itemName = prompt(this.$t('popup_rename.title'), this.item.name)
-
-            if (itemName && itemName !== '') {
-                let item = {
-                    unique_id: this.item.unique_id,
-                    type: this.item.type,
-                    name: itemName
-                }
-
-                this.$store.dispatch('renameItem', item)
-
-                // Change item name if is mobile device or prompted
-                if (this.$isMobile()) {
-                    events.$emit('change:name', item)
-                }
-            }
+            events.$emit('popup:open', { name: 'rename-item', item: this.item })
         },
         moveItem() {
-            // Open move item popup
             events.$emit('popup:open', { name: 'move', item: [this.item] })
         },
         shareItem() {
             if (this.item.shared) {
-                // Open share item popup
+                // Open edit share popup
                 events.$emit('popup:open', { name: 'share-edit', item: this.item })
             } else {
-                // Open share item popup
+                // Open create share popup
                 events.$emit('popup:open', { name: 'share-create', item: this.item })
             }
         },
@@ -432,10 +440,7 @@ export default {
         },
         downloadItem() {
             // Download file
-            this.$downloadFile(
-                this.item.file_url,
-                this.item.name + '.' + this.item.mimetype
-            )
+            this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
         },
         ItemDetail() {
             // Dispatch load file info detail

resources/js/components/FilesView/MobileMenu.vue

@@ -442,25 +442,7 @@ export default {
       }
     },
     renameItem() {
-      let itemName = prompt(
-        this.$t("popup_rename.title"),
-        this.fileInfoDetail[0].name
-      );
-
-      if (itemName && itemName !== "") {
-        let item = {
-          unique_id: this.fileInfoDetail[0].unique_id,
-          type: this.fileInfoDetail[0].type,
-          name: itemName,
-        };
-
-        this.$store.dispatch("renameItem", item);
-
-        // Change item name if is mobile device or prompted
-        if (this.$isMobile()) {
-          events.$emit("change:name", item);
-        }
-      }
+        events.$emit('popup:open', { name: 'rename-item', item: this.fileInfoDetail[0] })
     },
     closeAndResetContextMenu() {
       //If emit to show menu coming from MediaFullPreview dont reset data

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

@@ -3,6 +3,7 @@
         <div class="icon">
             <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
             <link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon>
+            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon"></edit2-icon>
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
@@ -12,7 +13,7 @@
 </template>
 
 <script>
-    import {CornerDownRightIcon, LinkIcon, XIcon} from 'vue-feather-icons'
+    import {CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon} from 'vue-feather-icons'
     import {events} from '@/bus'
 
     export default {
@@ -22,6 +23,7 @@
         ],
         components: {
             CornerDownRightIcon,
+            Edit2Icon,
             LinkIcon,
             XIcon,
         },

resources/js/components/Others/RenameItem.vue

@@ -0,0 +1,129 @@
+<template>
+    <PopupWrapper name="rename-item">
+        <!--Title-->
+        <PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit" />
+
+        <!--Content-->
+        <PopupContent>
+
+            <!--Item Thumbnail-->
+            <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
+
+            <!--Form to set sharing-->
+            <ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
+
+                <!--Set password-->
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
+                    <label class="input-label">{{ $t('popup_rename.label') }}:</label>
+                    <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('popup_rename.placeholder')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="$closePopup()"
+                    button-style="secondary"
+            >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+                    class="popup-button"
+                    @click.native="changeName"
+                    button-style="theme"
+            >{{ $t('popup_share_edit.save') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+    import PopupActions from '@/components/Others/Popup/PopupActions'
+    import PopupContent from '@/components/Others/Popup/PopupContent'
+    import PopupHeader from '@/components/Others/Popup/PopupHeader'
+    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import ActionButton from '@/components/Others/ActionButton'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {required} from 'vee-validate/dist/rules'
+    import {events} from '@/bus'
+    import axios from 'axios'
+
+    export default {
+        name: 'RenameItem',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            ThumbnailItem,
+            ActionButton,
+            PopupWrapper,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            ButtonBase,
+            required,
+        },
+        computed: {
+            itemTypeTitle() {
+                return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
+            },
+        },
+        data() {
+            return {
+                pickedItem: undefined,
+            }
+        },
+        methods: {
+            changeName() {
+                if (this.pickedItem.name && this.pickedItem.name !== '') {
+
+                    let item = {
+                        unique_id: this.pickedItem.unique_id,
+                        type: this.pickedItem.type,
+                        name: this.pickedItem.name
+                    }
+
+                    // Rename item request
+                    this.$store.dispatch('renameItem', item)
+
+                    // Rename item in view
+                    events.$emit('change:name', item)
+
+                    this.$closePopup()
+                }
+            },
+        },
+        mounted() {
+
+            // Show popup
+            events.$on('popup:open', args => {
+
+                if (args.name !== 'rename-item') return
+
+                // Store picked item
+                this.pickedItem = args.item
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Restore data
+                setTimeout(() => {
+                    //
+                }, 150)
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vue-file-manager/_inapp-forms.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .item-thumbnail {
+        margin-bottom: 20px;
+    }
+</style>

resources/js/i18n/lang/cn.json

@@ -548,7 +548,9 @@
 		"title": "File is too large"
 	},
 	"popup_rename": {
-		"title": "修改文件/夹名称"
+		"title": "Rename Your {item}",
+		"label": "Edit Name",
+		"placeholder": "Type your title"
 	},
 	"popup_set_card": {
 		"message": "您的卡将被设置为默认卡，并且在以后的结算中始终会收取费用。",

resources/js/i18n/lang/en.json

@@ -550,7 +550,9 @@
 		"title": "File is too large"
 	},
 	"popup_rename": {
-		"title": "Change your item name"
+		"title": "Rename Your {item}",
+		"label": "Edit Name",
+		"placeholder": "Type your title"
 	},
 	"popup_set_card": {
 		"message": "Your card will be set as default and will be always charged for the next billings.",

resources/js/i18n/lang/sk.json

@@ -550,7 +550,9 @@
 		"title": "Súbor je príliš veľký"
 	},
 	"popup_rename": {
-		"title": "Zmeňte názov položky"
+		"title": "Zmeňte názov {item}",
+		"label": "Zmeniť názov",
+		"placeholder": "Napíš názov..."
 	},
 	"popup_set_card": {
 		"message": "Vaša karta bude nastavená ako predvolená a bude vám z nej vždy stiahnutá čiastka za nasledujúce obdobie fakturácie.",

resources/js/views/FilePages/Files.vue

@@ -3,6 +3,7 @@
 
         <ContentSidebar>
 
+            <!--Empty storage warning-->
             <ContentGroup v-if="config.storageLimit && storage.used > 95">
                 <UpgradeSidebarBanner />
             </ContentGroup>

resources/js/views/Shared/SharedPage.vue

@@ -9,6 +9,9 @@
         <!--Move item setup-->
         <MoveItem />
 
+        <!--Rename folder or file item-->
+        <RenameItem/>
+
         <!--Mobile Menu-->
         <MobileMenu/>
 
@@ -19,7 +22,7 @@
         <Vignette/>
 
         <!--Password verification-->
-        <div v-if="currentPage === 'page-password'" id="password-view">
+        <div v-if="isPagePasswordVerification" id="password-view">
 
             <!--Verify share link by password-->
             <AuthContent class="center" name="password" :visible="true">
@@ -42,7 +45,7 @@
         </div>
 
         <!--Single file page-->
-        <div id="single-file" v-if="sharedDetail.type === 'file' && currentPage === 'page-files'">
+        <div v-if="sharedDetail.type === 'file' && isPageFiles" id="single-file">
             <div class="single-file-wrapper">
                 <FileItemGrid v-if="sharedFile" :data="sharedFile" :context-menu="false"/>
 
@@ -52,10 +55,15 @@
             </div>
         </div>
 
-        <!--Items view page-->
-        <div id="viewport" v-if="sharedDetail.type === 'folder' && currentPage === 'page-files'" @contextmenu.prevent.capture="contextMenu($event, undefined)" @click="fileViewClick">
+        <!--Multiple items view page-->
+        <div v-if="sharedDetail.type === 'folder' && isPageFiles"
+             @contextmenu.prevent.capture="contextMenu($event, undefined)"
+             @click="fileViewClick"
+             id="viewport">
 
-                <ContentSidebar v-if="navigationTree && navigationTree.length > 1">
+                <ContentSidebar v-if="navigationTree">
+
+                    <!--Locations-->
                     <ContentGroup :title="$t('sidebar.locations_title')">
                         <div class="menu-list-wrapper vertical">
                             <a class="menu-list-item link" @click="goHome">
@@ -68,7 +76,12 @@
                             </a>
                         </div>
                     </ContentGroup>
-                    <ContentGroup :title="$t('sidebar.navigator_title')">
+
+                    <!--Navigator-->
+                    <ContentGroup :title="$t('sidebar.navigator_title')" class="navigator">
+                        <span class="empty-note navigator" v-if="navigationTree.length == 0">
+                            {{ $t('sidebar.folders_empty') }}
+                        </span>
                         <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="items" v-for="items in navigationTree" :key="items.unique_id"/>
                     </ContentGroup>
                 </ContentSidebar>
@@ -100,6 +113,7 @@
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import MobileMenu from '@/components/FilesView/MobileMenu'
     import AuthContent from '@/components/Auth/AuthContent'
+    import RenameItem from '@/components/Others/RenameItem'
     import AuthButton from '@/components/Auth/AuthButton'
     import Spinner from '@/components/FilesView/Spinner'
     import MoveItem from '@/components/Others/MoveItem'
@@ -130,6 +144,7 @@
             AuthButton,
             MobileMenu,
             ButtonBase,
+            RenameItem,
             HomeIcon,
             MoveItem,
             required,
@@ -146,6 +161,12 @@
             ]),
             navigationTree() {
                 return this.navigation ? this.navigation[0].folders : undefined
+            },
+            isPageFiles() {
+                return this.currentPage === 'page-files'
+            },
+            isPagePasswordVerification() {
+                return this.currentPage === 'page-password'
             }
         },
         data() {
@@ -333,4 +354,11 @@
         }
     }
 
+    .empty-note {
+
+        &.navigator {
+            padding: 5px 25px 10px;
+        }
+    }
+
 </style>