;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [AddTutorialComponent]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(AddTutorialComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/angular-17-client/src/app/components/add-tutorial/add-tutorial.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { Tutorial } from '../../models/tutorial.model';
3 | import { TutorialService } from '../../services/tutorial.service';
4 |
5 | @Component({
6 | selector: 'app-add-tutorial',
7 | templateUrl: './add-tutorial.component.html',
8 | styleUrls: ['./add-tutorial.component.css'],
9 | })
10 | export class AddTutorialComponent {
11 | tutorial: Tutorial = {
12 | title: '',
13 | description: '',
14 | published: false
15 | };
16 | submitted = false;
17 |
18 | constructor(private tutorialService: TutorialService) {}
19 |
20 | saveTutorial(): void {
21 | const data = {
22 | title: this.tutorial.title,
23 | description: this.tutorial.description
24 | };
25 |
26 | this.tutorialService.create(data).subscribe({
27 | next: (res) => {
28 | console.log(res);
29 | this.submitted = true;
30 | },
31 | error: (e) => console.error(e)
32 | });
33 | }
34 |
35 | newTutorial(): void {
36 | this.submitted = false;
37 | this.tutorial = {
38 | title: '',
39 | description: '',
40 | published: false
41 | };
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/angular-17-client/src/app/components/tutorial-details/tutorial-details.component.css:
--------------------------------------------------------------------------------
1 | .edit-form {
2 | max-width: 400px;
3 | margin: auto;
4 | }
5 |
--------------------------------------------------------------------------------
/angular-17-client/src/app/components/tutorial-details/tutorial-details.component.html:
--------------------------------------------------------------------------------
1 | @if (viewMode){
2 | @if (currentTutorial.id){
3 | Tutorial
4 |
5 | {{ currentTutorial.title }}
6 |
7 |
8 |
9 | {{ currentTutorial.description }}
10 |
11 |
12 |
13 | {{ currentTutorial.published ? "Published" : "Pending" }}
14 |
15 |
16 |
17 | Edit
18 |
19 | } @else {Please click on a Tutorial...
}
20 | } @else {
21 | @if (currentTutorial.id) {
22 |
75 | } @else {Cannot access this Tutorial...
}
76 | }
77 |
--------------------------------------------------------------------------------
/angular-17-client/src/app/components/tutorial-details/tutorial-details.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { TutorialDetailsComponent } from './tutorial-details.component';
4 |
5 | describe('TutorialDetailsComponent', () => {
6 | let component: TutorialDetailsComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [TutorialDetailsComponent]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(TutorialDetailsComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should create', () => {
21 | expect(component).toBeTruthy();
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/angular-17-client/src/app/components/tutorial-details/tutorial-details.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { ActivatedRoute, Router } from '@angular/router';
3 | import { Tutorial } from '../../models/tutorial.model';
4 | import { TutorialService } from '../../services/tutorial.service';
5 |
6 | @Component({
7 | selector: 'app-tutorial-details',
8 | templateUrl: './tutorial-details.component.html',
9 | styleUrls: ['./tutorial-details.component.css'],
10 | })
11 | export class TutorialDetailsComponent implements OnInit {
12 | @Input() viewMode = false;
13 |
14 | @Input() currentTutorial: Tutorial = {
15 | title: '',
16 | description: '',
17 | published: false
18 | };
19 |
20 | message = '';
21 |
22 | constructor(
23 | private tutorialService: TutorialService,
24 | private route: ActivatedRoute,
25 | private router: Router
26 | ) {}
27 |
28 | ngOnInit(): void {
29 | if (!this.viewMode) {
30 | this.message = '';
31 | this.getTutorial(this.route.snapshot.params['id']);
32 | }
33 | }
34 |
35 | getTutorial(id: string): void {
36 | this.tutorialService.get(id).subscribe({
37 | next: (data) => {
38 | this.currentTutorial = data;
39 | console.log(data);
40 | },
41 | error: (e) => console.error(e)
42 | });
43 | }
44 |
45 | updatePublished(status: boolean): void {
46 | const data = {
47 | title: this.currentTutorial.title,
48 | description: this.currentTutorial.description,
49 | published: status
50 | };
51 |
52 | this.message = '';
53 |
54 | this.tutorialService.update(this.currentTutorial.id, data).subscribe({
55 | next: (res) => {
56 | console.log(res);
57 | this.currentTutorial.published = status;
58 | this.message = res.message
59 | ? res.message
60 | : 'The status was updated successfully!';
61 | },
62 | error: (e) => console.error(e)
63 | });
64 | }
65 |
66 | updateTutorial(): void {
67 | this.message = '';
68 |
69 | this.tutorialService
70 | .update(this.currentTutorial.id, this.currentTutorial)
71 | .subscribe({
72 | next: (res) => {
73 | console.log(res);
74 | this.message = res.message
75 | ? res.message
76 | : 'This tutorial was updated successfully!';
77 | },
78 | error: (e) => console.error(e)
79 | });
80 | }
81 |
82 | deleteTutorial(): void {
83 | this.tutorialService.delete(this.currentTutorial.id).subscribe({
84 | next: (res) => {
85 | console.log(res);
86 | this.router.navigate(['/tutorials']);
87 | },
88 | error: (e) => console.error(e)
89 | });
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/angular-17-client/src/app/components/tutorials-list/tutorials-list.component.css:
--------------------------------------------------------------------------------
1 | .list {
2 | text-align: left;
3 | max-width: 750px;
4 | margin: auto;
5 | }
--------------------------------------------------------------------------------
/angular-17-client/src/app/components/tutorials-list/tutorials-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
21 |
22 |
Tutorials List
23 |
24 | @for (tutorial of tutorials; track tutorial.id; let i = $index) {
25 | -
30 | {{ tutorial.title }}
31 |
32 | }
33 |
34 |
35 |
38 |
39 |
45 |