Skip to content

G
gitlab-ce
Commit 91a647ea authored by Simon Knox's avatar Simon Knox
Browse files
Options

move edit form to .vue

parent b63dfe41
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 160 deletions
app/assets/javascripts/boards/components/board_new_form.js deleted 100644 → 0
View file @ b63dfe41
/* global BoardService */
import Vue from 'vue';
import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
import boardMilestoneSelect from './milestone_select';
(() => {
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
const Store = gl.issueBoards.BoardsStore;
gl.issueBoards.BoardSelectorForm = Vue.extend({
props: {
milestonePath: {
type: String,
required: true,
},
},
data() {
return {
board: {
id: false,
name: '',
},
issue: {},
currentBoard: Store.state.currentBoard,
currentPage: Store.state.currentPage,
milestones: [],
milestoneDropdownOpen: false,
};
},
components: {
boardMilestoneSelect,
PopupDialog,
},
mounted() {
if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
this.board = Vue.util.extend({}, this.currentBoard);
}
},
computed: {
buttonText() {
if (this.currentPage === 'new') {
return 'Create';
}
return 'Save';
},
title() {
if (this.currentPage === 'new') {
return 'Create new board';
}
// TODO check for readonly
return 'Edit board';
},
milestoneToggleText() {
return this.board.milestone ? this.board.milestone.title : 'Milestone';
},
submitDisabled() {
return false;
},
},
methods: {
refreshPage() {
location.href = location.pathname;
},
loadMilestones(e) {
this.milestoneDropdownOpen = !this.milestoneDropdownOpen;
BoardService.loadMilestones.call(this);
if (this.milestoneDropdownOpen) {
this.$nextTick(() => {
const milestoneDropdown = this.$refs.milestoneDropdown;
const rect = e.target.getBoundingClientRect();
milestoneDropdown.style.width = `${rect.width}px`;
});
}
},
submit() {
gl.boardService.createBoard(this.board)
.then(resp => resp.json())
.then((data) => {
if (this.currentBoard && this.currentPage !== 'new') {
this.currentBoard.name = this.board.name;
// We reload the page to make sure the store & state of the app are correct
this.refreshPage();
// Enable the button thanks to our jQuery disabling it
$(this.$refs.submitBtn).enable();
// Reset the selectors current page
Store.state.currentPage = '';
Store.state.reload = true;
} else if (this.currentPage === 'new') {
gl.utils.visitUrl(`${Store.rootPath}/${data.id}`);
}
})
.catch(() => {
// https://gitlab.com/gitlab-org/gitlab-ce/issues/30821
});
},
cancel() {
Store.state.currentPage = '';
},
selectMilestone(milestone) {
this.milestoneDropdownOpen = false;
this.board.milestone_id = milestone.id;
this.board.milestone = {
title: milestone.title,
};
},
},
});
})();
app/assets/javascripts/boards/components/board_new_form.vue 0 → 100644
View file @ 91a647ea
<template>
<popup-dialog :title="title" >
<p v-if="currentPage === 'delete'">
Are you sure you want to delete this board?
</p>
<form
v-else
@submit="submit"
>
<div>
<label class="label-light" for="board-new-name">
Board name
</label>
<input
class="form-control"
type="text"
id="board-new-name"
v-model="board.name"
>
</div>
<div>
<button
type="button"
class="btn pull-right"
@click="expand = !expand">
Expand
</button>
<h3>
Board scope
</h3>
</div>
<transition name="fade">
<div v-show="expand">
<p>
Board scope affects which issues are displayed for anyone who visits this board
</p>
<!-- TODO: if current_board_parent.issue_board_milestone_available?(current_user) -->
<input
type="hidden"
id="board-milestone"
v-model.number="board.milestone_id">
<board-milestone-select
:board="board"
:milestone-path="milestonePath"
:select-milestone="selectMilestone">
</board-milestone-select>
</div>
</transition>
</form>
<template slot="footer">
<!-- TODO: handle Delete button with btn-danger class and method delete to link_to current_board_path(board) -->
<button
class="btn btn-primary pull-left"
@click="submit"
type="button"
>
{{ buttonText }}
</button>
<button
class="btn btn-default pull-right"
type="button"
>
Cancel
</button>
</template>
</popup-dialog>
</template>
<script>
/* global BoardService */
import Vue from 'vue';
import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
import boardMilestoneSelect from './milestone_select';
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
const Store = gl.issueBoards.BoardsStore;
export default Vue.extend({
props: {
milestonePath: {
type: String,
required: true,
},
},
data() {
return {
board: {
id: false,
name: '',
},
expand: false,
issue: {},
currentBoard: Store.state.currentBoard,
currentPage: Store.state.currentPage,
milestones: [],
milestoneDropdownOpen: false,
};
},
components: {
boardMilestoneSelect,
PopupDialog,
},
mounted() {
if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
this.board = Vue.util.extend({}, this.currentBoard);
}
},
computed: {
buttonText() {
if (this.currentPage === 'new') {
return 'Create';
}
return 'Save';
},
title() {
if (this.currentPage === 'new') {
return 'Create new board';
}
// TODO check for readonly
return 'Edit board';
},
milestoneToggleText() {
return this.board.milestone ? this.board.milestone.title : 'Milestone';
},
submitDisabled() {
return false;
},
},
methods: {
refreshPage() {
location.href = location.pathname;
},
loadMilestones(e) {
this.milestoneDropdownOpen = !this.milestoneDropdownOpen;
BoardService.loadMilestones.call(this);
if (this.milestoneDropdownOpen) {
this.$nextTick(() => {
const milestoneDropdown = this.$refs.milestoneDropdown;
const rect = e.target.getBoundingClientRect();
milestoneDropdown.style.width = `${rect.width}px`;
});
}
},
submit() {
gl.boardService.createBoard(this.board)
.then(resp => resp.json())
.then((data) => {
if (this.currentBoard && this.currentPage !== 'new') {
this.currentBoard.name = this.board.name;
// We reload the page to make sure the store & state of the app are correct
this.refreshPage();
// Enable the button thanks to our jQuery disabling it
$(this.$refs.submitBtn).enable();
// Reset the selectors current page
Store.state.currentPage = '';
Store.state.reload = true;
} else if (this.currentPage === 'new') {
gl.utils.visitUrl(`${Store.rootPath}/${data.id}`);
}
})
.catch(() => {
// https://gitlab.com/gitlab-org/gitlab-ce/issues/30821
});
},
cancel() {
Store.state.currentPage = '';
},
selectMilestone(milestone) {
this.milestoneDropdownOpen = false;
this.board.milestone_id = milestone.id;
this.board.milestone = {
title: milestone.title,
};
},
},
});
</script>
app/assets/javascripts/boards/components/boards_selector.js
View file @ 91a647ea
import Vue from 'vue';
import './board_new_form';
import BoardSelectorForm from './board_new_form.vue';
(() => {
window.gl = window.gl || {};
......@@ -11,7 +11,7 @@ import './board_new_form';
gl.issueBoards.BoardsSelector = Vue.extend({
components: {
'board-selector-form': gl.issueBoards.BoardSelectorForm,
'board-selector-form': BoardSelectorForm,
},
props: {
currentBoard: {
......
app/views/shared/boards/_switcher.html.haml
View file @ 91a647ea
......@@ -35,8 +35,6 @@
%span.text-danger
Delete board
- if can?(current_user, :admin_board, parent)
%board-selector-form{ "inline-template" => true,
":milestone-path" => "milestonePath",
"v-if" => "currentPage" }
= render "shared/boards/components/form"
%board-selector-form{ ":milestone-path" => "milestonePath",
":can-admin-board" => can?(current_user, :admin_board, parent),
"v-if" => "currentPage" }
app/views/shared/boards/components/_form.html.haml deleted 100644 → 0
View file @ b63dfe41
%popup-dialog{ ":title": "title" }
%template{ slot: "body" }
%p{ "v-if" => "currentPage === 'delete'" }
Are you sure you want to delete this board?
%form{ "v-else" => true,
"@submit.prevent" => "submit" }
%input{ type: "hidden",
id: "board-milestone",
"v-model.number" => "board.milestone_id" }
%div
%label.label-light{ for: "board-new-name" }
Board name
%input.form-control{ type: "text",
id: "board-new-name",
"v-model" => "board.name" }
- if current_board_parent.issue_board_milestone_available?(current_user)
%board-milestone-select{ ":board": "board",
":milestone-path": "milestonePath",
":select-milestone": "selectMilestone" }
%template{ slot: "footer" }
= link_to current_board_path(board),
class: "btn btn-danger pull-left",
"v-if": "currentPage === 'delete'",
method: :delete do
Delete
%button.btn.btn-primary.pull-left{ type: "button",
"v-else": true,
"@click" => "submit",
":disabled" => "submitDisabled",
"ref" => "'submit-btn'" }
{{ buttonText }}
%button.btn.btn-default.pull-right{ type: "button",
"@click" => "cancel",
data: { dismiss: "modal" } }
Cancel
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7