Commit 240d8c8d authored by Phil Hughes's avatar Phil Hughes Committed by Fatih Acet

Created a modal store

parent acd86c12
/* global Vue */
(() => {
const Store = gl.issueBoards.BoardsStore;
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.DismissModal = Vue.extend({
data() {
return Store.modal;
return ModalStore.globalStore;
},
methods: {
toggleModal(toggle) {
......
//= require ./lists_dropdown
/* global Vue */
(() => {
const Store = gl.issueBoards.BoardsStore;
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.ModalFooter = Vue.extend({
data() {
return {
store: Store.modal,
};
return ModalStore.globalStore;
},
computed: {
submitDisabled() {
return !Store.modalSelectedCount();
return !ModalStore.selectedCount();
},
submitText() {
const count = Store.modalSelectedCount();
const count = ModalStore.selectedCount();
return `Add ${count} issue${count > 1 || !count ? 's' : ''}`;
},
},
methods: {
hideModal() {
this.store.showAddIssuesModal = false;
this.showAddIssuesModal = false;
},
addIssues() {
const list = this.store.selectedList;
const issueIds = this.store.selectedIssues.map(issue => issue.id);
const list = this.selectedList;
const issueIds = this.selectedIssues.map(issue => issue.id);
// Post the data to the backend
gl.boardService.addMultipleIssues(list, issueIds);
// Add the issues on the frontend
issueIds.forEach((id) => {
const issue = this.store.issues.filter(issue => issue.id == id)[0];
const issue = this.issues.filter(fIssue => fIssue.id === id)[0];
list.addIssue(issue);
list.issuesSize += 1;
});
......
......@@ -3,14 +3,14 @@
//= require ./search
/* global Vue */
(() => {
const Store = gl.issueBoards.BoardsStore;
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.IssuesModalHeader = Vue.extend({
data() {
return Store.modal;
return ModalStore.globalStore;
},
components: {
'modal-dismiss': gl.issueBoards.DismissModal,
......
......@@ -3,38 +3,27 @@
/* global Masonry */
(() => {
let listMasonry;
const Store = gl.issueBoards.BoardsStore;
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.ModalList = Vue.extend({
data() {
return Store.modal;
return ModalStore.globalStore;
},
watch: {
activeTab() {
this.$nextTick(() => {
this.destroyMasonry();
this.initMasonry();
});
this.initMasonry();
},
issues: {
handler() {
this.$nextTick(() => {
listMasonry.layout();
});
this.initMasonry();
},
deep: true,
}
},
},
computed: {
loading() {
return this.issues.length === 0;
},
selectedCount() {
return Store.modalSelectedCount();
},
loopIssues() {
if (this.activeTab === 'all') {
return this.issues;
......@@ -44,31 +33,24 @@
},
},
methods: {
toggleIssue(issueObj) {
const issue = issueObj;
issue.selected = !issue.selected;
if (issue.selected) {
this.selectedIssues.push(issue);
} else {
// Remove this issue
const index = this.selectedIssues.indexOf(issue);
this.selectedIssues.splice(index, 1);
}
},
toggleIssue: ModalStore.toggleIssue.bind(ModalStore),
showIssue(issue) {
if (this.activeTab === 'all') return true;
return issue.selected;
},
initMasonry() {
listMasonry = new Masonry(this.$refs.list, {
transitionDuration: 0,
this.$nextTick(() => {
this.destroyMasonry();
listMasonry = new Masonry(this.$refs.list, {
transitionDuration: 0,
});
});
},
destroyMasonry() {
if (listMasonry) {
listMasonry.destroy();
listMasonry = undefined;
}
},
},
......
......@@ -10,7 +10,7 @@
return {
modal: Store.modal,
state: Store.state,
}
};
},
computed: {
selected() {
......
......@@ -3,14 +3,14 @@
//= require ./footer
/* global Vue */
(() => {
const Store = gl.issueBoards.BoardsStore;
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.IssuesModal = Vue.extend({
data() {
return Store.modal;
return ModalStore.globalStore;
},
watch: {
searchTerm() {
......@@ -38,8 +38,7 @@
this.issues = [];
data.forEach((issueObj) => {
const issue = new ListIssue(issueObj);
const foundSelectedIssue = this.selectedIssues
.filter(filteredIssue => filteredIssue.id === issue.id)[0];
const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
issue.selected = foundSelectedIssue !== undefined;
this.issues.push(issue);
......
/* global Vue */
(() => {
const Store = gl.issueBoards.BoardsStore;
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.ModalSearch = Vue.extend({
data() {
return Store.modal;
return ModalStore.globalStore;
},
computed: {
selectAllText() {
if (Store.modalSelectedCount() !== this.issues.length || this.issues.length === 0) {
if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
return 'Select all';
}
......@@ -19,24 +19,7 @@
},
},
methods: {
toggleAll() {
const select = Store.modalSelectedCount() !== this.issues.length;
this.issues.forEach((issue) => {
const issueUpdate = issue;
if (issueUpdate.selected !== select) {
issueUpdate.selected = select;
if (select) {
this.selectedIssues.push(issueUpdate);
} else {
const index = this.selectedIssues.indexOf(issue);
this.selectedIssues.splice(index, 1);
}
}
});
},
toggleAll: ModalStore.toggleAll.bind(ModalStore),
},
template: `
<div
......
/* global Vue */
(() => {
const Store = gl.issueBoards.BoardsStore;
const ModalStore = gl.issueBoards.ModalStore;
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
gl.issueBoards.ModalTabs = Vue.extend({
data() {
return Store.modal;
return ModalStore.globalStore;
},
methods: {
changeTab(tab) {
......@@ -16,7 +16,7 @@
},
computed: {
selectedCount() {
return Store.modalSelectedCount();
return ModalStore.selectedCount();
},
},
destroyed() {
......
(() => {
window.gl = window.gl || {};
window.gl.issueBoards = window.gl.issueBoards || {};
class ModalStore {
constructor() {
this.globalStore = gl.issueBoards.BoardsStore.modal;
}
selectedCount() {
return this.globalStore.selectedIssues.length;
}
toggleIssue(issueObj) {
const issue = issueObj;
issue.selected = !issue.selected;
if (issue.selected) {
this.addSelectedIssue(issue);
} else {
this.removeSelectedIssue(issue);
}
}
toggleAll() {
const select = this.selectedCount() !== this.globalStore.issues.length;
this.globalStore.issues.forEach((issue) => {
const issueUpdate = issue;
if (issueUpdate.selected !== select) {
issueUpdate.selected = select;
if (select) {
this.addSelectedIssue(issue);
} else {
this.removeSelectedIssue(issue);
}
}
});
}
addSelectedIssue(issue) {
this.globalStore.selectedIssues.push(issue);
}
removeSelectedIssue(issue) {
const index = this.selectedIssueIndex(issue);
this.globalStore.selectedIssues.splice(index, 1);
}
selectedIssueIndex(issue) {
return this.globalStore.selectedIssues.indexOf(issue);
}
findSelectedIssue(issue) {
return this.globalStore.selectedIssues
.filter(filteredIssue => filteredIssue.id === issue.id)[0];
}
}
gl.issueBoards.ModalStore = new ModalStore();
})();
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