diff options
Diffstat (limited to 'app/assets/javascripts/ide/components/new_dropdown')
-rw-r--r-- | app/assets/javascripts/ide/components/new_dropdown/index.vue | 15 | ||||
-rw-r--r-- | app/assets/javascripts/ide/components/new_dropdown/modal.vue | 46 |
2 files changed, 45 insertions, 16 deletions
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index 8eddfa5e455..f02fd6cf7ea 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -4,6 +4,7 @@ import icon from '~/vue_shared/components/icon.vue'; import newModal from './modal.vue'; import upload from './upload.vue'; import ItemButton from './button.vue'; +import { modalTypes } from '../../constants'; export default { components: { @@ -56,6 +57,7 @@ export default { this.dropdownOpen = !this.dropdownOpen; }, }, + modalTypes, }; </script> @@ -74,7 +76,7 @@ export default { @click.stop="openDropdown()" > <icon - name="hamburger" + name="ellipsis_v" /> <icon name="arrow-down" @@ -106,13 +108,22 @@ export default { class="d-flex" icon="folder-new" icon-classes="mr-2" - @click="createNewItem('tree')" + @click="createNewItem($options.modalTypes.tree)" /> </li> <li class="divider"></li> </template> <li> <item-button + :label="__('Rename')" + class="d-flex" + icon="pencil" + icon-classes="mr-2" + @click="createNewItem($options.modalTypes.rename)" + /> + </li> + <li> + <item-button :label="__('Delete')" class="d-flex" icon="remove" diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index 833c4b027df..e500ef0e1b5 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -2,6 +2,7 @@ import { __ } from '~/locale'; import { mapActions, mapState } from 'vuex'; import GlModal from '~/vue_shared/components/gl_modal.vue'; +import { modalTypes } from '../../constants'; export default { components: { @@ -13,42 +14,58 @@ export default { }; }, computed: { - ...mapState(['newEntryModal']), + ...mapState(['entryModal']), entryName: { get() { - return this.name || (this.newEntryModal.path !== '' ? `${this.newEntryModal.path}/` : ''); + if (this.entryModal.type === modalTypes.rename) { + return this.name || this.entryModal.entry.name; + } + + return this.name || (this.entryModal.path !== '' ? `${this.entryModal.path}/` : ''); }, set(val) { this.name = val; }, }, modalTitle() { - if (this.newEntryModal.type === 'tree') { + if (this.entryModal.type === modalTypes.tree) { return __('Create new directory'); + } else if (this.entryModal.type === modalTypes.rename) { + return this.entryModal.entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file'); } return __('Create new file'); }, buttonLabel() { - if (this.newEntryModal.type === 'tree') { + if (this.entryModal.type === modalTypes.tree) { return __('Create directory'); + } else if (this.entryModal.type === modalTypes.rename) { + return this.entryModal.entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file'); } return __('Create file'); }, }, methods: { - ...mapActions(['createTempEntry']), - createEntryInStore() { - this.createTempEntry({ - name: this.name, - type: this.newEntryModal.type, - }); + ...mapActions(['createTempEntry', 'renameEntry']), + submitForm() { + if (this.entryModal.type === modalTypes.rename) { + this.renameEntry({ + path: this.entryModal.entry.path, + name: this.entryName, + }); + } else { + this.createTempEntry({ + name: this.name, + type: this.entryModal.type, + }); + } }, focusInput() { - setTimeout(() => { - this.$refs.fieldName.focus(); - }); + this.$refs.fieldName.focus(); + }, + closedModal() { + this.name = ''; }, }, }; @@ -60,8 +77,9 @@ export default { :header-title-text="modalTitle" :footer-primary-button-text="buttonLabel" footer-primary-button-variant="success" - @submit="createEntryInStore" + @submit="submitForm" @open="focusInput" + @closed="closedModal" > <div class="form-group row" |