Commit e4d1e143 authored by Phil Hughes's avatar Phil Hughes

Added all filters

parent e6add00c
/* global Vue */ /* global Vue */
/* global MilestoneSelect */
//= require_tree ./filters //= require_tree ./filters
(() => { (() => {
const ModalStore = gl.issueBoards.ModalStore; const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalFilters = Vue.extend({ gl.issueBoards.ModalFilters = Vue.extend({
mounted() { props: {
new MilestoneSelect(); projectId: {
type: Number,
required: true,
},
}, },
components: { components: {
'user-filter': gl.issueBoards.ModalFilterUser, 'user-filter': gl.issueBoards.ModalFilterUser,
'milestone-filter': gl.issueBoards.ModalFilterMilestone,
'label-filter': gl.issueBoards.ModalLabelFilter,
}, },
template: ` template: `
<div class="modal-filters"> <div class="modal-filters">
...@@ -17,58 +21,17 @@ ...@@ -17,58 +21,17 @@
dropdown-class-name="dropdown-menu-author" dropdown-class-name="dropdown-menu-author"
toggle-class-name="js-user-search js-author-search" toggle-class-name="js-user-search js-author-search"
toggle-label="Author" toggle-label="Author"
field-name="author_id"></user-filter> field-name="author_id"
:project-id="projectId"></user-filter>
<user-filter <user-filter
dropdown-class-name="dropdown-menu-author" dropdown-class-name="dropdown-menu-author"
toggle-class-name="js-assignee-search" toggle-class-name="js-assignee-search"
toggle-label="Assignee" toggle-label="Assignee"
field-name="assignee_id" field-name="assignee_id"
:null-user="true"></user-filter> :null-user="true"
<div class="dropdown"> :project-id="projectId"></user-filter>
<button <milestone-filter></milestone-filter>
class="dropdown-menu-toggle js-milestone-select" <label-filter></label-filter>
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>
</div> </div>
`, `,
}); });
......
/* 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>
`,
});
})();
/* 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>
`,
});
})();
...@@ -25,9 +25,13 @@ ...@@ -25,9 +25,13 @@
required: false, required: false,
default: false, default: false,
}, },
projectId: {
type: Number,
required: true,
},
}, },
mounted() { mounted() {
new UsersSelect(); new UsersSelect(null, this.$refs.dropdown);
}, },
computed: { computed: {
currentUsername() { currentUsername() {
...@@ -51,9 +55,12 @@ ...@@ -51,9 +55,12 @@
:data-any-user="'Any ' + toggleLabel" :data-any-user="'Any ' + toggleLabel"
:data-null-user="nullUser" :data-null-user="nullUser"
:data-field-name="fieldName" :data-field-name="fieldName"
:data-project-id="12" :data-project-id="projectId"
:data-first-user="currentUsername"> :data-first-user="currentUsername"
ref="dropdown">
<span class="dropdown-toggle-text">
{{ toggleLabel }} {{ toggleLabel }}
</span>
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</button> </button>
<div <div
......
...@@ -6,6 +6,12 @@ ...@@ -6,6 +6,12 @@
gl.issueBoards.ModalHeader = Vue.extend({ gl.issueBoards.ModalHeader = Vue.extend({
mixins: [gl.issueBoards.ModalMixins], mixins: [gl.issueBoards.ModalMixins],
props: {
projectId: {
type: Number,
required: true,
},
},
data() { data() {
return ModalStore.store; return ModalStore.store;
}, },
...@@ -30,6 +36,7 @@ ...@@ -30,6 +36,7 @@
}, },
components: { components: {
'modal-tabs': gl.issueBoards.ModalTabs, 'modal-tabs': gl.issueBoards.ModalTabs,
'modal-filters': gl.issueBoards.ModalFilters,
}, },
template: ` template: `
<div> <div>
...@@ -50,7 +57,9 @@ ...@@ -50,7 +57,9 @@
<div <div
class="add-issues-search append-bottom-10" class="add-issues-search append-bottom-10"
v-if="showSearch"> v-if="showSearch">
<modal-filters></modal-filters> <modal-filters
:project-id="projectId">
</modal-filters>
<input <input
placeholder="Search issues..." placeholder="Search issues..."
class="form-control" class="form-control"
......
...@@ -25,6 +25,10 @@ ...@@ -25,6 +25,10 @@
type: String, type: String,
required: true, required: true,
}, },
projectId: {
type: Number,
required: true,
},
}, },
data() { data() {
return ModalStore.store; return ModalStore.store;
...@@ -52,8 +56,7 @@ ...@@ -52,8 +56,7 @@
}, },
filter: { filter: {
handler() { handler() {
this.issues = []; this.loadIssues(true);
this.loadIssues();
}, },
deep: true, deep: true,
} }
...@@ -119,7 +122,9 @@ ...@@ -119,7 +122,9 @@
class="add-issues-modal" class="add-issues-modal"
v-if="showAddIssuesModal"> v-if="showAddIssuesModal">
<div class="add-issues-container"> <div class="add-issues-container">
<modal-header></modal-header> <modal-header
:project-id="projectId">
</modal-header>
<modal-list <modal-list
:issue-link-base="issueLinkBase" :issue-link-base="issueLinkBase"
:root-path="rootPath" :root-path="rootPath"
......
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
author_id: '', author_id: '',
assignee_id: '', assignee_id: '',
milestone_title: '', milestone_title: '',
label_name: [],
}, },
}; };
} }
......
...@@ -4,10 +4,17 @@ ...@@ -4,10 +4,17 @@
(function() { (function() {
this.LabelsSelect = (function() { this.LabelsSelect = (function() {
function LabelsSelect() { function LabelsSelect(els) {
var _this; var _this, $els;
_this = this; _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; 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); $dropdown = $(dropdown);
$dropdownContainer = $dropdown.closest('.labels-filter'); $dropdownContainer = $dropdown.closest('.labels-filter');
...@@ -324,7 +331,7 @@ ...@@ -324,7 +331,7 @@
multiSelect: $dropdown.hasClass('js-multiselect'), multiSelect: $dropdown.hasClass('js-multiselect'),
vue: $dropdown.hasClass('js-issue-board-sidebar'), vue: $dropdown.hasClass('js-issue-board-sidebar'),
clicked: function(label, $el, e, isMarking) { clicked: function(label, $el, e, isMarking) {
var isIssueIndex, isMRIndex, page; var isIssueIndex, isMRIndex, page, boardsModel;
page = $('body').data('page'); page = $('body').data('page');
isIssueIndex = page === 'projects:issues:index'; isIssueIndex = page === 'projects:issues:index';
...@@ -346,22 +353,31 @@ ...@@ -346,22 +353,31 @@
return; 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) { if (label.isAny) {
gl.issueBoards.BoardsStore.state.filters['label_name'] = []; boardsModel['label_name'] = [];
} }
else if ($el.hasClass('is-active')) { else if ($el.hasClass('is-active')) {
gl.issueBoards.BoardsStore.state.filters['label_name'].push(label.title); boardsModel['label_name'].push(label.title);
} }
else { else {
var filters = gl.issueBoards.BoardsStore.state.filters['label_name']; var filters = boardsModel['label_name'];
filters = filters.filter(function (filteredLabel) { filters = filters.filter(function (filteredLabel) {
return filteredLabel !== label.title; return filteredLabel !== label.title;
}); });
gl.issueBoards.BoardsStore.state.filters['label_name'] = filters; boardsModel['label_name'] = filters;
} }
if (!$dropdown.closest('.add-issues-modal').length) {
gl.issueBoards.BoardsStore.updateFiltersUrl(); gl.issueBoards.BoardsStore.updateFiltersUrl();
}
e.preventDefault(); e.preventDefault();
return; return;
} }
......
...@@ -5,12 +5,19 @@ ...@@ -5,12 +5,19 @@
(function() { (function() {
this.MilestoneSelect = (function() { this.MilestoneSelect = (function() {
function MilestoneSelect(currentProject) { function MilestoneSelect(currentProject, els) {
var _this; var _this;
if (currentProject != null) { if (currentProject != null) {
_this = this; _this = this;
this.currentProject = JSON.parse(currentProject); this.currentProject = JSON.parse(currentProject);
} }
$els = $(els);
if (!els) {
$els = $('.js-label-select');
}
$('.js-milestone-select').each(function(i, dropdown) { $('.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; var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, useId, showMenuAbove;
$dropdown = $(dropdown); $dropdown = $(dropdown);
...@@ -108,7 +115,7 @@ ...@@ -108,7 +115,7 @@
}, },
vue: $dropdown.hasClass('js-issue-board-sidebar'), vue: $dropdown.hasClass('js-issue-board-sidebar'),
clicked: function(selected, $el, e) { clicked: function(selected, $el, e) {
var data, isIssueIndex, isMRIndex, page; var data, isIssueIndex, isMRIndex, page, boardsStore;
page = $('body').data('page'); page = $('body').data('page');
isIssueIndex = page === 'projects:issues:index'; isIssueIndex = page === 'projects:issues:index';
isMRIndex = (page === page && page === 'projects:merge_requests:index'); isMRIndex = (page === page && page === 'projects:merge_requests:index');
...@@ -116,11 +123,19 @@ ...@@ -116,11 +123,19 @@
e.preventDefault(); e.preventDefault();
return; return;
} }
if ($el.closest('.add-issues-modal').length) {
gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = selected.name; if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
} else if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) { !$dropdown.closest('.add-issues-modal').length) {
gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = selected.name; 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(); gl.issueBoards.BoardsStore.updateFiltersUrl();
}
e.preventDefault(); e.preventDefault();
} else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) { } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
if (selected.name != null) { if (selected.name != null) {
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
slice = [].slice; slice = [].slice;
this.UsersSelect = (function() { this.UsersSelect = (function() {
function UsersSelect(currentUser) { function UsersSelect(currentUser, els) {
var $els;
this.users = bind(this.users, this); this.users = bind(this.users, this);
this.user = bind(this.user, this); this.user = bind(this.user, this);
this.usersPath = "/autocomplete/users.json"; this.usersPath = "/autocomplete/users.json";
...@@ -20,7 +21,14 @@ ...@@ -20,7 +21,14 @@
this.currentUser = JSON.parse(currentUser); 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) { return function(i, dropdown) {
var options = {}; var options = {};
var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, firstUser, issueURL, selectedId, showAnyUser, showNullUser, showMenuAbove; var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, firstUser, issueURL, selectedId, showAnyUser, showNullUser, showMenuAbove;
......
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