Skip to content

Task-11 #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
YurikMurik wants to merge 1 commit into
base: task-9
Choose a base branch
from
Open

Task-11 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 39 additions & 18 deletions mocks/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,22 @@
{
"courses": [
{
"id": "1",
"title": "Video about Denmark",
"createdAtDate": "1/1/2019",
"durationTime": 120,
"topRated": true,
"authors": [],
"description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
},
{
"id": "2",
"title": "Video about Canada",
"createdAtDate": "5/20/2020",
"createdAtDate": "5/2/2020",
"durationTime": 180,
"authors": [
"me",
"me"
],
"description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
},
{
"id": "3",
"title": "Video about Brazil",
"createdAtDate": "12/14/2021",
"createdAtDate": "12/12/2021",
"durationTime": 180,
"topRated": false,
"authors": [
"me",
"me",
"id3"
],
Expand All @@ -36,11 +25,10 @@
{
"id": "4",
"title": "Video about Australia",
"createdAtDate": "10/20/2020",
"createdAtDate": "11/12/2020",
"durationTime": 132,
"topRated": false,
"authors": [
"me",
"me",
"id4"
],
Expand All @@ -53,21 +41,40 @@
"durationTime": 119,
"topRated": true,
"authors": [
"me",
"me",
"id6"
],
"description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla."
},
{
"title": "yurikmurik",
"createdAtDate": "2020-05-20T21:00:00.000Z",
"durationTime": "12",
"createdAtDate": "04/05/2020",
"durationTime": 12,
"description": "123",
"authors": [
"df"
],
"id": "l9muna723"
},
{
"title": "Video about Canada",
"description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla. Fuga at magni dignissimos accusamus asperiores enim corrupti nobis dolorem ducimus nostrum dolor, consequuntur, quia laudantium tempore? Neque doloremque eos rerum nulla.",
"durationTime": 180,
"createdAtDate": "5/2/2020",
"authors": [
"me"
],
"id": "bwqs6nfo6"
},
{
"title": "asa",
"description": "a",
"durationTime": 12,
"createdAtDate": "12/12/1212",
"authors": [
"Andrew Vorobiev"
],
"id": "dfh962g0a"
}
],
"users": [
Expand All @@ -79,5 +86,19 @@
"password": "12345",
"token": "randomtoken_1234556789$"
}
],
"authors": [
{
"id": "1",
"name": "Andrew Vorobiev"
},
{
"id": "2",
"name": "Andrey Morozov"
},
{
"id": "3",
"name": "Andy Panda"
}
]
}
196 changes: 122 additions & 74 deletions src/app/add-course-page/add-course-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,125 @@
<div class="login-wrapper">
<mat-card class="login-card">
<mat-card-header>
<mat-card-title>New course</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="add-course-form">
<mat-form-field class="add-course-form-title">
<mat-label>Title</mat-label>
<input
matInput
placeholder="Text input"
[(ngModel)]="title"
name="username"
required
>
</mat-form-field>
<mat-form-field class="add-course-form-description">
<mat-label>Description</mat-label>
<textarea
matInput
placeholder="Description"
[(ngModel)]="description"
name="description"
required
></textarea>
</mat-form-field>
<mat-form-field class="add-course-form-date">
<mat-label>Duration: </mat-label>
<input
matInput
placeholder="minutes"
[(ngModel)]="duration"
name="duration"
required
>
</mat-form-field>
<mat-form-field class="add-course-form-date">
<mat-label>Date: </mat-label>
<input
matInput
[matDatepicker]="picker"
(dateInput)="addEvent($event)"
>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field class="add-course-form-authors">
<mat-label>Authors: </mat-label>
<input
matInput
placeholder="Start typing"
[(ngModel)]="authors"
name="authors"
required
>
</mat-form-field>
<div class="add-course-wrapper">
<div class="add-course-card">
<div class="add-course-card-header">
<p>{{pageTitle}}</p>
</div>
<form
[formGroup]="addNewCourseForm"
class="add-course-form"
(ngSubmit)="addNewCourse()"
novalidate
>
<label class="add-course-form-label">
<p> Title </p>
<input
placeholder="Text input"
formControlName="title"
[class.error-input-validation]="formControls.title.errors
&& formControls.title.touched"
>
</label>
<div
*ngIf="formControls.title.touched && formControls.title.invalid"
[class.error-message]="formControls.title.errors"
>
<div *ngIf="formControls.title.errors.maxlength">
Title should be not more 50 character.
</div>
<div *ngIf="formControls.title.errors.required">
Required
</div>
</div>

<label class="add-course-form-label">
<p> Description </p>
<textarea
placeholder="Description"
formControlName="description"
[class.error-input-validation]="formControls.description.errors
&& formControls.description.touched"
></textarea>
</label>
<div
*ngIf="formControls.description.touched && formControls.description.invalid"
[class.error-message]="formControls.description.errors"
>
<div *ngIf="formControls.description.errors.maxlength">
Title should be not more 500 character.
</div>
<div *ngIf="formControls.description.errors.required">
Required
</div>
</div>

<label class="add-course-form-label-time">
<p> Date: </p>
<app-created-at-date-field
formControlName="createdAtDate"
></app-created-at-date-field>
</label>
<div
*ngIf="formControls.createdAtDate.touched && formControls.createdAtDate.invalid"
[class.error-message]="formControls.createdAtDate.errors"
>
<div *ngIf="formControls.createdAtDate.errors.wrongFormatError">
Date format should be dd/MM/yyyy
</div>
<div *ngIf="formControls.createdAtDate.errors.required">
Required
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button
mat-raised-button
class="add-course-form-button-cancel"
(click)="cancelClick()"

<label class="add-course-form-label-time-duration">
<p> Duration: </p>
<app-duration-field
formControlName="durationTime"
></app-duration-field>
</label>
<div
*ngIf="formControls.durationTime.touched && formControls.durationTime.invalid"
[class.error-message]="formControls.durationTime.errors"
>
Cancel
</button>
<button
mat-raised-button
class="add-course-form-button-save"
(click)="addNewCourse()"
<div *ngIf="formControls.durationTime.errors.required">
Required
</div>
<div *ngIf="formControls.durationTime.errors.onlyNumberError">
There are should be digits only!
</div>
</div>

<label class="add-course-form-label">
<p> Authors: </p>
<app-authors-input
[formControl]="addNewCourseForm.get('authors')"
></app-authors-input>
</label>
<div
*ngIf="formControls.authors.touched && formControls.authors.invalid"
[class.error-message]="formControls.authors.errors"
>
Save
</button>
</mat-card-actions>
</mat-card>
</div>
<div *ngIf="formControls.authors.errors.requiredError">
There is should be one author at least!
</div>
</div>
<div class="add-course-form-actions">
<button
mat-raised-button
class="add-course-form-button-cancel"
(click)="cancelClick()"
>
Cancel
</button>

<button
mat-raised-button
class="add-course-form-button-save"
type="submit"
[disabled]="addNewCourseForm.invalid"
[class.add-course-form-button-save--disabled]="addNewCourseForm.invalid"
>
Save
</button>
</div>
</form>
</div>
</div>
Loading