ISSITES-5869 add page size for pagination, sort and search functionality

workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/Dashboard.css

@@ -0,0 +1,12 @@
+.table .column-name:hover {
+    cursor: pointer;
+}
+
+.table .column-name:hover:after {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='lexicon-icon lexicon-icon-order-arrow' height='12' width='12' role='presentation' viewBox='0 0 512 512'%3E%3Cpath class='lexicon-icon-outline order-arrow-arrow-down' d='M307.6,431.5l71.6,71.6c11.9,10.8,32.9,11.2,45.8,0l71.6-71.6c29.8-33.6-15.8-74.9-45.8-45.8l-16.7,16.7V31.6c0-42.5-64-42.5-64,0v370.8l-16.7-16.7C321.6,355.8,277.9,400.6,307.6,431.5z' fill='%23999AA3'%3E%3C/path%3E%3Cpath class='lexicon-icon-outline order-arrow-arrow-up' d='M204.4,80.5L132.8,8.9C120.9-1.8,99.9-2.3,87,8.9L15.4,80.5c-29.8,33.6,15.7,74.9,45.8,45.8l16.7-16.7v370.8c0,42.5,64,42.5,64,0V109.6l16.7,16.7C190.4,156.2,234.1,111.4,204.4,80.5z' fill='%23999AA3'%3E%3C/path%3E%3C/svg%3E");
+    padding-left: 0.5rem;
+}
+
+.table .column-name:hover svg {
+    display: none;
+}

workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Pagination.js

@@ -1,20 +1,37 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
 import React from 'react';
 
 import '../Dashboard.css';
 import getIconSpriteMap from './getIconSpriteMap';
 
 function Pagination(props) {
-	var {page, setPage, totalCount} = props;
+	var {delta, page, setDelta, setPage, totalCount} = props;
 
 	return (
 		<ClayPaginationBarWithBasicItems
-			activeDelta={10}
+			activeDelta={delta}
 			activePage={page}
+            deltas={[10, 25, 50].map((size) => ({
+                label: size,
+            }))}
 			ellipsisBuffer={1}
 			ellipsisProps={{'aria-label': 'More', 'title': 'More'}}
+            onDeltaChange={setDelta}
 			onPageChange={setPage}
-			showDeltasDropDown={false}
 			spritemap={getIconSpriteMap()}
 			totalItems={totalCount}
 		/>

workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Search.js

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
+import React from 'react';
+
+import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
+import {ClayInput} from '@clayui/form';
+import ClayLayout from '@clayui/layout';
+import getIconSpriteMap from './getIconSpriteMap';
+
+function Search({handleClearSearch, handleKeyPress, searchTerm, totalCount}) {
+	return (
+        <>
+            <ClayLayout.Row justify="between">
+                <ClayLayout.Col size={3}>
+                    <ClayInput.Group>
+                        <ClayInput.GroupItem>
+                            <ClayInput
+                                aria-label="Search"
+                                className="form-control input-group-inset input-group-inset-after"
+                                id="searchInput"
+                                onKeyUp={handleKeyPress}
+                                placeholder="Search"
+                                type="text"
+                            />
+                            <ClayInput.GroupInsetItem after tag="span">
+                                {searchTerm &&
+                                    <ClayButtonWithIcon
+                                        aria-label="Close search"
+                                        displayType="unstyled"
+                                        onClick={handleClearSearch}
+                                        spritemap={getIconSpriteMap()}
+                                        symbol="times"
+                                    />
+                                }
+                                {!searchTerm &&
+                                    <ClayButtonWithIcon
+                                        aria-label="Search"
+                                        displayType="unstyled"
+                                        onClick={handleKeyPress}
+                                        spritemap={getIconSpriteMap()}
+                                        symbol="search"
+                                        type="submit"
+                                    />
+                                }
+                            </ClayInput.GroupInsetItem>
+                        </ClayInput.GroupItem>
+                    </ClayInput.Group>
+                </ClayLayout.Col>
+
+                <ClayLayout.Col>
+                    <ClayLayout.Row justify="end">
+                        <ClayButton
+                            aria-label="Add"
+                            className="nav-btn nav-btn-monospaced py-3 px-3"
+                            displayType="primary"
+                        >
+                            New App
+                        </ClayButton>
+                    </ClayLayout.Row>
+                </ClayLayout.Col>
+            </ClayLayout.Row>
+
+            {searchTerm && 
+                <div className="search-results">
+                    {totalCount} results for "{searchTerm}"
+                </div>            
+            }
+        </>
+	);
+}
+
+export default Search;

workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/Table.js

@@ -1,6 +1,22 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 import {useState} from 'react';
+import ClayLoadingIndicator from '@clayui/loading-indicator';
 
 import Pagination from './Pagination';
+import Search from './Search';
 import TableBody from './TableBody';
 import TableHead from './TableHead';
 import useProducts from '../hooks/useProducts';
@@ -16,85 +32,122 @@ const Table = () => {
 	const publisherName = 'Acme Co';
 	const [languageId] = useState(Liferay.ThemeDisplay.getLanguageId());
 	const [page, setPage] = useState(1);
+	const [delta, setDelta] = useState(10);
+	const [sort, setSort] = useState('');
+	const [order, setOrder] = useState(true);
+	const [search, setSearch] = useState('');
+
+	const {data, refetch, status} = useProducts(languageId, page, delta, sort, search);
+
+	function handleClearSearch() {
+		setSearch('');
+		document.getElementById('searchInput').value = '';
+	}
+
+	function handleKeyPress(event) {
+		setSearch(event.target.value);
+	}
 
-	const {data, status} = useProducts(languageId, page);
+	function handleSortClick(event) {
+		const sortCategory = event.target.dataset.category;
+
+		if (sortCategory === 'name' || sortCategory === 'modifiedDate') {
+			if (sort.includes(sortCategory)) {
+				const currentOrder = order ? ':asc' : ':desc';
+
+				setSort(sortCategory + currentOrder);
+				setOrder(!order);
+			} else {
+				setSort(sortCategory + ':asc');
+				setOrder(true);
+			}
+
+			refetch();
+		}
+	}
 
 	if (status === 'success' && data.totalCount === 0) {
 		return (
-			<div className="align-items-center d-flex flex-column justify-items-center no-apps">
-				<svg
-					width="144"
-					height="80"
-					viewBox="0 0 144 80"
-					fill="none"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<rect width="144" height="80" rx="8" fill="#EDF3FE" />
-					<path
-						opacity="0.2"
-						d="M86 44H76V54H86V44Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M86 44H76V54H86V44Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<path
-						opacity="0.2"
-						d="M68 44H58V54H68V44Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M68 44H58V54H68V44Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<path
-						opacity="0.2"
-						d="M86 26H76V36H86V26Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M86 26H76V36H86V26Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<path
-						opacity="0.2"
-						d="M68 26H58V36H68V26Z"
-						fill="#0B5FFF"
-					/>
-					<path
-						d="M68 26H58V36H68V26Z"
-						stroke="#004AD7"
-						stroke-width="3"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-				</svg>
+			<>
+				<Search handleClearSearch={handleClearSearch} handleKeyPress={handleKeyPress} searchTerm={search} totalCount={data.totalCount}/>
+
+				<div className="align-items-center d-flex flex-column justify-items-center no-apps">
+					<svg
+						width="144"
+						height="80"
+						viewBox="0 0 144 80"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<rect width="144" height="80" rx="8" fill="#EDF3FE" />
+						<path
+							opacity="0.2"
+							d="M86 44H76V54H86V44Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M86 44H76V54H86V44Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							opacity="0.2"
+							d="M68 44H58V54H68V44Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M68 44H58V54H68V44Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							opacity="0.2"
+							d="M86 26H76V36H86V26Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M86 26H76V36H86V26Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+						<path
+							opacity="0.2"
+							d="M68 26H58V36H68V26Z"
+							fill="#0B5FFF"
+						/>
+						<path
+							d="M68 26H58V36H68V26Z"
+							stroke="#004AD7"
+							stroke-width="3"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						/>
+					</svg>
 
-				<h4 className="font-weight-bold">No apps yet</h4>
+					<h4 className="font-weight-bold">No apps yet</h4>
 
-				<div>
-					Create new apps and they will show up here. Click on "New
-					App" to start creating apps
+					<div>
+						Create new apps and they will show up here. Click on "New
+						App" to start creating apps
+					</div>
 				</div>
-			</div>
+			</>
 		);
 	}
 
 	if (status === 'success' && data.totalCount !== 0) {
 		return (
 			<>
+				<Search handleClearSearch={handleClearSearch} handleKeyPress={handleKeyPress} searchTerm={search} totalCount={data.totalCount}/>
+
 				<table className="table">
-					<TableHead columns={columns} />
+					<TableHead columns={columns} handleSortClick={handleSortClick} order={order} sort={sort}/>
 					<TableBody
 						columns={columns}
 						data={data}
@@ -104,7 +157,9 @@ const Table = () => {
 				</table>
 
 				<Pagination
+					delta={delta}
 					page={page}
+					setDelta={setDelta}
 					setPage={setPage}
 					totalCount={data.totalCount}
 				/>
@@ -114,13 +169,11 @@ const Table = () => {
 
 	return (
 		<div className="align-items-center d-flex flex-column justify-items-center">
-			<div class="spinner-border text-primary" role="status">
-				<span class="sr-only">Loading...</span>
-			</div>
+			<ClayLoadingIndicator displayType="primary" shape="squares" size="lg" />
 
 			<div>
 				Hang tight, we are preparing your arrival as publisher and
-				member of{' '}
+				member of&nbsp;
 				<span className="font-weight-bold">{publisherName}</span>
 			</div>
 		</div>

workspaces/liferay-marketplace-workspace/client-extensions/dashboard-remote-app/src/components/TableBody.js

@@ -1,3 +1,17 @@
+/**
+ * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
+ *
+ * This library is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU Lesser General Public License as published by the Free
+ * Software Foundation; either version 2.1 of the License, or (at your option)
+ * any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
+ * details.
+ */
+
 const TableBody = ({columns, data, languageId, status}) => {
 	return (
 		<tbody>