Grid View Behavior Updates

client/modules/core/main.js

@@ -235,6 +235,16 @@ export default {
     return settings.settings || {};
   },
 
+  isPreview() {
+    const profile = Meteor.user().profile;
+    const preferences = profile.preferences;
+    const reactionDashboard = preferences["reaction-dashboard"];
+    if (profile && preferences && reactionDashboard && reactionDashboard.viewAs && reactionDashboard.viewAs === "customer") {
+      return true;
+    }
+    return false;
+  },
+
   getPackageSettings(name) {
     return Packages.findOne({ name, shopId: this.getShopId() });
   },

imports/plugins/core/dashboard/client/containers/toolbarContainer.js

@@ -30,11 +30,26 @@ const handleAddProduct = () => {
 
 const handleViewContextChange = (event, value) => {
   Reaction.setUserPreferences("reaction-dashboard", "viewAs", value);
+
+  if (Reaction.isPreview() === true) {
+    // Save last action view state
+    const saveActionViewState = Reaction.getActionView();
+    Reaction.setUserPreferences("reaction-dashboard", "savedActionViewState", saveActionViewState);
+
+    // hideActionView during isPreview === true
+    Reaction.hideActionView();
+  } else {
+    // // Reload previous actionView, if saved. Otherwise, don't show.
+    // const savedActionViewState = Reaction.getUserPreferences("reaction-dashboard", "savedActionViewState");
+    //
+    // if (savedActionViewState) {
+    //   Reaction.showActionView(savedActionViewState);
+    // }
+  }
 };
 
 function composer(props, onData) {
   // Reactive data sources
-  const viewAs = Reaction.getUserPreferences("reaction-dashboard", "viewAs", "administrator");
   const routeName = Reaction.Router.getRouteName();
 
   // Standard variables
@@ -67,7 +82,7 @@ function composer(props, onData) {
   onData(null, {
     packageButtons,
     dashboardHeaderTemplate: props.data.dashboardHeader,
-    isPreview: viewAs === "customer" ? true : false,
+    isPreview: Reaction.isPreview(),
     isActionViewAtRootView: Reaction.isActionViewAtRootView(),
     actionViewIsOpen: Reaction.isActionViewOpen(),
 

imports/plugins/included/product-variant/client/templates/products/productGrid/controls.html

@@ -19,14 +19,6 @@
       </div>
       {{/if}}
 
-      <div>
-        {{> React VisibilityButton}}
-      </div>
-
-      <div>
-        {{> React EditButton}}
-      </div>
-
     </div>
   {{/if}}
 </template>

imports/plugins/included/product-variant/client/templates/products/productGrid/controls.js

@@ -21,42 +21,6 @@ Template.gridControls.onRendered(function () {
 });
 
 Template.gridControls.helpers({
-  EditButton() {
-    const instance = Template.instance();
-    const isSelected = instance.state.equals("isSelected", true);
-
-    return {
-      component: IconButton,
-      icon: "fa fa-pencil",
-      onIcon: "fa fa-check",
-      status: isSelected ? "active" : "default",
-      toggle: true,
-      toggleOn: isSelected,
-      onClick() {
-        if (instance.data.onEditButtonClick) {
-          instance.data.onEditButtonClick();
-        }
-      }
-    };
-  },
-
-  VisibilityButton() {
-    const instance = Template.instance();
-
-    return {
-      component: IconButton,
-      icon: "fa fa-eye-slash",
-      onIcon: "fa fa-eye",
-      toggle: true,
-      toggleOn: instance.data.product.isVisible,
-      onClick() {
-        if (instance.data.onPublishButtonClick) {
-          instance.data.onPublishButtonClick();
-        }
-      }
-    };
-  },
-
   checked: function () {
     return Template.instance().state.equals("isSelected", true);
   }

imports/plugins/included/product-variant/client/templates/products/productGrid/item.js

@@ -10,6 +10,27 @@ import { ReactionProduct } from "/lib/api";
 import { Media } from "/lib/collections";
 import { isRevisionControlEnabled } from "/imports/plugins/core/revisions/lib/api";
 
+
+Template.productGridItems.onRendered( function () {
+  $(".container-main").on("click", function(event) {
+    if ($(event.target).closest(".product-grid-item").length === 0) {
+      Session.set("productGrid/selectedProducts", []);
+
+      Reaction.showActionView({
+        label: "Grid Settings",
+        i18nKeyLabel: "gridSettingsPanel.title",
+        template: "productSettings",
+        type: "product",
+        data: {}
+      });
+    }
+  });
+});
+
+Template.productGridItems.onDestroyed( function() {
+  $(".container-main").off("click");
+});
+
 /**
  * productGridItems helpers
  */
@@ -97,7 +118,10 @@ Template.productGridItems.helpers({
     }
   },
   isSelected: function () {
-    return _.includes(Session.get("productGrid/selectedProducts"), this._id) ? "active" : "";
+    if (Reaction.isPreview() === false) {
+      return _.includes(Session.get("productGrid/selectedProducts"), this._id) ? "active" : "";
+    }
+    return false;
   },
   isMediumWeight: function () {
     const tag = ReactionProduct.getTag();
@@ -132,30 +156,79 @@ Template.productGridItems.helpers({
  */
 
 Template.productGridItems.events({
+  // "dblclick [data-event-action=productClick] .active": function (event, template) {
+  //
+  // },
+  // "dbclick li.active [data-event-action=productClick]": function (event, template) {
+  //   event.preventDefault();
+  //   console.log("yo", event);
+  // },
+  "dblclick [data-event-action=productClick]": function (event, template) {
+    const instance = template;
+    const product = instance.data;
+    const handle = product.handle;
+
+    Reaction.Router.go("product", {
+      handle: handle
+    });
+  },
   "click [data-event-action=productClick]": function (event, template) {
-    if (Reaction.hasPermission("createProduct")) {
-      if (event.metaKey || event.ctrlKey || event.shiftKey) {
-        event.preventDefault();
-
-        let $checkbox = template.$(`input[type=checkbox][value=${this._id}]`);
-        const $items = $("li.product-grid-item");
-        const $activeItems = $("li.product-grid-item.active");
-        const selected = $activeItems.length;
-
-        if (event.shiftKey && selected > 0) {
-          const indexes = [
-            $items.index($checkbox.parents("li.product-grid-item")),
-            $items.index($activeItems.get(0)),
-            $items.index($activeItems.get(selected - 1))
-          ];
-          for (let i = _.min(indexes); i <= _.max(indexes); i++) {
-            $checkbox = $("input[type=checkbox]", $items.get(i));
-            if ($checkbox.prop("checked") === false) {
-              $checkbox.prop("checked", true).trigger("change");
+    if (Reaction.hasPermission("createProduct") && Reaction.isPreview() === false) {
+      event.preventDefault();
+
+      const isSelected = $(event.target).closest("li.product-grid-item.active").length;
+
+      if (isSelected) {
+        // If product is already selected, and you are single clicking WITH command key, things whould happen
+        if (event.metaKey || event.ctrlKey || event.shiftKey) {
+          let $checkbox = template.$(`input[type=checkbox][value=${this._id}]`);
+          const $items = $("li.product-grid-item");
+          const $activeItems = $("li.product-grid-item.active");
+          const selected = $activeItems.length;
+
+          if (event.shiftKey && selected > 0) {
+            const indexes = [
+              $items.index($checkbox.parents("li.product-grid-item")),
+              $items.index($activeItems.get(0)),
+              $items.index($activeItems.get(selected - 1))
+            ];
+            for (let i = _.min(indexes); i <= _.max(indexes); i++) {
+              $checkbox = $("input[type=checkbox]", $items.get(i));
+              if ($checkbox.prop("checked") === false) {
+                $checkbox.prop("checked", true).trigger("change");
+              }
             }
+          } else {
+            $checkbox.prop("checked", !$checkbox.prop("checked")).trigger("change");
+          }
+        }
+      } else {
+        if (event.metaKey || event.ctrlKey || event.shiftKey) {
+          let $checkbox = template.$(`input[type=checkbox][value=${this._id}]`);
+          const $items = $("li.product-grid-item");
+          const $activeItems = $("li.product-grid-item.active");
+          const selected = $activeItems.length;
+
+          if (event.shiftKey && selected > 0) {
+            const indexes = [
+              $items.index($checkbox.parents("li.product-grid-item")),
+              $items.index($activeItems.get(0)),
+              $items.index($activeItems.get(selected - 1))
+            ];
+            for (let i = _.min(indexes); i <= _.max(indexes); i++) {
+              $checkbox = $("input[type=checkbox]", $items.get(i));
+              if ($checkbox.prop("checked") === false) {
+                $checkbox.prop("checked", true).trigger("change");
+              }
+            }
+          } else {
+            $checkbox.prop("checked", !$checkbox.prop("checked")).trigger("change");
           }
         } else {
-          $checkbox.prop("checked", !$checkbox.prop("checked")).trigger("change");
+          let $checkbox = template.$(`input[type=checkbox][value=${this._id}]`);
+
+          Session.set("productGrid/selectedProducts", []);
+          $checkbox.prop("checked", true).trigger("change");
         }
       }
     }

imports/plugins/included/product-variant/client/templates/products/productGrid/productGrid.js

@@ -35,15 +35,17 @@ Template.productGrid.onCreated(function () {
           return _.includes(selectedProducts, product._id);
         });
 
-        Reaction.showActionView({
-          label: "Grid Settings",
-          i18nKeyLabel: "gridSettingsPanel.title",
-          template: "productSettings",
-          type: "product",
-          data: {
-            products: filteredProducts
-          }
-        });
+        if (Reaction.isPreview() === false) {
+          Reaction.showActionView({
+            label: "Grid Settings",
+            i18nKeyLabel: "gridSettingsPanel.title",
+            template: "productSettings",
+            type: "product",
+            data: {
+              products: filteredProducts
+            }
+          });
+        }
       }
     }
   } else {