Course Administration - Description (Part 1)

[steffen74]

This issue is part of a series of four issues in total, where each issue is describing a view with a common top and bottom section.

The top section includes the title of the course and additionally four tabs, which serve to access the different pages allowing to enter the needed course specific information as well to manage the participation. The colors of the tabs change according to the completion status of each section, whereby a section can only be completed when the section before has been completed.
The bottom section consist of a button to move to the next section. However, only when all mandatory fields are completed the page with the next tab is displayed, otherwise an error message is shown.

Details

• The URL of the site is: [domain]/course/?course_id=xyz&tab=description (however, you can also choose a different format)
• The site is accessed by double clicking on the row of the corresponding course in the course overview table (see issue Admin Course Overview #41), or by clicking on the corresponding tab in the top section in one of the related views.
• The design should be as follows:
  • Desktop: https://www.figma.com/file/TtucXsvBOfZE7NZKzTimrA/edu-Wireframe-%E2%80%93-WIP?node-id=1608%3A5471
  • Mobile: no particular design; should only be functional

Top section

• The tab that is currently selected is always marked with a black background.
• If Course:Status equals "DRAFT", only the first tab can be selected; if it is "READY_FOR_PUBLICATION", only the first and second; if it is "READY_FOR_APPLICATION", only the first 3; and if it is "APPLICANTS_INVITED" or "PARTICIPANTS_RATED", all tabs can be selected.
• Depending on the course status field the colors of the not selected tabs are given a light grey or green background. If Course:Status=="READYFORAPPLICATION", the first two tabs are with green background (except for the currently selected one); if Course:Status=="APPLICANTSINVITED", the first three tabs are with green background (except for the currently selected one); and so on.

Middle Section

• The upper part includes 6 text input fields [Course:Description (max.length=200), Course:Learning:Goals (max.length=500), Course:TitleTextField1 (max.length=50), Course:TitleTextField2 (max.length=50), Course:ContentTextField1 (max.length=1500), Course:ContentTextField2 (max.length=1500)]; all input fields can be edited directly and are saved as soon the text fields are left. If this is complicated a modal can be used instead.
• 3 input fields to select a weekly time for the course; the weekday can be implemented via a dropdown and the two times via text/date inputs, which are checked for the correct format. The fields are as well saved automatically after editing. Other solutions are welcome here as well (modal or time picker). [Course:WeekDay; Course:TimeStart; Course:TimeEnd]
• a dropdown menu to select the language of the course [Course:Language]
• Integer input fields for the number of maximum participants [Course:MaxParticipants; must be a positive integer]
• The bottom part includes a table to define the locations of the course. New locations can be selected by the named add sign below the table on the right (the default values when a new location is added are given below). The table columns are the following:
  • location: directly editable via a dropdown menu including the values from the table LocationOptions (default for a new loaction is given in CourseDefaultValues:Location)
  • address:
    • if location is unequal to "ONLINE", it includes a an address given via GPS-coordinates [Location:Latitude; Location:Longitude]. The address/coordinates are provided via a location picker (if the selected location picker need a different format to store the location, the latitude/longitude fields in the Location table can be changed accordingly).
    • if location is equal to "ONLINE", it includes an editable text field with the link to the corresponding online call. The field is directly editable and saved on editing (if it is complicated it can be edited via a modal).
  • trash bin: by clicking on it the corresponding location is deleted

Bottom Section

• A "Next" button to proceed to the next tab (see issue Course Administration - Session Dates (Part 2) #51). However, a change to the next tab is only possible if Course:Status is unequal to "DRAFT". If the status does not have a corresponding value, it is checked whether the current state of fields allows for a status change. If the conditions are met the Course:Status field is changed to "READYFORPUBLICATION" and the next tab is opened. If the conditions are not met, an error message is displayed stating: "Please, complete all mandatory fields to proceed!".
• The conditions to change the status are:
  • The text input fields Course:Description, Course:LearningGoals, Course:TitleTextField1, and Course:ContentTextField1 are not empty.
  • At least one location for the course is defined
  • If a location with Location:Name=="ONLINE" is part of the locations, the field Location:Link must be not empty.

Optional and Future Implementations

• Showing the number of currently used characters and the total number of characters available on top of the 6 text input fields