Added user filter component
This commit is contained in:
Phil Hughes
parent
4652b08f19
commit
e6add00cec
2 changed files with 104 additions and 80 deletions
|
|
@ -1,94 +1,29 @@
|
|||
/* global Vue */
|
||||
/* global UsersSelect */
|
||||
/* global MilestoneSelect */
|
||||
//= require_tree ./filters
|
||||
(() => {
|
||||
const ModalStore = gl.issueBoards.ModalStore;
|
||||
|
||||
gl.issueBoards.ModalFilters = Vue.extend({
|
||||
computed: {
|
||||
currentUsername() {
|
||||
return gon.current_username;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
new UsersSelect();
|
||||
new MilestoneSelect();
|
||||
},
|
||||
components: {
|
||||
'user-filter': gl.issueBoards.ModalFilterUser,
|
||||
},
|
||||
template: `
|
||||
<div class="modal-filters">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="dropdown-menu-toggle js-user-search js-author-search"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
data-any-user="Any Author"
|
||||
data-current-user="true"
|
||||
data-field-name="author_id"
|
||||
:data-project-id="12"
|
||||
:data-first-user="currentUsername">
|
||||
Author
|
||||
<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>
|
||||
<user-filter
|
||||
dropdown-class-name="dropdown-menu-author"
|
||||
toggle-class-name="js-user-search js-author-search"
|
||||
toggle-label="Author"
|
||||
field-name="author_id"></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"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
/* 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>
|
||||
`,
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in a new issue