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

173 lines
4.6 KiB
Vue
Raw Normal View History

2018-05-09 12:01:36 +05:30
<script>
2020-11-24 15:15:51 +05:30
import { GlModal, GlButton } from '@gitlab/ui';
2021-03-11 19:13:27 +05:30
import { mapActions, mapState, mapGetters } from 'vuex';
2021-09-04 01:27:46 +05:30
import createFlash from '~/flash';
2021-12-11 22:18:48 +05:30
import { __, sprintf } from '~/locale';
2018-11-18 11:00:15 +05:30
import { modalTypes } from '../../constants';
2020-06-23 00:09:42 +05:30
import { trimPathComponents, getPathParent } from '../../utils';
2018-05-09 12:01:36 +05:30
export default {
components: {
2020-05-24 23:13:21 +05:30
GlModal,
2020-11-24 15:15:51 +05:30
GlButton,
2018-05-09 12:01:36 +05:30
},
data() {
return {
2020-05-24 23:13:21 +05:30
entryName: '',
modalType: modalTypes.blob,
path: '',
2018-05-09 12:01:36 +05:30
};
},
computed: {
2020-05-24 23:13:21 +05:30
...mapState(['entries']),
2018-11-20 20:47:30 +05:30
...mapGetters('fileTemplates', ['templateTypes']),
2018-05-09 12:01:36 +05:30
modalTitle() {
2020-05-24 23:13:21 +05:30
const entry = this.entries[this.path];
if (this.modalType === modalTypes.tree) {
2018-05-09 12:01:36 +05:30
return __('Create new directory');
2020-05-24 23:13:21 +05:30
} else if (this.modalType === modalTypes.rename) {
return entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
2018-05-09 12:01:36 +05:30
}
return __('Create new file');
},
buttonLabel() {
2020-05-24 23:13:21 +05:30
const entry = this.entries[this.path];
if (this.modalType === modalTypes.tree) {
2018-05-09 12:01:36 +05:30
return __('Create directory');
2020-05-24 23:13:21 +05:30
} else if (this.modalType === modalTypes.rename) {
return 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() {
2020-05-24 23:13:21 +05:30
return this.modalType === modalTypes.blob;
2019-07-07 11:18:12 +05:30
},
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() {
2020-05-24 23:13:21 +05:30
this.entryName = trimPathComponents(this.entryName);
if (this.modalType === modalTypes.rename) {
2019-07-07 11:18:12 +05:30
if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
2021-09-04 01:27:46 +05:30
createFlash({
2021-12-11 22:18:48 +05:30
message: sprintf(__('The name "%{name}" is already taken in this directory.'), {
2020-03-13 15:44:24 +05:30
name: this.entryName,
2019-07-07 11:18:12 +05:30
}),
2021-09-04 01:27:46 +05:30
fadeTransition: false,
addBodyClass: true,
});
2019-07-07 11:18:12 +05:30
} else {
let parentPath = this.entryName.split('/');
2020-05-24 23:13:21 +05:30
const name = parentPath.pop();
2019-07-07 11:18:12 +05:30
parentPath = parentPath.join('/');
2020-03-13 15:44:24 +05:30
this.renameEntry({
2020-05-24 23:13:21 +05:30
path: this.path,
name,
2020-03-13 15:44:24 +05:30
parentPath,
});
2019-07-07 11:18:12 +05:30
}
2018-11-18 11:00:15 +05:30
} else {
this.createTempEntry({
2020-05-24 23:13:21 +05:30
name: this.entryName,
type: this.modalType,
2018-11-18 11:00:15 +05:30
});
}
},
2018-11-20 20:47:30 +05:30
createFromTemplate(template) {
2020-06-23 00:09:42 +05:30
const parent = getPathParent(this.entryName);
const name = parent ? `${parent}/${template.name}` : template.name;
2018-11-20 20:47:30 +05:30
this.createTempEntry({
2020-06-23 00:09:42 +05:30
name,
2020-05-24 23:13:21 +05:30
type: this.modalType,
2018-11-20 20:47:30 +05:30
});
2020-05-24 23:13:21 +05:30
this.$refs.modal.toggle();
2018-11-20 20:47:30 +05:30
},
2018-11-18 11:00:15 +05:30
focusInput() {
2020-05-24 23:13:21 +05:30
const name = this.entries[this.entryName]?.name;
2019-07-07 11:18:12 +05:30
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
},
2020-05-24 23:13:21 +05:30
resetData() {
this.entryName = '';
this.path = '';
this.modalType = modalTypes.blob;
},
open(type = modalTypes.blob, path = '') {
this.modalType = type;
this.path = path;
if (this.modalType === modalTypes.rename) {
this.entryName = path;
} else {
this.entryName = path ? `${path}/` : '';
}
this.$refs.modal.show();
// wait for modal to show first
this.$nextTick(() => this.focusInput());
},
close() {
this.$refs.modal.hide();
2018-05-09 12:01:36 +05:30
},
},
};
</script>
<template>
2018-11-18 11:00:15 +05:30
<gl-modal
2020-05-24 23:13:21 +05:30
ref="modal"
modal-id="ide-new-entry"
2020-06-23 00:09:42 +05:30
data-qa-selector="new_file_modal"
2021-02-22 17:27:13 +05:30
data-testid="ide-new-entry"
2020-05-24 23:13:21 +05:30
:title="modalTitle"
:ok-title="buttonLabel"
ok-variant="success"
size="lg"
@ok="submitForm"
@hide="resetData"
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"
2020-05-24 23:13:21 +05:30
v-model.trim="entryName"
2018-11-08 19:23:39 +05:30
type="text"
2020-06-23 00:09:42 +05:30
class="form-control"
2021-01-03 14:25:43 +05:30
data-testid="file-name-field"
2020-06-23 00:09:42 +05:30
data-qa-selector="file_name_field"
2019-07-07 11:18:12 +05:30
:placeholder="placeholder"
2018-11-08 19:23:39 +05:30
/>
2020-07-28 23:09:34 +05:30
<ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 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">
2020-11-24 15:15:51 +05:30
<gl-button
variant="dashed"
category="secondary"
class="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 }}
2020-11-24 15:15:51 +05:30
</gl-button>
2018-11-20 20:47:30 +05:30
</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>