Add pagination for existing relationships

assets/js/src/App.vue

@@ -208,10 +208,15 @@
 </style>
 
 <script>
-	var PickerList = require( './components/picker-list.vue' );
-	var PickerSearch = require( './components/picker-search.vue' );
+    /*
+    var PickerList = require( './components/picker-list.vue' );
+    var PickerSearch = require( './components/picker-search.vue' );
+    */
 
-	module.exports = {
+    var PickerList = require( './components/picker-list.vue' ).default;
+    var PickerSearch = require( './components/picker-search.vue' ).default;
+
+    module.exports = {
 		data: function() {
 			return Object.assign({}, {
 				"activeRelationship": window.ContentConnectData.relationships[0],
@@ -221,7 +226,8 @@
 				"searchText": "",
 				"prevPages": false,
 				"morePages": false,
-				"currentPage": 1
+                "currentPage": 1,
+                "didSearch": false,
 			}, window.ContentConnectData);
 		},
 		components: {

assets/js/src/components/picker-list.vue

@@ -2,18 +2,24 @@
 	<div class="content-connect-picker-list-container">
 		<ul class="content-connect-picker">
 			<draggable v-if="sortable === true" v-model="localItems" :options="{ghostClass: 'ghost'}" @start="drag=true" @end="drag=false">
-				<li v-for="item in items" class="content-connect-picker-list-item sortable">
+				<li v-for="item in paginatedItems" class="content-connect-picker-list-item sortable">
 					<span class="content-connect-grab-icon dashicons dashicons-move"></span>
 					<span class="content-connect-selected-item-name">{{ item.name }}</span>
 					<span class="delete-item content-connect-delete-button" v-on:click.prevent="deleteItem(item)">delete</span>
 				</li>
 			</draggable>
 
-			<li v-if="sortable === false" v-for="item in items" class="content-connect-picker-list-item">
+			<li v-if="sortable === false" v-for="item in paginatedItems" class="content-connect-picker-list-item">
 				<span class="content-connect-selected-item-name">{{ item.name }}</span>
 				<span class="delete-item content-connect-delete-button" v-on:click.prevent="deleteItem(item)">delete</span>
 			</li>
 		</ul>
+
+        <div class="content-connect-picker-pagination" v-if="paginated">
+			<a class="prev-page" v-if="!isFirstPage" v-on:click.prevent.stop="prevPage()">‹ Previous Page</a>
+			<a class="next-page" v-if="hasNextPage" v-on:click.prevent.stop="nextPage()">Next Page ›</a>
+		</div>
+
 	</div>
 </template>
 
@@ -62,33 +68,109 @@
 	.content-connect-picker-list-item:hover .content-connect-delete-button {
 		visibility: visible;
 	}
+
+    .content-connect-picker-pagination {
+		height: 3em;
+		border-top: 1px solid #ddd;
+		padding-top: 20px;
+	}
+
+	.content-connect-picker-pagination a {
+		cursor: pointer;
+	}
+
+	.content-connect-picker-pagination .next-page {
+		float: right;
+	}
+
 </style>
 
 <script>
 	var draggable = require( 'vuedraggable' );
 
+    export const pickerListPageSize = 10;
 	export default {
 		props: {
 			items: {},
-			sortable: {},
-		},
+            sortable: {}
+        },
+
 		components: {
-			draggable
-		},
+            draggable
+        },
+
+        data() {
+            return {
+                state: {
+                    currentPage: 0
+                }
+            }
+        },
+
+        watch: {
+            items: function( newItems ) {
+                this.state.currentPage = 0;
+            }
+        },
+
 		computed: {
 			localItems: {
 				get() {
-					return this.items;
+					return this.items ? this.items : [];
 				},
 				set( items ) {
 					this.$emit( 'reorder-items', items );
 				}
-			}
-		},
+            },
+
+            itemCount() {
+                return (this.items ? this.items : []).length;
+            },
+
+            paginatedItems() {
+                return this.items ? this.items.slice( 
+                        this.state.currentPage * pickerListPageSize,  
+                        Math.min(this.items.length, (this.state.currentPage * pickerListPageSize) + pickerListPageSize) )
+                    : [];
+            },
+
+            paginated: {
+                get() {
+                    return this.itemCount > pickerListPageSize;
+                }
+            },
+
+            maxPage() {                
+                console.log(this.items);
+                return parseInt(this.itemCount / 10) + (this.itemCount % 10 > 0 ? 1 : 0) - 1;
+            },
+
+            hasNextPage() {
+                return this.state.currentPage < this.maxPage;            
+            },
+
+            isFirstPage() {
+                return this.state.currentPage <= 0;
+            }
+        },
+
 		methods: {
 			deleteItem( item ) {
 				this.$emit( 'delete-item', item );
-			}
-		}
+
+                if ( this.maxPage < this.state.currentPage )
+                {
+                    this.prevPage();
+                }
+            },
+
+            nextPage() {
+                this.state.currentPage++;
+            },
+
+			prevPage() {
+				this.state.currentPage--;
+            },
+        }
 	}
 </script>

assets/js/src/components/picker-search.vue

@@ -40,6 +40,7 @@
 
 	.content-connect-picker-search-container {
 		padding-bottom: 20px;
+        padding-top: 20px;
 	}
 
 	.content-connect-picker-search-input-label {

assets/js/src/content-connect.js

@@ -1,7 +1,9 @@
-var Vue = require( 'vue' );
-var App = require( './App.vue' );
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import App from './App.vue';
 
-Vue.use( require( 'vue-resource' ) );
+Vue.use( VueResource );
+Vue.config.devtools = true;
 
 // Adds the global wp_rest nonce, so we can auth a user
 Vue.http.interceptors.push(function(request, next) {

babel.config.json

@@ -0,0 +1,12 @@
+{
+    "presets": [
+        [
+            "env",
+            {
+                "targets": {
+                    "browsers": "> 0.25%, not dead"
+                }
+            }
+        ]
+    ]
+}

dist/content-connect.js.LICENSE.txt

@@ -0,0 +1,18 @@
+/*!
+ * Vue.js v2.6.11
+ * (c) 2014-2019 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * vue-resource v1.5.1
+ * https://github.com/pagekit/vue-resource
+ * Released under the MIT License.
+ */
+
+/**!
+ * Sortable 1.10.2
+ * @author	RubaXa   <[email protected]>
+ * @author	owenm    <[email protected]>
+ * @license MIT
+ */

includes/UI/MetaBox.php

@@ -29,7 +29,7 @@ public function add_meta_boxes( $post_type, $post ) {
 
 		\add_meta_box( 'tenup-content-connect-relationships', __( "Relationships", "tenup-content-connect" ), array( $this, 'render' ), $post_type, 'advanced', 'high' );
 
-		wp_enqueue_script( 'tenup-content-connect', Plugin::instance()->url . 'assets/js/content-connect.js', array(), Plugin::instance()->version, true );
+		wp_enqueue_script( 'tenup-content-connect', Plugin::instance()->url . 'dist/content-connect.js', array(), Plugin::instance()->version, true );
 		wp_localize_script( 'tenup-content-connect', 'ContentConnectData', apply_filters( 'tenup_content_connect_localize_data', $relationship_data ) );
 	}
 

includes/UI/PostToPost.php

@@ -22,6 +22,7 @@ public function filter_data( $data, $post ) {
 		$final_posts = array();
 
 		$args = array(
+            'posts_per_page' => -1,
 			'post_type' => (array) $other_post_type,
 			'relationship_query' => array(
 				'name' => $this->relationship->name,