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

215 lines
5.1 KiB
Vue
Raw Normal View History

2019-09-30 21:07:59 +05:30
<script>
2019-10-12 21:52:04 +05:30
import { __ } from '~/locale';
2019-09-30 21:07:59 +05:30
import Flash from '~/flash';
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
import { visitUrl } from '~/lib/utils/url_utility';
import boardsStore from '~/boards/stores/boards_store';
const boardDefaults = {
id: false,
name: '',
labels: [],
milestone_id: undefined,
assignee: {},
assignee_id: undefined,
weight: null,
};
export default {
components: {
BoardScope: () => import('ee_component/boards/components/board_scope.vue'),
DeprecatedModal,
},
props: {
canAdminBoard: {
type: Boolean,
required: true,
},
milestonePath: {
type: String,
required: true,
},
labelsPath: {
type: String,
required: true,
},
scopedIssueBoardFeatureEnabled: {
type: Boolean,
required: false,
default: false,
},
projectId: {
type: Number,
required: false,
default: 0,
},
groupId: {
type: Number,
required: false,
default: 0,
},
weights: {
type: Array,
required: false,
default: () => [],
},
enableScopedLabels: {
type: Boolean,
required: false,
default: false,
},
},
data() {
return {
board: { ...boardDefaults, ...this.currentBoard },
currentBoard: boardsStore.state.currentBoard,
currentPage: boardsStore.state.currentPage,
isLoading: false,
};
},
computed: {
isNewForm() {
return this.currentPage === 'new';
},
isDeleteForm() {
return this.currentPage === 'delete';
},
isEditForm() {
return this.currentPage === 'edit';
},
isVisible() {
return this.currentPage !== '';
},
buttonText() {
if (this.isNewForm) {
2019-10-12 21:52:04 +05:30
return __('Create board');
2019-09-30 21:07:59 +05:30
}
if (this.isDeleteForm) {
2019-10-12 21:52:04 +05:30
return __('Delete');
2019-09-30 21:07:59 +05:30
}
2019-10-12 21:52:04 +05:30
return __('Save changes');
2019-09-30 21:07:59 +05:30
},
buttonKind() {
if (this.isNewForm) {
return 'success';
}
if (this.isDeleteForm) {
return 'danger';
}
return 'info';
},
title() {
if (this.isNewForm) {
2019-10-12 21:52:04 +05:30
return __('Create new board');
2019-09-30 21:07:59 +05:30
}
if (this.isDeleteForm) {
2019-10-12 21:52:04 +05:30
return __('Delete board');
2019-09-30 21:07:59 +05:30
}
if (this.readonly) {
2019-10-12 21:52:04 +05:30
return __('Board scope');
2019-09-30 21:07:59 +05:30
}
2019-10-12 21:52:04 +05:30
return __('Edit board');
2019-09-30 21:07:59 +05:30
},
readonly() {
return !this.canAdminBoard;
},
submitDisabled() {
return this.isLoading || this.board.name.length === 0;
},
},
mounted() {
this.resetFormState();
if (this.$refs.name) {
this.$refs.name.focus();
}
},
methods: {
submit() {
if (this.board.name.length === 0) return;
this.isLoading = true;
if (this.isDeleteForm) {
2019-12-26 22:10:19 +05:30
boardsStore
2019-09-30 21:07:59 +05:30
.deleteBoard(this.currentBoard)
.then(() => {
visitUrl(boardsStore.rootPath);
})
.catch(() => {
2019-10-12 21:52:04 +05:30
Flash(__('Failed to delete board. Please try again.'));
2019-09-30 21:07:59 +05:30
this.isLoading = false;
});
} else {
2019-12-26 22:10:19 +05:30
boardsStore
2019-09-30 21:07:59 +05:30
.createBoard(this.board)
.then(resp => resp.data)
.then(data => {
visitUrl(data.board_path);
})
.catch(() => {
2019-10-12 21:52:04 +05:30
Flash(__('Unable to save your changes. Please try again.'));
2019-09-30 21:07:59 +05:30
this.isLoading = false;
});
}
},
cancel() {
boardsStore.showPage('');
},
resetFormState() {
if (this.isNewForm) {
// Clear the form when we open the "New board" modal
this.board = { ...boardDefaults };
} else if (this.currentBoard && Object.keys(this.currentBoard).length) {
this.board = { ...boardDefaults, ...this.currentBoard };
}
},
},
};
</script>
<template>
<deprecated-modal
v-show="isVisible"
:hide-footer="readonly"
:title="title"
:primary-button-label="buttonText"
:kind="buttonKind"
:submit-disabled="submitDisabled"
modal-dialog-class="board-config-modal"
@cancel="cancel"
@submit="submit"
>
2020-05-24 23:13:21 +05:30
<template #body>
2019-10-12 21:52:04 +05:30
<p v-if="isDeleteForm">{{ __('Are you sure you want to delete this board?') }}</p>
2019-09-30 21:07:59 +05:30
<form v-else class="js-board-config-modal" @submit.prevent>
<div v-if="!readonly" class="append-bottom-20">
2019-10-12 21:52:04 +05:30
<label class="form-section-title label-bold" for="board-new-name">{{
__('Board name')
}}</label>
2019-09-30 21:07:59 +05:30
<input
id="board-new-name"
ref="name"
v-model="board.name"
class="form-control"
2019-12-21 20:55:43 +05:30
data-qa-selector="board_name_field"
2019-09-30 21:07:59 +05:30
type="text"
2019-10-12 21:52:04 +05:30
:placeholder="__('Enter board name')"
2019-09-30 21:07:59 +05:30
@keyup.enter="submit"
/>
</div>
<board-scope
v-if="scopedIssueBoardFeatureEnabled"
:collapse-scope="isNewForm"
:board="board"
:can-admin-board="canAdminBoard"
:milestone-path="milestonePath"
:labels-path="labelsPath"
:enable-scoped-labels="enableScopedLabels"
:project-id="projectId"
:group-id="groupId"
:weights="weights"
/>
</form>
</template>
</deprecated-modal>
</template>