Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Léo-Paul Géneau
gitlab-ce
Commits
17c576c1
Commit
17c576c1
authored
Aug 11, 2016
by
Phil Hughes
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Removed underscoreJS uses
Removed props on main VueJS app instead uses data variables
parent
4460724d
Changes
14
Hide whitespace changes
Inline
Side-by-side
Showing
14 changed files
with
160 additions
and
130 deletions
+160
-130
app/assets/javascripts/boards/boards_bundle.js.es6
app/assets/javascripts/boards/boards_bundle.js.es6
+21
-15
app/assets/javascripts/boards/components/board.js.es6
app/assets/javascripts/boards/components/board.js.es6
+17
-14
app/assets/javascripts/boards/components/board_blank_state.js.es6
...ts/javascripts/boards/components/board_blank_state.js.es6
+11
-8
app/assets/javascripts/boards/components/board_card.js.es6
app/assets/javascripts/boards/components/board_card.js.es6
+2
-2
app/assets/javascripts/boards/components/board_delete.js.es6
app/assets/javascripts/boards/components/board_delete.js.es6
+1
-1
app/assets/javascripts/boards/components/board_list.js.es6
app/assets/javascripts/boards/components/board_list.js.es6
+24
-24
app/assets/javascripts/boards/components/new_list_dropdown.js.es6
...ts/javascripts/boards/components/new_list_dropdown.js.es6
+4
-4
app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
...javascripts/boards/mixins/sortable_default_options.js.es6
+18
-13
app/assets/javascripts/boards/models/issue.js.es6
app/assets/javascripts/boards/models/issue.js.es6
+13
-9
app/assets/javascripts/boards/models/list.js.es6
app/assets/javascripts/boards/models/list.js.es6
+15
-11
app/assets/javascripts/boards/services/board_service.js.es6
app/assets/javascripts/boards/services/board_service.js.es6
+2
-1
app/assets/javascripts/boards/stores/boards_store.js.es6
app/assets/javascripts/boards/stores/boards_store.js.es6
+28
-24
app/assets/stylesheets/pages/boards.scss
app/assets/stylesheets/pages/boards.scss
+1
-1
app/views/projects/boards/show.html.haml
app/views/projects/boards/show.html.haml
+3
-3
No files found.
app/assets/javascripts/boards/boards_bundle.js.es6
View file @
17c576c1
...
...
@@ -7,7 +7,9 @@
//= require_tree ./mixins
//= require_tree ./components
$(function () {
$(() => {
const $boardApp = $('#board-app');
if (!window.gl) {
window.gl = {};
}
...
...
@@ -17,38 +19,42 @@ $(function () {
}
gl.IssueBoardsApp = new Vue({
el: '#board-app',
props: {
disabled: Boolean,
endpoint: String,
issueLinkBase: String
},
el: $boardApp.get(0),
data: {
state: BoardsStore.state,
loading: true
loading: true,
endpoint: $boardApp.data('endpoint'),
disabled: $boardApp.data('disabled'),
issueLinkBase: $boardApp.data('issue-link-base')
},
init
: function
() {
init () {
BoardsStore.create();
},
created
: function
() {
created () {
this.loading = true;
gl.boardService = new BoardService(this.endpoint);
$boardApp
.removeAttr('data-endpoint')
.removeAttr('data-disabled')
.removeAttr('data-issue-link-base');
},
ready
: function
() {
ready () {
BoardsStore.disabled = this.disabled;
gl.boardService.all()
.then((resp) => {
const boards = resp.json();
boards.forEach((board) => {
const list = BoardsStore.addList(board);
for (let i = 0, boardsLength = boards.length; i < boardsLength; i++) {
const board = boards[i],
list = BoardsStore.addList(board);
if (list.type === 'done') {
list.position =
9999999
;
list.position =
Infinity
;
} else if (list.type === 'backlog') {
list.position = -1;
}
}
);
}
BoardsStore.addBlankState();
this.loading = false;
...
...
app/assets/javascripts/boards/components/board.js.es6
View file @
17c576c1
(
function ()
{
(
() =>
{
const Board = Vue.extend({
props: {
list: Object,
disabled: Boolean,
issueLinkBase: String
},
data
: function
() {
data () {
return {
query: '',
filters: BoardsStore.state.filters
};
},
watch: {
'query': function
() {
query
() {
if (this.list.canSearch()) {
this.list.filters = this.getFilterData();
this.list.getIssues(true);
}
},
'filters'
: {
handler
: function
() {
filters
: {
handler () {
this.list.page = 1;
this.list.getIssues(true);
},
...
...
@@ -27,30 +27,33 @@
}
},
methods: {
clearSearch
: function
() {
clearSearch () {
this.query = '';
},
getFilterData: function () {
const queryData = this.list.canSearch() ? { search: this.query } : {};
getFilterData () {
const filters = this.filters;
let queryData = this.list.canSearch() ? { search: this.query } : {};
Object.keys(filters).forEach((key) => { queryData[key] = filters[key]; });
return
_.extend(queryData, this.filters)
;
return
queryData
;
}
},
computed: {
isPreset
: function
() {
isPreset () {
return this.list.type === 'backlog' || this.list.type === 'done' || this.list.type === 'blank';
}
},
ready
: function
() {
let options = _.extend
({
ready () {
const options = gl.getBoardSortableDefaultOptions
({
disabled: this.disabled,
group: 'boards',
draggable: '.is-draggable',
handle: '.js-board-handle',
onUpdate
: function
(e) {
onUpdate (e) {
BoardsStore.moveList(e.oldIndex, e.newIndex);
}
}
, gl.boardSortableDefaultOptions
);
});
if (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'xs') {
options.handle = '.js-board-drag-handle';
...
...
app/assets/javascripts/boards/components/board_blank_state.js.es6
View file @
17c576c1
(() => {
const BoardBlankState = Vue.extend({
data
: function
() {
data () {
return {
predefinedLabels: [
new ListLabel({ title: 'Development', color: '#5CB85C' }),
...
...
@@ -11,11 +11,13 @@
}
},
methods: {
addDefaultLists
: function
(e) {
addDefaultLists (e) {
e.stopImmediatePropagation();
BoardsStore.removeBlankState();
_.each(this.predefinedLabels, (label, i) => {
for (let i = 0, labelsLength = this.predefinedLabels.length; i < labelsLength; i++) {
const label = this.predefinedLabels[i];
BoardsStore.addList({
title: label.title,
position: i,
...
...
@@ -25,7 +27,7 @@
color: label.color
}
});
}
);
}
// Save the labels
gl.boardService
...
...
@@ -33,15 +35,16 @@
.then((resp) => {
const data = resp.json();
_.each(data, (listObj) => {
const list = BoardsStore.findList('title', listObj.title);
for (let i = 0, dataLength = data.length; i < dataLength; i++) {
const listObj = data[i],
list = BoardsStore.findList('title', listObj.title);
list.id = listObj.id;
list.label.id = listObj.label.id;
list.getIssues();
}
);
}
});
},
clearBlankState
: function
() {
clearBlankState () {
BoardsStore.removeBlankState();
}
}
...
...
app/assets/javascripts/boards/components/board_card.js.es6
View file @
17c576c1
(
function ()
{
(
() =>
{
const BoardCard = Vue.extend({
props: {
list: Object,
...
...
@@ -7,7 +7,7 @@
disabled: Boolean
},
methods: {
filterByLabel
: function
(label, $event) {
filterByLabel (label, $event) {
let labelToggleText = label.title;
const labelIndex = BoardsStore.state.filters['label_name'].indexOf(label.title);
$($event.target).tooltip('hide');
...
...
app/assets/javascripts/boards/components/board_delete.js.es6
View file @
17c576c1
...
...
@@ -4,7 +4,7 @@
list: Object
},
methods: {
deleteBoard
: function
(e) {
deleteBoard (e) {
e.stopImmediatePropagation();
$(this.$el).tooltip('hide');
...
...
app/assets/javascripts/boards/components/board_list.js.es6
View file @
17c576c1
(
function ()
{
(
() =>
{
const BoardList = Vue.extend({
props: {
disabled: Boolean,
...
...
@@ -7,7 +7,7 @@
loading: Boolean,
issueLinkBase: String
},
data
: function
() {
data () {
return {
scrollOffset: 250,
loadingMore: false,
...
...
@@ -15,8 +15,8 @@
};
},
watch: {
'filters'
: {
handler
: function
() {
filters
: {
handler () {
this.loadingMore = false;
this.$els.list.scrollTop = 0;
},
...
...
@@ -24,16 +24,16 @@
}
},
methods: {
listHeight
: function
() {
listHeight () {
return this.$els.list.getBoundingClientRect().height;
},
scrollHeight
: function
() {
scrollHeight () {
return this.$els.list.scrollHeight;
},
scrollTop
: function
() {
scrollTop () {
return this.$els.list.scrollTop + this.listHeight();
},
loadNextPage
: function
() {
loadNextPage () {
this.loadingMore = true;
const getIssues = this.list.nextPage();
...
...
@@ -44,24 +44,24 @@
}
},
},
ready
: function
() {
const list = this.list
;
let options = _.extend
({
group: 'issues',
sort: false,
disabled: this.disabled,
onAdd: (e) =>
{
const card = e.item,
fromListId = parseInt(e.from.getAttribute('data-board')),
toListId = parseInt(e.to.getAttribute('data-board')),
issueId = parseInt(card.getAttribute('data-issue'));
ready () {
const list = this.list
,
options = gl.getBoardSortableDefaultOptions
({
group: 'issues',
sort: false,
disabled: this.disabled,
onAdd (e)
{
const card = e.item,
fromListId = parseInt(e.from.getAttribute('data-board')),
toListId = parseInt(e.to.getAttribute('data-board')),
issueId = parseInt(card.getAttribute('data-issue'));
// Remove the new dom element & let vue add the element
card.parentNode.removeChild(card);
// Remove the new dom element & let vue add the element
card.parentNode.removeChild(card);
BoardsStore.moveCardToList(fromListId, toListId, issueId);
}
}, gl.boardSortableDefaultOptions
);
BoardsStore.moveCardToList(fromListId, toListId, issueId);
}
}
);
if (bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'xs') {
options.handle = '.js-card-drag-handle';
...
...
app/assets/javascripts/boards/components/new_list_dropdown.js.es6
View file @
17c576c1
$(
function ()
{
$(
() =>
{
$('.js-new-board-list').each(function () {
const $this = $(this);
new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('project-id'));
$this.glDropdown({
data
: function
(term, callback) {
data(term, callback) {
$.ajax({
url: $this.attr('data-labels')
}).then((resp) => {
callback(resp);
});
},
renderRow
: (label) =>
{
renderRow
(label)
{
const active = BoardsStore.findList('title', label.title),
$li = $('<li />',),
$a = $('<a />', {
...
...
@@ -32,7 +32,7 @@ $(function () {
},
filterable: true,
selectable: true,
clicked
: (label, $el, e) =>
{
clicked
(label, $el, e)
{
e.preventDefault();
if (!BoardsStore.findList('title', label.title)) {
...
...
app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
View file @
17c576c1
...
...
@@ -3,19 +3,24 @@
window.gl = {};
}
gl.boardSortableDefaultOptions = {
forceFallback: true,
fallbackClass: 'is-dragging',
fallbackOnBody: true,
ghostClass: 'is-ghost',
filter: '.has-tooltip',
scrollSensitivity: 100,
scrollSpeed: 20,
onStart: function () {
document.body.classList.add('is-dragging');
},
onEnd: function () {
document.body.classList.remove('is-dragging');
gl.getBoardSortableDefaultOptions = (obj) => {
let defaultSortOptions = {
forceFallback: true,
fallbackClass: 'is-dragging',
fallbackOnBody: true,
ghostClass: 'is-ghost',
filter: '.has-tooltip',
scrollSensitivity: 100,
scrollSpeed: 20,
onStart () {
document.body.classList.add('is-dragging');
},
onEnd () {
document.body.classList.remove('is-dragging');
}
}
Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
return defaultSortOptions;
};
})(window);
app/assets/javascripts/boards/models/issue.js.es6
View file @
17c576c1
...
...
@@ -10,11 +10,12 @@ class ListIssue {
this.labels = [];
_.each(obj.labels, (label) => {
for (let i = 0, objLabelsLength = obj.labels.length; i < objLabelsLength; i++) {
const label = obj.labels[i];
this.labels.push(new ListLabel(label));
}
);
}
this.priority =
_.reduce(this.labels,
(max, label) => {
this.priority =
this.labels.reduce(
(max, label) => {
return (label.priority < max) ? label.priority : max;
}, Infinity);
}
...
...
@@ -30,25 +31,28 @@ class ListIssue {
}
findLabel (findLabel) {
return
_.find(this.labels,
(label) => {
return
this.labels.filter(
(label) => {
return label.title === findLabel.title;
});
})
[0]
;
}
removeLabel (removeLabel) {
if (removeLabel) {
this.labels =
_.reject(this.labels,
(label) => {
return removeLabel.title
=
== label.title;
this.labels =
this.labels.filter(
(label) => {
return removeLabel.title
!
== label.title;
});
}
}
removeLabels (labels) {
_.each(labels, this.removeLabel.bind(this));
for (let i = 0, labelsLength = labels.length; i < labelsLength; i++) {
const label = labels[i];
this.removeLabel(label);
}
}
getLists () {
return
_.filter(BoardsStore.state.lists,
(list) => {
return
BoardsStore.state.lists.filter(
(list) => {
return list.findIssue(this.id);
});
}
...
...
app/assets/javascripts/boards/models/list.js.es6
View file @
17c576c1
...
...
@@ -33,8 +33,8 @@ class List {
destroy () {
if (this.type !== 'blank') {
BoardsStore.state.lists =
_.reject(BoardsStore.state.lists,
(list) => {
return list.id
=
== this.id;
BoardsStore.state.lists =
BoardsStore.state.lists.filter(
(list) => {
return list.id
!
== this.id;
});
BoardsStore.updateNewListDropdown();
...
...
@@ -59,11 +59,14 @@ class List {
}
getIssues (emptyIssues = true) {
let data = _.extend({ page: this.page }, this.filters);
const filters = this.filters;
let data = { page: this.page };
Object.keys(filters).forEach((key) => { data[key] = filters[key]; });
if (this.label) {
data.label_name =
_.reject(data.label_name,
(label) => {
return label
=
== this.label.title;
data.label_name =
data.label_name.filter(
(label) => {
return label
!
== this.label.title;
});
}
...
...
@@ -85,9 +88,10 @@ class List {
}
createIssues (data) {
_.each(data, (issueObj) => {
for (let i = 0, dataLength = data.length; i < dataLength; i++) {
const issueObj = data[i];
this.issues.push(new ListIssue(issueObj));
}
);
}
}
addIssue (issue, listFrom) {
...
...
@@ -99,20 +103,20 @@ class List {
}
findIssue (id) {
return
_.find(this.issues,
(issue) => {
return
this.issues.filter(
(issue) => {
return issue.id === id;
});
})
[0]
;
}
removeIssue (removeIssue) {
this.issues =
_.reject(this.issues,
(issue) => {
this.issues =
this.issues.filter(
(issue) => {
const matchesRemove = removeIssue.id === issue.id;
if (matchesRemove) {
issue.removeLabel(this.label);
}
return matchesRemove;
return
!
matchesRemove;
});
}
}
app/assets/javascripts/boards/services/board_service.js.es6
View file @
17c576c1
...
...
@@ -55,7 +55,8 @@ class BoardService {
}
getIssuesForList (id, filter = {}) {
const data = _.extend({ id }, filter)
let data = { id };
Object.keys(filter).forEach((key) => { data[key] = filter[key]; });
this.setCSRF();
return this.issues.get(data);
...
...
app/assets/javascripts/boards/stores/boards_store.js.es6
View file @
17c576c1
...
...
@@ -2,7 +2,7 @@
w.BoardsStore = {
disabled: false,
state: {},
create
: function
() {
create () {
this.state.lists = [];
this.state.filters = {
author_id: gl.utils.getParameterValues('author_id')[0],
...
...
@@ -11,26 +11,29 @@
label_name: gl.utils.getParameterValues('label_name[]')
};
},
addList
: function
(listObj) {
addList (listObj) {
const list = new List(listObj);
this.state.lists.push(list);
return list;
},
new
: function
(listObj) {
new (listObj) {
const list = this.addList(listObj),
backlogList = this.findList('type', 'backlog');
list
.save()
.then(
function ()
{
.then(
() =>
{
// Remove any new issues from the backlog
// as they will be visible in the new list
_.each(list.issues, backlogList.removeIssue.bind(backlogList));
for (let i = 0, issuesLength = list.issues.length; i < issuesLength; i++) {
const issue = list.issues[i];
backlogList.removeIssue(issue);
}
});
this.removeBlankState();
},
updateNewListDropdown
: function
() {
updateNewListDropdown () {
const glDropdown = $('.js-new-board-list').data('glDropdown');
if (glDropdown) {
...
...
@@ -41,13 +44,13 @@
}
}
},
shouldAddBlankState
: function
() {
shouldAddBlankState () {
// Decide whether to add the blank state
return !(
!!_.find(this.state.lists, function (list)
{
return !(
this.state.lists.filter((list) =>
{
return list.type !== 'backlog' && list.type !== 'done';
}));
})
[0]
);
},
addBlankState
: function
() {
addBlankState () {
if (this.welcomeIsHidden() || this.disabled) return;
if (this.shouldAddBlankState()) {
...
...
@@ -59,26 +62,26 @@
});
}
},
removeBlankState
: function
() {
removeBlankState () {
this.removeList('blank');
$.cookie('issue_board_welcome_hidden', 'true', {
expires: 365 * 10
});
},
welcomeIsHidden
: function
() {
welcomeIsHidden () {
return $.cookie('issue_board_welcome_hidden') === 'true';
},
removeList
: function
(id) {
removeList (id) {
const list = this.findList('id', id);
if (!list) return;
this.state.lists =
_.reject(this.state.lists,
(list) => {
return list.id
=
== id;
this.state.lists =
this.state.lists.filter(
(list) => {
return list.id
!
== id;
});
},
moveList
: function
(oldIndex, newIndex) {
moveList (oldIndex, newIndex) {
if (oldIndex === newIndex) return;
const listFrom = this.findList('position', oldIndex),
...
...
@@ -95,13 +98,13 @@
listFrom.update();
},
moveCardToList
: function
(listFromId, listToId, issueId) {
moveCardToList (listFromId, listToId, issueId) {
const listFrom = this.findList('id', listFromId),
listTo = this.findList('id', listToId),
issueTo = listTo.findIssue(issueId),
issue = listFrom.findIssue(issueId),
issueLists = issue.getLists(),
listLabels = issueLists.map(
function (issue)
{
listLabels = issueLists.map(
(issue) =>
{
return issue.label;
});
...
...
@@ -111,20 +114,21 @@
}
if (listTo.type === 'done' && listFrom.type !== 'backlog') {
_.each(issueLists, function (list) {
for (let i = 0, listsLength = issueLists.length; i < listsLength; i++) {
const list = issueLists[i];
list.removeIssue(issue);
}
);
}
issue.removeLabels(listLabels);
} else {
listFrom.removeIssue(issue);
}
},
findList
: function
(key, val) {
return
_.find(this.state.lists,
(list) => {
findList (key, val) {
return
this.state.lists.filter(
(list) => {
return list[key] === val;
});
})
[0]
;
},
updateFiltersUrl
: function
() {
updateFiltersUrl () {
history.pushState(null, null, `?${$.param(this.state.filters)}`);
}
};
...
...
app/assets/stylesheets/pages/boards.scss
View file @
17c576c1
...
...
@@ -240,7 +240,7 @@
}
.is-ghost
{
opacity
:
0
.
5
;
opacity
:
0
.
3
;
}
.is-dragging
{
...
...
app/views/projects/boards/show.html.haml
View file @
17c576c1
...
...
@@ -11,9 +11,9 @@
=
render
'shared/issuable/filter'
,
type: :boards
.boards-list
#board-app
{
"v-cloak"
=>
true
,
"
:endpoint"
=>
"'#{namespace_project_board_path(@project.namespace, @project)}'
"
,
"
:
disabled"
=>
"#{!can?(current_user, :admin_list, @project)}"
,
"
:issue-link-base"
=>
"'#{namespace_project_issues_path(@project.namespace, @project)}'
"
}
"
data-endpoint"
=>
"#{namespace_project_board_path(@project.namespace, @project)}
"
,
"
data-
disabled"
=>
"#{!can?(current_user, :admin_list, @project)}"
,
"
data-issue-link-base"
=>
"#{namespace_project_issues_path(@project.namespace, @project)}
"
}
.boards-app-loading.text-center
{
"v-if"
=>
"loading"
}
=
icon
(
"spinner spin"
)
=
render
"projects/boards/components/board"
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment