diff --git a/public/styles/views/Shop.css b/public/styles/views/Shop.css index bd9d5dd..f82c1f1 100644 --- a/public/styles/views/Shop.css +++ b/public/styles/views/Shop.css @@ -61,52 +61,4 @@ article header { #item-grid { grid-template-columns: repeat(1, 1fr); } -} - -.pagination { - display: flex; - list-style: none; - border-radius: 0.25rem; - gap: 0.45rem; - margin-top: 2cm; -} - - -.page-item { - --bs-padding-x: 0.5rem; - --bs-padding-y: 0.25rem; -} - -.page-link { - position: relative; - display: block; - padding: var(--bs-padding-y) var(--bs-padding-x); - text-decoration: none; - transition: color .25s ease-in-out, background-color .25s ease-in-out; - outline: 1px solid #dee2e6; -} - -.page-link:hover { - z-index: 2; - background-color: var(--contrast-hover); - color: var(--contrast-inverse); -} - -.page-link:focus { - z-index: 3; - outline: 0; - box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25); -} - -.page-item.active .page-link { - z-index: 3; - background-color: var(--contrast); - color: var(--contrast-inverse); -} - -.page-item.disabled .page-link { - color: var(--form-element-disabled-opacity); - outline-color: var(--form-element-disabled-border-color); - pointer-events: none; - background-color: var(--form-element-disabled-background-color); } \ No newline at end of file diff --git a/src/controllers/Pagination.php b/src/controllers/Pagination.php new file mode 100644 index 0000000..4f5bec7 --- /dev/null +++ b/src/controllers/Pagination.php @@ -0,0 +1,76 @@ +items_per_page = $items_per_page; + $this->total_items = $total_items; + $this->current_page_number = $current_page; + } + + /** + * Returns a query string that maintains all current query string parameters, except page number. + * @return string Query string + */ + private function getCurrentQueryString(): string + { + // create a string with all past query parameters except page and url + unset($_GET['page']); + unset($_GET['url']); + + return '?' . http_build_query($_GET); + } + + /** + * @param array $array + * @return array New array containing only elements to be displayed on current page + */ + public function getCurrentItems(array $array): array + { + return array_slice( + $array, + ($this->current_page_number - 1) * $this->items_per_page, + $this->items_per_page + ); + } + + /** + * Returns HTML code need to display pagination items + * @return string + */ + public function getHTML(): string + { + $current_page_number = $this->current_page_number; + $total_pages = (int)ceil((float)$this->total_items / $this->items_per_page); + $query_string = $this->getCurrentQueryString(); + + $view_file_path = __DIR__ . '/../views/Pagination.php'; + $html = ''; + + // get content from view file + ob_start(); + include $view_file_path; + $html = ob_get_contents(); + ob_end_clean(); + + return $html; + } + + public function index(): void + { + // we don't want the page /pagination to be accessible + (new Error())->handlePageNotFoundError(); + } +} diff --git a/src/controllers/Product.php b/src/controllers/Product.php index 8a2d609..25270dd 100644 --- a/src/controllers/Product.php +++ b/src/controllers/Product.php @@ -6,7 +6,6 @@ use Steamy\Core\Controller; use Steamy\Core\Utility; -use Steamy\Model\Client; use Steamy\Model\Comment; use Steamy\Model\Review; use Steamy\Model\User; @@ -19,6 +18,8 @@ class Product { use Controller; + private static int $MAX_REVIEWS_PER_PAGE = 2; + private ?ProductModel $product = null; // product to be displayed private array $view_data; private ?User $signed_user; // currently logged-in user @@ -232,6 +233,14 @@ private function showCommentForm(): void } } + /** + * @return int Page number on shop page. Defaults to 1. + */ + public function getPageNumber(): int + { + return (int)($_GET['page'] ?? 1); + } + private function validateURL(): bool { return preg_match("/^shop\/products\/[0-9]+$/", Utility::getURL()) === 1; @@ -270,11 +279,23 @@ public function index(): void $this->handleCommentSubmission(); } - $this->view_data['product_reviews'] = array_filter( + // get all reviews that match criteria + $all_matching_reviews = array_filter( $this->view_data['product_reviews'], array($this, "filterReviews") ); + $pagination_controller = new Pagination( + Product::$MAX_REVIEWS_PER_PAGE, + count($all_matching_reviews), + $this->getPageNumber() + ); + + // get html code for displaying pagination + $this->view_data['review_pagination'] = $pagination_controller->getHTML(); + + $this->view_data['product_reviews'] = $pagination_controller->getCurrentItems($all_matching_reviews); + $this->view_data['rating_distribution'] = $this->formatRatingDistribution(); $this->view( diff --git a/src/controllers/Shop.php b/src/controllers/Shop.php index 69a4c38..d04ca5b 100644 --- a/src/controllers/Shop.php +++ b/src/controllers/Shop.php @@ -16,7 +16,7 @@ class Shop { use Controller; - private array $data; + private array $view_data; private static int $MAX_PRODUCTS_PER_PAGE = 4; /** @@ -154,20 +154,6 @@ public function getPageNumber(): int return (int)($_GET['page'] ?? 1); } - /** - * @param $products - * @return array Products which should be displayed on current page - */ - public function applyPagination($products): array - { - // Slice the products based on pagination - return array_slice( - $products, - ($this->getPageNumber() - 1) * Shop::$MAX_PRODUCTS_PER_PAGE, - Shop::$MAX_PRODUCTS_PER_PAGE - ); - } - public function index(): void { // check if URL follows format /shop/products/ @@ -187,22 +173,27 @@ public function index(): void // get all products that match user criteria $filtered_products = $this->getMatchingProducts(); - // Slice the products based on pagination - $paginated_products = $this->applyPagination($filtered_products); + // get html for pagination + $pagination_controller = new Pagination( + Shop::$MAX_PRODUCTS_PER_PAGE, + count($filtered_products), + $this->getPageNumber() + ); + + $this->view_data['pagination'] = $pagination_controller->getHTML(); + $this->view_data['products'] = $pagination_controller->getCurrentItems($filtered_products); - // Initialize view variables (existing functionality) - $this->data['products'] = $paginated_products; - $this->data['search_keyword'] = $_GET['keyword'] ?? ""; - $this->data['categories'] = Product::getCategories(); - $this->data['sort_option'] = $_GET['sort'] ?? ""; - $this->data['selected_categories'] = $_GET['categories'] ?? []; - $this->data['current_page_number'] = $this->getPageNumber(); - $this->data['total_pages'] = (int)ceil(count($filtered_products) / Shop::$MAX_PRODUCTS_PER_PAGE); + // Initialize view variables + $this->view_data['search_keyword'] = $_GET['keyword'] ?? ""; + $this->view_data['categories'] = Product::getCategories(); + $this->view_data['sort_option'] = $_GET['sort'] ?? ""; + $this->view_data['selected_categories'] = $_GET['categories'] ?? []; + $this->view_data['current_page_number'] = $this->getPageNumber(); // Render the view with pagination information $this->view( 'Shop', - $this->data, + $this->view_data, 'Shop', template_tags: $this->getLibrariesTags(['aos']), template_meta_description: "Explore a delightful selection of aromatic coffees, teas, and delectable diff --git a/src/views/Pagination.php b/src/views/Pagination.php new file mode 100644 index 0000000..54dd056 --- /dev/null +++ b/src/views/Pagination.php @@ -0,0 +1,140 @@ + + $page_number + + EOL; +} + +/** + * Prints navigation button in HTML format + * @param int $current_page_number + * @param int $total_pages Total number of pages + * @param string $query_string + * @param bool $is_left True indicates left navigation button. + * @return void + */ +function displayNavigationButton(int $current_page_number, int $total_pages, string $query_string, bool $is_left): void +{ + $page_number = $current_page_number + ($is_left ? -1 : 1); + $page_link = $query_string . "&page=$page_number"; + + $link_content = htmlspecialchars($is_left ? "<" : ">"); + $className = "page-item"; + + if (($current_page_number > $total_pages) || // invalid page number + ($current_page_number < 1) || // invalid page number + ($current_page_number === 1 && $is_left) || // first page + ($current_page_number === $total_pages && !$is_left) // last page + ) { + $className .= " disabled"; + } + + echo <<< EOL +
  • + $link_content +
    • + EOL; +} + +?> + + + + \ No newline at end of file diff --git a/src/views/Product.php b/src/views/Product.php index c1fd697..c177424 100644 --- a/src/views/Product.php +++ b/src/views/Product.php @@ -11,6 +11,7 @@ * @var $default_rating int default rating in form * @var $rating_distribution string An array containing the percentages of ratings * @var $comment_form_info ?array Array with information to be displayed on comment form + * @var $review_pagination string HTML code for review pagination */ use Steamy\Core\Utility; @@ -190,6 +191,7 @@ function printComment(StdClass $comment): void } ?> +
    + + \ No newline at end of file diff --git a/src/views/Shop.php b/src/views/Shop.php index c1200bf..d3f3e0f 100644 --- a/src/views/Shop.php +++ b/src/views/Shop.php @@ -10,8 +10,7 @@ * @var string[] $selected_categories Array of selected categories * @var string $search_keyword keyword used to filter products * @var string $sort_option Sort By option selected by user - * @var int $current_page_number Current page number. - * @var int $total_pages Total number of pages + * @var string $pagination HTML code pagination */ use Steamy\Model\Product; @@ -40,69 +39,6 @@ function displayProduct(Product $product): void EOL; } - -/** - * Returns a query string that maintains all current query string parameters and page number. - * @param int $page_number - * @return string Query string link for page item - */ -function getPageItemLink(int $page_number): string -{ - // create a string with all past query parameters except page and url - unset($_GET['page']); - unset($_GET['url']); - - $link = '?' . http_build_query($_GET); - - // add page number as query parameter - $link .= '&page=' . $page_number; - - return $link; -} - -/** - * Prints page item in HTML format. - * - * @param int $current_page_number - * @param int $page_number Page number of page item - * @return void - */ -function displayPageItem(int $current_page_number, int $page_number): void -{ - $page_link = getPageItemLink($page_number); - $className = "page-item" . ($page_number === $current_page_number ? " active" : ""); - - echo <<< EOL -
  • - $page_number -
    • - EOL; -} - -/** - * Prints navigation button in HTML format - * @param int $current_page_number - * @param int $total_pages Total number of pages - * @param bool $is_left True indicates left navigation button. - * @return void - */ -function displayNavigationButton(int $current_page_number, int $total_pages, bool $is_left): void -{ - $page_link = getPageItemLink($current_page_number + ($is_left ? -1 : 1)); - $link_content = htmlspecialchars($is_left ? "<" : ">"); - $className = "page-item"; - - if (($current_page_number === 1 && $is_left) || ($current_page_number === $total_pages && !$is_left)) { - $className .= " disabled"; - } - - echo <<< EOL -
  • - $link_content -
    • - EOL; -} - ?>
    @@ -161,30 +97,7 @@ function displayNavigationButton(int $current_page_number, int $total_pages, boo - +