Skip to content

Commit ad1b1d5

Browse files
Xarlifue360Xarlifue360
committed
createNew y createVideogame funcionan (excepto imagenes)
1 parent d854de2 commit ad1b1d5

11 files changed

+434
-80
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,16 @@ import { AboutComponent } from './components/about/about.component';
2424
import { AdminComponent } from './components/admin/admin.component';
2525
import { CreateNewComponent } from './components/admin/createNew.component';
2626
import { CreateNewFormComponent } from './components/admin/createNewForm.component'
27+
import { CreateVideogame } from './components/admin/createVideogame.component';
28+
import { CreateVideogameForm } from './components/admin/createVideogameForm.component';
29+
30+
2731

2832
@NgModule({
2933
declarations: [UserProfile,AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent,
3034
FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent,
3135
HomeComponent, UserProfile,VideogameCardComponent, CarouselComponent, AboutComponent,
32-
AdminComponent, CreateNewComponent, CreateNewFormComponent],
36+
AdminComponent, CreateNewComponent, CreateNewFormComponent, CreateVideogame, CreateVideogameForm],
3337
imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule, NgbModule],
3438
bootstrap: [AppComponent]
3539
})

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { AboutComponent } from './components/about/about.component';
1010
import { LoginComponent } from './components/login/login.component';
1111
import { SignUpComponent } from './components/login/signUp.component';
1212
import { AdminComponent } from './components/admin/admin.component';
13+
import { CreateVideogame } from './components/admin/createVideogame.component';
1314

1415
//aquí tenemos que completar todo lo que queremos que se vaya cargando en el router-outlet
1516
//ojo, el template no debe llamar al servicio, hay que hacerlo a través del componente
@@ -26,6 +27,7 @@ const appRoutes = [
2627
{ path: 'signUp', component: SignUpComponent },
2728
{ path: 'admin', component: AdminComponent },
2829
{ path: 'createNew', component: CreateNewComponent },
30+
{ path: 'createVideogame', component: CreateVideogame },
2931
{ path: '', redirectTo: 'home', pathMatch: 'full' }
3032

3133
]

‎frontend/src/app/components/admin/createNew.component.html‎

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

3-
<createNewForm></createNewForm><!--[news es el de la clase hija]="news es el de la clase padre"-->
3+
<createNewForm [news]="news"></createNewForm><!--[news es el de la clase hija]="news es el de la clase padre"-->
44

55
</main>

‎frontend/src/app/components/admin/createNewForm.component.html‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<section>
2-
<!--<div *ngIf="news">-->
32
<form action="/createNew" method="post" enctype="multipart/form-data">
43

54
<div class="container" style="background-color:#f5f5f5; margin-top: 2%; padding-bottom: 1%; ">
@@ -21,7 +20,8 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
2120
<div class="col-md-4 ">
2221
<div>
2322
<label>Date: </label>
24-
<p><textarea name="date" placeholder="date" style="width: 100%;" [(ngModel)]="date"></textarea>
23+
<p><textarea name="date" placeholder="date" style="width: 100%;"
24+
[(ngModel)]="date"></textarea>
2525
</p>
2626
</div>
2727
</div>
@@ -32,7 +32,7 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
3232
<div>
3333
<label>Read Time: </label>
3434
<p><textarea name="readTime" placeholder="readTime" style="width: 100%;"
35-
[(ngModel)]="read_time"></textarea></p>
35+
[(ngModel)]="readTime"></textarea></p>
3636
</div>
3737
</div>
3838
<div class="col-md-4 ">
@@ -49,7 +49,7 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
4949
<div>
5050
<label style="text-align: left !important;">New Content: </label>
5151
<p><textarea name="description" placeholder="description" rows="10" style="width: 100%;"
52-
[(ngModel)]="content"></textarea></p>
52+
[(ngModel)]="description"></textarea></p>
5353
</div>
5454
</div>
5555
</div>
@@ -59,7 +59,7 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
5959
<div>
6060
<label style="text-align: left !important;">New short header: </label>
6161
<p><textarea name="shortDescription" placeholder="shortDescription" rows="10"
62-
style="width: 100%;" [(ngModel)]="header"></textarea></p>
62+
style="width: 100%;" [(ngModel)]="argument"></textarea></p>
6363
</div>
6464
</div>
6565
</div>
@@ -78,22 +78,16 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
7878
<div class="col-8 ">
7979
<p>Image: </p>
8080
<p>
81-
<input type='file' name='imageField' accept=".jpg, .jpeg .png .svg"
82-
(click)="updateNewImage()" />
83-
<!--<input type="hidden" name="_csrf" value="{{token}}" />-->
81+
<input type='file' name='imageField' accept=".jpg, .jpeg .png .svg" />
8482
</p>
8583
</div>
8684
</div>
8785

8886
<p style="text-align: center;">
89-
<input class="btn btn-primary" type="submit" value="Save"
90-
(click)="addNew(title, date, read_time, badge, content, header, true)" ; />
91-
<!--Boton que ejecutara la función ajax-->
87+
<button class="btn btn-primary" (click)="save()">Save</button>
9288
<button class="btn btn-outline-light" style="color: black; border-color: black;"
93-
onclick="location.href='/';">Cancel</button>
94-
<!--Boton para cancelar la acción-->
89+
(click)="cancel()">Cancel</button>
9590
</p>
9691
</div>
9792
</form>
98-
<!--/div-->
9993
</section>

‎frontend/src/app/components/admin/createNewForm.component.ts‎

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Input } from "@angular/core";
1+
import { Component, Input, ViewChild } from "@angular/core";
22
import { ActivatedRoute, Router } from "@angular/router";
33
import { News } from "src/app/models/news.model";
44
import { Videogame } from "src/app/models/videogame.model";
@@ -15,20 +15,51 @@ export class CreateNewFormComponent {
1515

1616
title!: string;
1717
date!: string;
18-
read_time!: string;
18+
readTime!: string;
1919
badge!: string;
20-
content!: string;
21-
header!: string;
22-
image!: boolean;
20+
description!: string;
21+
argument!: string;
2322

24-
constructor(public router: Router, public newsService: NewsService, activatedRoute: ActivatedRoute){}
23+
@ViewChild("file")
24+
file!: any;
2525

26-
addNew(title: string, date: string, readtime: string, bagde: string, content: string, header: string, image: boolean) {
27-
this.news = { title: title, date: date, readTime: readtime, badge: bagde, description: content, argument: header, image: image }
26+
constructor(public router: Router, public newsService: NewsService, activatedRoute: ActivatedRoute) { }
27+
28+
uploadImage(news: News): void {
29+
30+
const image = this.file.nativeElement.files[0];
31+
if (image) {
32+
let formData = new FormData();
33+
formData.append("imageFile", image);
34+
this.newsService.uploadNewImage(news, formData).subscribe(
35+
_ => this.afterUploadImage(news),
36+
error => alert('Error uploading book image: ' + error)
37+
);
38+
} else {
39+
this.afterUploadImage(news);
40+
}
41+
}
42+
43+
private afterUploadImage(news: News) {
44+
this.router.navigate(['/admin']);
2845
}
2946

30-
updateNewImage() {
47+
save() {
48+
49+
this.news = {
50+
title: this.title, date: this.date, readTime: this.readTime,
51+
badge: this.badge, description: this.description, argument: this.argument, image: true
52+
}
53+
54+
this.newsService.createNew(this.news).subscribe(
55+
(news) => this.uploadImage(news as News),
56+
(error: string) => alert('Error al guardar los datos: ' + error)
57+
);
58+
59+
}
3160

61+
cancel() {
62+
window.history.back();
3263
}
3364

3465
}

‎frontend/src/app/components/admin/createVideogame.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<main class="flex-shrink-0">
2+
3+
<createVideogameForm [videogame]="videogame"></createVideogameForm> <!--[news es el de la clase hija]="news es el de la clase padre"-->
4+
5+
</main>

‎frontend/src/app/components/admin/createVideogame.component.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Component } from "@angular/core";
2+
import { ActivatedRoute, Router } from "@angular/router";
3+
4+
import { Videogame } from "src/app/models/videogame.model";
5+
import { VideogameService } from "src/app/services/videogame.service";
6+
7+
@Component({
8+
selector: 'createVideogame',
9+
templateUrl: './createVideogame.component.html'
10+
})
11+
12+
export class CreateVideogame {
13+
14+
videogame!: Videogame;
15+
16+
constructor(public newsService: VideogameService, activatedRoute: ActivatedRoute, private router: Router) {
17+
const id = activatedRoute.snapshot.params['id'];
18+
this.newsService.getVideogame(id).subscribe(
19+
(videogame) => this.videogame = videogame as Videogame,
20+
//(error: any) => console.error(error)
21+
)
22+
}
23+
}

0 commit comments

Comments
 (0)