editNew y editNewForm acabados

Author: JLRR2019

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

@@ -1,6 +1,6 @@
 <main class="flex-shrink-0">
 
-  <editNewForm></editNewForm>
+  <editNewForm [news]="news"></editNewForm> <!--[news es el de la clase hija]="news es el de la clase padre"-->
 
 
 </main>

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

@@ -15,13 +15,13 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
         <div class="col-md-4 " >
           <div>
             <label>Title: </label>
-            <p><textarea name="title" placeholder="title" style="width: 100%;">[(ngModel)]="news.title"</textarea></p>
+            <p><textarea name="title" placeholder="title" style="width: 100%;" [(ngModel)]="news.title"></textarea></p>
           </div>
         </div>
         <div class="col-md-4 " >
           <div>
             <label>Date: </label>
-            <p><textarea name="date" placeholder="date" style="width: 100%;">[(ngModel)]="news.date"</textarea></p>
+            <p><textarea name="date" placeholder="date" style="width: 100%;" [(ngModel)]="news.date"></textarea></p>
           </div>
         </div>
       </div>
@@ -30,13 +30,13 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
         <div class="col-md-4 " >
           <div>
             <label>Read Time: </label>
-            <p><textarea name="readTime" placeholder="readTime" style="width: 100%;">[(ngModel)]="news.readTime"</textarea></p>
+            <p><textarea name="readTime" placeholder="readTime" style="width: 100%;" [(ngModel)]="news.readTime"></textarea></p>
           </div>
         </div>
         <div class="col-md-4 " >
           <div>
             <label>Badge: </label>
-            <p><textarea name="badge" placeholder="badge" style="width: 100%;">[(ngModel)]="news.badge"</textarea></p>
+            <p><textarea name="badge" placeholder="badge" style="width: 100%;" [(ngModel)]="news.badge"></textarea></p>
           </div>
         </div>
       </div>
@@ -46,7 +46,7 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
           <div>
             <label style="text-align: left !important;">New Content: </label>
             <p><textarea name="description" placeholder="description" rows="10"
-                style="width: 100%;">[(ngModel)]="news.description"</textarea></p>
+                style="width: 100%;"[(ngModel)]="news.description"></textarea></p>
           </div>
         </div>
       </div>
@@ -56,7 +56,7 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
           <div>
             <label style="text-align: left !important;">New short header: </label>
             <p><textarea name="argument" placeholder="argument" rows="10"
-                style="width: 100%;">[(ngModel)]="news.argument"</textarea></p>
+                style="width: 100%;" [(ngModel)]="news.argument"></textarea></p>
           </div>
         </div>
       </div>
@@ -68,18 +68,24 @@ <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
         <div class="col-8 ">
           <p>Image: </p>
           <p>
-            <input type='file' name='imageField' accept=".jpg, .jpeg, .png, .svg"/>
+            <input #file type='file' name='imageField' accept=".jpg, .jpeg, .png, .svg"/>
           </p>
         </div>
       </div>
 
       <!--<input type="hidden" name="_csrf" value="{{token}}" />-->
 
       <p style="text-align: center;" >
-        <input #file class="btn btn-primary" type="submit" value="Save"/>
+
+        <button #file class="btn btn-primary" (click)="save()">Save</button>
+        <button class="btn btn-outline-light" style="color: black; border-color: black;" (click)="cancel()">Cancel</button>
+
+
+        <!--<input #file class="btn btn-primary" type="submit" value="Save"/>-->
         <!--Boton que ejecutara la función ajax-->
-        <button class="btn btn-outline-light" style="color: black; border-color: black;"
-          onclick="location.href='/'; return false;" (click)="save()">Cancel</button>
+        <!--<button  class="btn btn-outline-light" style="color: black; border-color: black;"
+          onclick="location.href='/'; return false;">Cancel</button>-->
+
         <!--Boton para cancelar la acción-->
       </p>
     </div>

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

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ViewChild } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { News } from 'src/app/models/news.model';
@@ -15,7 +15,8 @@ export class EditNewFormComponent {
 
 
   @Input() news!: News;
-  file: any;
+  @ViewChild("file")
+  file!: any;
 
   constructor(public router: Router, public newsService: NewsService, activatedRoute: ActivatedRoute){
 
@@ -43,6 +44,8 @@ export class EditNewFormComponent {
     }
   }
 
+
+
   private afterUploadImage(news: News){
     this.router.navigate(['/showNews/', news.id]);
   }
@@ -57,6 +60,13 @@ export class EditNewFormComponent {
       (news) => this.uploadImage(news as News),
       (error: string) => alert('Error al guardar los datos: ' + error)
     );
+
+  }
+
+  //(news) => {this.uploadImage(news as News); this.router.navigate(['/showNews/', this.news.id]);},
+
+  cancel() {
+    window.history.back();
   }
 
 }