Feature filter by tags

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

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>

src/models/TagModel.ts

@@ -0,0 +1,9 @@
+export default class CategoryModel {
+  name: string;
+  count: number;
+
+  constructor() {
+    this.name = "";
+    this.count = 0;
+  }
+}

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";
@@ -15,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 =
@@ -48,13 +50,14 @@ export default new Vuex.Store({
       allItems: Array<MarketplaceItemModel>(),
       filteredItems: Array<MarketplaceItemModel>(),
       itemsToShow: Array<MarketplaceItemModel>(),
-      tagsCount: new Map<string, number>(),
+      tags: 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,8 +74,8 @@ export default new Vuex.Store({
     updateItemsToShow(state, itemsToShow: Array<MarketplaceItemModel>) {
       state.data.itemsToShow = itemsToShow;
     },
-    updateTagsCount(state, tagsCount: Map<string, number>) {
-      state.data.tagsCount = tagsCount;
+    updateTags(state, tags: Array<TagModel>) {
+      state.data.tags = tags;
     },
     updateCategories(state, categories: Array<CategoryModel>) {
       state.data.categories = categories;
@@ -83,6 +86,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;
     },
@@ -97,11 +103,12 @@ 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,
     selectedCategories: state => state.filter.selectedCategories,
+    selectedTags: state => state.filter.selectedTags,
     selectedKenticoVersion: state => state.filter.selectedKenticoVersion,
     pagerLastItemIndex: state => state.pager.lastItemIndex
   },

src/utils/filter.ts

@@ -7,15 +7,17 @@ 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);
   const categoryFilteredItems = applyCategoriesFilter(
     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

src/utils/tags.ts

@@ -1,5 +1,7 @@
 import MarketplaceItemModel from "@/models/marketplaceItemModel";
-import store, { updateTagsCountMutation } from "@/store";
+import TagModel from "@/models/TagModel";
+import store, { updateTagsMutation, updateSelectedTagsMutation } from "@/store";
+import performItemsFiltering from "./filter";
 
 export function initStoreWithTags(allItems: Array<MarketplaceItemModel>) {
   let tagsCount = new Map<string, number>();
@@ -10,5 +12,29 @@ 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(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();
 }