diff options
author | Phil Hughes <me@iamphill.com> | 2017-02-01 20:02:17 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-02-03 21:03:40 +0300 |
commit | e4d1e1437d43a34656f4343fc53431695742a989 (patch) | |
tree | d83026887abeea5123174dc6151c4cea54fe2259 /app/assets/javascripts/boards | |
parent | e6add00cece0d53b7072096e23af82d1804b8342 (diff) |
Added all filters
Diffstat (limited to 'app/assets/javascripts/boards')
7 files changed, 140 insertions, 58 deletions
diff --git a/app/assets/javascripts/boards/components/modal/filters.js.es6 b/app/assets/javascripts/boards/components/modal/filters.js.es6 index 206948b70f4..c6c22dd24c9 100644 --- a/app/assets/javascripts/boards/components/modal/filters.js.es6 +++ b/app/assets/javascripts/boards/components/modal/filters.js.es6 @@ -1,15 +1,19 @@ /* 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> `, }); diff --git a/app/assets/javascripts/boards/components/modal/filters/label.js.es6 b/app/assets/javascripts/boards/components/modal/filters/label.js.es6 new file mode 100644 index 00000000000..cfea0780983 --- /dev/null +++ b/app/assets/javascripts/boards/components/modal/filters/label.js.es6 @@ -0,0 +1,48 @@ +/* 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> + `, + }); +})(); diff --git a/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6 b/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6 new file mode 100644 index 00000000000..14c95cb2dae --- /dev/null +++ b/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6 @@ -0,0 +1,49 @@ +/* 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> + `, + }); +})(); diff --git a/app/assets/javascripts/boards/components/modal/filters/user.js.es6 b/app/assets/javascripts/boards/components/modal/filters/user.js.es6 index b440abf84e9..d45649af4cd 100644 --- a/app/assets/javascripts/boards/components/modal/filters/user.js.es6 +++ b/app/assets/javascripts/boards/components/modal/filters/user.js.es6 @@ -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 diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6 index 87c407f5fec..cd672e0f1b2 100644 --- a/app/assets/javascripts/boards/components/modal/header.js.es6 +++ b/app/assets/javascripts/boards/components/modal/header.js.es6 @@ -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" diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6 index 5bcbd2668af..49f4c73151e 100644 --- a/app/assets/javascripts/boards/components/modal/index.js.es6 +++ b/app/assets/javascripts/boards/components/modal/index.js.es6 @@ -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" diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6 index 95b0b3f9484..ed42af301cd 100644 --- a/app/assets/javascripts/boards/stores/modal_store.js.es6 +++ b/app/assets/javascripts/boards/stores/modal_store.js.es6 @@ -21,6 +21,7 @@ author_id: '', assignee_id: '', milestone_title: '', + label_name: [], }, }; } |