3.3.2 SUBMOD.003.002 : Paging
- Changelog
- 1. Scope
- 2. Definitions
- 3. Module Requirements
- 4. Analysis
- 5. Design
- 6. Implementation
- 7. Module Test
- 8. Summary
- 9. Appendix
| Version | Date | Author | Comment |
|---|---|---|---|
| 0.1 | 17.01.2021 | Namid Marxen und Nils-Christopher Wiesenauer | created |
| 1.0 | 14.05.2021 | Namid Marxen und Nils-Christopher Wiesenauer | finished |
The Module Documentations (MODs) describes the architecture, the interfaces and the main features of the module. It also describes the module/component test including the results. It can also serve as a programming or integration manual for the module. If there are some risks related to the module itself, they shall be noted and commented within this document.
AML: Automation Markup Language
CRUD: Create Read Update Delete
GUI: Graphical User Interface
JSend: A specification that lays down some rules for how JSON responses from web servers should be formatted
SAS: System Architecture Specification
SRS: System Requirements Specification
The user is given a clear overview over all files by paging the files. This way the user only sees a specific amount of files at a time and can change the pages on the GUI.
The requirement LF50 is included in this submodule, because it gives the user the ability to list all files and page the results. The pages show a specific amount of files and give a clear overview.
The submodule to add paging provides different pages to the user. It contains a fixed number of AML files at a time to get a good overview from all files. This function also provides a navigation between pages. It is a function just in the GUI and does not communicate with the REST API.
/assets/components_GUI_filter_paging.png)
The submodule is important, because you can show a lot of files on one site by using pages. If you would have to load all files into one page, the browser could not handle so many files. It gives a clear overview and cleans up the main page.
We implemented the paging system in the frontend with MatDataSource. For the paging we are using <mat-paginator></mat-paginator> to show a different amount of items per page. Because the pagin is only in the home.component, we integrated it directly into it.
If this submodule would not work, pages would not be shown and there would be no clear overview.
Link to sourcecode: home.component
For the paging we are using the paginator of our MatTableDataSource. Because we defined everything well and stored our loaded data in a MatTableDataSource Object, we are able to have different pages with a different amount of items in it. For selecting how many items should be shown, we are using <mat-paginator></mat-paginator>. The pages are created automatically with the MatTableDataSource.
home.component.ts
...
/** Datasource for Table */
dataSource: MatTableDataSource<FileData>;
/** MatPaginator ViewChild */
@ViewChild(MatPaginator) paginator: MatPaginator;
...
/** Initialize data */
async initData() {
const res = await this.apiService.get('file');
if (res.status === IResponseStatus.success) {
this.dataSource = new MatTableDataSource(res.data);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
}home.component.html
<mat-paginator [pageSizeOptions]="[10, 25, 100, 200]"></mat-paginator>The submodule for paging provides the functionality to group files into pages. This way the user does not have to load all files into the list of files and can only show a specific amount of files per page. He can also change the pages and how many files are shown in one page. This function is implemented only in the GUI and does not communicate with the REST API. The paging system is implemented with the angular pagination system.
The source code of this module can be found here: aml-database-management-app/src/app/pages/general/home