Skip to content

Commit 4d7083d

Browse files
ultramaniultramani
committed
Added juans
1 parent b0fb440 commit 4d7083d

14 files changed

+293
-45
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ import { VideogameCardComponent } from './components/videogame/videogame-card.co
2020
import { VideogameCatalogComponent } from './components/videogame/videogame-catalog.component';
2121
import { VideogameEditFormComponent } from './components/videogame/videogame-edit-form.component';
2222
import { VideogamePurchaseComponent } from './components/videogame/videogame-purchase.component';
23+
import { EditNewComponent } from './components/news/editNew.component';
24+
import { EditNewFormComponent } from './components/news/editNewForm.component';
25+
26+
2327

2428
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
2529
import { CarouselComponent } from './components/carousel/carousel.component';
@@ -29,7 +33,7 @@ import { AboutComponent } from './components/about/about.component';
2933

3034

3135
@NgModule({
32-
declarations: [AboutComponent,CarouselComponent,AppComponent,VideogamePurchaseComponent,VideogameEditFormComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent],
36+
declarations: [EditNewFormComponent,EditNewComponent,AboutComponent,CarouselComponent,AppComponent,VideogamePurchaseComponent,VideogameEditFormComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent],
3337
imports: [BrowserModule,NgbModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule],
3438
bootstrap: [AppComponent]
3539
})

‎frontend/src/app/app.routing.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { UserProfile } from './components/user/userProfile.component';
1111
import { AboutComponent } from './components/about/about.component';
1212
import { LoginComponent } from './components/login/login.component';
1313
import { SignUpComponent } from './components/login/signUp.component';
14+
import { EditNewComponent } from './components/news/editNew.component';
1415

1516
//aquí tenemos que completar todo lo que queremos que se vaya cargando en el router-outlet
1617
//ojo, el template no debe llamar al servicio, hay que hacerlo a través del componente
@@ -24,6 +25,7 @@ const appRoutes = [
2425
{ path: 'videogame/:id', component: VideogameDetailComponent },
2526
{ path: 'videogame/edit/:id', component: VideogameEditFormComponent },
2627
{ path: 'videogame/:id/purchase/:id2', component: VideogamePurchaseComponent },
28+
{ path: 'new/edit/:id', component: EditNewComponent },
2729
{ path: 'about', component: AboutComponent },
2830
{ path: 'login', component: LoginComponent },
2931
{ path: 'signUp', component: SignUpComponent },

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<main class="flex-shrink-0">
2+
3+
<editNewForm></editNewForm>
4+
5+
6+
</main>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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: 'editNew',
10+
templateUrl: './editNew.component.html'
11+
})
12+
13+
14+
export class EditNewComponent{
15+
16+
news!: News;
17+
18+
constructor(public newsService: NewsService, activatedRoute: ActivatedRoute, private router: Router){
19+
20+
const id = activatedRoute.snapshot.params['id'];
21+
this.newsService.getNew(id).subscribe(
22+
(news) => this.news = news as News,
23+
(error: any) => console.error(error)
24+
)
25+
26+
27+
}
28+
29+
}

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<section style="margin-bottom: 4%;">
2+
3+
<form *ngIf="ready">
4+
5+
<div class="container" style="background-color:#f5f5f5; margin-top: 2%; padding-bottom: 1%; ">
6+
7+
<div class="row">
8+
<div class="col-12" style="padding-bottom: 5%;">
9+
<h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
10+
</div>
11+
</div>
12+
13+
<div class="row mt-2 d-flex justify-content-center">
14+
<div class="col-md-4 " >
15+
<div>
16+
<label>Title: </label>
17+
<p><textarea name="title" placeholder="title" style="width: 100%;">[(ngModel)]="news.title"</textarea></p>
18+
</div>
19+
</div>
20+
<div class="col-md-4 " >
21+
<div>
22+
<label>Date: </label>
23+
<p><textarea name="date" placeholder="date" style="width: 100%;">[(ngModel)]="news.date"</textarea></p>
24+
</div>
25+
</div>
26+
</div>
27+
28+
<div class="row mt-2 d-flex justify-content-center">
29+
<div class="col-md-4 " >
30+
<div>
31+
<label>Read Time: </label>
32+
<p><textarea name="readTime" placeholder="readTime" style="width: 100%;">[(ngModel)]="news.readTime"</textarea></p>
33+
</div>
34+
</div>
35+
<div class="col-md-4 " >
36+
<div>
37+
<label>Badge: </label>
38+
<p><textarea name="badge" placeholder="badge" style="width: 100%;">[(ngModel)]="news.badge"</textarea></p>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<div class="row mt-3 d-flex justify-content-center" >
44+
<div class="col-md-8">
45+
<div>
46+
<label style="text-align: left !important;">New Content: </label>
47+
<p><textarea name="description" placeholder="description" rows="10"
48+
style="width: 100%;">[(ngModel)]="news.description"</textarea></p>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div class="row mt-3 d-flex justify-content-center" >
54+
<div class="col-md-8">
55+
<div>
56+
<label style="text-align: left !important;">New short header: </label>
57+
<p><textarea name="argument" placeholder="argument" rows="10"
58+
style="width: 100%;">[(ngModel)]="news.argument"</textarea></p>
59+
</div>
60+
</div>
61+
</div>
62+
63+
64+
65+
66+
<div class="row mt-3 d-flex justify-content-center">
67+
<div class="col-8 ">
68+
<p>Image: </p>
69+
<p>
70+
<input type='file' name='imageField' accept=".jpg, .jpeg, .png, .svg"/>
71+
</p>
72+
</div>
73+
</div>
74+
75+
<!--<input type="hidden" name="_csrf" value="{{token}}" />-->
76+
77+
<p style="text-align: center;" >
78+
<input #file class="btn btn-primary" type="submit" value="Save" />
79+
<!--Boton que ejecutara la función ajax-->
80+
<button class="btn btn-outline-light" style="color: black; border-color: black;"
81+
onclick="location.href='/'; return false;" (click)="save()">Cancel</button>
82+
<!--Boton para cancelar la acción-->
83+
</p>
84+
</div>
85+
</form>
86+
</section>

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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+
news!: News;
18+
file: any;
19+
ready:boolean = false;
20+
21+
constructor(public router: Router, public newsService: NewsService, public activatedRoute: ActivatedRoute){
22+
23+
24+
25+
}
26+
27+
ngOnInit(){
28+
const id = this.activatedRoute.snapshot.params['id'];
29+
this.newsService.getNew(id).subscribe(
30+
news => this.news = news as News,
31+
(error: any) => console.error(error)
32+
33+
);
34+
this.ready = true;
35+
alert(this.news);
36+
}
37+
38+
uploadImage(news: News): void {
39+
40+
const image = this.file.nativeElement.files[0];
41+
if (image) {
42+
let formData = new FormData();
43+
formData.append("imageFile", image);
44+
this.newsService.uploadNewImage(news, formData).subscribe(
45+
_ => this.afterUploadImage(news),
46+
error => alert('Error uploading book image: ' + error)
47+
);
48+
} else {
49+
this.afterUploadImage(news);
50+
}
51+
}
52+
53+
private afterUploadImage(news: News){
54+
this.router.navigate(['/showNew/', news.id]);
55+
}
56+
57+
58+
deleteNew(news: News){
59+
this.newsService.deleteNew(news);
60+
}
61+
62+
save(){
63+
this.newsService.updateNew(this.news).subscribe(
64+
(news) => this.uploadImage(news as News),
65+
(error: string) => alert('Error al guardar los datos: ' + error)
66+
);
67+
}
68+
69+
}

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

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,22 @@ <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>
3534
</section>
3635

3736

38-
3937
<!-- MoreInfo-->
4038
<section class="pt-0 MoreInfo" style="margin-left: 10%; margin-right: 10%; background-color: #FFFFFF !important;">
4139
<div class="container px-5 my-5">

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

Lines changed: 13 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(private 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,7 +26,19 @@ export class ShowNewsComponent{
2626

2727
}
2828

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

39+
editNew() {
40+
this.router.navigate(['/new/edit/' + this.news.id]);
41+
}
3042
isAdmin(){
3143
return this.loginService.isAdmin();
3244
}

‎frontend/src/app/components/videogame/videogame-detail.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ <h1 class="display-5 fw-bolder text-white mb-2">{{videogame.title}}</h1>
2727

2828

2929

30-
<section class="pt-0 MoreInfo">
30+
<section class="pt-0 MoreInfo " *ngIf="isAdmin()">
3131
<div class="container-fluid px-5 my-5">
3232
<div class="row justify-content-center" style=" background-color: rgb(27, 31, 31); margin-bottom: 2%;">
3333
<div class="col-5 text-center" >

‎frontend/src/app/components/videogame/videogame-detail.component.ts‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component } from '@angular/core';
22
import { Router,ActivatedRoute } from '@angular/router';
33
import { Videogame } from 'src/app/models/videogame.model';
4+
import { LoginService } from 'src/app/services/login.service';
45
import { VideogameService } from 'src/app/services/videogame.service';
56

67
@Component({
@@ -12,15 +13,15 @@ export class VideogameDetailComponent{
1213

1314
videogame!: Videogame;
1415

15-
constructor(private router: Router, activatedRoute: ActivatedRoute, public videogameService: VideogameService){
16+
constructor(private router: Router,public loginService: LoginService, activatedRoute: ActivatedRoute, public videogameService: VideogameService){
1617

1718
const id = activatedRoute.snapshot.params['id'];
1819
videogameService.getVideogame(id).subscribe(
1920
videogame => this.videogame = videogame,
2021
error => console.error(error)
2122
)
2223
}
23-
//Forbidden error falta ser admin
24+
2425
removeVideogame() {
2526
const okResponse = window.confirm('Do you want to remove this videogame?');
2627
if (okResponse) {
@@ -29,7 +30,8 @@ export class VideogameDetailComponent{
2930
error => console.error(error)
3031
);
3132
}
32-
}
33+
}
34+
3335
//Forbidden error falta ser admin
3436
editVideogame() {
3537
this.router.navigate(['/videogame/edit/' + this.videogame.id]);
@@ -52,4 +54,7 @@ export class VideogameDetailComponent{
5254
return this.videogame.imageCompany? '/api/videogames/'+this.videogame.id+'/companyImage' : '/assets/images/no_image.png';
5355
}
5456

57+
isAdmin(){
58+
return this.loginService.isAdmin();
59+
}
5560
}

0 commit comments

Comments
 (0)