aben-bel / assessment_software

assessment_software

assessment_software's Issues

archived cards

icon

icon is to display a picture. it should have a way to accept images then display it. it should also have attributes to attach on click event.

TextField Component

TextField component is a component to hold text. It should have these attributes with their functions:

• id - a unique identifier for the text
• Value - is the content of the text field
• Variant - Standard(blank line), Filled(with shade background), Outlined(with borders)
• placeholder - grey text inside the field to describe the content
• autofocus
• classes - override CSS with custom
• color - set the color of the text field
• error - a boolean that is set to true and maybe brings a color change or error message display
• onChange - takes a callback and calls callback whenever there is a change to the value
• required - mark required accordingly
• type=text/email/password

path display

It should take two arrays. One is for a list of paths, and the other is for the link and display of those paths. The first one should always be bold, and the following path should be grey. And it should use a backslash to separate the path. Each path should be clickable and should be able to navigate back.

dialog box

Create a folder that will contain all types of dialogue boxes. There were will be three components. First, dialog box that only shows message passed to it as an attribute. Second, success dialog with message, and two buttons(the first button is cancel and the second button's title is passed as an attribute.).

practice storybook

cover this track from this https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/

implement home(courses) page

Buttons component

This component is a primary button with some attributes:

• id
• variant - outlined, filled, text
• background-color - background color
• color - text color
• onClick
• classes to override style
• style - to update the style

help flag

Implement help flag. on hover, it should show an explanation dialog.

implement archived(/archived) page

implement course page(course/#course_name)

File upload input

This is to upload files. It has these attributes:

• file type
• file size limit

tables

Tables are made up of rows and columns. The first row is used as a header. there should be a way to adjust the width of each cell. it might be wrapping, or fixed width. it should be provided as an API.

move all component to their own folder

implement pagination component

Read on how to implement a pagination component. Read the states you need for a successful pagination. Refer to the API for this material UI pagination. Include the important things. Material UI doc Must have API to include from material UI (classes, count(numOfPages), onChange, page(curPage))

nav bar

Implement the nav bar. it should look like the design below. in addition, it should float at the top, exactly shown in the screenshot. It should have a mechanism to add nav bars titles and addresses using arrays. It should change selected menus when clicked. By default, the first one is the selected bar.

assignment cards

implement the assignment card below.

implement routing

Implement routing for these pages:

1. home(courses),
2. archived(/archived),
3. assignment detail page(course/#course_name/assignment/#assignment_name),
4. change password(change_password),
5. course page(course/#course_name),
6. add assignment(course/#course_name/add assignment),
7. edit assignment(course/#course_name/edit assignment),
8. student list(course/#course_name/student_list),
9. sign in page(/signin)
10. 404 page not found

Task detail:

• create page folder
• inside the page folder create folder for each page
• for each page create a component and add dummy <p>Page Name</p> inside each page
• create routing for each page based on the address provided above
• given the address in the browser address bar, it should successfully navigate to the pages created
• if the page doesn't exit, it should navigate to 404 page

Use this guide: link to guide

profile avatar with drop down

implement profile avatar with drop down. please refer to the screenshot below.

implement change password(change_password)

Textarea input

This is an input to accept big text. its area is bigger than a simple text field

course card and assignment card click issue fix

The course card currently gets clicked even if you click it outside. The reason is both are wrapped by tag which takes the how line.

in the CSS, add inline-block

for example for the course card:

.course-box{
         @apply **inline-block** font-sans font-bold rounded-md p-4 w-max relative border-solid border-2 border-gray-100 text-left;
}

Date picker

An input field that is used to pick dates

it should have these attributes

• variant - date, datetime
• id
• value

implement , assignment detail page(course/#course_name/assignment/#assignment_name)

implement add course dialog

implenet the add course dialog form. it should use angular form. here is link to the tutorial

course cards

implement course card as shown in the screenshot: