editnew y editnewform sin acabar

Author: JLRR2019

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

@@ -0,0 +1,11 @@
+<main class="flex-shrink-0">
+
+  {{>editNewForm}}
+
+
+</main>
+
+<!-- Bootstrap core JS-->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+<!-- Core theme JS-->
+<script src="/js/scripts.js"></script>

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

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { News } from 'src/app/models/news.model';
+import { NewsService } from 'src/app/services/news.service';
+
+
+@Component({
+  selector: 'editNew',
+  templateUrl: './editNew.component.html'
+})
+
+
+export class EditNewComponent{
+
+  news!: News;
+
+constructor(public newsService: NewsService, activatedRoute: ActivatedRoute, private router: Router){
+
+  const id = activatedRoute.snapshot.params['id'];
+  this.newsService.getNew(id).subscribe(
+    (news) => this.news =  news as News,
+    (error: any) => console.error(error)
+  )
+
+
+  }
+
+}

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

@@ -0,0 +1,88 @@
+
+<section style="margin-bottom: 4%;">
+  {{#new}}
+  <form action="/editNew/{{id}}" method="post" enctype="multipart/form-data">
+
+    <div class="container" style="background-color:#f5f5f5; margin-top: 2%;  padding-bottom: 1%; ">
+
+      <div class="row">
+        <div class="col-12" style="padding-bottom: 5%;">
+          <h2 style="text-align: center; padding-top: 2%;">Edit New Form</h2>
+        </div>
+      </div>
+
+      <div class="row mt-2 d-flex justify-content-center">
+        <div class="col-md-4 " >
+          <div>
+            <label>Title: </label>
+            <p><textarea name="title" placeholder="title" style="width: 100%;">{{title}}</textarea></p>
+          </div>
+        </div>
+        <div class="col-md-4 " >
+          <div>
+            <label>Date: </label>
+            <p><textarea name="date" placeholder="date" style="width: 100%;">{{date}}</textarea></p>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-2 d-flex justify-content-center">
+        <div class="col-md-4 " >
+          <div>
+            <label>Read Time: </label>
+            <p><textarea name="readTime" placeholder="readTime" style="width: 100%;">{{readTime}}</textarea></p>
+          </div>
+        </div>
+        <div class="col-md-4 " >
+          <div>
+            <label>Badge: </label>
+            <p><textarea name="badge" placeholder="badge" style="width: 100%;">{{badge}}</textarea></p>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-3 d-flex justify-content-center" >
+        <div class="col-md-8">
+          <div>
+            <label style="text-align: left !important;">New Content: </label>
+            <p><textarea name="description" placeholder="description" rows="10"
+                style="width: 100%;">{{description}}</textarea></p>
+          </div>
+        </div>
+      </div>
+
+      <div class="row mt-3 d-flex justify-content-center" >
+        <div class="col-md-8">
+          <div>
+            <label style="text-align: left !important;">New short header: </label>
+            <p><textarea name="argument" placeholder="argument" rows="10"
+                style="width: 100%;">{{argument}}</textarea></p>
+          </div>
+        </div>
+      </div>
+      
+  {{/new}}
+
+
+      <div class="row mt-3 d-flex justify-content-center">
+        <div class="col-8 ">
+          <p>Image: </p>
+          <p>
+            <input 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 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;">Cancel</button>
+        <!--Boton para cancelar la acción-->
+      </p>
+    </div>
+  </form>
+</section>
+