From d38768fe2ed60a70ad11a03e3a7f40d52c9d3b56 Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Wed, 9 Sep 2020 11:14:55 +0200
Subject: [PATCH 1/8] Add multi select

---
 package-lock.json                        | 41 +++++++++++++-----
 src/App.vue                              |  1 +
 src/components/CommercetoolsSelector.vue | 50 +++++++++++++++++----
 src/components/PreviewValue.vue          | 37 ++++++----------
 src/components/PreviewValueList.vue      | 55 ++++++++++++++++++++++++
 5 files changed, 141 insertions(+), 43 deletions(-)
 create mode 100644 src/components/PreviewValueList.vue

diff --git a/package-lock.json b/package-lock.json
index 69f7a4c..1ff6700 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4969,7 +4969,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4990,12 +4991,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5010,17 +5013,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5137,7 +5143,8 @@
         "inherits": {
           "version": "2.0.4",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5149,6 +5156,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5163,6 +5171,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5170,12 +5179,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.9.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5194,6 +5205,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5283,7 +5295,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5295,6 +5308,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5380,7 +5394,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5416,6 +5431,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5435,6 +5451,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5478,12 +5495,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/App.vue b/src/App.vue
index 87fb2d0..5c4c238 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -78,6 +78,7 @@ export default {
       this.updateSize();
     },
     save: function(value) {
+
       // Explicitly using == to match both null and undefined
       const toSave = value == null ? null : JSON.stringify(value);
       this.element.value = toSave;
diff --git a/src/components/CommercetoolsSelector.vue b/src/components/CommercetoolsSelector.vue
index 1781b1f..dc0bb30 100644
--- a/src/components/CommercetoolsSelector.vue
+++ b/src/components/CommercetoolsSelector.vue
@@ -1,15 +1,23 @@
 <template>
   <div class="wrapper">
     <ProductSearch
-      v-if="!value && !element.disabled"
+      v-if="(!value || multiSelect) && !element.disabled"
       :commercetoolsClient="commercetoolsClient"
       @onProductSelected="save"
       :defaultCulture="defaultCulture"
     />
-    <PreviewValue
-      v-if="value"
+    <div class="preview" v-if="value && !multiSelect">
+      <PreviewValue
+        :value="value"
+        :disabled="element.disabled"
+        :multiSelect="true"
+        :commercetoolsClient="commercetoolsClient"
+        @onProductCleared="reset"
+      />
+    </div>
+    <PreviewValueList
+      v-if="value && multiSelect"
       :value="value"
-      :disabled="element.disabled"
       :commercetoolsClient="commercetoolsClient"
       @onProductCleared="reset"
     />
@@ -19,12 +27,14 @@
 <script>
 import commercetoolsClient from "../helpers/commercetoolsClient";
 import PreviewValue from "./PreviewValue";
+import PreviewValueList from "./PreviewValueList";
 import ProductSearch from "./ProductSearch";
 
 export default {
   components: {
     PreviewValue,
-    ProductSearch
+    ProductSearch,
+    PreviewValueList
   },
   props: {
     element: {
@@ -50,15 +60,31 @@ export default {
       return configAvailable
         ? this.element.config.commercetools.defaultCulture
         : null;
+    },
+    multiSelect: function() {
+      const configAvailable =
+        this.element && this.element.config && this.element.config.multiSelect;
+      return configAvailable ? this.element.config.multiSelect : null;
     }
   },
   methods: {
-    reset: function() {
-      this.save(null);
+    reset: function(value) {
+      if (this.multiSelect) {
+        let newValue = this.value ? this.value.filter(x => x.id !== value) : [];
+
+        this.$emit("update:value", newValue);
+      } else {
+        this.save(null);
+      }
     },
     save: function(value) {
       if (this.element && !this.element.disabled) {
-        this.$emit("update:value", value);
+        if (this.multiSelect) {
+          let newValue = this.value ? [...this.value, value] : [value];
+          this.$emit("update:value", newValue);
+        } else {
+          this.$emit("update:value", value);
+        }
       }
     }
   },
@@ -73,4 +99,12 @@ export default {
 .wrapper {
   margin: 10px;
 }
+
+.preview {
+  width: 100%;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: center;
+  -webkit-justify-content: center;
+}
 </style>
diff --git a/src/components/PreviewValue.vue b/src/components/PreviewValue.vue
index ebcbf7c..00695df 100644
--- a/src/components/PreviewValue.vue
+++ b/src/components/PreviewValue.vue
@@ -1,16 +1,11 @@
 <template>
-  <div class="preview">
-    <ProductCard
-      v-if="product"
-      :product="product"
-      :variantId="variantId"
-      :culture="culture"
-      @onProductCleared="clearProduct"
-    />
-    <div v-else-if="disabled">
-      No product selected.
-    </div>
-  </div>
+  <ProductCard
+    v-if="product"
+    :product="product"
+    :variantId="variantId"
+    :culture="culture"
+    @onProductCleared="clearProduct"
+  />
 </template>
 
 <script>
@@ -34,6 +29,11 @@ export default {
       type: Boolean,
       required: false,
       default: false
+    },
+    multiSelect: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data: () => ({
@@ -68,19 +68,8 @@ export default {
       }
     },
     clearProduct() {
-      this.product = null;
-      this.$emit("onProductCleared");
+      this.$emit("onProductCleared", this.value.id);
     }
   }
 };
 </script>
-
-<style scoped>
-.preview {
-  width: 100%;
-  display: flex;
-  display: -webkit-flex;
-  justify-content: center;
-  -webkit-justify-content: center;
-}
-</style>
diff --git a/src/components/PreviewValueList.vue b/src/components/PreviewValueList.vue
new file mode 100644
index 0000000..52770e0
--- /dev/null
+++ b/src/components/PreviewValueList.vue
@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h3>
+      {{ value.length }} product{{ value.length === 1 ? "" : "s" }} selected
+    </h3>
+
+    <div v-if="value" class="cards">
+      <PreviewValue
+        v-for="product in value"
+        :key="product.id"
+        :value="product"
+        :multiSelect="true"
+        :commercetoolsClient="commercetoolsClient"
+        @onProductCleared="clearProduct"
+      >
+      </PreviewValue>
+    </div>
+  </div>
+</template>
+
+<script>
+import PreviewValue from "./PreviewValue";
+
+export default {
+  components: {
+    PreviewValue
+  },
+  props: {
+    value: {
+      type: Array,
+      required: true
+    },
+    commercetoolsClient: {
+      type: Object,
+      required: false
+    }
+  },
+  methods: {
+    clearProduct: function(payload) {
+      this.$emit("onProductCleared", payload);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.cards {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  column-gap: 10px;
+  row-gap: 10px;
+  flex-wrap: wrap;
+}
+</style>

From b81e8beeaa6291b3166313d7f90de1cac66a0fe1 Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Thu, 24 Sep 2020 10:22:58 +0200
Subject: [PATCH 2/8] Add support for removed products

---
 src/components/PreviewValue.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/PreviewValue.vue b/src/components/PreviewValue.vue
index 00695df..d24ab03 100644
--- a/src/components/PreviewValue.vue
+++ b/src/components/PreviewValue.vue
@@ -56,15 +56,27 @@ export default {
   methods: {
     getCurrentProduct: async function() {
       if (this.value && this.value.id) {
-        logEvent(`Getting product projection for "${this.value.id}"`);
+        try {
+          logEvent(`Getting product projection for "${this.value.id}"`);
 
-        const product = await this.commercetoolsClient.getProductByID({
-          id: this.value.id
-        });
+          const product = await this.commercetoolsClient.getProductByID({
+            id: this.value.id
+          });
 
-        logEvent(`Got product projection for "${this.value.id}"`, product);
+          logEvent(`Got product projection for "${this.value.id}"`, product);
 
-        this.product = product;
+          this.product = product;
+        } catch (e) {
+          logEvent(
+            `Error while getting product projection for "${this.value.id}"`,
+            e
+          );
+
+          this.product = {
+            name: "NOT FOUND",
+            variants: []
+          };
+        }
       }
     },
     clearProduct() {

From 790c42b6d17b7983aa5508963a11344d11578990 Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Thu, 24 Sep 2020 10:27:00 +0200
Subject: [PATCH 3/8] Fix bug

---
 src/components/PreviewValue.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/PreviewValue.vue b/src/components/PreviewValue.vue
index d24ab03..a01c717 100644
--- a/src/components/PreviewValue.vue
+++ b/src/components/PreviewValue.vue
@@ -74,7 +74,11 @@ export default {
 
           this.product = {
             name: "NOT FOUND",
-            variants: []
+            variants: [],
+            masterVariant: {
+              id: 1,
+              images: []
+            }
           };
         }
       }

From 2dd8e9c31fa033ffc20e4d9f24adfdee761a8b38 Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Thu, 24 Sep 2020 10:30:18 +0200
Subject: [PATCH 4/8] Fix name

---
 src/components/PreviewValue.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PreviewValue.vue b/src/components/PreviewValue.vue
index a01c717..e2bc447 100644
--- a/src/components/PreviewValue.vue
+++ b/src/components/PreviewValue.vue
@@ -73,7 +73,7 @@ export default {
           );
 
           this.product = {
-            name: "NOT FOUND",
+            name: { "en-US": "NOT FOUND" },
             variants: [],
             masterVariant: {
               id: 1,

From cd1d8c511507ac6b57bfcc5923cf1d28501e8cb4 Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Fri, 20 Nov 2020 15:16:10 +0100
Subject: [PATCH 5/8] Rework

---
 src/components/CommercetoolsSelector.vue | 40 +++++++++---------------
 src/components/PreviewValue.vue          |  6 +---
 src/components/PreviewValueList.vue      | 20 ++++++++++--
 src/components/ProductCard.vue           |  7 ++++-
 4 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/components/CommercetoolsSelector.vue b/src/components/CommercetoolsSelector.vue
index dc0bb30..f236c64 100644
--- a/src/components/CommercetoolsSelector.vue
+++ b/src/components/CommercetoolsSelector.vue
@@ -1,38 +1,31 @@
 <template>
   <div class="wrapper">
     <ProductSearch
-      v-if="(!value || multiSelect) && !element.disabled"
+      v-if="(!value || value.length == 0 || multiSelect) && !element.disabled"
       :commercetoolsClient="commercetoolsClient"
       @onProductSelected="save"
       :defaultCulture="defaultCulture"
     />
-    <div class="preview" v-if="value && !multiSelect">
-      <PreviewValue
+    <div class="preview" v-if="value">
+      <PreviewValueList
+        v-if="value"
         :value="value"
         :disabled="element.disabled"
-        :multiSelect="true"
+        :multiSelect="multiSelect"
         :commercetoolsClient="commercetoolsClient"
         @onProductCleared="reset"
       />
     </div>
-    <PreviewValueList
-      v-if="value && multiSelect"
-      :value="value"
-      :commercetoolsClient="commercetoolsClient"
-      @onProductCleared="reset"
-    />
   </div>
 </template>
 
 <script>
 import commercetoolsClient from "../helpers/commercetoolsClient";
-import PreviewValue from "./PreviewValue";
 import PreviewValueList from "./PreviewValueList";
 import ProductSearch from "./ProductSearch";
 
 export default {
   components: {
-    PreviewValue,
     ProductSearch,
     PreviewValueList
   },
@@ -64,27 +57,24 @@ export default {
     multiSelect: function() {
       const configAvailable =
         this.element && this.element.config && this.element.config.multiSelect;
-      return configAvailable ? this.element.config.multiSelect : null;
+      return configAvailable ? this.element.config.multiSelect : false;
     }
   },
   methods: {
     reset: function(value) {
-      if (this.multiSelect) {
-        let newValue = this.value ? this.value.filter(x => x.id !== value) : [];
+      let newValue = this.value ? this.value.filter(x => x.id !== value) : [];
 
-        this.$emit("update:value", newValue);
-      } else {
-        this.save(null);
-      }
+      this.$emit("update:value", newValue);
     },
     save: function(value) {
       if (this.element && !this.element.disabled) {
-        if (this.multiSelect) {
-          let newValue = this.value ? [...this.value, value] : [value];
-          this.$emit("update:value", newValue);
-        } else {
-          this.$emit("update:value", value);
-        }
+        const newValue = this.multiSelect
+          ? this.value
+            ? [...this.value, value]
+            : [value]
+          : [value];
+
+        this.$emit("update:value", newValue);
       }
     }
   },
diff --git a/src/components/PreviewValue.vue b/src/components/PreviewValue.vue
index e2bc447..70ad6bf 100644
--- a/src/components/PreviewValue.vue
+++ b/src/components/PreviewValue.vue
@@ -4,6 +4,7 @@
     :product="product"
     :variantId="variantId"
     :culture="culture"
+    :disabled="disabled"
     @onProductCleared="clearProduct"
   />
 </template>
@@ -29,11 +30,6 @@ export default {
       type: Boolean,
       required: false,
       default: false
-    },
-    multiSelect: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
   data: () => ({
diff --git a/src/components/PreviewValueList.vue b/src/components/PreviewValueList.vue
index 52770e0..80ef51c 100644
--- a/src/components/PreviewValueList.vue
+++ b/src/components/PreviewValueList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <h3>
+  <div class="wrapper">
+    <h3 v-if="multiSelect">
       {{ value.length }} product{{ value.length === 1 ? "" : "s" }} selected
     </h3>
 
@@ -9,8 +9,8 @@
         v-for="product in value"
         :key="product.id"
         :value="product"
-        :multiSelect="true"
         :commercetoolsClient="commercetoolsClient"
+        :disabled="disabled"
         @onProductCleared="clearProduct"
       >
       </PreviewValue>
@@ -33,6 +33,16 @@ export default {
     commercetoolsClient: {
       type: Object,
       required: false
+    },
+    multiSelect: {
+      type: Boolean,
+      required: true,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   methods: {
@@ -52,4 +62,8 @@ export default {
   row-gap: 10px;
   flex-wrap: wrap;
 }
+
+.wrapper {
+  width: 100%;
+}
 </style>
diff --git a/src/components/ProductCard.vue b/src/components/ProductCard.vue
index 9b9b085..98e85ec 100644
--- a/src/components/ProductCard.vue
+++ b/src/components/ProductCard.vue
@@ -36,7 +36,7 @@
       </button>
     </div>
 
-    <div class="card__actions" v-if="variantId">
+    <div class="card__actions" v-if="variantId && !disabled">
       <button class="btn btn--primary" @click="clearProduct">
         Clear
       </button>
@@ -59,6 +59,11 @@ export default {
     culture: {
       type: String,
       required: true
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data: () => ({

From 0a5031f8c2056217e13f67110561b8e0c57342e9 Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Fri, 20 Nov 2020 15:18:59 +0100
Subject: [PATCH 6/8] Update readme

---
 README.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d1d03d2..d597a84 100644
--- a/README.md
+++ b/README.md
@@ -7,6 +7,7 @@ This [custom element](https://docs.kontent.ai/tutorials/develop-apps/integrate/i
 - Editors can...
   - Search for products in all languages in the commercetools project
   - Select a single product (or one of it's variants)
+  - Select multiple products (or their variants)
 - Optional debug panel for diagnostics
 
 ## Demo
@@ -34,6 +35,7 @@ The JSON parameters required as as follows:
 | Name     | Type   | Description |
 | -------- | ------ | ----------- |
 | debug    | boolean | (Optional) If present and set to true the debug panel will activate when editing a content item. |
+| multiSelect  | boolean | If set to true, it will be possible to select multiple products. If set to false, it will be possible to only select a single product |
 | commercetools | object | This contains all the details required to connect to the [commercetools API](https://docs.commercetools.com/http-api). The values for this object will be derived from an API client that you configure in commercetools with the exception of the `defaultCulture`. When generating the API client, be sure to select the `view_products` and `view_project_settings` scopes. |
 | commercetools.defaultCulture | string | Set this to the IETF language tag of the language in commercetools to use by default for search. |
 | commercetools.project | string | This is the commercetools project key. |
@@ -48,6 +50,7 @@ Sample parameters JSON:
 ```json
 {
     "debug": true,
+    "multiSelect": true,
     "commercetools": {
         "defaultCulture": "en",
         "project": "your-project",
@@ -62,7 +65,7 @@ Sample parameters JSON:
 
 ## Values saved
 
-The custom element will store the selected product's information in the following format:
+The custom element will store the selected product's information in the following format (In an array):
 
 ```json
 {

From b2d286952e18e0ddfa222fee1a579f6b5fe60d85 Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Fri, 20 Nov 2020 15:20:39 +0100
Subject: [PATCH 7/8] Undo CR

---
 src/App.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 5c4c238..87fb2d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -78,7 +78,6 @@ export default {
       this.updateSize();
     },
     save: function(value) {
-
       // Explicitly using == to match both null and undefined
       const toSave = value == null ? null : JSON.stringify(value);
       this.element.value = toSave;

From bcec9dfca1a23b7fa686ee0ba09c940ee7489b4f Mon Sep 17 00:00:00 2001
From: Jonne Kats <jonnekats@gmail.com>
Date: Mon, 30 Nov 2020 15:06:19 +0100
Subject: [PATCH 8/8] Allow the same product to be only selected once

---
 src/components/CommercetoolsSelector.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/CommercetoolsSelector.vue b/src/components/CommercetoolsSelector.vue
index f236c64..d764df3 100644
--- a/src/components/CommercetoolsSelector.vue
+++ b/src/components/CommercetoolsSelector.vue
@@ -68,6 +68,11 @@ export default {
     },
     save: function(value) {
       if (this.element && !this.element.disabled) {
+        // Allow the same product to be only selected once
+        if (this.value && this.value.some(x => x.id === value.id)) {
+          return;
+        }
+
         const newValue = this.multiSelect
           ? this.value
             ? [...this.value, value]