diff options
Diffstat (limited to 'app/assets/javascripts/repo/components/new_dropdown/modal.vue')
-rw-r--r-- | app/assets/javascripts/repo/components/new_dropdown/modal.vue | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/repo/components/new_dropdown/modal.vue new file mode 100644 index 00000000000..5ef629e0dde --- /dev/null +++ b/app/assets/javascripts/repo/components/new_dropdown/modal.vue @@ -0,0 +1,90 @@ +<script> + import { __ } from '../../../locale'; + import popupDialog from '../../../vue_shared/components/popup_dialog.vue'; + import eventHub from '../../event_hub'; + + export default { + props: { + currentPath: { + type: String, + required: true, + }, + type: { + type: String, + required: true, + }, + }, + data() { + return { + entryName: this.currentPath !== '' ? `${this.currentPath}/` : '', + }; + }, + components: { + popupDialog, + }, + methods: { + createEntryInStore() { + eventHub.$emit('createNewEntry', this.entryName, this.type); + }, + toggleModalOpen() { + this.$emit('toggle'); + }, + }, + computed: { + modalTitle() { + if (this.type === 'tree') { + return __('Create new directory'); + } + + return __('Create new file'); + }, + buttonLabel() { + if (this.type === 'tree') { + return __('Create directory'); + } + + return __('Create file'); + }, + formLabelName() { + if (this.type === 'tree') { + return __('Directory name'); + } + + return __('File name'); + }, + }, + mounted() { + this.$refs.fieldName.focus(); + }, + }; +</script> + +<template> + <popup-dialog + :title="modalTitle" + :primary-button-label="buttonLabel" + kind="success" + @toggle="toggleModalOpen" + @submit="createEntryInStore" + > + <form + class="form-horizontal" + slot="body" + @submit.prevent="createEntryInStore" + > + <fieldset class="form-group append-bottom-0"> + <label class="label-light col-sm-3"> + {{ formLabelName }} + </label> + <div class="col-sm-9"> + <input + type="text" + class="form-control" + v-model="entryName" + ref="fieldName" + /> + </div> + </fieldset> + </form> + </popup-dialog> +</template> |