SRS List of Courses NEW - ita-social-projects/what-front GitHub Wiki

### List of Courses Feature

Process

  • All users (except NotAssigned) can use this component
  • This component shows a table with list of existing courses
  • After clicking on sidebar's tab courses - system will redirect the user to List of Courses feature
  • The system sends a request to the server and if the request is successfully loaded, it shows List of Courses
  • Until the courses are downloaded, instead of "List of course" component the loader is being shown
  • Users, who can use this component, are able to reach the Course details
  • From this component, Admin and Secretary have access to the Edit a course component
  • From this component, Admin and Secretary have access to the Add a course component

Functions

  • Feature has a main heading Courses over all content and info string about count of displayed courses. For example "9 of 26 courses" means 9 visible in table active courses (if the switch-toggle Disabled button is not checked) of all 26 active courses that exist in system
  • Over the table heading there is a row with functional components: two icon-buttons (rows and blocks), search field, Switch-toggle Disabled button and Add a course button. Add a course button is displayed only for Admin and Secretary
  • Icon-buttons (rows and blocks):
    • Row type for displaying is chosen by default - row-button is disabled, block-button is enabled, table displays content in rows
    • After clicking on block-button the table changes its display from rows to cards, row-button becomes enabled and block-button becomes disabled. New click on row-button after that returns the default displaying
  • Search Field
    • Search field is empty by default, only a placeholder value is set
    • There is an available search by course name
    • There are no validation for input, no restrictions for count of symbols in input
  • Switch-toggle Disabled button
    • By default button is set to the left side which means active courses are displayed in table
    • Odd click on button makes table content disappear and component loader is shown. The system sends a request to the server and if the request is successfully loaded, table shows list of courses which are disabled in system. Button is set to the right side
    • Even click on button returns the default display
    • Info string about count of displayed courses at feature heading is changing after every click
  • The table includes 2 columns, which are headed with 2 headings name: Title, Edit. Title column is displayed for all accessed users and designed with two types of arrow(down and up), default - down. Edit column is displayed only for Secretary and Admin.
  • The default displayed sorting of list is next: lessons which were created in the last term get the last numbers and are displayed in the end of the list
  • Title table heading is clickable and provide sorting method by UTF code:
    • in ascending way for odd click. The arrow next to the heading is rotated on 180 deg
    • in descending way for even click. The arrow next to the heading is rotated on 180 deg
  • Edit table heading is not clickable
  • Row displaying type for content includes cards (3 items in line). Each card contains name of course, "Details" button, Edit icon-button
  • If the system has more than 9 courses, the user can see pagination at the bottom part of screen

Requirements

  • User logged in as Admin or Secretary
    • "Add a course" button is enabled and redirects to the Add a course component
    • "Edit" icon-button in every card or row is enabled and redirects to the Сourses tabs component. Active-tab(color of a tab is cyan #258Ba0) and relevant content are "Edit a course"
    • "Details" button in every card is enabled and redirects to the Сourses tabs component. Active-tab(color of a tab is cyan #258Ba0) and relevant content is "Course details"

Courses list:

  • Default content displaying for Admin and Secretary: default content on page

  • Default content displaying for Mentor and Student: default content on page

  • Feature heading for Admin and Secretary: feature heading

  • Feature heading for Mentor and Student: feature heading

  • Table with list of courses for Admin and Secretary (row-type displaying): table with content

  • Table with list of courses for Admin and Secretary (block-type displaying): table with content

  • Table with list of courses for Mentor and Student (row-type displaying): table with content

  • Table with list of courses for Mentor and Student (block-type displaying): table with content

Back to content