Integrated rename popup

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>