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

Created a modal store

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