Merge pull request #10 from MRVDH/url-history

Url history

client/src/components/others/CategoryAndProducts.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <b-row>
+        <b-row v-if="showHeader">
             <b-col cols="12">
                 <span class="category-name">{{ category.name }}</span>
             </b-col>
@@ -36,32 +36,33 @@
                 </b-col>
             </b-col>
         </b-row>
-        <b-row v-if="!category.items.length">
-            <b-col
-                v-for="n in 8"
-                :key="n"
-                cols="6"
-                md="3"
-                >
-                <b-skeleton-img no-aspect />
-            </b-col>
-        </b-row>
+
+        <CustomCategoryAndProductsSkeleton
+            v-if="!category.items.length"
+            :include-header="false"
+            />
     </div>
 </template>
 
 <script>
 import ApiService from '@/services/ApiService';
 
 import CustomProductCard from '@/components/others/ProductCard';
+import CustomCategoryAndProductsSkeleton from '@/components/others/CategoryAndProductsSkeleton';
 
 export default {
     name: 'CategoryAndProducts',
     components: {
-        CustomProductCard
+        CustomProductCard,
+        CustomCategoryAndProductsSkeleton
     },
     props: {
         category: Object,
-        parentId: String
+        parentId: String,
+        showHeader: {
+            type: Boolean,
+            default: true
+        }
     },
     data () {
         return {

client/src/components/others/CategoryAndProductsSkeleton.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <b-row v-if="includeHeader">
+            <b-col cols="12">
+                <b-skeleton
+                    width="120px"
+                    style="margin-bottom: 20px"
+                    />
+            </b-col>
+        </b-row>
+        <b-row>
+            <b-col
+                v-for="n in 8"
+                :key="n"
+                cols="6"
+                md="3"
+                >
+                <b-skeleton-img no-aspect />
+            </b-col>
+        </b-row>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CategoryAndProductsSkeleton',
+    props: {
+        includeHeader: Boolean
+    }
+}
+</script>
+
+<style scoped>
+.b-skeleton-img {
+    height: 370px;
+    margin-bottom: 5px;
+}
+</style>

client/src/components/routes/Search.vue

@@ -106,6 +106,7 @@
                 v-for="category in searchResults"
                 :key="category.id"
                 :category="category"
+                :show-header="false"
                 />
         </div>
 
@@ -155,6 +156,9 @@ export default {
             this.searchResults = [];
 
             if (text.length < 2) {
+                if (this.$route.name !== 'Search') {
+                    this.$router.push({ name: 'Search' });
+                }
                 return;
             }
 
@@ -164,20 +168,38 @@ export default {
         }
     },
     mounted () {
+        if (this.$route.params.query) {
+            this.selectSuggestion(this.$route.params.query);
+        }
+
         this.getCategories();
     },
     methods: {
         getCategories () {
             ApiService.getCategories().then(res => {
                 this.allCategories = res.data.filter(x => x.is_included_in_category_tree);
+
+                if (this.$route.params.listId) {
+                    this.selectTopCategory(this.allCategories.find(x => x.id === this.$route.params.listId));
+                }
             });
         },
         selectTopCategory (category) {
             this.selectedTopCategory = category;
+
+            if (this.$route.params.subListId) {
+                this.selectSubCategory(this.selectedTopCategory.items.find(x => x.id === this.$route.params.subListId));
+            } else if (this.$route.params.listId !== category.id) {
+                this.$router.push({ name: 'SearchList', params: { listId: category.id } });
+            }
         },
         selectSubCategory (category) {
             this.selectedSubCategory = category;
 
+            if (this.$route.params.subListId !== category.id) {
+                this.$router.push({ name: 'SearchList', params: { listId: this.selectedTopCategory.id, subListId: category.id } });
+            }
+
             this.finalCategories = [];
 
             ApiService.getList(category.id, null, 1).then((res) => {
@@ -188,16 +210,22 @@ export default {
         },
         selectSuggestion (suggestion) {
             this.searchText = suggestion;
+            
+            if (this.$route.params.query !== this.searchText) {
+                this.$router.push({ name: 'SearchQuery', params: { query: this.searchText } });
+            }
 
-            ApiService.search(suggestion).then(res => {
+            ApiService.search(this.searchText).then(res => {
                 this.searchResults = res.data;
             });
         },
         goBack () {
             if (this.selectedSubCategory) {
                 this.selectedSubCategory = null;
+                this.$router.push({ name: 'SearchList', params: { listId: this.selectedTopCategory.id } });
             } else {
                 this.selectedTopCategory = null;
+                this.$router.push({ name: 'Search' });
             }
         }
     }

client/src/components/routes/StoreFront.vue

@@ -26,25 +26,10 @@
             </b-col>
         </b-row>
 
-        <div v-if="!selectedTopMenuItem">
-            <b-row>
-                <b-col cols="12">
-                    <b-skeleton
-                        width="50px"
-                        style="margin-bottom: 20px"
-                        />
-                </b-col>
-            </b-row>
-            <b-row>
-                <b-col
-                    v-for="n in 8"
-                    :key="n"
-                    cols="3"
-                    >
-                    <b-skeleton-img no-aspect />
-                </b-col>
-            </b-row>
-        </div>
+        <CustomCategoryAndProductsSkeleton
+            v-if="!selectedTopMenuItem"
+            :include-header="true"
+            />
 
         <div v-if="selectedTopMenuItem">
             <CustomCategoryAndProducts
@@ -61,18 +46,18 @@
 import ApiService from '@/services/ApiService';
 
 import CustomCategoryAndProducts from '@/components/others/CategoryAndProducts';
+import CustomCategoryAndProductsSkeleton from '@/components/others/CategoryAndProductsSkeleton';
 
 export default {
     name: 'StoreFront',
     components: {
-        CustomCategoryAndProducts
+        CustomCategoryAndProducts,
+        CustomCategoryAndProductsSkeleton
     },
     data () {
         return {
-            lists: [],
             topMenuItems: [],
-            selectedTopMenuItem: null,
-            productCategories: []
+            selectedTopMenuItem: null
         }
     },
     computed: {
@@ -93,11 +78,8 @@ export default {
     methods: {
         getLists () {
             ApiService.getLists().then((res) => {
-                this.lists = res.data.filter(x => !x.hidden && x.sellable_item_count > 0);
-
-                this.topMenuItems = this.lists.filter(x => !x.is_included_in_category_tree);
-                this.selectedTopMenuItem = this.topMenuItems[0];
-                this.productCategories = this.lists.filter(x => x.is_included_in_category_tree);
+                this.topMenuItems = res.data.filter(x => !x.is_included_in_category_tree && !x.hidden && x.sellable_item_count > 0);
+                this.selectedTopMenuItem = this.topMenuItems.find(x => x.id === this.$route.params.listId) || this.topMenuItems[0];
 
                 if (!this.loggedIn) {
                     this.topMenuItems.unshift({
@@ -112,6 +94,10 @@ export default {
             });
         },
         selectTopMenuItem (item) {
+            if (this.$route.params.listId !== item.id) {
+                this.$router.push({ name: 'StoreFront', params: { listId: item.id } });
+            }
+
             if (!this.loggedIn && item.id === "purchases") {
                 return;
             }

client/src/router/index.js

@@ -5,7 +5,11 @@ Vue.use(VueRouter);
 
 const routes = [
     {
-        path: '/',
+        path: '/', 
+        redirect: '/store-front'
+    },
+    {
+        path: '/store-front/:listId?',
         name: 'StoreFront',
         component: () => import(/* webpackChunkName: "store-front" */ '../components/routes/StoreFront.vue')
     },
@@ -14,6 +18,16 @@ const routes = [
         name: 'Search',
         component: () => import(/* webpackChunkName: "search" */ '../components/routes/Search.vue')
     },
+    {
+        path: '/search/query/:query?',
+        name: 'SearchQuery',
+        component: () => import(/* webpackChunkName: "search" */ '../components/routes/Search.vue')
+    },
+    {
+        path: '/search/list/:listId?/:subListId?',
+        name: 'SearchList',
+        component: () => import(/* webpackChunkName: "search" */ '../components/routes/Search.vue')
+    },
     {
         path: '/cart',
         name: 'Cart',