Skip to content
Snippets Groups Projects
Commit e4d1e143 authored by Phil Hughes's avatar Phil Hughes
Browse files

Added all filters

parent e6add00c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 198 additions and 77 deletions
app/assets/javascripts/boards/components/modal/filters.js.es6
+ 13
− 50
View file @ e4d1e143
/* global Vue */
/* global MilestoneSelect */
//= require_tree ./filters
(() => {
const ModalStore = gl.issueBoards.ModalStore;
 
gl.issueBoards.ModalFilters = Vue.extend({
mounted() {
new MilestoneSelect();
props: {
projectId: {
type: Number,
required: true,
},
},
components: {
'user-filter': gl.issueBoards.ModalFilterUser,
'milestone-filter': gl.issueBoards.ModalFilterMilestone,
'label-filter': gl.issueBoards.ModalLabelFilter,
},
template: `
<div class="modal-filters">
@@ -17,58 +21,17 @@
dropdown-class-name="dropdown-menu-author"
toggle-class-name="js-user-search js-author-search"
toggle-label="Author"
field-name="author_id"></user-filter>
field-name="author_id"
:project-id="projectId"></user-filter>
<user-filter
dropdown-class-name="dropdown-menu-author"
toggle-class-name="js-assignee-search"
toggle-label="Assignee"
field-name="assignee_id"
:null-user="true"></user-filter>
<div class="dropdown">
<button
class="dropdown-menu-toggle js-milestone-select"
type="button"
data-toggle="dropdown"
data-show-any="true"
data-show-upcoming="true"
data-field-name="milestone_title"
:data-project-id="12"
:data-milestones="'/root/test/milestones.json'">
Milestone
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
<div class="dropdown-title">
<span>Filter by milestone</span>
<button
class="dropdown-title-button dropdown-menu-close"
aria-label="Close"
type="button">
<i class="fa fa-times dropdown-menu-close-icon"></i>
</button>
</div>
<div class="dropdown-input">
<input
type="search"
class="dropdown-input-field"
placeholder="Search milestones"
autocomplete="off" />
<i class="fa fa-search dropdown-input-search"></i>
<i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
</div>
<div class="dropdown-content"></div>
<div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
</div>
</div>
<div class="dropdown">
<button
class="dropdown-menu-toggle js-label-select js-multiselect"
type="button"
data-toggle="dropdown">
Label
<i class="fa fa-chevron-down"></i>
</button>
</div>
:null-user="true"
:project-id="projectId"></user-filter>
<milestone-filter></milestone-filter>
<label-filter></label-filter>
</div>
`,
});
app/assets/javascripts/boards/components/modal/filters/label.js.es6 0 → 100644
+ 48
− 0
View file @ e4d1e143
/* global Vue */
/* global LabelSelect */
(() => {
gl.issueBoards.ModalLabelFilter = Vue.extend({
mounted() {
new LabelsSelect(this.$refs.dropdown);
},
template: `
<div class="dropdown">
<button
class="dropdown-menu-toggle js-label-select js-multiselect js-extra-options"
type="button"
data-toggle="dropdown"
data-labels="/root/test/labels.json"
data-show-any="true"
data-show-no="true"
ref="dropdown">
<span class="dropdown-toggle-text">
Label
</span>
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
<div class="dropdown-title">
Filter by label
<button
class="dropdown-title-button dropdown-menu-close"
aria-label="Close"
type="button">
<i class="fa fa-times dropdown-menu-close-icon"></i>
</button>
</div>
<div class="dropdown-input">
<input
type="search"
class="dropdown-input-field"
placeholder="Search"
autocomplete="off" />
<i class="fa fa-search dropdown-input-search"></i>
<i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
</div>
<div class="dropdown-content"></div>
<div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
</div>
</div>
`,
});
})();
app/assets/javascripts/boards/components/modal/filters/milestone.js.es6 0 → 100644
+ 49
− 0
View file @ e4d1e143
/* global Vue */
/* global MilestoneSelect */
(() => {
gl.issueBoards.ModalFilterMilestone = Vue.extend({
mounted() {
new MilestoneSelect(null, this.$refs.dropdown);
},
template: `
<div class="dropdown">
<button
class="dropdown-menu-toggle js-milestone-select"
type="button"
data-toggle="dropdown"
data-show-any="true"
data-show-upcoming="true"
data-field-name="milestone_title"
:data-milestones="'/root/test/milestones.json'"
ref="dropdown">
<span class="dropdown-toggle-text">
Milestone
</span>
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
<div class="dropdown-title">
<span>Filter by milestone</span>
<button
class="dropdown-title-button dropdown-menu-close"
aria-label="Close"
type="button">
<i class="fa fa-times dropdown-menu-close-icon"></i>
</button>
</div>
<div class="dropdown-input">
<input
type="search"
class="dropdown-input-field"
placeholder="Search milestones"
autocomplete="off" />
<i class="fa fa-search dropdown-input-search"></i>
<i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
</div>
<div class="dropdown-content"></div>
<div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
</div>
</div>
`,
});
})();
app/assets/javascripts/boards/components/modal/filters/user.js.es6
+ 11
− 4
View file @ e4d1e143
@@ -25,9 +25,13 @@
required: false,
default: false,
},
projectId: {
type: Number,
required: true,
},
},
mounted() {
new UsersSelect();
new UsersSelect(null, this.$refs.dropdown);
},
computed: {
currentUsername() {
@@ -51,9 +55,12 @@
:data-any-user="'Any ' + toggleLabel"
:data-null-user="nullUser"
:data-field-name="fieldName"
:data-project-id="12"
:data-first-user="currentUsername">
{{ toggleLabel }}
:data-project-id="projectId"
:data-first-user="currentUsername"
ref="dropdown">
<span class="dropdown-toggle-text">
{{ toggleLabel }}
</span>
<i class="fa fa-chevron-down"></i>
</button>
<div
app/assets/javascripts/boards/components/modal/header.js.es6
+ 10
− 1
View file @ e4d1e143
@@ -6,6 +6,12 @@
 
gl.issueBoards.ModalHeader = Vue.extend({
mixins: [gl.issueBoards.ModalMixins],
props: {
projectId: {
type: Number,
required: true,
},
},
data() {
return ModalStore.store;
},
@@ -30,6 +36,7 @@
},
components: {
'modal-tabs': gl.issueBoards.ModalTabs,
'modal-filters': gl.issueBoards.ModalFilters,
},
template: `
<div>
@@ -50,7 +57,9 @@
<div
class="add-issues-search append-bottom-10"
v-if="showSearch">
<modal-filters></modal-filters>
<modal-filters
:project-id="projectId">
</modal-filters>
<input
placeholder="Search issues..."
class="form-control"
app/assets/javascripts/boards/components/modal/index.js.es6
+ 8
− 3
View file @ e4d1e143
@@ -25,6 +25,10 @@
type: String,
required: true,
},
projectId: {
type: Number,
required: true,
},
},
data() {
return ModalStore.store;
@@ -52,8 +56,7 @@
},
filter: {
handler() {
this.issues = [];
this.loadIssues();
this.loadIssues(true);
},
deep: true,
}
@@ -119,7 +122,9 @@
class="add-issues-modal"
v-if="showAddIssuesModal">
<div class="add-issues-container">
<modal-header></modal-header>
<modal-header
:project-id="projectId">
</modal-header>
<modal-list
:issue-link-base="issueLinkBase"
:root-path="rootPath"
app/assets/javascripts/boards/stores/modal_store.js.es6
+ 1
− 0
View file @ e4d1e143
@@ -21,6 +21,7 @@
author_id: '',
assignee_id: '',
milestone_title: '',
label_name: [],
},
};
}
app/assets/javascripts/labels_select.js
+ 26
− 10
View file @ e4d1e143
@@ -4,10 +4,17 @@
 
(function() {
this.LabelsSelect = (function() {
function LabelsSelect() {
var _this;
function LabelsSelect(els) {
var _this, $els;
_this = this;
$('.js-label-select').each(function(i, dropdown) {
$els = $(els);
if (!els) {
$els = $('.js-label-select');
}
$els.each(function(i, dropdown) {
var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer;
$dropdown = $(dropdown);
$dropdownContainer = $dropdown.closest('.labels-filter');
@@ -324,7 +331,7 @@
multiSelect: $dropdown.hasClass('js-multiselect'),
vue: $dropdown.hasClass('js-issue-board-sidebar'),
clicked: function(label, $el, e, isMarking) {
var isIssueIndex, isMRIndex, page;
var isIssueIndex, isMRIndex, page, boardsModel;
 
page = $('body').data('page');
isIssueIndex = page === 'projects:issues:index';
@@ -346,22 +353,31 @@
return;
}
 
if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
!$dropdown.closest('.add-issues-modal').length) {
boardsModel = gl.issueBoards.BoardsStore.state.filters;
} else if ($dropdown.closest('.add-issues-modal').length) {
boardsModel = gl.issueBoards.ModalStore.store.filter;
}
if (boardsModel) {
if (label.isAny) {
gl.issueBoards.BoardsStore.state.filters['label_name'] = [];
boardsModel['label_name'] = [];
}
else if ($el.hasClass('is-active')) {
gl.issueBoards.BoardsStore.state.filters['label_name'].push(label.title);
boardsModel['label_name'].push(label.title);
}
else {
var filters = gl.issueBoards.BoardsStore.state.filters['label_name'];
var filters = boardsModel['label_name'];
filters = filters.filter(function (filteredLabel) {
return filteredLabel !== label.title;
});
gl.issueBoards.BoardsStore.state.filters['label_name'] = filters;
boardsModel['label_name'] = filters;
}
 
gl.issueBoards.BoardsStore.updateFiltersUrl();
if (!$dropdown.closest('.add-issues-modal').length) {
gl.issueBoards.BoardsStore.updateFiltersUrl();
}
e.preventDefault();
return;
}
app/assets/javascripts/milestone_select.js
+ 22
− 7
View file @ e4d1e143
@@ -5,12 +5,19 @@
 
(function() {
this.MilestoneSelect = (function() {
function MilestoneSelect(currentProject) {
function MilestoneSelect(currentProject, els) {
var _this;
if (currentProject != null) {
_this = this;
this.currentProject = JSON.parse(currentProject);
}
$els = $(els);
if (!els) {
$els = $('.js-label-select');
}
$('.js-milestone-select').each(function(i, dropdown) {
var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, useId, showMenuAbove;
$dropdown = $(dropdown);
@@ -108,7 +115,7 @@
},
vue: $dropdown.hasClass('js-issue-board-sidebar'),
clicked: function(selected, $el, e) {
var data, isIssueIndex, isMRIndex, page;
var data, isIssueIndex, isMRIndex, page, boardsStore;
page = $('body').data('page');
isIssueIndex = page === 'projects:issues:index';
isMRIndex = (page === page && page === 'projects:merge_requests:index');
@@ -116,11 +123,19 @@
e.preventDefault();
return;
}
if ($el.closest('.add-issues-modal').length) {
gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = selected.name;
} else if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = selected.name;
gl.issueBoards.BoardsStore.updateFiltersUrl();
if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
!$dropdown.closest('.add-issues-modal').length) {
boardsStore = gl.issueBoards.BoardsStore.state.filters;
} else if ($dropdown.closest('.add-issues-modal').length) {
boardsStore = gl.issueBoards.ModalStore.store.filter;
}
if (boardsStore) {
boardsStore[$dropdown.data('field-name')] = selected.name;
if (!$dropdown.closest('.add-issues-modal').length) {
gl.issueBoards.BoardsStore.updateFiltersUrl();
}
e.preventDefault();
} else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
if (selected.name != null) {
app/assets/javascripts/users_select.js
+ 10
− 2
View file @ e4d1e143
@@ -8,7 +8,8 @@
slice = [].slice;
 
this.UsersSelect = (function() {
function UsersSelect(currentUser) {
function UsersSelect(currentUser, els) {
var $els;
this.users = bind(this.users, this);
this.user = bind(this.user, this);
this.usersPath = "/autocomplete/users.json";
@@ -20,7 +21,14 @@
this.currentUser = JSON.parse(currentUser);
}
}
$('.js-user-search').each((function(_this) {
$els = $(els);
if (!els) {
$els = $('.js-label-select');
}
$els.each((function(_this) {
return function(i, dropdown) {
var options = {};
var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, firstUser, issueURL, selectedId, showAnyUser, showNullUser, showMenuAbove;
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