Fix permalink issue

Remove id from URL Separate post and posts component
rtCamp · Apr 12, 2017 · 0ac067f · 0ac067f
1 parent 595490a
commit 0ac067f
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 95 deletions.
diff --git a/dist/build.js b/dist/build.js
diff --git a/functions.php b/functions.php
@@ -7,7 +7,10 @@ function rest_theme_scripts() {
 
 	$base_url  = esc_url_raw( home_url() );
 	$base_path = rtrim( parse_url( $base_url, PHP_URL_PATH ), '/' );
+
 	wp_enqueue_script( 'rest-theme-vue', get_template_directory_uri() . '/dist/build.js', array( 'jquery', 'wp-api' ), '1.0.0', true );
+
+	//wp_enqueue_script( 'rest-theme-vue', 'http://localhost:8081/dist/build.js', array( 'jquery', 'wp-api' ), '1.0.0', true );
 	wp_localize_script( 'rest-theme-vue', 'rtwp', array(
 		'root'      => esc_url_raw( rest_url() ),
 		'base_url'  => $base_url,
@@ -28,3 +31,10 @@ function rest_theme_scripts() {
 	);
 }
 add_filter( 'excerpt_more', '__return_false' );
+
+add_action( 'after_setup_theme', function () {
+	global $wp_rewrite;
+	$wp_rewrite->permalink_structure = $wp_rewrite->root . 'post/%postname%/';
+	$wp_rewrite->page_structure      = $wp_rewrite->root . 'page/%pagename%/';
+	$wp_rewrite->front               = $wp_rewrite->root;
+} );
diff --git a/src/components/page.vue b/src/components/page.vue
@@ -4,7 +4,7 @@
 
 <template>
 
-<div class="row rt-main" >
+<div class="row rt-main" v-if="loaded == 'true'">
 
 	<div class="medium-12 small-12 column" >
 
@@ -34,10 +34,8 @@ export default {
 
 	data() {
 		return {
-			page:{
-				title: { rendered: '' },
-				content: { rendered: '' }
-			}
+			page:{},
+			loaded:'false'
 		}
 
 	},
@@ -48,10 +46,11 @@ export default {
 			var vm = this;
 			wp.api.loadPromise.done( function() {
 
-				var post = new wp.api.models.Page( { id: vm.$route.params.id } );
-				post.fetch().done( function (data) {
+				var post = new wp.api.models.Page();
+				post.fetch( { data: { _embed:'1', slug:vm.$route.params.name } } ).done( function (data) {
 					console.log( data );
-					vm.page = data;
+					vm.page = data[0];
+					vm.loaded = 'true';
 				});
 			});
 

diff --git a/src/components/post.vue b/src/components/post.vue
@@ -4,35 +4,7 @@
 
 <template>
 
-		<div class="medium-12 small-12 column" v-if="!isSingle">
-
-			<div class="rt-post">
-
-				<h2 class="rt-post-title"><router-link :to="{ name: 'post', params: { id: post.id }}"> {{ post.title.rendered }} </router-link> </h2>
-				<div class="rt-meta">
-				<span class="posted-on">
-					Posted On
-					<span class="date">
-						{{ formatDate( post.date ) }}
-					</span>
-				</span>
-				<span class="authormeta">
-					By
-					<span class="author">
-					{{ post._embedded.author[0].name }}
-					</span>
-				</span>
-				</div>
-				<h4></h4>
-
-				<div class="rt-post-excerpt rt-content"  v-html="post.excerpt.rendered" > </div>
-
-
-			</div>
-
-		</div>
-
-		<div class="row rt-main" v-else>
+		<div class="row rt-main" v-if="loaded == 'true'">
 
 			<div class="medium-12 small-12 column" >
 
@@ -57,37 +29,17 @@
 <script>
 export default {
 
-	props: {
-		post: {
-			type: Object,
-			default() {
-					return {
-					id: 0,
-					slug: '',
-					title: { rendered: '' },
-					content: { rendered: '' },
-					excerpt: { rendered: '' },
-					date:'',
-					_embedded:{ author: [ { name:''} ] }
-
-				}
-			}
-		}
-	},
-
 	mounted: function() {
 
-		if (!this.post.id) {
-
 			this.getPost();
-			this.isSingle = true;
-		}
 	},
 
 	data() {
 		return {
 			base_path: rtwp.base_path,
-			isSingle: false
+			post:{},
+			loaded:'false'
+
 		}
 	},
 
@@ -97,30 +49,14 @@ export default {
 			var vm = this;
 			wp.api.loadPromise.done( function() {
 
-				var post = new wp.api.models.Post( { id: vm.$route.params.id } );
-				post.fetch( { data: { _embed:'1' } } ).done( function (data) {
+				var post = new wp.api.models.Post( );
+				post.fetch( { data: { _embed:'1', slug:vm.$route.params.name } } ).done( function (data) {
 					//console.log( data );
-					vm.post = data;
+					vm.post = data[0];
+					vm.loaded = 'true';
 				});
 			});
 
-		},
-		formatDate:function ( value ) {
-			if (value) {
-				var date  = new Date( value );
-				var monthNames = [
-				"January", "February", "March",
-				"April", "May", "June", "July",
-				"August", "September", "October",
-				"November", "December"
-				];
-
-				var day = date.getDate();
-				var monthIndex = date.getMonth();
-				var year = date.getFullYear();
-
-				return monthNames[monthIndex] + ',' + day + ' ' + year;
-			}
 		}
 	}
 }

diff --git a/src/components/posts.vue b/src/components/posts.vue
@@ -13,7 +13,37 @@
 
 
         </div>
-        <post v-for="post in posts" :post="post"></post>
+      <!--  <post v-for="post in posts" :post="post"></post> -->
+
+
+		<div class="medium-12 small-12 column" v-for="post in posts" v-if="loaded == 'true'">
+
+			<div class="rt-post">
+
+				<h2 class="rt-post-title"><router-link :to="{ name: 'post', params: { name:post.slug }}"> {{ post.title.rendered }} </router-link> </h2>
+				<div class="rt-meta">
+				<span class="posted-on">
+					Posted On
+					<span class="date">
+						{{ formatDate( post.date ) }}
+					</span>
+				</span>
+				<span class="authormeta">
+					By
+					<span class="author">
+					{{ post._embedded.author[0].name }}
+					</span>
+				</span>
+				</div>
+				<h4></h4>
+
+				<div class="rt-post-excerpt rt-content"  v-html="post.excerpt.rendered" > </div>
+
+
+			</div>
+
+		</div>
+
     </div>
 </template>
 
@@ -30,15 +60,16 @@ export default {
         data() {
 
         	return {
-                posts: [],
+                posts:{},
                 currentPage: '',
                 prevPage: '',
                 nextPage: '',
                 showNext:'true',
                 showPrev:'true',
                 postCollection:'',
                 postPerPage: '10',
-                totalPages: ''
+                totalPages: '',
+                loaded:'false'
             }
 
         },
@@ -58,6 +89,7 @@ export default {
                         vm.posts = data;
                         vm.totalPages = header.getResponseHeader( 'X-WP-TotalPages');
                         vm.currentPage = 1;
+                        vm.loaded = 'true';
 					});
 
             	} );
@@ -94,7 +126,24 @@ export default {
 
 					vm.rtChangePage(vm.currentPage);
 				}
-            }
+            },
+            formatDate:function ( value ) {
+                if (value) {
+                    var date  = new Date( value );
+                    var monthNames = [
+                    "January", "February", "March",
+                    "April", "May", "June", "July",
+                    "August", "September", "October",
+                    "November", "December"
+                    ];
+
+                    var day = date.getDate();
+                    var monthIndex = date.getMonth();
+                    var year = date.getFullYear();
+
+                    return monthNames[monthIndex] + ',' + day + ' ' + year;
+                }
+		    }
 
 
         }

diff --git a/src/components/theme-header.vue b/src/components/theme-header.vue
@@ -5,7 +5,7 @@
 			<nav id="site-navigation">
 				<ul>
 					<li v-for="item in menus" v-if="item.type != 'custom'">
-						<router-link :to="{ name: 'page', params: { title:removeSpace( item.title ), id: item.object_id  }}"> {{ item.title }} </router-link>
+						 <router-link :to="{ name: 'page', params: { name: getUrlName( item.url ) }}"> {{ item.title }} </router-link>
 					</li>
 				</ul>
 			</nav>
@@ -32,7 +32,7 @@ export default {
 		getMenu: function () {
 
 			var vm = this;
-			var url =  rtwp.root + 'wp-api-menus/v2/menu-locations/primary-menu';
+			var url =  rtwp.root + 'wp-api-menus/v2/menu-locations/primary-menu?_embed=true';
 			$ = jQuery;
 
 			$.ajax({
@@ -56,13 +56,14 @@ export default {
 			});
 
 		},
-		removeSpace: function (value) {
-			if( value ) {
-				var str = value.toLowerCase().trim();
-				return str.replace(/\s/g, '-');
-			}
+		getUrlName:function( url ) {
 
+			var array = url.split('/');
+			var lastsegment = array[array.length-2];
+			return lastsegment;
 		}
+
+
 	}
 
 }

diff --git a/src/main.js b/src/main.js
@@ -33,8 +33,8 @@ const router = new VueRouter({
 	routes: [
 
 		{ path: '/', name:'home',component: posts },
-		{ path: '/post/:id', name:'post', component: post },
-		{ path: '/page/:title/:id', name:'page', component: page },
+		{ path: '/post/:name', name:'post', component: post },
+		{ path: '/page/:name', name:'page', component: page },
 
 	]
 });