Skip to content

Commit 84f96ad

Browse files
author
JLRR2019
committed
EditNew y EditNewForm sin testear
1 parent d7a62aa commit 84f96ad

File tree

7 files changed

+108
-35
lines changed

7 files changed

+108
-35
lines changed

‎frontend/src/app/app.module.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@ import { VideogameCatalogComponent } from './components/videogame/videogame-cata
2121
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
2222
import { CarouselComponent } from './components/carousel/carousel.component';
2323
import { EditNewComponent } from './components/Admin/editNew.component';
24+
import { EditNewFormComponent } from './components/Admin/editNewForm.component'
2425

2526

2627

2728

2829

2930
@NgModule({
30-
declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent, VideogameCatalogComponent, CarouselComponent, EditNewComponent],
31+
declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent, VideogameCatalogComponent, CarouselComponent, EditNewComponent, EditNewFormComponent],
3132
imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule, NgbModule],
3233
bootstrap: [AppComponent]
3334
})

‎frontend/src/app/components/Admin/editNew.component.html‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
<main class="flex-shrink-0">
22

3-
{{>editNewForm}}
3+
<editNewForm></editNewForm>
44

55

66
</main>
77

8-
<!-- Bootstrap core JS-->
9-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
10-
<!-- Core theme JS-->
11-
<script src="/js/scripts.js"></script>
8+

‎frontend/src/app/components/Admin/editNewForm.component.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
<section style="margin-bottom: 4%;">
3-
{{#new}}
4-
<form action="/editNew/{{id}}" method="post" enctype="multipart/form-data">
3+
4+
<form action="/editNew/{{news.id}}" method="post" enctype="multipart/form-data">
55

66
<div class="container" style="background-color:#f5f5f5; margin-top: 2%; padding-bottom: 1%; ">
77

@@ -15,13 +15,13 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
1515
<div class="col-md-4 " >
1616
<div>
1717
<label>Title: </label>
18-
<p><textarea name="title" placeholder="title" style="width: 100%;">{{title}}</textarea></p>
18+
<p><textarea name="title" placeholder="title" style="width: 100%;">[(ngModel)]="news.title"</textarea></p>
1919
</div>
2020
</div>
2121
<div class="col-md-4 " >
2222
<div>
2323
<label>Date: </label>
24-
<p><textarea name="date" placeholder="date" style="width: 100%;">{{date}}</textarea></p>
24+
<p><textarea name="date" placeholder="date" style="width: 100%;">[(ngModel)]="news.date"</textarea></p>
2525
</div>
2626
</div>
2727
</div>
@@ -30,13 +30,13 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
3030
<div class="col-md-4 " >
3131
<div>
3232
<label>Read Time: </label>
33-
<p><textarea name="readTime" placeholder="readTime" style="width: 100%;">{{readTime}}</textarea></p>
33+
<p><textarea name="readTime" placeholder="readTime" style="width: 100%;">[(ngModel)]="news.readTime"</textarea></p>
3434
</div>
3535
</div>
3636
<div class="col-md-4 " >
3737
<div>
3838
<label>Badge: </label>
39-
<p><textarea name="badge" placeholder="badge" style="width: 100%;">{{badge}}</textarea></p>
39+
<p><textarea name="badge" placeholder="badge" style="width: 100%;">[(ngModel)]="news.badge"</textarea></p>
4040
</div>
4141
</div>
4242
</div>
@@ -46,7 +46,7 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
4646
<div>
4747
<label style="text-align: left !important;">New Content: </label>
4848
<p><textarea name="description" placeholder="description" rows="10"
49-
style="width: 100%;">{{description}}</textarea></p>
49+
style="width: 100%;">[(ngModel)]="news.description"</textarea></p>
5050
</div>
5151
</div>
5252
</div>
@@ -56,30 +56,30 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
5656
<div>
5757
<label style="text-align: left !important;">New short header: </label>
5858
<p><textarea name="argument" placeholder="argument" rows="10"
59-
style="width: 100%;">{{argument}}</textarea></p>
59+
style="width: 100%;">[(ngModel)]="news.argument"</textarea></p>
6060
</div>
6161
</div>
6262
</div>
63-
64-
{{/new}}
63+
64+
6565

6666

6767
<div class="row mt-3 d-flex justify-content-center">
6868
<div class="col-8 ">
6969
<p>Image: </p>
7070
<p>
71-
<input type='file' name='imageField' accept=".jpg, .jpeg, .png, .svg" />
71+
<input type='file' name='imageField' accept=".jpg, .jpeg, .png, .svg"/>
7272
</p>
7373
</div>
7474
</div>
7575

76-
<input type="hidden" name="_csrf" value="{{token}}" />
76+
<!--<input type="hidden" name="_csrf" value="{{token}}" />-->
7777

7878
<p style="text-align: center;" >
79-
<input class="btn btn-primary" type="submit" value="Save" />
79+
<input #file class="btn btn-primary" type="submit" value="Save" />
8080
<!--Boton que ejecutara la función ajax-->
8181
<button class="btn btn-outline-light" style="color: black; border-color: black;"
82-
onclick="location.href='/'; return false;">Cancel</button>
82+
onclick="location.href='/'; return false;" (click)="save()">Cancel</button>
8383
<!--Boton para cancelar la acción-->
8484
</p>
8585
</div>

‎frontend/src/app/components/Admin/editNewForm.component.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Component, Input } from '@angular/core';
2+
import { Router, ActivatedRoute } from '@angular/router';
3+
4+
import { News } from 'src/app/models/news.model';
5+
import { NewsService } from 'src/app/services/news.service';
6+
7+
8+
@Component({
9+
selector: 'editNewForm',
10+
templateUrl: './editNewForm.component.html'
11+
})
12+
13+
14+
export class EditNewFormComponent {
15+
16+
17+
@Input() news!: News;
18+
file: any;
19+
20+
constructor(public router: Router, public newsService: NewsService, activatedRoute: ActivatedRoute){
21+
22+
const id = activatedRoute.snapshot.params['id'];
23+
this.newsService.getNew(id).subscribe(
24+
(news) => this.news = news as News,
25+
(error: any) => console.error(error)
26+
27+
);
28+
29+
}
30+
31+
uploadImage(news: News): void {
32+
33+
const image = this.file.nativeElement.files[0];
34+
if (image) {
35+
let formData = new FormData();
36+
formData.append("imageFile", image);
37+
this.newsService.uploadNewImage(news, formData).subscribe(
38+
_ => this.afterUploadImage(news),
39+
error => alert('Error uploading book image: ' + error)
40+
);
41+
} else {
42+
this.afterUploadImage(news);
43+
}
44+
}
45+
46+
private afterUploadImage(news: News){
47+
this.router.navigate(['/showNew/', news.id]);
48+
}
49+
50+
51+
deleteNew(news: News){
52+
this.newsService.deleteNew(news);
53+
}
54+
55+
save(){
56+
this.newsService.updateNew(this.news).subscribe(
57+
(news) => this.uploadImage(news as News),
58+
(error: string) => alert('Error al guardar los datos: ' + error)
59+
);
60+
}
61+
62+
}

‎frontend/src/app/components/news/showNews.component.html‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,20 @@ <h1 class="display-5 fw-bolder text-white mb-2" style="font-size: 40px;">{{news?
1818
</header>
1919

2020

21-
<section class="pt-0 MoreInfo" *ngIf="isAdmin()">
22-
<div class="container-fluid my-5">
23-
<div class="row justify-content-center" style=" background-color: rgb(27, 31, 31); margin-bottom: 2%;">
24-
<div class="col-5 text-center">
25-
<p class="lead fw-normal text-white-50 mb-4"
26-
style="color: aliceblue !important; font-size: 2em !important; margin-top: 5%;"> Admin Actions :
27-
<a class="btn btn-primary btn-lg px-4 me-sm-3" [routerLink]="['/deleteNew/{{news?.id}}']"
28-
style="margin-top: auto;">Eliminar</a>
29-
<a class="btn btn-outline-light btn-lg px-4" [routerLink]="['/editNew/{{news?.id}}']"
30-
style="margin-top: auto;">Editar</a>
31-
</p>
21+
<section class="pt-0 MoreInfo " *ngIf="isAdmin()">
22+
<div class="container-fluid px-5 my-5">
23+
<div class="row justify-content-center" style=" background-color: rgb(27, 31, 31); margin-bottom: 2%;">
24+
<div class="col-5 text-center" >
25+
<p class="lead fw-normal text-white-50 mb-4"
26+
style="color: aliceblue !important; font-size: 2em !important; margin-top: 5%;"> Admin Actions :
27+
<button class="btn btn-primary btn-lg px-4 me-sm-3" (click)="removeNew()" style="margin-top: auto;">Eliminar </button>
28+
<button class="btn btn-outline-light btn-lg px-4" (click)="editNew()" style="margin-top: auto;">Editar</button>
29+
</p>
30+
31+
</div>
3232
</div>
33-
</div>
3433
</div>
35-
</section>
34+
</section>+
3635

3736

3837

‎frontend/src/app/components/news/showNews.component.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class ShowNewsComponent{
1515
news!: News;
1616

1717

18-
constructor(public newsService: NewsService, public loginService: LoginService, activatedRoute: ActivatedRoute){
18+
constructor(public router: Router, public newsService: NewsService, public loginService: LoginService, activatedRoute: ActivatedRoute){
1919

2020
const id = activatedRoute.snapshot.params['id'];
2121
this.newsService.getNew(id).subscribe(
@@ -26,6 +26,20 @@ export class ShowNewsComponent{
2626

2727
}
2828

29+
editNew() {
30+
this.router.navigate(['/new/edit/' + this.news.id]);
31+
}
32+
33+
removeNew() {
34+
const okResponse = window.confirm('Do you want to remove this new?');
35+
if (okResponse) {
36+
this.newsService.deleteNew(this.news).subscribe(
37+
_ => this.router.navigate(['/news']),
38+
error => console.error(error)
39+
);
40+
}
41+
}
42+
2943

3044
isAdmin(){
3145
return this.loginService.isAdmin();

‎frontend/src/app/services/news.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export class NewsService {
4141
}
4242
}
4343

44-
uptadeNew(news: News) {
44+
updateNew(news: News) {
4545
return this.httpClient.put(URL + news.id, news).pipe(
4646
catchError((error: any) => this.handleError(error))
4747
)

0 commit comments

Comments
 (0)