debian-mirror-gitlab/app/assets/javascripts/ide/components/new_dropdown/modal.vue

162 lines
4.3 KiB
Vue
Raw Normal View History

2018-05-09 12:01:36 +05:30
<script>
2018-11-20 20:47:30 +05:30
import $ from 'jquery';
2020-01-01 13:55:28 +05:30
import { mapActions, mapState, mapGetters } from 'vuex';
2019-07-07 11:18:12 +05:30
import flash from '~/flash';
import { __, sprintf, s__ } from '~/locale';
2019-12-21 20:55:43 +05:30
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
2018-11-18 11:00:15 +05:30
import { modalTypes } from '../../constants';
2018-05-09 12:01:36 +05:30
export default {
components: {
2019-12-21 20:55:43 +05:30
GlModal: DeprecatedModal2,
2018-05-09 12:01:36 +05:30
},
data() {
return {
2018-11-18 11:00:15 +05:30
name: '',
2018-05-09 12:01:36 +05:30
};
},
computed: {
2019-07-07 11:18:12 +05:30
...mapState(['entries', 'entryModal']),
2018-11-20 20:47:30 +05:30
...mapGetters('fileTemplates', ['templateTypes']),
2018-11-18 11:00:15 +05:30
entryName: {
get() {
2019-07-07 11:18:12 +05:30
const entryPath = this.entryModal.entry.path;
2018-11-18 11:00:15 +05:30
if (this.entryModal.type === modalTypes.rename) {
2019-07-07 11:18:12 +05:30
return this.name || entryPath;
2018-11-18 11:00:15 +05:30
}
2019-07-07 11:18:12 +05:30
return this.name || (entryPath ? `${entryPath}/` : '');
2018-11-18 11:00:15 +05:30
},
set(val) {
2019-07-07 11:18:12 +05:30
this.name = val.trim();
2018-11-18 11:00:15 +05:30
},
},
2018-05-09 12:01:36 +05:30
modalTitle() {
2018-11-18 11:00:15 +05:30
if (this.entryModal.type === modalTypes.tree) {
2018-05-09 12:01:36 +05:30
return __('Create new directory');
2018-11-18 11:00:15 +05:30
} else if (this.entryModal.type === modalTypes.rename) {
2018-11-20 20:47:30 +05:30
return this.entryModal.entry.type === modalTypes.tree
? __('Rename folder')
: __('Rename file');
2018-05-09 12:01:36 +05:30
}
return __('Create new file');
},
buttonLabel() {
2018-11-18 11:00:15 +05:30
if (this.entryModal.type === modalTypes.tree) {
2018-05-09 12:01:36 +05:30
return __('Create directory');
2018-11-18 11:00:15 +05:30
} else if (this.entryModal.type === modalTypes.rename) {
2018-11-20 20:47:30 +05:30
return this.entryModal.entry.type === modalTypes.tree
? __('Rename folder')
: __('Rename file');
2018-05-09 12:01:36 +05:30
}
return __('Create file');
},
2019-07-07 11:18:12 +05:30
isCreatingNewFile() {
return this.entryModal.type === 'blob';
},
placeholder() {
return this.isCreatingNewFile ? 'dir/file_name' : 'dir/';
2018-11-20 20:47:30 +05:30
},
2018-05-09 12:01:36 +05:30
},
methods: {
2018-11-18 11:00:15 +05:30
...mapActions(['createTempEntry', 'renameEntry']),
submitForm() {
if (this.entryModal.type === modalTypes.rename) {
2019-07-07 11:18:12 +05:30
if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
flash(
2020-03-09 13:42:32 +05:30
sprintf(s__('The name "%{name}" is already taken in this directory.'), {
name: this.entryName,
2019-07-07 11:18:12 +05:30
}),
'alert',
document,
null,
false,
true,
);
} else {
let parentPath = this.entryName.split('/');
const entryName = parentPath.pop();
parentPath = parentPath.join('/');
2020-03-09 13:42:32 +05:30
this.renameEntry({
path: this.entryModal.entry.path,
name: entryName,
parentPath,
});
2019-07-07 11:18:12 +05:30
}
2018-11-18 11:00:15 +05:30
} else {
this.createTempEntry({
name: this.name,
type: this.entryModal.type,
});
}
},
2018-11-20 20:47:30 +05:30
createFromTemplate(template) {
this.createTempEntry({
name: template.name,
type: this.entryModal.type,
});
$('#ide-new-entry').modal('toggle');
},
2018-11-18 11:00:15 +05:30
focusInput() {
2019-07-07 11:18:12 +05:30
const name = this.entries[this.entryName] ? this.entries[this.entryName].name : null;
const inputValue = this.$refs.fieldName.value;
2018-11-18 11:00:15 +05:30
this.$refs.fieldName.focus();
2019-07-07 11:18:12 +05:30
if (name) {
this.$refs.fieldName.setSelectionRange(inputValue.indexOf(name), inputValue.length);
}
2018-05-09 12:01:36 +05:30
},
2018-11-18 11:00:15 +05:30
closedModal() {
this.name = '';
2018-05-09 12:01:36 +05:30
},
},
};
</script>
<template>
2018-11-18 11:00:15 +05:30
<gl-modal
id="ide-new-entry"
2019-09-04 21:01:54 +05:30
class="qa-new-file-modal"
2018-11-18 11:00:15 +05:30
:header-title-text="modalTitle"
:footer-primary-button-text="buttonLabel"
footer-primary-button-variant="success"
2018-11-20 20:47:30 +05:30
modal-size="lg"
2018-11-18 11:00:15 +05:30
@submit="submitForm"
@open="focusInput"
@closed="closedModal"
2018-05-09 12:01:36 +05:30
>
2019-02-15 15:39:39 +05:30
<div class="form-group row">
<label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>
2018-11-20 20:47:30 +05:30
<div class="col-sm-10">
2018-11-08 19:23:39 +05:30
<input
ref="fieldName"
v-model="entryName"
type="text"
2018-12-13 13:39:08 +05:30
class="form-control qa-full-file-path"
2019-07-07 11:18:12 +05:30
:placeholder="placeholder"
2018-11-08 19:23:39 +05:30
/>
2019-07-07 11:18:12 +05:30
<ul
v-if="isCreatingNewFile"
class="file-templates prepend-top-default list-inline qa-template-list"
>
2019-02-15 15:39:39 +05:30
<li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item">
2018-11-20 20:47:30 +05:30
<button
type="button"
class="btn btn-missing p-1 pr-2 pl-2"
2019-03-02 22:35:43 +05:30
@click="createFromTemplate(template)"
2018-11-20 20:47:30 +05:30
>
{{ template.name }}
</button>
</li>
</ul>
2018-11-08 19:23:39 +05:30
</div>
2018-11-18 11:00:15 +05:30
</div>
</gl-modal>
2018-05-09 12:01:36 +05:30
</template>