From 505f6f14e92548d3e413a9a9ffb35f83f36144cd Mon Sep 17 00:00:00 2001
From: Prateeksha Singh <pratu16x7@gmail.com>
Date: Thu, 26 Jul 2018 08:06:21 +0530
Subject: [PATCH] [hub][publish] select/deselect all items

---
 erpnext/public/js/hub/hub_listing.js | 87 +++++++++++++++++-----------
 erpnext/public/less/hub.less         |  5 ++
 2 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/erpnext/public/js/hub/hub_listing.js b/erpnext/public/js/hub/hub_listing.js
index 9061ae62d3..3107c674be 100644
--- a/erpnext/public/js/hub/hub_listing.js
+++ b/erpnext/public/js/hub/hub_listing.js
@@ -487,20 +487,12 @@ erpnext.hub.Register = class Register extends SubPage {
 			.appendTo(this.$wrapper);
 		this.$form_container = $('<div class="col-md-8 col-md-offset-1 form-container">')
 			.appendTo(this.$wrapper);
-
-		// const title = __('Become a Seller');
-		// this.$register_container.append($(`<h5>${title}</h5>`));
 	}
 
 	refresh() {
-		// company, company_email, logo, description
 		this.render();
 	}
 
-	// make_input() {
-	// 	//
-	// }
-
 	render() {
 		this.make_field_group();
 	}
@@ -576,9 +568,53 @@ erpnext.hub.Register = class Register extends SubPage {
 }
 
 erpnext.hub.Publish = class Publish extends SubPage {
-	constructor(parent) {
-		super(parent);
-		// this.selected_items = [];
+	make_wrapper() {
+		super.make_wrapper();
+		const title_html = `<b>${__('Select Products to Publish')}</b>`;
+		const subtitle_html = `<p class="text-muted">
+			${__(`Only products with an image and description can be published.
+			Please update them if an item in your inventory does not appear.`)}
+		</p>`;
+		const publish_button_html = `<button class="btn btn-primary btn-sm publish-button">
+			<i class="visible-xs octicon octicon-check"></i>
+			<span class="hidden-xs">Publish</span>
+		</button>`;
+
+		const select_all_button = `<button class="btn btn-secondary btn-default btn-xs margin-right select-all">Select All</button>`;
+		const deselect_all_button = `<button class="btn btn-secondary btn-default btn-xs deselect-all">Deselect All</button>`;
+
+		const search_html = `<div class="hub-search-container">
+			<input type="text" class="form-control" placeholder="Search Items">
+		</div>`;
+
+		const subpage_header = $(`
+			<div class='subpage-title flex'>
+				<div>
+					${title_html}
+					${subtitle_html}
+				</div>
+				${publish_button_html}
+			</div>
+
+			${search_html}
+
+			${select_all_button}
+			${deselect_all_button}
+		`);
+
+		this.$wrapper.append(subpage_header);
+
+		this.setup_events();
+	}
+
+	setup_events() {
+		this.$wrapper.find('.select-all').on('click', () => {
+			this.$wrapper.find('.hub-card').addClass('active');
+		});
+
+		this.$wrapper.find('.deselect-all').on('click', () => {
+			this.$wrapper.find('.hub-card').removeClass('active');
+		});
 	}
 
 	refresh() {
@@ -589,26 +625,13 @@ erpnext.hub.Publish = class Publish extends SubPage {
 	}
 
 	render(items) {
-		const html = get_item_card_container_html(
-			items,
-
-			__('Select Products to Publish'),
-
-			__(`Only products with an image and description can be published.
-			Please update them if an item in your inventory does not appear.`),
-
-			`<div class="hub-search-container">
-				<input type="text" class="form-control" placeholder="Search Items">
-			</div>`
-		);
-
-		const container = $(html);
-		container.addClass('static').on('click', '.hub-card', (e) => {
+		const items_container = $(get_item_card_container_html(items));
+		items_container.addClass('static').on('click', '.hub-card', (e) => {
 			const $target = $(e.currentTarget);
 			$target.toggleClass('active');
 		});
 
-		this.$wrapper.append(container);
+		this.$wrapper.append(items_container);
 	}
 
 	get_valid_items() {
@@ -616,20 +639,14 @@ erpnext.hub.Publish = class Publish extends SubPage {
 	}
 }
 
-function get_item_card_container_html(items, title, subtitle='', search_html='') {
+function get_item_card_container_html(items, title='') {
 	const items_html = (items || []).map(item => get_item_card_html(item)).join('');
 
 	const html = `<div class="row hub-card-container">
-		<div class="col-md-12 margin-bottom">
+		<div class="col-sm-12 margin-bottom">
 			<b>${title}</b>
-
-			<p class="text-muted">${subtitle}</p>
-
-			${search_html}
 		</div>
-
 		${items_html}
-
 	</div>`;
 
 	return html;
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 1243743032..8c7392ad49 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -31,6 +31,11 @@ body[data-route^="marketplace/"] {
 		border-color: #59b81c;
 	}
 
+	.subpage-title.flex {
+		align-items: flex-start;
+		justify-content: space-between;
+	}
+
 	.hub-card {
 		border: 1px solid @border-color;
 		margin-bottom: 25px;