Merge branch '31633-animate-issue' into 'master'
animate adding issue to boards Closes #31633 See merge request !11785
This commit is contained in:
commit
9c2f82842b
7 changed files with 88 additions and 26 deletions
|
@ -57,6 +57,9 @@ export default {
|
||||||
scrollTop() {
|
scrollTop() {
|
||||||
return this.$refs.list.scrollTop + this.listHeight();
|
return this.$refs.list.scrollTop + this.listHeight();
|
||||||
},
|
},
|
||||||
|
scrollToTop() {
|
||||||
|
this.$refs.list.scrollTop = 0;
|
||||||
|
},
|
||||||
loadNextPage() {
|
loadNextPage() {
|
||||||
const getIssues = this.list.nextPage();
|
const getIssues = this.list.nextPage();
|
||||||
const loadingDone = () => {
|
const loadingDone = () => {
|
||||||
|
@ -108,6 +111,7 @@ export default {
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
|
eventHub.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
|
||||||
|
eventHub.$on(`scroll-board-list-${this.list.id}`, this.scrollToTop);
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const options = gl.issueBoards.getBoardSortableDefaultOptions({
|
const options = gl.issueBoards.getBoardSortableDefaultOptions({
|
||||||
|
@ -150,6 +154,7 @@ export default {
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
|
eventHub.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
|
||||||
|
eventHub.$off(`scroll-board-list-${this.list.id}`, this.scrollToTop);
|
||||||
this.$refs.list.removeEventListener('scroll', this.onScroll);
|
this.$refs.list.removeEventListener('scroll', this.onScroll);
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
|
@ -160,9 +165,11 @@ export default {
|
||||||
v-if="loading">
|
v-if="loading">
|
||||||
<loading-icon />
|
<loading-icon />
|
||||||
</div>
|
</div>
|
||||||
<board-new-issue
|
<transition name="slide-down">
|
||||||
:list="list"
|
<board-new-issue
|
||||||
v-if="list.type !== 'closed' && showIssueForm"/>
|
:list="list"
|
||||||
|
v-if="list.type !== 'closed' && showIssueForm"/>
|
||||||
|
</transition>
|
||||||
<ul
|
<ul
|
||||||
class="board-list"
|
class="board-list"
|
||||||
v-show="!loading"
|
v-show="!loading"
|
||||||
|
|
|
@ -48,6 +48,7 @@ export default {
|
||||||
this.error = true;
|
this.error = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
eventHub.$emit(`scroll-board-list-${this.list.id}`);
|
||||||
this.cancel();
|
this.cancel();
|
||||||
},
|
},
|
||||||
cancel() {
|
cancel() {
|
||||||
|
@ -75,6 +76,7 @@ export default {
|
||||||
type="text"
|
type="text"
|
||||||
v-model="title"
|
v-model="title"
|
||||||
ref="input"
|
ref="input"
|
||||||
|
autocomplete="off"
|
||||||
:id="list.id + '-title'" />
|
:id="list.id + '-title'" />
|
||||||
<div class="clearfix prepend-top-10">
|
<div class="clearfix prepend-top-10">
|
||||||
<button class="btn btn-success pull-left"
|
<button class="btn btn-success pull-left"
|
||||||
|
|
|
@ -103,13 +103,19 @@ class List {
|
||||||
}
|
}
|
||||||
|
|
||||||
newIssue (issue) {
|
newIssue (issue) {
|
||||||
this.addIssue(issue);
|
this.addIssue(issue, null, 0);
|
||||||
this.issuesSize += 1;
|
this.issuesSize += 1;
|
||||||
|
|
||||||
return gl.boardService.newIssue(this.id, issue)
|
return gl.boardService.newIssue(this.id, issue)
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
const data = resp.json();
|
const data = resp.json();
|
||||||
issue.id = data.iid;
|
issue.id = data.iid;
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
if (this.issuesSize > 1) {
|
||||||
|
const moveBeforeIid = this.issues[1].id;
|
||||||
|
gl.boardService.moveIssue(issue.id, null, null, null, moveBeforeIid);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@ gl.issueBoards.BoardsStore = {
|
||||||
create () {
|
create () {
|
||||||
this.state.lists = [];
|
this.state.lists = [];
|
||||||
this.filter.path = gl.utils.getUrlParamsArray().join('&');
|
this.filter.path = gl.utils.getUrlParamsArray().join('&');
|
||||||
|
this.detail = { issue: {} };
|
||||||
},
|
},
|
||||||
addList (listObj, defaultAvatar) {
|
addList (listObj, defaultAvatar) {
|
||||||
const list = new List(listObj, defaultAvatar);
|
const list = new List(listObj, defaultAvatar);
|
||||||
|
|
|
@ -175,21 +175,53 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slide-down-enter {
|
||||||
|
transform: translateY(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-down-enter-active {
|
||||||
|
transition: transform $fade-in-duration;
|
||||||
|
|
||||||
|
+ .board-list {
|
||||||
|
transform: translateY(-136px);
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-down-enter-to {
|
||||||
|
+ .board-list {
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: transform $fade-in-duration ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-down-leave {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-down-leave-active {
|
||||||
|
transition: all $fade-in-duration;
|
||||||
|
transform: translateY(-136px);
|
||||||
|
|
||||||
|
+ .board-list {
|
||||||
|
transition: transform $fade-in-duration ease;
|
||||||
|
transform: translateY(-136px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.board-list-component {
|
.board-list-component {
|
||||||
height: calc(100% - 49px);
|
height: calc(100% - 49px);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.board-list {
|
.board-list {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
&.is-smaller {
|
|
||||||
height: calc(100% - 136px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.board-list-loading {
|
.board-list-loading {
|
||||||
|
@ -351,6 +383,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.board-new-issue-form {
|
.board-new-issue-form {
|
||||||
|
z-index: 1;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
4
changelogs/unreleased/31633-animate-issue.yml
Normal file
4
changelogs/unreleased/31633-animate-issue.yml
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: animate adding issue to boards
|
||||||
|
merge_request:
|
||||||
|
author:
|
|
@ -19,6 +19,7 @@ describe('Issue boards new issue form', () => {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const submitIssue = () => {
|
const submitIssue = () => {
|
||||||
vm.$el.querySelector('.btn-success').click();
|
vm.$el.querySelector('.btn-success').click();
|
||||||
};
|
};
|
||||||
|
@ -107,7 +108,7 @@ describe('Issue boards new issue form', () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
submitIssue();
|
submitIssue();
|
||||||
|
|
||||||
expect(vm.$el.querySelector('.btn-success').disbled).not.toBe(true);
|
expect(vm.$el.querySelector('.btn-success').disabled).toBe(false);
|
||||||
done();
|
done();
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
@ -115,36 +116,43 @@ describe('Issue boards new issue form', () => {
|
||||||
it('clears title after submit', (done) => {
|
it('clears title after submit', (done) => {
|
||||||
vm.title = 'submit issue';
|
vm.title = 'submit issue';
|
||||||
|
|
||||||
setTimeout(() => {
|
Vue.nextTick(() => {
|
||||||
submitIssue();
|
submitIssue();
|
||||||
|
|
||||||
expect(vm.title).toBe('');
|
setTimeout(() => {
|
||||||
done();
|
expect(vm.title).toBe('');
|
||||||
}, 0);
|
done();
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('adds new issue to list after submit', (done) => {
|
it('adds new issue to top of list after submit request', (done) => {
|
||||||
vm.title = 'submit issue';
|
vm.title = 'submit issue';
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
submitIssue();
|
submitIssue();
|
||||||
|
|
||||||
expect(list.issues.length).toBe(2);
|
setTimeout(() => {
|
||||||
expect(list.issues[1].title).toBe('submit issue');
|
expect(list.issues.length).toBe(2);
|
||||||
expect(list.issues[1].subscribed).toBe(true);
|
expect(list.issues[0].title).toBe('submit issue');
|
||||||
done();
|
expect(list.issues[0].subscribed).toBe(true);
|
||||||
|
done();
|
||||||
|
}, 0);
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('sets detail issue after submit', (done) => {
|
it('sets detail issue after submit', (done) => {
|
||||||
|
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe(undefined);
|
||||||
vm.title = 'submit issue';
|
vm.title = 'submit issue';
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
submitIssue();
|
submitIssue();
|
||||||
|
|
||||||
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
|
setTimeout(() => {
|
||||||
done();
|
expect(gl.issueBoards.BoardsStore.detail.issue.title).toBe('submit issue');
|
||||||
});
|
done();
|
||||||
|
}, 0);
|
||||||
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('sets detail list after submit', (done) => {
|
it('sets detail list after submit', (done) => {
|
||||||
|
@ -153,8 +161,10 @@ describe('Issue boards new issue form', () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
submitIssue();
|
submitIssue();
|
||||||
|
|
||||||
expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
|
setTimeout(() => {
|
||||||
done();
|
expect(gl.issueBoards.BoardsStore.detail.list.id).toBe(list.id);
|
||||||
|
done();
|
||||||
|
}, 0);
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -169,13 +179,12 @@ describe('Issue boards new issue form', () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(list.issues.length).toBe(1);
|
expect(list.issues.length).toBe(1);
|
||||||
done();
|
done();
|
||||||
}, 500);
|
}, 0);
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows error', (done) => {
|
it('shows error', (done) => {
|
||||||
vm.title = 'error';
|
vm.title = 'error';
|
||||||
submitIssue();
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
submitIssue();
|
submitIssue();
|
||||||
|
@ -183,7 +192,7 @@ describe('Issue boards new issue form', () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(vm.error).toBe(true);
|
expect(vm.error).toBe(true);
|
||||||
done();
|
done();
|
||||||
}, 500);
|
}, 0);
|
||||||
}, 0);
|
}, 0);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue