From c791c91829af4522176bfed532f6a254490eeae2 Mon Sep 17 00:00:00 2001
From: Mohammad <msharifi@cafebazaar.ir>
Date: Sat, 5 Oct 2019 00:05:01 +0330
Subject: [PATCH 1/3] add TagModel and change stored tag format and add some
 tag getters

---
 src/models/TagModel.ts |  9 +++++++++
 src/store.ts           | 10 ++++++++--
 src/utils/tags.ts      | 10 +++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 src/models/TagModel.ts

diff --git a/src/models/TagModel.ts b/src/models/TagModel.ts
new file mode 100644
index 0000000..aa23240
--- /dev/null
+++ b/src/models/TagModel.ts
@@ -0,0 +1,9 @@
+export default class CategoryModel {
+  name: string;
+  count: number;
+
+  constructor() {
+    this.name = "";
+    this.count = 0;
+  }
+}
diff --git a/src/store.ts b/src/store.ts
index 571a2a4..f7b1399 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import MarketplaceItemModel from "./models/marketplaceItemModel";
+import TagModel from "./models/TagModel";
 import performItemsFiltering from "./utils/filter";
 import { resetPaging, addNextPage } from "./utils/pager";
 import CategoryModel from "./models/CategoryModel";
@@ -48,13 +49,14 @@ export default new Vuex.Store({
       allItems: Array<MarketplaceItemModel>(),
       filteredItems: Array<MarketplaceItemModel>(),
       itemsToShow: Array<MarketplaceItemModel>(),
-      tagsCount: new Map<string, number>(),
+      tagsCount: new Array<TagModel>(),
       categories: new Array<CategoryModel>(),
       kenticoVersions: new Array<string>()
     },
     filter: {
       searchPhrase: "",
       selectedCategories: new Array<string>(),
+      selectedTags: new Array<string>(),
       selectedKenticoVersion: KENTICO_VERSION_ALL_VERSIONS
     },
     pager: {
@@ -71,7 +73,7 @@ export default new Vuex.Store({
     updateItemsToShow(state, itemsToShow: Array<MarketplaceItemModel>) {
       state.data.itemsToShow = itemsToShow;
     },
-    updateTagsCount(state, tagsCount: Map<string, number>) {
+    updateTagsCount(state, tagsCount: Array<TagModel>) {
       state.data.tagsCount = tagsCount;
     },
     updateCategories(state, categories: Array<CategoryModel>) {
@@ -83,6 +85,9 @@ export default new Vuex.Store({
     updateSelectedCategories(state, selectedCategories: Array<string>) {
       state.filter.selectedCategories = selectedCategories;
     },
+    updateSelectedTags(state, selectedTags: Array<string>) {
+      state.filter.selectedTags = selectedTags;
+    },
     updateSelectedKenticoVersion(state, selectedKenticoVersion: string) {
       state.filter.selectedKenticoVersion = selectedKenticoVersion;
     },
@@ -102,6 +107,7 @@ export default new Vuex.Store({
     kenticoVersions: state => state.data.kenticoVersions,
     filterSearchphrase: state => state.filter.searchPhrase,
     selectedCategories: state => state.filter.selectedCategories,
+    selectedTags: state => state.filter.selectedTags,
     selectedKenticoVersion: state => state.filter.selectedKenticoVersion,
     pagerLastItemIndex: state => state.pager.lastItemIndex
   },
diff --git a/src/utils/tags.ts b/src/utils/tags.ts
index 502889e..e8777b4 100644
--- a/src/utils/tags.ts
+++ b/src/utils/tags.ts
@@ -1,4 +1,5 @@
 import MarketplaceItemModel from "@/models/marketplaceItemModel";
+import TagModel from "@/models/TagModel";
 import store, { updateTagsCountMutation } from "@/store";
 
 export function initStoreWithTags(allItems: Array<MarketplaceItemModel>) {
@@ -10,5 +11,12 @@ export function initStoreWithTags(allItems: Array<MarketplaceItemModel>) {
         : tagsCount.set(tag, 1)
     );
   });
-  store.commit(updateTagsCountMutation, tagsCount);
+  const normalizedTags: Array<TagModel> = [];
+  tagsCount.forEach((count, tag) => {
+    normalizedTags.push({
+      count,
+      name: tag
+    });
+  });
+  store.commit(updateTagsCountMutation, normalizedTags);
 }

From 5ada1ad25df6e0ab81606ea47efe8deadf458103 Mon Sep 17 00:00:00 2001
From: Mohammad <msharifi@cafebazaar.ir>
Date: Sat, 5 Oct 2019 00:25:25 +0330
Subject: [PATCH 2/3] add tagFilter component

---
 src/components/MarketplaceFilter.vue |  3 +
 src/components/TagsFilter.vue        | 87 ++++++++++++++++++++++++++++
 src/store.ts                         | 11 ++--
 src/utils/tags.ts                    | 22 ++++++-
 4 files changed, 116 insertions(+), 7 deletions(-)
 create mode 100644 src/components/TagsFilter.vue

diff --git a/src/components/MarketplaceFilter.vue b/src/components/MarketplaceFilter.vue
index df22b0f..71893ff 100644
--- a/src/components/MarketplaceFilter.vue
+++ b/src/components/MarketplaceFilter.vue
@@ -3,6 +3,7 @@
     <SearchFilter />
     <KenticoVersionsSelector />
     <CategoriesFilter />
+    <TagsFilter />
   </div>
 </template>
 
@@ -11,9 +12,11 @@ import { Component, Prop, Vue } from "vue-property-decorator";
 import CategoriesFilter from "./CategoriesFilter.vue";
 import SearchFilter from "./SearchFilter.vue";
 import KenticoVersionsSelector from "./KenticoVersionsSelector.vue";
+import TagsFilter from "./TagsFilter.vue";
 
 @Component({
   components: {
+    TagsFilter,
     SearchFilter,
     CategoriesFilter,
     KenticoVersionsSelector
diff --git a/src/components/TagsFilter.vue b/src/components/TagsFilter.vue
new file mode 100644
index 0000000..ac9519b
--- /dev/null
+++ b/src/components/TagsFilter.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="tags-filter">
+    <a
+      v-for="tag in tags"
+      v-bind:key="tag.name"
+      v-bind:class="{
+        'tag-caption': true,
+        'tag-caption--selected': isTagSelected(tag.name)
+      }"
+      @click="onTagClick(tag.name)"
+      >{{ tag.name }} ({{ tag.count }})</a
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { updateSelectedTagsMutation } from "@/store";
+import TagModel from "@/models/TagModel";
+import { toggleSelectedTag } from "@/utils/tags";
+
+@Component({
+  components: {}
+})
+export default class CategoriesFilter extends Vue {
+  get tags(): Array<TagModel> {
+    return this.$store.getters.tags;
+  }
+
+  get selectedTags(): Array<string> {
+    return this.$store.getters.selectedTags;
+  }
+
+  set selectedTags(selectedTags: Array<string>) {
+    this.$store.commit(updateSelectedTagsMutation, selectedTags);
+  }
+
+  isTagSelected(tagName: string): boolean {
+    return this.selectedTags.indexOf(tagName) !== -1;
+  }
+
+  onTagClick(tagName: string) {
+    toggleSelectedTag(tagName);
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tags-filter {
+  margin: 4px 10px 4px 4px;
+}
+.tag-caption {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #f3c9ac;
+  color: #282828;
+  padding: 6px 10px;
+  font-size: 16px;
+  text-align: center;
+  margin: 4px 6px 2px 0;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: baseline;
+  text-decoration: none;
+  text-transform: lowercase;
+  cursor: pointer;
+}
+.tag-caption:hover {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: #c75100;
+}
+.tag-caption--selected {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #42388c;
+  color: #fff;
+}
+.tag-caption--selected:hover {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #42388c;
+  color: #fff;
+}
+</style>
diff --git a/src/store.ts b/src/store.ts
index f7b1399..ac3a06c 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -16,13 +16,14 @@ import {
 export const updateAllItemsMutation = "updateAllItems";
 export const updateFilteredItemsMutation = "updateFilteredItems";
 export const updateItemsToShowMutation = "updateItemsToShow";
-export const updateTagsCountMutation = "updateTagsCount";
+export const updateTagsMutation = "updateTags";
 export const updateKenticoVersionsFilterMutation =
   "updateKenticoVersionsFilter";
 export const updateCategoriesMutation = "updateCategories";
 
 export const updateFilterSearchPhraseMutation = "updateFilterSearchPhrase";
 export const updateSelectedCategoriesMutation = "updateSelectedCategories";
+export const updateSelectedTagsMutation = "updateSelectedTags";
 export const updateSelectedKenticoVersionMutation =
   "updateSelectedKenticoVersion";
 export const toggleCategoryInSelectedCategoriesMutation =
@@ -49,7 +50,7 @@ export default new Vuex.Store({
       allItems: Array<MarketplaceItemModel>(),
       filteredItems: Array<MarketplaceItemModel>(),
       itemsToShow: Array<MarketplaceItemModel>(),
-      tagsCount: new Array<TagModel>(),
+      tags: new Array<TagModel>(),
       categories: new Array<CategoryModel>(),
       kenticoVersions: new Array<string>()
     },
@@ -73,8 +74,8 @@ export default new Vuex.Store({
     updateItemsToShow(state, itemsToShow: Array<MarketplaceItemModel>) {
       state.data.itemsToShow = itemsToShow;
     },
-    updateTagsCount(state, tagsCount: Array<TagModel>) {
-      state.data.tagsCount = tagsCount;
+    updateTags(state, tags: Array<TagModel>) {
+      state.data.tags = tags;
     },
     updateCategories(state, categories: Array<CategoryModel>) {
       state.data.categories = categories;
@@ -102,7 +103,7 @@ export default new Vuex.Store({
     allItems: state => state.data.allItems,
     filteredItems: state => state.data.filteredItems,
     itemsToShow: state => state.data.itemsToShow,
-    tagsCount: state => state.data.tagsCount,
+    tags: state => state.data.tags,
     categories: state => state.data.categories,
     kenticoVersions: state => state.data.kenticoVersions,
     filterSearchphrase: state => state.filter.searchPhrase,
diff --git a/src/utils/tags.ts b/src/utils/tags.ts
index e8777b4..d4289b8 100644
--- a/src/utils/tags.ts
+++ b/src/utils/tags.ts
@@ -1,6 +1,7 @@
 import MarketplaceItemModel from "@/models/marketplaceItemModel";
 import TagModel from "@/models/TagModel";
-import store, { updateTagsCountMutation } from "@/store";
+import store, { updateTagsMutation, updateSelectedTagsMutation } from "@/store";
+import performItemsFiltering from "./filter";
 
 export function initStoreWithTags(allItems: Array<MarketplaceItemModel>) {
   let tagsCount = new Map<string, number>();
@@ -18,5 +19,22 @@ export function initStoreWithTags(allItems: Array<MarketplaceItemModel>) {
       name: tag
     });
   });
-  store.commit(updateTagsCountMutation, normalizedTags);
+  store.commit(updateTagsMutation, normalizedTags);
+}
+
+export function toggleSelectedTag(tagName: string) {
+  const selectedTags = store.state.filter.selectedTags;
+
+  const index = selectedTags.indexOf(tagName);
+
+  if (index === -1) {
+    // not in selected -> select
+    selectedTags.push(tagName);
+  } else {
+    // selected -> deselect
+    selectedTags.splice(index, 1);
+  }
+
+  store.commit(updateSelectedTagsMutation, selectedTags);
+  performItemsFiltering();
 }

From 1182dbafd40e832b2a660bac9cb485843bc96b88 Mon Sep 17 00:00:00 2001
From: Mohammad <msharifi@cafebazaar.ir>
Date: Sat, 5 Oct 2019 00:30:18 +0330
Subject: [PATCH 3/3] add tag filtering to performFilter function

---
 src/utils/filter.ts | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/utils/filter.ts b/src/utils/filter.ts
index fffbcc0..a5aff03 100644
--- a/src/utils/filter.ts
+++ b/src/utils/filter.ts
@@ -7,6 +7,7 @@ export default function performItemsFiltering() {
   const allItems: Array<MarketplaceItemModel> = store.state.data.allItems;
   const searchPhrase = store.state.filter.searchPhrase;
   const selectedCategories = store.state.filter.selectedCategories;
+  const selectedTags = store.state.filter.selectedTags;
   const selectedKenticoVersion = store.state.filter.selectedKenticoVersion;
 
   const searchFilteredItems = applySearchFilter(allItems, searchPhrase);
@@ -14,8 +15,9 @@ export default function performItemsFiltering() {
     searchFilteredItems,
     selectedCategories
   );
+  const tagFilteredItems = applyTagsFilter(categoryFilteredItems, selectedTags);
   const itemsFilteredByKenticoVersion = applyKenticoVersionFilter(
-    categoryFilteredItems,
+    tagFilteredItems,
     selectedKenticoVersion
   );
 
@@ -54,6 +56,19 @@ function applyCategoriesFilter(
   }
 }
 
+function applyTagsFilter(
+  itemsToFilter: Array<MarketplaceItemModel>,
+  selectedTags: Array<string>
+): Array<MarketplaceItemModel> {
+  if (selectedTags.length === 0) {
+    return itemsToFilter;
+  } else {
+    return itemsToFilter.filter(item =>
+      item.tags.some(itemTag => selectedTags.indexOf(itemTag) !== -1)
+    );
+  }
+}
+
 function applyKenticoVersionFilter(
   itemsToFilter: Array<MarketplaceItemModel>,
   selectedKenticoVersion: string