diff --git a/design_document.md b/design_document.md new file mode 100644 index 00000000..a97160b7 --- /dev/null +++ b/design_document.md @@ -0,0 +1,328 @@ +# Design guidelines for Reimplementation of Expertiza + +## Overview +This document serves as a comprehensive guide for the reimplementation of views in the Expertiza platform. The purpose of these guidelines is to ensure consistency, maintainability, and adherence to predefined UI/UX standards across all pages. + +Web applications consist of various interface elements that must follow a structured design approach. These elements include: + +- **Typography & Text Formatting** – Defines font styles, sizes, and capitalization rules for headings, subheadings, and body text to maintain a uniform visual hierarchy. +- **Tables** – Standardizes the use of a prebuilt Table component to enforce a unified structure, styling, and data representation. +- **Icons** – Specifies the approved icon library, icon sizes, and their usage in different UI components. +- **Buttons** – Ensures consistent button styles, colors, and behavior across the platform using predefined Bootstrap-based components. +- **Notifications** – Establishes a standardized approach for alert messages (success, error, info, warnings) to enhance user feedback and clarity. +- **Forms** – Enforces the use of prebuilt form components, including input fields, dropdowns, validation messages, and tooltips for improved accessibility and usability. +- **Dropdowns & Toggles** – Outlines best practices for dropdown menus and interactive UI elements using Bootstrap’s dropdown system. +- **Pagination** – Defines when and how to enable pagination to optimize performance and usability for data-heavy pages. +- **Date Formatting** – Ensures all dates and timestamps are displayed and stored in a consistent format across tables and forms. + +By following these design guidelines, developers can ensure that all UI components remain visually cohesive, functionally robust, and user-friendly. These standards not only streamline development but also enhance the overall user experience by maintaining consistency across the platform. + +## Index +1. [Text](#text) +2. [Tables](#tables) +3. [Icon Library](#icon-library) +4. [Buttons](#buttons) +5. [Notifications](#notifications) +6. [Forms](#forms) +7. [Dropdowns and Toggling Dropdowns](#dropdowns-and-toggling-dropdowns) +8. [Pagination](#pagination) +9. [Date formatting](#date-formatting) + +## Text + +* General font name: ```verdana,arial,helvetica,sans-serif``` + +* Headings/ Main title of page should be given in ```

Title

``` tag + +* Capitalization: + - Use camel case for headings. + - Other text should have only the first letter of the first word capitalized, with all subsequent words in lowercase. + +* Font sizes & line heights: + - Standard text: + - Font size: 13px + - Line height: 30px + - Subheadings: + - Font size: 1.2em + - Line height: 18px + - Table data: + - Font size: 15px + - Line height: 1.428em + +* Color + - Menu bar - #FFFFFF; //for menubar with red background + - Other titles/ text - #333; + - Text on red buttons - #fff; + + +## Tables + +The **Table component** is prebuilt and must be used for all table-related functionalities. The component is located in: +**`src/components/Table/Table.tsx`** + +### Table usage +| **Requirement** | **Implementation** | +|----------------------|------------------| +| **Component** | Use **`Table.tsx`** (Do not create new table components) | +| **Styling** | Bootstrap: `table table-striped` | +| **Global filter** | **Disabled** | +| **Column filter** | **Disabled** | +| **Pagination** | Enabled only if **page is full** | +| **Sorting** | Built-in with sorting indicators (`🔼` / `🔽`) | +| **Row selection** | Available if `onSelectionChange` is provided | +| **Column visibility** | Configurable via `columnVisibility` prop | + +### Example usage + +```tsx +import Table from "src/components/Table/Table"; + +const columns = [ + { accessorKey: "name", header: "Student Name" }, + { accessorKey: "email", header: "Email Address" }, +]; + +const data = [ + { name: "John Doe", email: "john@example.com" }, + { name: "Jane Smith", email: "jane@example.com" }, +]; + +export default function ExampleTable() { + return ( + = 10} + /> + ); +} +``` + + +--- + + + +## Icon library + +Icons are available in four sizes: 16, 24, 32, and 48. However, it is possible that not all icons are available in every size. Edit the size number as needed; everything else will remain the same. +**Sr. No.** | **Element name** | **Image** | **Guide** +|---|---|---|---| +| 1 | Add assignment | ![Add assignment](public/assets/icons/add-assignment-24.png) | To add 'add assignment' icon, use path **```/public/assets/icons/add-assignment-24.png```** | +| 2 | Add teaching assistant | ![Add TA](public/assets/icons/add-ta-24.png) | To add 'add TA' icon, use path **```public/assets/icons/add-ta-24.png```** | +| 3 | Add private | ![Add private](public/assets/icons/add-private-24.png) | To add 'add private' icon, use path **```public/assets/icons/add-private-24.png```** | +| 4 | Add public | ![Add public](public/assets/icons/add-public-24.png) | To add 'add public' icon, use path **```public/assets/icons/add-public-24.png```** | +| 5 | Add signup sheet | ![Add signup sheet](public/assets/icons/add-signup-sheet-24.png) | To add 'add signup sheet' icon, use path **```public/assets/icons/add-signup-sheet-24.png```** | +| 6 | Assign course | ![Assign course](public/assets/icons/assign-course-blue-24.png) | To add 'Assign course' icon, use path **```public/assets/icons/assign-course-blue-24.png```** | +| 7 | Assign survey | ![Assign survey](public/assets/icons/assign-survey-24.png) | To add 'Assign survey' icon, use path **```public/assets/icons/assign-survey-24.png```** | +| 8 | Check | ![Check](public/assets/icons/Check-icon.png) | To add 'Check' icon, use path **```public/assets/icons/Check-icon.png```** | +| 9 | Copy | ![Copy](public/assets/icons/Copy-icon-24.png) | To add 'Copy' icon, use path **```public/assets/icons/Copy-icon-24.png```** | +| 10 | Create team | ![Create team](public/assets/icons/create-teams-24.png) | To add 'Create team' icon, use path **```public/assets/icons/create-teams-24.png```** | +| 11 | Delete | ![Delete](public/assets/icons/delete-icon-24.png) | To add 'Delete' icon, use path **```public/assets/icons/delete-icon-24.png```** | +| 12 | (General) Edit | ![Edit](public/assets/icons/edit-icon-24.png) | To add 'Edit' icon, use path **```public/assets/icons/edit-icon-24.png```** | +| 13 | Edit signup sheet | ![Edit Signup sheet](public/assets/icons/edit-signup-sheet-24.png) | To add 'Edit signup sheet' icon, use path **```public/assets/icons/edit-signup-sheet-24.png```** | +| 14 | Info | ![Info](public/assets/icons/info.png) | To add 'Info' icon, use path **```public/assets/icons/info.png```** | +| 15 | List all | ![List All](public/assets/icons/image8.png) | To add 'List all' icon, add class as "glyphicon glyphicon-list-alt" | +| 16 | List submissions | ![List Submissions](public/assets/icons/List-submisstions-24.png) | To add 'List submissions' icon, use path **```public/assets/icons/List-submissions-24.png```** | +| 17 | Make public from private | ![Make public from private](public/assets/icons/lock-off-disabled-icon-24.png) | To add 'Make public from private' icon, use path **```public/assets/icons/lock-off-disabled-icon-24.png```** | +| 18 | Private | ![Private](public/assets/icons/lock-disabled-icon-24.png) | To add 'Private' icon, use path **```public/assets/icons/lock-disabled-icon-24.png```** | +| 19 | Remove from course | ![Remove from course](public/assets/icons/remove-from-course-24.png) | To add 'Remove from course' icon, use path **```public/assets/icons/remove-from-course-24.png```** | +| 20 | Run bidding assignment | ![Run bidding assignment](public/assets/icons/run-lottery.png) | To add 'Run bidding assignment' icon, use path **```public/assets/icons/run-lottery.png```** | +| 21 | Signup | ![Signup](public/assets/icons/signup.png) | To add 'Signup' icon, use path **```public/assets/icons/signup.png```** | +| 22 | Search | ![Search](public/assets/icons/view-publish-rights-24.png) | To add 'Search' icon, use path **```public/assets/icons/view-publish-rights-24.png```** | +| 23 | Uncheck | ![Uncheck](public/assets/icons/Uncheck-icon.png) | To add 'Uncheck' icon, use path **```public/assets/icons/Uncheck-icon.png```** | +| 24 | View delayed mailer | ![View delayed mailer](public/assets/icons/view-delayed-mailer.png) | To add 'View delayed mailer' icon, use path **```public/assets/icons/view-delayed-mailer.png```** | +| 25 | View report | ![View report](public/assets/icons/view-review-report-24.png) | To add 'View report' icon, use path **```public/assets/icons/view-review-report-24.png```** | +| 26 | View scores | ![View scores](public/assets/icons/view-scores-24.png) | To add "View score" icon, use path **```public/assets/icons/view-scores-24.png```** | +| 27 | View suggestions | ![View suggestions](public/assets/icons/view-suggestion-24.png) | To add "View suggestions" icon, use path **```public/assets/icons/view-suggestion-24.png```** | +| 28 | View survey | ![View survey](public/assets/icons/view-survey-24.png) | To add "View survey" icon, use path **```public/assets/icons/view-survey-24.png```** | +--- + +### Example Usage + +```tsx + +``` +--- +## Buttons + +The default color for buttons is red + +we recommend using the `Button` class from `react-bootstrap` to ensure a consistent and unified appearance. + +**Sr. No.** | **Element name** | **Image** | **Guide** | **Class** | **Variant** | +|---|---|---|---|---|---| +| 1 | Button - Default style | *to be added* | Default button | `btn btn-md` | `outline-secondary` | +| 2 | Button - Success style | *to be added* | For accepting. | `btn btn-md` | `success` | +| 3 | Button - Danger style | *to be added* | For rejecting. | `btn btn-md` | `danger` | +| 4 | Button - New style | *to be added* | For create buttons alone. | `btn pull-right new-button btn-md` | `primary` | + +### ✅ Example usage + +#### **Default button** +```tsx +import { Button } from "react-bootstrap"; + + +``` + + +--- +## Notifications + +All notifications must follow **Bootstrap’s alert styling** and use the **predefined classes** to ensure consistency across the UI. + +### 📌 Notification styles +| **Sr. No.** | **Element name** | **Guide** | **Class** | +|---|---|---|---| +| 1 | Success | Display success messages | ```flash_note alert alert-success``` | +| 2 | Error | Display error messages | ```flash_note alert alert-danger``` | +| 3 | Info | Display informational messages | ```flash_note alert alert-info``` | +| 4 | Warn | Display warning messages | ```flash_note alert alert-warning``` | + + +### ✅ Example usage + +#### **Success notification** +```tsx +import { Alert } from "react-bootstrap"; + + + Operation completed successfully! + +``` + + + +--- + +## Forms + +The **Form component** is prebuilt and must be used for all Form-related functionalities. The component is located in: +**`src/components/Form`** + +| **Requirement** | **Implementation** | +|--------------------------|----------------------------------------------------------------| +| **Component** | Use **prebuilt form components** (Do not create new form elements) | +| **Styling** | Bootstrap: `form-control` | +| **Validation** | Built-in via **Formik** | +| **Tooltips** | Use `ToolTip` from `src/components/ToolTip.tsx` | +| **Date picker** | Uses `react-datepicker`, preconfigured | +| **Date format** | Use `YYYY-MM-DD` (ISO 8601) format for consistency. | +| **Checkbox & radio groups** | Prebuilt in `FormCheckboxGroup.tsx` and `FormRadioGroup.tsx` | +| **Dropdowns** | Use `FormSelect.tsx` (prebuilt) | +| **Range sliders** | Use `FormRange.tsx` | + +### Example usage + +The example below demonstrates how to use the FormCheckBox component. There are additional form components, such as FormInput, FormSelect, and FormRadioGroup. Import them and modify their props according to your requirements. + +```tsx +import FormCheckBox from '../Form/FormCheckBox'; + +const formProps = { + controlId: 'exampleCheckBox', + label: 'Example Checkbox', + name: 'exampleCheckBox', + tooltip: 'Tooltip text', + tooltipPlacement: 'right', +}; + +const MyPage: React.FC = () => ( +
+

My Page

+ +
+); + +export default MyPage; +``` +--- + + +## Dropdowns and toggling dropdowns + +For dropdowns and toggling functionality, we recommend using the `Dropdown` class from `react-bootstrap` to ensure a consistent and unified appearance. + +The `react-bootstrap` library is already included in the `package.json` file, so you can directly utilize the provided dropdown styles. + +### Example usage + +```tsx +import { Dropdown } from "react-bootstrap"; + +export default function ExampleDropdown() { + return ( + + + Select an Option + + + + Action 1 + Action 2 + Action 3 + + + ); +} +``` +--- + +## Pagination + +Enable pagination component when page is full. The user should be able to disable the pagination component if they want to search through the information. + +Pagination Component is already included in the Repository under **```src\components\Table\Pagination.tsx```**. We recommend using this component to maintain consistency. + +### Example usage + +```tsx +import React from "react"; +import { useTable, usePagination, TableState } from "@tanstack/react-table"; +import Pagination from "../Pagination"; + +const MyTableComponent: React.FC = () => { + const { + getState, + nextPage, + previousPage, + canNextPage, + canPreviousPage, + setPageIndex, + setPageSize, + getPageCount, + } = usePagination(); + + return ( +
+
+ {/* Your table structure goes here */} +
+ + {/* Pagination Component */} + TableState} + /> + + ); +}; + +export default MyTableComponent; +``` +--- + +## Date formatting + +To ensure consistency across the platform, all date values displayed in Tables and Forms should be formatted as hours:minutes (HH:MM) and shown in the user’s preferred time zone and never display seconds or milliseconds for dates! diff --git a/public/assets/icons/360-dashboard-24.png b/public/assets/icons/360-dashboard-24.png new file mode 100644 index 00000000..60432b0a Binary files /dev/null and b/public/assets/icons/360-dashboard-24.png differ diff --git a/public/assets/icons/Check-icon.png b/public/assets/icons/Check-icon.png new file mode 100644 index 00000000..c4d5504e Binary files /dev/null and b/public/assets/icons/Check-icon.png differ diff --git a/public/assets/icons/Copy-icon-16.png b/public/assets/icons/Copy-icon-16.png new file mode 100644 index 00000000..014d41fb Binary files /dev/null and b/public/assets/icons/Copy-icon-16.png differ diff --git a/public/assets/icons/Copy-icon-24.png b/public/assets/icons/Copy-icon-24.png new file mode 100644 index 00000000..6d4f0eb0 Binary files /dev/null and b/public/assets/icons/Copy-icon-24.png differ diff --git a/public/assets/icons/Copy-icon-32.png b/public/assets/icons/Copy-icon-32.png new file mode 100644 index 00000000..bf486d13 Binary files /dev/null and b/public/assets/icons/Copy-icon-32.png differ diff --git a/public/assets/icons/Copy-icon-48.png b/public/assets/icons/Copy-icon-48.png new file mode 100644 index 00000000..886c60d0 Binary files /dev/null and b/public/assets/icons/Copy-icon-48.png differ diff --git a/public/assets/icons/List-hyperlinks-24.png b/public/assets/icons/List-hyperlinks-24.png new file mode 100644 index 00000000..601f3a8a Binary files /dev/null and b/public/assets/icons/List-hyperlinks-24.png differ diff --git a/public/assets/icons/List-submisstions-128.png b/public/assets/icons/List-submisstions-128.png new file mode 100644 index 00000000..74cc7c7c Binary files /dev/null and b/public/assets/icons/List-submisstions-128.png differ diff --git a/public/assets/icons/List-submisstions-24.png b/public/assets/icons/List-submisstions-24.png new file mode 100644 index 00000000..8396f48e Binary files /dev/null and b/public/assets/icons/List-submisstions-24.png differ diff --git a/public/assets/icons/Uncheck-icon.png b/public/assets/icons/Uncheck-icon.png new file mode 100644 index 00000000..6fc4d3b2 Binary files /dev/null and b/public/assets/icons/Uncheck-icon.png differ diff --git a/public/assets/icons/add-2-icon-16.png b/public/assets/icons/add-2-icon-16.png new file mode 100644 index 00000000..3e782869 Binary files /dev/null and b/public/assets/icons/add-2-icon-16.png differ diff --git a/public/assets/icons/add-2-icon-24.png b/public/assets/icons/add-2-icon-24.png new file mode 100644 index 00000000..3a6b96bd Binary files /dev/null and b/public/assets/icons/add-2-icon-24.png differ diff --git a/public/assets/icons/add-2-icon-32.png b/public/assets/icons/add-2-icon-32.png new file mode 100644 index 00000000..8dd7fa6e Binary files /dev/null and b/public/assets/icons/add-2-icon-32.png differ diff --git a/public/assets/icons/add-2-icon-48.png b/public/assets/icons/add-2-icon-48.png new file mode 100644 index 00000000..a7eaeeeb Binary files /dev/null and b/public/assets/icons/add-2-icon-48.png differ diff --git a/public/assets/icons/add-assignment-128.png b/public/assets/icons/add-assignment-128.png new file mode 100644 index 00000000..ffcff39e Binary files /dev/null and b/public/assets/icons/add-assignment-128.png differ diff --git a/public/assets/icons/add-assignment-24.png b/public/assets/icons/add-assignment-24.png new file mode 100644 index 00000000..6756d3e0 Binary files /dev/null and b/public/assets/icons/add-assignment-24.png differ diff --git a/public/assets/icons/add-private-128.png b/public/assets/icons/add-private-128.png new file mode 100644 index 00000000..f998fb44 Binary files /dev/null and b/public/assets/icons/add-private-128.png differ diff --git a/public/assets/icons/add-private-24.png b/public/assets/icons/add-private-24.png new file mode 100644 index 00000000..4e58ac02 Binary files /dev/null and b/public/assets/icons/add-private-24.png differ diff --git a/public/assets/icons/add-private.png b/public/assets/icons/add-private.png new file mode 100644 index 00000000..4f688028 Binary files /dev/null and b/public/assets/icons/add-private.png differ diff --git a/public/assets/icons/add-public-128.png b/public/assets/icons/add-public-128.png new file mode 100644 index 00000000..69780f40 Binary files /dev/null and b/public/assets/icons/add-public-128.png differ diff --git a/public/assets/icons/add-public-24.png b/public/assets/icons/add-public-24.png new file mode 100644 index 00000000..2ec45670 Binary files /dev/null and b/public/assets/icons/add-public-24.png differ diff --git a/public/assets/icons/add-signup-sheet-128.png b/public/assets/icons/add-signup-sheet-128.png new file mode 100644 index 00000000..13a2d971 Binary files /dev/null and b/public/assets/icons/add-signup-sheet-128.png differ diff --git a/public/assets/icons/add-signup-sheet-24.png b/public/assets/icons/add-signup-sheet-24.png new file mode 100644 index 00000000..484ec465 Binary files /dev/null and b/public/assets/icons/add-signup-sheet-24.png differ diff --git a/public/assets/icons/add-ta-128.png b/public/assets/icons/add-ta-128.png new file mode 100644 index 00000000..4414ae54 Binary files /dev/null and b/public/assets/icons/add-ta-128.png differ diff --git a/public/assets/icons/add-ta-24.png b/public/assets/icons/add-ta-24.png new file mode 100644 index 00000000..cf8e038e Binary files /dev/null and b/public/assets/icons/add-ta-24.png differ diff --git a/public/assets/icons/assign-course-128.png b/public/assets/icons/assign-course-128.png new file mode 100644 index 00000000..6a574c25 Binary files /dev/null and b/public/assets/icons/assign-course-128.png differ diff --git a/public/assets/icons/assign-course-96.png b/public/assets/icons/assign-course-96.png new file mode 100644 index 00000000..9b0f32eb Binary files /dev/null and b/public/assets/icons/assign-course-96.png differ diff --git a/public/assets/icons/assign-course-blue-24.png b/public/assets/icons/assign-course-blue-24.png new file mode 100644 index 00000000..856cd744 Binary files /dev/null and b/public/assets/icons/assign-course-blue-24.png differ diff --git a/public/assets/icons/assign-course-green-24.png b/public/assets/icons/assign-course-green-24.png new file mode 100644 index 00000000..6f0a025b Binary files /dev/null and b/public/assets/icons/assign-course-green-24.png differ diff --git a/public/assets/icons/assign-reviewers.svg b/public/assets/icons/assign-reviewers.svg index b73d7e1c..556198bd 100644 --- a/public/assets/icons/assign-reviewers.svg +++ b/public/assets/icons/assign-reviewers.svg @@ -1,512 +1,512 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/delete-icon-16.png b/public/assets/icons/delete-icon-16.png new file mode 100644 index 00000000..d4e69a63 Binary files /dev/null and b/public/assets/icons/delete-icon-16.png differ diff --git a/public/assets/icons/delete-icon-24.png b/public/assets/icons/delete-icon-24.png new file mode 100644 index 00000000..57b6eb6c Binary files /dev/null and b/public/assets/icons/delete-icon-24.png differ diff --git a/public/assets/icons/delete-icon-32.png b/public/assets/icons/delete-icon-32.png new file mode 100644 index 00000000..21bc813f Binary files /dev/null and b/public/assets/icons/delete-icon-32.png differ diff --git a/public/assets/icons/delete-icon-48.png b/public/assets/icons/delete-icon-48.png new file mode 100644 index 00000000..21a8ae7a Binary files /dev/null and b/public/assets/icons/delete-icon-48.png differ diff --git a/public/assets/icons/edit-icon-16.png b/public/assets/icons/edit-icon-16.png new file mode 100644 index 00000000..b8e8a83d Binary files /dev/null and b/public/assets/icons/edit-icon-16.png differ diff --git a/public/assets/icons/edit-icon-24.png b/public/assets/icons/edit-icon-24.png new file mode 100644 index 00000000..062d9c09 Binary files /dev/null and b/public/assets/icons/edit-icon-24.png differ diff --git a/public/assets/icons/edit-icon-32.png b/public/assets/icons/edit-icon-32.png new file mode 100644 index 00000000..3b77bca1 Binary files /dev/null and b/public/assets/icons/edit-icon-32.png differ diff --git a/public/assets/icons/edit-icon-48.png b/public/assets/icons/edit-icon-48.png new file mode 100644 index 00000000..87055074 Binary files /dev/null and b/public/assets/icons/edit-icon-48.png differ diff --git a/public/assets/icons/edit-signup-sheet-128.png b/public/assets/icons/edit-signup-sheet-128.png new file mode 100644 index 00000000..29b6ecf7 Binary files /dev/null and b/public/assets/icons/edit-signup-sheet-128.png differ diff --git a/public/assets/icons/edit-signup-sheet-24.png b/public/assets/icons/edit-signup-sheet-24.png new file mode 100644 index 00000000..aca12758 Binary files /dev/null and b/public/assets/icons/edit-signup-sheet-24.png differ diff --git a/public/assets/icons/grade-essay-icon-24.png b/public/assets/icons/grade-essay-icon-24.png new file mode 100644 index 00000000..2a528294 Binary files /dev/null and b/public/assets/icons/grade-essay-icon-24.png differ diff --git a/public/assets/icons/info.png b/public/assets/icons/info.png new file mode 100644 index 00000000..e0626bec Binary files /dev/null and b/public/assets/icons/info.png differ diff --git a/public/assets/icons/lock-disabled-icon-16.png b/public/assets/icons/lock-disabled-icon-16.png new file mode 100644 index 00000000..af8ab311 Binary files /dev/null and b/public/assets/icons/lock-disabled-icon-16.png differ diff --git a/public/assets/icons/lock-disabled-icon-24.png b/public/assets/icons/lock-disabled-icon-24.png new file mode 100644 index 00000000..6c137a46 Binary files /dev/null and b/public/assets/icons/lock-disabled-icon-24.png differ diff --git a/public/assets/icons/lock-disabled-icon-32.png b/public/assets/icons/lock-disabled-icon-32.png new file mode 100644 index 00000000..b81f585b Binary files /dev/null and b/public/assets/icons/lock-disabled-icon-32.png differ diff --git a/public/assets/icons/lock-disabled-icon-48.png b/public/assets/icons/lock-disabled-icon-48.png new file mode 100644 index 00000000..6708c4d4 Binary files /dev/null and b/public/assets/icons/lock-disabled-icon-48.png differ diff --git a/public/assets/icons/lock-off-disabled-icon-16.png b/public/assets/icons/lock-off-disabled-icon-16.png new file mode 100644 index 00000000..8b7cfe92 Binary files /dev/null and b/public/assets/icons/lock-off-disabled-icon-16.png differ diff --git a/public/assets/icons/lock-off-disabled-icon-24.png b/public/assets/icons/lock-off-disabled-icon-24.png new file mode 100644 index 00000000..de8d9f7f Binary files /dev/null and b/public/assets/icons/lock-off-disabled-icon-24.png differ diff --git a/public/assets/icons/lock-off-disabled-icon-32.png b/public/assets/icons/lock-off-disabled-icon-32.png new file mode 100644 index 00000000..b0b62fe9 Binary files /dev/null and b/public/assets/icons/lock-off-disabled-icon-32.png differ diff --git a/public/assets/icons/lock-off-disabled-icon-48.png b/public/assets/icons/lock-off-disabled-icon-48.png new file mode 100644 index 00000000..c7ac892b Binary files /dev/null and b/public/assets/icons/lock-off-disabled-icon-48.png differ diff --git a/public/assets/icons/remove-from-course-24.png b/public/assets/icons/remove-from-course-24.png new file mode 100644 index 00000000..b69b0079 Binary files /dev/null and b/public/assets/icons/remove-from-course-24.png differ diff --git a/public/assets/icons/remove-from-course-96.png b/public/assets/icons/remove-from-course-96.png new file mode 100644 index 00000000..cbff0d75 Binary files /dev/null and b/public/assets/icons/remove-from-course-96.png differ diff --git a/public/assets/icons/run-lottery.png b/public/assets/icons/run-lottery.png new file mode 100644 index 00000000..5ae8ecb6 Binary files /dev/null and b/public/assets/icons/run-lottery.png differ diff --git a/public/assets/icons/signup.png b/public/assets/icons/signup.png new file mode 100644 index 00000000..b8c4e5be Binary files /dev/null and b/public/assets/icons/signup.png differ diff --git a/public/assets/icons/text_macro.png b/public/assets/icons/text_macro.png new file mode 100644 index 00000000..6778fc5f Binary files /dev/null and b/public/assets/icons/text_macro.png differ diff --git a/public/assets/icons/view-publish-rights-128.png b/public/assets/icons/view-publish-rights-128.png new file mode 100644 index 00000000..8e18845a Binary files /dev/null and b/public/assets/icons/view-publish-rights-128.png differ diff --git a/public/assets/icons/view-publish-rights-24.png b/public/assets/icons/view-publish-rights-24.png new file mode 100644 index 00000000..e517b572 Binary files /dev/null and b/public/assets/icons/view-publish-rights-24.png differ diff --git a/public/assets/icons/view-suggestion-128.png b/public/assets/icons/view-suggestion-128.png new file mode 100644 index 00000000..efcceb6a Binary files /dev/null and b/public/assets/icons/view-suggestion-128.png differ diff --git a/public/assets/icons/view-suggestion-24.png b/public/assets/icons/view-suggestion-24.png new file mode 100644 index 00000000..5bde1fff Binary files /dev/null and b/public/assets/icons/view-suggestion-24.png differ diff --git a/src/components/Table/Pagination.tsx b/src/components/Table/Pagination.tsx index e42904dc..edab49c3 100644 --- a/src/components/Table/Pagination.tsx +++ b/src/components/Table/Pagination.tsx @@ -4,16 +4,12 @@ import { Col, Pagination as BPagination, Row } from "react-bootstrap"; import Input from "../Input"; import Select from "../Select"; -/** - * @author Ankur Mundra on May, 2023 - */ - interface PaginationProps { nextPage: () => void; previousPage: () => void; canNextPage: () => boolean; canPreviousPage: () => boolean; - setPageIndex: (pageIndex: number) => void; + setPageIndex: (updater: number | ((pageIndex: number) => number)) => void; setPageSize: (pageSize: number) => void; getPageCount: () => number; getState: () => TableState; @@ -30,6 +26,28 @@ const Pagination: React.FC = (props) => { getPageCount, getState, } = props; + + const totalPages = getPageCount(); + const isPaginationDisabled = totalPages <= 1; + + const handlePageSizeChange = (e: React.ChangeEvent) => { + const selectedValue = e.target.value; + const pageSize = + selectedValue === `${Number.MAX_SAFE_INTEGER}` + ? Number.MAX_SAFE_INTEGER // Show all (effectively no pagination) + : Number(selectedValue); + + setPageSize(pageSize); + + // Reset to the first page when "Show All" is selected + if (pageSize === Number.MAX_SAFE_INTEGER) { + setPageIndex(0); + } + }; + + // Handle case when "Show All" is selected and pagination is disabled + if (isPaginationDisabled && getState().pagination.pageSize !== Number.MAX_SAFE_INTEGER) return null; + return ( @@ -38,14 +56,11 @@ const Pagination: React.FC = (props) => { previousPage()} disabled={!canPreviousPage()} /> nextPage()} disabled={!canNextPage()} /> setPageIndex(getPageCount() - 1)} + onClick={() => setPageIndex(totalPages - 1)} disabled={!canNextPage()} /> - {/**/} - {/* {`Page ${getState().pagination.pageIndex + 1} of ${getPageCount()}`}*/} - {/**/} = (props) => { input={{ type: "number", min: "1", - max: getPageCount(), + max: totalPages, defaultValue: getState().pagination.pageIndex + 1, onChange: (e: React.ChangeEvent) => { const page = e.target.value ? Number(e.target.value) - 1 : 0; @@ -69,11 +84,11 @@ const Pagination: React.FC = (props) => { { label: "Show 10", value: "10" }, { label: "Show 25", value: "25" }, { label: "Show 50", value: "50" }, + { label: "Show All", value: `${Number.MAX_SAFE_INTEGER}` }, // Add "Show All" with a large value ]} input={{ value: getState().pagination.pageSize, - onChange: (e: React.ChangeEvent) => - setPageSize(Number(e.target.value)), + onChange: handlePageSizeChange, // Call the handlePageSizeChange function }} /> @@ -81,4 +96,10 @@ const Pagination: React.FC = (props) => { ); }; -export default Pagination; +const PaginationWrapper: React.FC = (props) => { + const totalPages = props.getPageCount(); + if (totalPages <= 1 && props.getState().pagination.pageSize !== Number.MAX_SAFE_INTEGER) return null; + return ; +}; + +export default PaginationWrapper;