Commit d9894a2f authored by Phil Hughes's avatar Phil Hughes Committed by Fatih Acet

Cleaned up some code

parent 6adb6cae
/* global Vue */
(() => {
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.DismissModal = Vue.extend({
data() {
return ModalStore.store;
},
methods: {
toggleModal(toggle) {
this.showAddIssuesModal = toggle;
},
},
template: `
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
@click="toggleModal(false)">
<span aria-hidden="true">×</span>
</button>
`,
});
})();
......@@ -32,8 +32,7 @@
gl.boardService.addMultipleIssues(list, issueIds);
// Add the issues on the frontend
issueIds.forEach((id) => {
const issue = this.issues.filter(fIssue => fIssue.id === id)[0];
this.selectedIssues.forEach((issue) => {
list.addIssue(issue);
list.issuesSize += 1;
});
......@@ -54,7 +53,7 @@
@click="addIssues">
{{ submitText }}
</button>
<span class="add-issues-footer-to-list">
<span class="inline add-issues-footer-to-list">
to list
</span>
<lists-dropdown></lists-dropdown>
......
/* global Vue */
//= require ./tabs
//= require ./dismiss
//= require ./search
(() => {
const ModalStore = gl.issueBoards.ModalStore;
......@@ -12,21 +10,52 @@
data() {
return ModalStore.store;
},
computed: {
selectAllText() {
if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
return 'Select all';
}
return 'Un-select all';
},
},
methods: {
toggleAll: ModalStore.toggleAll.bind(ModalStore),
},
components: {
'modal-dismiss': gl.issueBoards.DismissModal,
'modal-tabs': gl.issueBoards.ModalTabs,
'modal-search': gl.issueBoards.ModalSearch,
},
template: `
<div>
<header class="add-issues-header form-actions">
<h2>
Add issues
<modal-dismiss></modal-dismiss>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
@click="showAddIssuesModal = false">
<span aria-hidden="true">×</span>
</button>
</h2>
</header>
<modal-tabs v-if="!loading"></modal-tabs>
<modal-search v-if="!loading"></modal-search>
<div
class="add-issues-search prepend-top-10 append-bottom-10"
v-if="activeTab == 'all' && !loading">
<input
placeholder="Search issues..."
class="form-control"
type="search"
v-model="searchTerm" />
<button
type="button"
class="btn btn-success btn-inverted prepend-left-10"
@click="toggleAll">
{{ selectAllText }}
</button>
</div>
</div>
`,
});
......
......@@ -16,14 +16,16 @@
searchTerm() {
this.searchOperation();
},
},
mounted() {
showAddIssuesModal() {
if (this.showAddIssuesModal && !this.issues.length) {
this.loading = true;
this.loadIssues()
.then(() => {
this.loading = false;
});
}
},
},
methods: {
searchOperation: _.debounce(function() {
......@@ -59,7 +61,7 @@
<modal-header></modal-header>
<modal-list v-if="!loading"></modal-list>
<section
class="add-issues-list"
class="add-issues-list text-center"
v-if="loading">
<div class="add-issues-list-loading">
<i class="fa fa-spinner fa-spin"></i>
......
......@@ -64,9 +64,8 @@
'issue-card-inner': gl.issueBoards.IssueCardInner,
},
template: `
<section class="add-issues-list">
<div
class="add-issues-list-columns list-unstyled"
class="add-issues-list add-issues-list-columns"
ref="list"
v-show="!loading">
<div
......@@ -83,13 +82,12 @@
</issue-card-inner>
<span
v-if="issue.selected"
class="issue-card-selected">
class="issue-card-selected text-center">
<i class="fa fa-check"></i>
</span>
</div>
</div>
</div>
</section>
`,
});
})();
/* global Vue */
(() => {
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.ModalSearch = Vue.extend({
data() {
return ModalStore.store;
},
computed: {
selectAllText() {
if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
return 'Select all';
}
return 'Un-select all';
},
},
methods: {
toggleAll: ModalStore.toggleAll.bind(ModalStore),
},
template: `
<div
class="add-issues-search"
v-if="activeTab == 'all'">
<input
placeholder="Search issues..."
class="form-control"
type="search"
v-model="searchTerm" />
<button
type="button"
class="btn btn-success btn-inverted"
@click="toggleAll">
{{ selectAllText }}
</button>
</div>
`,
});
})();
......@@ -9,11 +9,6 @@
data() {
return ModalStore.store;
},
methods: {
changeTab(tab) {
this.activeTab = tab;
},
},
computed: {
selectedCount() {
return ModalStore.selectedCount();
......@@ -23,13 +18,13 @@
this.activeTab = 'all';
},
template: `
<div class="top-area">
<div class="top-area prepend-top-10">
<ul class="nav-links issues-state-filters">
<li :class="{ 'active': activeTab == 'all' }">
<a
href="#"
role="button"
@click.prevent="changeTab('all')">
@click.prevent="activeTab = 'all'">
<span>All issues</span>
<span class="badge">
{{ issues.length }}
......@@ -40,7 +35,7 @@
<a
href="#"
role="button"
@click.prevent="changeTab('selected')">
@click.prevent="activeTab = 'selected'">
<span>Selected issues</span>
<span class="badge">
{{ selectedCount }}
......
......@@ -358,7 +358,6 @@
.add-issues-modal {
display: flex;
align-items: center;
position: fixed;
top: 0;
right: 0;
......@@ -374,8 +373,7 @@
width: 90vw;
height: 85vh;
min-height: 500px;
margin-left: auto;
margin-right: auto;
margin: auto;
padding: 25px 15px 0;
background-color: $white-light;
border-radius: $border-radius-default;
......@@ -391,57 +389,19 @@
margin: 0;
font-size: 18px;
}
.top-area {
margin-bottom: 10px;
}
}
.add-issues-search {
display: flex;
margin-bottom: 10px;
margin-top: 10px;
.btn {
margin-left: 10px;
}
}
.add-issues-list {
display: flex;
flex: 1;
padding-top: 3px;
margin-left: -$gl-vert-padding;
margin-right: -$gl-vert-padding;
overflow-y: scroll;
}
.add-issues-list-loading {
align-self: center;
width: 100%;
padding-left: $gl-vert-padding;
padding-right: $gl-vert-padding;
font-size: 35px;
text-align: center;
}
.add-issues-footer {
margin-top: auto;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
}
.add-issues-footer-to-list {
display: inline-block;
padding-left: 6px;
padding-right: 6px;
line-height: 34px;
}
.add-issues-list-columns {
width: 100%;
padding-top: 3px;
.card-parent {
width: 100%;
......@@ -462,9 +422,26 @@
}
}
.all-issues-selected-empty {
.add-issues-list-loading {
align-self: center;
margin-bottom: 0;
width: 100%;
padding-left: $gl-vert-padding;
padding-right: $gl-vert-padding;
font-size: 35px;
}
.add-issues-footer {
margin-top: auto;
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
}
.add-issues-footer-to-list {
padding-left: $gl-vert-padding;
padding-right: $gl-vert-padding;
line-height: 34px;
}
.issue-card-selected {
......@@ -472,11 +449,9 @@
right: -3px;
top: -3px;
width: 20px;
height: 20px;
background-color: $blue-dark;
color: $white-light;
font-size: 12px;
text-align: center;
line-height: 20px;
border-radius: 50%;
}
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