debian-mirror-gitlab/app/assets/javascripts/boards/components/board_new_issue.vue

137 lines
3.6 KiB
Vue
Raw Normal View History

2018-03-27 19:54:05 +05:30
<script>
2020-07-28 23:09:34 +05:30
import { GlButton } from '@gitlab/ui';
2019-07-31 22:56:46 +05:30
import { getMilestone } from 'ee_else_ce/boards/boards_util';
2019-12-04 20:38:33 +05:30
import ListIssue from 'ee_else_ce/boards/models/issue';
2017-08-17 22:00:37 +05:30
import eventHub from '../eventhub';
2018-03-27 19:54:05 +05:30
import ProjectSelect from './project_select.vue';
2018-12-13 13:39:08 +05:30
import boardsStore from '../stores/boards_store';
2020-11-24 15:15:51 +05:30
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
2017-08-17 22:00:37 +05:30
2021-01-29 00:20:46 +05:30
// This component is being replaced in favor of './board_new_issue_new.vue' for GraphQL boards
2017-08-17 22:00:37 +05:30
export default {
name: 'BoardNewIssue',
2018-03-27 19:54:05 +05:30
components: {
ProjectSelect,
2020-07-28 23:09:34 +05:30
GlButton,
2018-03-27 19:54:05 +05:30
},
2020-11-24 15:15:51 +05:30
mixins: [glFeatureFlagMixin()],
2017-08-17 22:00:37 +05:30
props: {
2018-03-17 18:26:18 +05:30
list: {
type: Object,
required: true,
},
2017-08-17 22:00:37 +05:30
},
2021-01-03 14:25:43 +05:30
inject: ['groupId'],
2017-08-17 22:00:37 +05:30
data() {
return {
title: '',
error: false,
2018-03-27 19:54:05 +05:30
selectedProject: {},
2017-08-17 22:00:37 +05:30
};
},
2018-03-27 19:54:05 +05:30
computed: {
disabled() {
if (this.groupId) {
return this.title === '' || !this.selectedProject.name;
}
return this.title === '';
},
},
mounted() {
this.$refs.input.focus();
eventHub.$on('setSelectedProject', this.setSelectedProject);
},
2017-08-17 22:00:37 +05:30
methods: {
submit(e) {
e.preventDefault();
2017-09-10 17:25:29 +05:30
if (this.title.trim() === '') return Promise.resolve();
2017-08-17 22:00:37 +05:30
this.error = false;
const labels = this.list.label ? [this.list.label] : [];
2018-11-08 19:23:39 +05:30
const assignees = this.list.assignee ? [this.list.assignee] : [];
2019-07-31 22:56:46 +05:30
const milestone = getMilestone(this.list);
2019-12-04 20:38:33 +05:30
const { weightFeatureAvailable } = boardsStore;
const { weight } = weightFeatureAvailable ? boardsStore.state.currentBoard : {};
2017-08-17 22:00:37 +05:30
const issue = new ListIssue({
title: this.title,
labels,
subscribed: true,
2018-11-08 19:23:39 +05:30
assignees,
2019-07-31 22:56:46 +05:30
milestone,
2018-03-27 19:54:05 +05:30
project_id: this.selectedProject.id,
2019-12-04 20:38:33 +05:30
weight,
2017-08-17 22:00:37 +05:30
});
2017-09-10 17:25:29 +05:30
eventHub.$emit(`scroll-board-list-${this.list.id}`);
this.cancel();
2018-12-13 13:39:08 +05:30
return this.list
.newIssue(issue)
2017-08-17 22:00:37 +05:30
.then(() => {
2021-01-29 00:20:46 +05:30
boardsStore.setIssueDetail(issue);
boardsStore.setListDetail(this.list);
2017-08-17 22:00:37 +05:30
})
.catch(() => {
2021-01-29 00:20:46 +05:30
this.list.removeIssue(issue);
2017-08-17 22:00:37 +05:30
// Show error message
this.error = true;
});
},
cancel() {
this.title = '';
2020-06-23 00:09:42 +05:30
eventHub.$emit(`toggle-issue-form-${this.list.id}`);
2017-08-17 22:00:37 +05:30
},
2018-03-27 19:54:05 +05:30
setSelectedProject(selectedProject) {
this.selectedProject = selectedProject;
},
2017-08-17 22:00:37 +05:30
},
2018-03-27 19:54:05 +05:30
};
</script>
<template>
<div class="board-new-issue-form">
2019-07-31 22:56:46 +05:30
<div class="board-card position-relative p-3 rounded">
2019-03-02 22:35:43 +05:30
<form @submit="submit($event)">
2019-02-15 15:39:39 +05:30
<div v-if="error" class="flash-container">
2019-09-30 21:07:59 +05:30
<div class="flash-alert">{{ __('An error occurred. Please try again.') }}</div>
2017-08-17 22:00:37 +05:30
</div>
2019-09-30 21:07:59 +05:30
<label :for="list.id + '-title'" class="label-bold">{{ __('Title') }}</label>
2018-03-27 19:54:05 +05:30
<input
2018-12-05 23:21:45 +05:30
:id="list.id + '-title'"
2018-11-08 19:23:39 +05:30
ref="input"
v-model="title"
2018-03-27 19:54:05 +05:30
class="form-control"
2017-08-17 22:00:37 +05:30
type="text"
2018-11-18 11:00:15 +05:30
name="issue_title"
2017-09-10 17:25:29 +05:30
autocomplete="off"
2018-03-27 19:54:05 +05:30
/>
2019-12-04 20:38:33 +05:30
<project-select v-if="groupId" :group-id="groupId" :list="list" />
2020-10-24 23:57:45 +05:30
<div class="clearfix gl-mt-3">
2020-07-28 23:09:34 +05:30
<gl-button
2020-11-24 15:15:51 +05:30
ref="submitButton"
2018-11-08 19:23:39 +05:30
:disabled="disabled"
2021-01-29 00:20:46 +05:30
class="float-left js-no-auto-disable"
2018-12-05 23:21:45 +05:30
variant="success"
2020-07-28 23:09:34 +05:30
category="primary"
2018-11-08 19:23:39 +05:30
type="submit"
2020-07-28 23:09:34 +05:30
>{{ __('Submit issue') }}</gl-button
2018-03-27 19:54:05 +05:30
>
2020-11-24 15:15:51 +05:30
<gl-button
ref="cancelButton"
class="float-right"
type="button"
variant="default"
@click="cancel"
>{{ __('Cancel') }}</gl-button
>
2017-08-17 22:00:37 +05:30
</div>
</form>
</div>
2018-03-27 19:54:05 +05:30
</div>
</template>