Browse Source

:recycle: further simplifying lists | adding sidebar back to single

tags/0.9.0
J 4 years ago
parent
commit
9a1daba836
3 changed files with 30 additions and 57 deletions
  1. 11
    32
      vue-theme/src/pages/list.vue
  2. 19
    20
      vue-theme/src/pages/single.vue
  3. 0
    5
      vue-theme/src/utils/helpers.js

+ 11
- 32
vue-theme/src/pages/list.vue View File

73
             return this.$route.params.sortBy
73
             return this.$route.params.sortBy
74
         },
74
         },
75
         pType() {
75
         pType() {
76
-            if(!typeFromRoute(this.$route)) return
77
-            return this.sortBy ? `${convertTitleCase(typeFromRoute(this.$route).split('/')[0])}s` : `${convertTitleCase(this.type)}s`
76
+            if(!this.type) return
77
+            return `${convertTitleCase(this.type)}s`
78
         },
78
         },
79
         loaded() {
79
         loaded() {
80
             if (!this.pType) return
80
             if (!this.pType) return
86
         },
86
         },
87
     },
87
     },
88
     methods: {
88
     methods: {
89
-        _getDispatchParams(perPageOverride) {
90
-            return {
91
-                sortType: this.sortBy,
92
-                params: {
93
-                    limit: perPageOverride ? perPageOverride : this.perPage,
94
-                    page: this.page
95
-                }
96
-            }
97
-        },
98
         clearAllPosts() {
89
         clearAllPosts() {
99
             if(!this.type) return console.error(`post type: ${this.type} not found...`)
90
             if(!this.type) return console.error(`post type: ${this.type} not found...`)
100
-            this.$store.commit(`CLEAR_${this.type.toUpperCase()}S`)
91
+            this.$store.commit(`CLEAR_${this.pType.toUpperCase()}`)
101
             // this.$store.commit(`${this.type.toUpperCase()}S_LOADED`)
92
             // this.$store.commit(`${this.type.toUpperCase()}S_LOADED`)
102
         },
93
         },
103
         async loadMorePosts() {
94
         async loadMorePosts() {
117
             if(!this.type) throw `post type: ${this.type} not found...`
108
             if(!this.type) throw `post type: ${this.type} not found...`
118
 
109
 
119
             // Set some default dispatch paramters
110
             // Set some default dispatch paramters
120
-            let dispatchAction = `getMore${this.pType}`
121
-            let params = this._getDispatchParams()
111
+            let dispatchAction = 'More'
112
+            let params = { limit: this.perPage, page: this.page }
122
             
113
             
123
             // For episodes, or material sort we grab EVERYTHING
114
             // For episodes, or material sort we grab EVERYTHING
124
             const getAllClause = this.type == 'episode' || this.type == 'artist' && this.sortBy == sortTypes.material
115
             const getAllClause = this.type == 'episode' || this.type == 'artist' && this.sortBy == sortTypes.material
125
             if(getAllClause) {
116
             if(getAllClause) {
126
-                dispatchAction = `getAll${this.pType}`
127
-                params = this._getDispatchParams(-1)
128
-                
129
-                // Clear sortType if this is an episodes list
130
-                params.sortType = this.type == 'episode' ? null : params.sortType
117
+                dispatchAction = 'All'
118
+                params.limit = -1
131
             }
119
             }
132
 
120
 
133
             let res = []
121
             let res = []
134
             // We always grab all pages on hero init so no need to do it here
122
             // We always grab all pages on hero init so no need to do it here
135
             if(this.pType && this.keepFetching && this.type != 'page') {
123
             if(this.pType && this.keepFetching && this.type != 'page') {
136
-                res = await this.$store.dispatch(dispatchAction, params)
124
+                res = await this.$store.dispatch(`get${dispatchAction}${this.pType}`, { sortType: this.sortBy, params })
137
             }
125
             }
138
 
126
 
139
             // Stop trying to load more posts
127
             // Stop trying to load more posts
192
             }
180
             }
193
         },
181
         },
194
         clearAndInitPostList(caller) {
182
         clearAndInitPostList(caller) {
195
-            console.log(`clearAndInitPostList from ${caller}...`)
196
-            console.log('---')
197
-
198
             this.page = 0
183
             this.page = 0
199
             this.keepFetching = true
184
             this.keepFetching = true
200
 
185
 
212
         // This only fires navigating from
197
         // This only fires navigating from
213
         // a list page, to another list page
198
         // a list page, to another list page
214
         // and the post type has changed
199
         // and the post type has changed
215
-        type(newType, oldType) {
216
-            if(!postTypes.includes(newType)) return console.warn('type not valid...')
200
+        type(newType) {
201
+            if(!postTypes.includes(newType)) return console.warn('Type not valid...')
217
 
202
 
218
             // Ignore types with presorts so the sortBy watcher can handle them
203
             // Ignore types with presorts so the sortBy watcher can handle them
219
             const ignore = ['event', 'exhibition', 'artist']
204
             const ignore = ['event', 'exhibition', 'artist']
221
             
206
             
222
             this.clearAndInitPostList('type change')
207
             this.clearAndInitPostList('type change')
223
         },
208
         },
224
-        sortBy(newSort, oldSort) {
209
+        sortBy(newSort) {
225
             if(Object.values(sortTypes).includes(newSort)) {
210
             if(Object.values(sortTypes).includes(newSort)) {
226
                 this.clearAndInitPostList('sort change')
211
                 this.clearAndInitPostList('sort change')
227
             }
212
             }
228
-        },
229
-        // Only fire if the sort type has changed
230
-        // and the post type is the same
231
-        // and both sorts are valid
232
-        $route(to, from) {
233
-            console.log('to :', to)
234
         }
213
         }
235
     },
214
     },
236
     mounted() {
215
     mounted() {

+ 19
- 20
vue-theme/src/pages/single.vue View File

53
 
53
 
54
 export default {
54
 export default {
55
     components: { sidebar, gallery, credits, card, breadcrumb },
55
     components: { sidebar, gallery, credits, card, breadcrumb },
56
-    props: {
57
-        sidebar: { type: Boolean },
58
-    },
59
     mixins: [postTypeGetters, scrollTop, heroUtils],
56
     mixins: [postTypeGetters, scrollTop, heroUtils],
60
     data() {
57
     data() {
61
         return {
58
         return {
66
         }
63
         }
67
     },
64
     },
68
     computed: {
65
     computed: {
66
+        sidebar() {
67
+            return true
68
+        },
69
         type() {
69
         type() {
70
             // Checks for type and fixes Episodes route edge case
70
             // Checks for type and fixes Episodes route edge case
71
-            return typeFromRoute(this.$route)
71
+            return this.$route.params.type
72
         },
72
         },
73
         /**
73
         /**
74
          * We get the actual post data using the slug
74
          * We get the actual post data using the slug
76
          */
76
          */
77
         singlePost() {
77
         singlePost() {
78
             if (!this[this.type]) return
78
             if (!this[this.type]) return
79
-            const type = dePluralize(this.type)
80
 
79
 
81
             // State not a getter!
80
             // State not a getter!
82
             const singleOfTypeFromState =
81
             const singleOfTypeFromState =
83
-                this[this.type][`single${convertTitleCase(type)}`]
82
+                this[this.type][`single${convertTitleCase(this.type)}`]
84
 
83
 
85
             if (!singleOfTypeFromState) return
84
             if (!singleOfTypeFromState) return
86
 
85
 
144
             Object.keys(byIndex).forEach(galleryIndex => {
143
             Object.keys(byIndex).forEach(galleryIndex => {
145
                 if (
144
                 if (
146
                     byIndex[galleryIndex].includes(
145
                     byIndex[galleryIndex].includes(
147
-                        parseInt(imageInfo.dataset.id),
146
+                        parseInt(imageInfo.dataset.id)
148
                     )
147
                     )
149
                 )
148
                 )
150
                     matchingIndex = galleryIndex
149
                     matchingIndex = galleryIndex
167
          */
166
          */
168
         checkAndSetHero(post) {
167
         checkAndSetHero(post) {
169
             this._clearHero(this.$store)
168
             this._clearHero(this.$store)
170
-            if (!post) return console.warn(`no post found`)
169
+            if (!post) throw `No post found. Cannot set hero.`
171
             this.$store.commit('SET_HERO', this._setHeroInfo(post))
170
             this.$store.commit('SET_HERO', this._setHeroInfo(post))
172
         },
171
         },
173
 
172
 
210
             /**
209
             /**
211
              * At the point we MUST have singlePostData
210
              * At the point we MUST have singlePostData
212
              */
211
              */
213
-            this.checkAndSetHero(singlePostData)
214
-            await this.$store.dispatch(
215
-                `getSingle${convertTitleCase(this.type)}`,
216
-                singlePostData.id,
217
-            )
212
+            try {
213
+                this.checkAndSetHero(singlePostData)
214
+                await this.$store.dispatch(
215
+                    `getSingle${convertTitleCase(this.type)}`,
216
+                    singlePostData.id,
217
+                )
218
+            } catch (err) {
219
+                console.error(err)
220
+            }
218
             this.loading = false
221
             this.loading = false
219
         },
222
         },
220
     },
223
     },
223
         $route(to, from) {
226
         $route(to, from) {
224
             // Only load post data when navigating TO a single page
227
             // Only load post data when navigating TO a single page
225
             const path = to.fullPath.split('/').filter(p => p)
228
             const path = to.fullPath.split('/').filter(p => p)
226
-            const hasSort = path.filter(fragment => Object.values(sortTypes).includes(fragment))
227
-            console.log('hasSort :', hasSort)
228
-            console.log('path :', path)
229
-            if (path.length >= 2 && postTypes.includes(path[0]) && hasSort.length < 1) {
230
-                this._clearHero(this.$store)
231
-                this.loadPostData()
232
-            }
229
+            if (path.length < 2 || !postTypes.includes(to.params.type)) return
230
+            this._clearHero(this.$store)
231
+            this.loadPostData()
233
         },
232
         },
234
     },
233
     },
235
     created() {
234
     created() {

+ 0
- 5
vue-theme/src/utils/helpers.js View File

3
     return type.charAt(0).toUpperCase() + type.slice(1)
3
     return type.charAt(0).toUpperCase() + type.slice(1)
4
 }
4
 }
5
 
5
 
6
-const dePluralize = type => {
7
-    return type[type.length - 1] === 's' ? type.slice(0, -1) : type
8
-}
9
-
10
 const sortTypes = {
6
 const sortTypes = {
11
     alpha: 'by-alpha',
7
     alpha: 'by-alpha',
12
     recent: 'by-recent',
8
     recent: 'by-recent',
96
 
92
 
97
 export {
93
 export {
98
     convertTitleCase,
94
     convertTitleCase,
99
-    dePluralize,
100
     typeFromRoute,
95
     typeFromRoute,
101
     sortTypes,
96
     sortTypes,
102
     postTypes,
97
     postTypes,

Loading…
Cancel
Save