Selaa lähdekoodia

Return entries from database.

Maciej Gołaszewski 6 vuotta sitten
vanhempi
commit
f32cec80f3

+ 32 - 11
packages/ckeditor5-mention/dev-server/index.js

@@ -6,6 +6,9 @@
 /* eslint-env node */
 
 const http = require( 'http' );
+const fs = require( 'fs' );
+const querystring = require( 'querystring' );
+const url = require( 'url' );
 
 const hostname = '127.0.0.1';
 const port = 3000;
@@ -14,12 +17,24 @@ const server = http.createServer( function( req, res ) {
 	res.statusCode = 200;
 	res.setHeader( 'Content-Type', 'application/json' );
 
-	readEntries( getTimeout() ).then( entries => {
-		res.setHeader( 'Access-Control-Allow-Origin', '*' );
-		res.setHeader( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept' );
+	const { search } = querystring.parse( url.parse( req.url ).query );
 
-		res.end( JSON.stringify( entries ) + '\n' );
-	} );
+	readEntries( getTimeout() )
+		.then( entries => entries
+			.map( ( { picture, name, login } ) => ( {
+				id: `@${ login.username }`,
+				username: login.username,
+				fullName: `${ name.first } ${ name.last }`,
+				thumbnail: picture.thumbnail
+			} ) )
+			.sort( ( a, b ) => a.username.localeCompare( b.username ) )
+			.filter( entry => entry.fullName.includes( search ) || entry.username.includes( search ) ) )
+		.then( entries => {
+			res.setHeader( 'Access-Control-Allow-Origin', '*' );
+			res.setHeader( 'Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept' );
+
+			res.end( JSON.stringify( entries ) + '\n' );
+		} );
 } );
 
 server.listen( port, hostname, () => {
@@ -27,12 +42,18 @@ server.listen( port, hostname, () => {
 } );
 
 function readEntries( timeOut ) {
-	return new Promise( resolve => {
-		setTimeout( () => {
-			resolve( [
-				{ id: '@jodator', name: 'Maciej Gołaszewski', userId: 123 }
-			] );
-		}, timeOut );
+	return new Promise( ( resolve, reject ) => {
+		fs.readFile( './data/db.json', ( err, data ) => {
+			if ( err ) {
+				reject( err );
+			}
+
+			const entries = JSON.parse( data );
+
+			setTimeout( () => {
+				resolve( entries );
+			}, timeOut );
+		} );
 	} );
 }
 

+ 19 - 0
packages/ckeditor5-mention/tests/manual/mention-asynchronous.html

@@ -11,3 +11,22 @@
 		<figcaption>CKEditor logo - caption</figcaption>
 	</figure>
 </div>
+
+<style>
+	.custom-item {
+		display: block;
+		padding: 1em;
+	}
+
+	.custom-item.ck-on {
+		color: white;
+	}
+
+	.custom-item .custom-item-username {
+		color: #666;
+	}
+
+	.custom-item.ck-on .custom-item-username{
+		color: #ddd;
+	}
+</style>

+ 13 - 4
packages/ckeditor5-mention/tests/manual/mention-asynchronous.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* global console, window, fetch */
+/* global console, window, fetch, document */
 
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
@@ -31,7 +31,16 @@ ClassicEditor
 			feeds: [
 				{
 					marker: '@',
-					feed: getFeed
+					feed: getFeed,
+					itemRenderer: ( { fullName, id, thumbnail } ) => {
+						const span = document.createElement( 'span' );
+
+						span.classList.add( 'custom-item' );
+
+						span.innerHTML = `<img src="${ thumbnail }"> ${ fullName } <span class="custom-item-username">${ id }</span>`;
+
+						return span;
+					}
 				}
 			]
 		}
@@ -43,12 +52,12 @@ ClassicEditor
 		console.error( err.stack );
 	} );
 
-function getFeed() {
+function getFeed( text ) {
 	const fetchOptions = {
 		method: 'get',
 		mode: 'cors'
 	};
 
-	return fetch( 'http://localhost:3000', fetchOptions )
+	return fetch( `http://localhost:3000?search=${ text }`, fetchOptions )
 		.then( response => response.json() );
 }

+ 3 - 0
packages/ckeditor5-mention/tests/manual/mention-asynchronous.md

@@ -32,3 +32,6 @@ Mention panel should be closed on:
 - Click outside the panel view.
 - Changing selection - like placing it in other part of text.
 
+### Disclaimer
+
+This manual tests uses data generated by [Random User Generator](https://randomuser.me/).