Commit e6add00c authored by Phil Hughes's avatar Phil Hughes

Added user filter component

parent 4652b08f
/* global Vue */ /* global Vue */
/* global UsersSelect */
/* global MilestoneSelect */ /* global MilestoneSelect */
//= require_tree ./filters
(() => { (() => {
const ModalStore = gl.issueBoards.ModalStore; const ModalStore = gl.issueBoards.ModalStore;
gl.issueBoards.ModalFilters = Vue.extend({ gl.issueBoards.ModalFilters = Vue.extend({
computed: {
currentUsername() {
return gon.current_username;
},
},
mounted() { mounted() {
new UsersSelect();
new MilestoneSelect(); new MilestoneSelect();
}, },
components: {
'user-filter': gl.issueBoards.ModalFilterUser,
},
template: ` template: `
<div class="modal-filters"> <div class="modal-filters">
<div class="dropdown"> <user-filter
<button dropdown-class-name="dropdown-menu-author"
class="dropdown-menu-toggle js-user-search js-author-search" toggle-class-name="js-user-search js-author-search"
type="button" toggle-label="Author"
data-toggle="dropdown" field-name="author_id"></user-filter>
data-any-user="Any Author" <user-filter
data-current-user="true" dropdown-class-name="dropdown-menu-author"
data-field-name="author_id" toggle-class-name="js-assignee-search"
:data-project-id="12" toggle-label="Assignee"
:data-first-user="currentUsername"> field-name="assignee_id"
Author :null-user="true"></user-filter>
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
<div class="dropdown-title">
<span>Filter by author</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 authors"
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-user-search js-assignee-search"
type="button"
data-toggle="dropdown"
data-any-user="Any Assignee"
data-null-user="true"
data-current-user="true"
data-field-name="assignee_id"
:data-project-id="12"
:data-first-user="currentUsername">
Assignee
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
<div class="dropdown-title">
<span>Filter by assignee</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 assignee"
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"> <div class="dropdown">
<button <button
class="dropdown-menu-toggle js-milestone-select" class="dropdown-menu-toggle js-milestone-select"
......
/* global Vue */
/* global UsersSelect */
(() => {
gl.issueBoards.ModalFilterUser = Vue.extend({
props: {
toggleClassName: {
type: String,
required: true,
},
dropdownClassName: {
type: String,
required: false,
default: '',
},
toggleLabel: {
type: String,
required: true,
},
fieldName: {
type: String,
required: true,
},
nullUser: {
type: Boolean,
required: false,
default: false,
},
},
mounted() {
new UsersSelect();
},
computed: {
currentUsername() {
return gon.current_username;
},
dropdownTitle() {
return `Filter by ${this.toggleLabel.toLowerCase()}`;
},
inputPlaceholder() {
return `Search ${this.toggleLabel.toLowerCase()}`;
},
},
template: `
<div class="dropdown">
<button
class="dropdown-menu-toggle js-user-search"
:class="toggleClassName"
type="button"
data-toggle="dropdown"
data-current-user="true"
:data-any-user="'Any ' + toggleLabel"
:data-null-user="nullUser"
:data-field-name="fieldName"
:data-project-id="12"
:data-first-user="currentUsername">
{{ toggleLabel }}
<i class="fa fa-chevron-down"></i>
</button>
<div
class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable"
:class="dropdownClassName">
<div class="dropdown-title">
{{ dropdownTitle }}
<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"
autocomplete="off"
:placeholder="inputPlaceholder" />
<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>
`,
});
})();
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