Kaynağa Gözat

:recycle: adding sort namespace to routes

tags/0.9.0
J 4 yıl önce
ebeveyn
işleme
748e60c25f

+ 3
- 3
vue-theme/src/components/sidebars/sidebar.vue Dosyayı Görüntüle

6
             h3.t-up sort {{ type }} by
6
             h3.t-up sort {{ type }} by
7
             ul.t-up
7
             ul.t-up
8
                 li(v-for="option in sortOptions")
8
                 li(v-for="option in sortOptions")
9
-                    router-link(:to="`/${type}/${sortTypes[option]}`")
9
+                    router-link(:to="`/${type}/sorted/${sortTypes[option]}`")
10
                         p {{ option }}
10
                         p {{ option }}
11
 
11
 
12
         
12
         
19
             h3.t-up sort {{ type }} by
19
             h3.t-up sort {{ type }} by
20
             ul.t-up
20
             ul.t-up
21
                 li(v-for="option in sortOptions")
21
                 li(v-for="option in sortOptions")
22
-                    router-link(:to="`/${type}/${sortTypes[option]}`")
22
+                    router-link(:to="`/${type}/sorted/${sortTypes[option]}`")
23
                         p {{ option }}
23
                         p {{ option }}
24
                 //- temporary reminder
24
                 //- temporary reminder
25
                 p 
25
                 p 
31
             h3.t-up sort {{ type }} by
31
             h3.t-up sort {{ type }} by
32
             ul.t-up
32
             ul.t-up
33
                 li(v-for="option in sortOptions")
33
                 li(v-for="option in sortOptions")
34
-                    router-link(:to="`/${type}/${sortTypes[option]}`")
34
+                    router-link(:to="`/${type}/sorted/${sortTypes[option]}`")
35
                         p {{ option }}
35
                         p {{ option }}
36
                 //- temporary reminder
36
                 //- temporary reminder
37
                 p 
37
                 p 

+ 32
- 15
vue-theme/src/pages/list.vue Dosyayı Görüntüle

6
             .title.f-row
6
             .title.f-row
7
                 h3 {{ type }} list
7
                 h3 {{ type }} list
8
                 span(v-if="sortBy")
8
                 span(v-if="sortBy")
9
-                    h3 sorted {{ sortBy.replace('-', ' ') }}
9
+                    h3  sorted {{ sortBy.replace('-', ' ') }}
10
 
10
 
11
             h3(v-if="!loaded") loading...
11
             h3(v-if="!loaded") loading...
12
             .content(
12
             .content(
38
 const TIMEOUT = 1
38
 const TIMEOUT = 1
39
 const INTERSECT_SELECTOR = '.page--list > article footer'
39
 const INTERSECT_SELECTOR = '.page--list > article footer'
40
 
40
 
41
+const wideTypes = ['event', 'exhibition']
42
+const gridTypes = ['episode', 'artist']
43
+const sansSidebarTypes = ['episode']
44
+
41
 export default {
45
 export default {
42
     components: { sidebar, featuredImage, card },
46
     components: { sidebar, featuredImage, card },
43
-    props: {
44
-        sidebar: { type: Boolean },
45
-        grid: { type: Boolean },
46
-        sortBy: { type: String },
47
-        isWide: { type: Boolean }
48
-    },
49
     mixins: [postTypeGetters, scrollTop, heroUtils],
47
     mixins: [postTypeGetters, scrollTop, heroUtils],
50
     data() {
48
     data() {
51
         return {
49
         return {
58
         }
56
         }
59
     },
57
     },
60
     computed: {
58
     computed: {
59
+        grid() {
60
+            return gridTypes.includes(this.type)
61
+        },
62
+        isWide() {
63
+            return wideTypes.includes(this.type)
64
+        },
65
+        sidebar() {
66
+            return !sansSidebarTypes.includes(this.type)
67
+        },
61
         type() {
68
         type() {
62
             // Checks for type and fixes Episodes route edge case
69
             // Checks for type and fixes Episodes route edge case
63
-            return typeFromRoute(this.$route)
70
+            return this.$route.params.type
71
+        },
72
+        sortBy() {
73
+            return this.$route.params.sortBy
64
         },
74
         },
65
         pType() {
75
         pType() {
66
             if(!typeFromRoute(this.$route)) return
76
             if(!typeFromRoute(this.$route)) return
135
         },
145
         },
136
         async getPageForType(type) {
146
         async getPageForType(type) {
137
             await this._getAll('page', this.$store)
147
             await this._getAll('page', this.$store)
138
-            if(!this.allPages) return console.warn('no pages in state', this)
148
+            if(!this.allPages) throw 'no pages in state'
139
             const page = this.allPages.filter(page => page.slug == `${type}s`)[0]
149
             const page = this.allPages.filter(page => page.slug == `${type}s`)[0]
140
-            if(!page) return console.warn(`no page for ${type} found`)
150
+            if(!page) throw `No page: ${type} found. Cannot set hero.`
141
             return page
151
             return page
142
         },
152
         },
143
         // _setHeroInfo(post) {} from mixin
153
         // _setHeroInfo(post) {} from mixin
144
         // _clearHero(store) {} from mixin
154
         // _clearHero(store) {} from mixin
145
         async checkAndSetHero(type) {
155
         async checkAndSetHero(type) {
146
             this._clearHero(this.$store)
156
             this._clearHero(this.$store)
147
-            const page = await this.getPageForType(type)
148
-            // We always set a hero no matter what
149
-            // Because the hero component will deal
150
-            // with how to render based on hero.url
151
-            this.$store.commit('SET_HERO', this._setHeroInfo(page))
157
+            try {
158
+                const page = await this.getPageForType(type)
159
+                // We always set a hero no matter what
160
+                // Because the hero component will deal
161
+                // with how to render based on hero.url
162
+                this.$store.commit('SET_HERO', this._setHeroInfo(page))
163
+            } catch (err) {
164
+                console.error(err)
165
+            }
152
         },
166
         },
153
         setIntersectionLoader() {
167
         setIntersectionLoader() {
154
             // KeepFetching is UNSET for certain post types and sort types in `loadMorePosts()`
168
             // KeepFetching is UNSET for certain post types and sort types in `loadMorePosts()`
221
     },
235
     },
222
     mounted() {
236
     mounted() {
223
         // This only fires navigating from a non-list page > list page
237
         // This only fires navigating from a non-list page > list page
238
+        console.log(this.$route)
239
+        console.log(this.type)
240
+        console.log(this.sortBy)
224
         this.clearAndInitPostList('mounted')
241
         this.clearAndInitPostList('mounted')
225
     },
242
     },
226
     beforeDestroy() {
243
     beforeDestroy() {

+ 6
- 5
vue-theme/src/router/routes.js Dosyayı Görüntüle

6
 
6
 
7
 const gridWithSidebar = { sidebar: true, grid: true }
7
 const gridWithSidebar = { sidebar: true, grid: true }
8
 const gridSansSidebar = { sidebar: false, grid: true }
8
 const gridSansSidebar = { sidebar: false, grid: true }
9
-const sansGridWithSidebar = { sidebar: true, grid: false }
9
+const sansGridWithSidebar = { sidebar: true, grid: false, isWide: true }
10
 
10
 
11
 export default [
11
 export default [
12
     // Home Page
12
     // Home Page
14
     // List Pages
14
     // List Pages
15
     {
15
     {
16
         path: '/:type',
16
         path: '/:type',
17
-        component: listPage
17
+        component: listPage,
18
+        props: gridWithSidebar,
18
     },
19
     },
19
     {
20
     {
20
         path: '/:type/sorted/:sortBy',
21
         path: '/:type/sorted/:sortBy',
21
-        component: listPage
22
+        component: listPage,
23
+        props: gridWithSidebar,
22
     },
24
     },
23
     // Single Pages
25
     // Single Pages
24
     {
26
     {
25
         path: '/:type/:slug',
27
         path: '/:type/:slug',
26
         component: singlePage,
28
         component: singlePage,
27
-        props: { sidebar: true },
28
     },
29
     },
29
-]
30
+]

Loading…
İptal
Kaydet