feat: add delete news in news service

Author: misicode

src/app/core/services/news.service.ts

@@ -56,4 +56,9 @@ export class NewsService {
     return this.httpClient
       .put<News>(`${this.serverUrl}/api/user/news/${id}`, formNewsData);
   }
+
+  deleteNews(id: string): Observable<string> {
+    return this.httpClient
+      .delete(`${this.serverUrl}/api/user/news/${id}`, { responseType: "text" });
+  }
 }

src/app/pages/user/list-news-page/list-news-page.component.html

@@ -40,18 +40,16 @@ <h2>Mis Noticias</h2>
                 </svg>
               </button>
             </a>
-            <a>
-              <button>
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 24 24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path d="M8 1.5V2.5H3C2.44772 2.5 2 2.94772 2 3.5V4.5C2 5.05228 2.44772 5.5 3 5.5H21C21.5523 5.5 22 5.05228 22 4.5V3.5C22 2.94772 21.5523 2.5 21 2.5H16V1.5C16 0.947715 15.5523 0.5 15 0.5H9C8.44772 0.5 8 0.947715 8 1.5Z"></path>
-                  <path d="M3.9231 7.5H20.0767L19.1344 20.2216C19.0183 21.7882 17.7135 23 16.1426 23H7.85724C6.28636 23 4.98148 21.7882 4.86544 20.2216L3.9231 7.5Z"></path>
-                </svg>
-              </button>
-            </a>
+            <button (click)="openModal(news.idNews)">
+              <svg
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M8 1.5V2.5H3C2.44772 2.5 2 2.94772 2 3.5V4.5C2 5.05228 2.44772 5.5 3 5.5H21C21.5523 5.5 22 5.05228 22 4.5V3.5C22 2.94772 21.5523 2.5 21 2.5H16V1.5C16 0.947715 15.5523 0.5 15 0.5H9C8.44772 0.5 8 0.947715 8 1.5Z"></path>
+                <path d="M3.9231 7.5H20.0767L19.1344 20.2216C19.0183 21.7882 17.7135 23 16.1426 23H7.85724C6.28636 23 4.98148 21.7882 4.86544 20.2216L3.9231 7.5Z"></path>
+              </svg>
+            </button>
           </td>
         </tr>
       } @empty {
@@ -96,4 +94,17 @@ <h2>Mis Noticias</h2>
       }
     </tbody>
   </table>
-</section>
+</section>
+<app-modal [show]="isOpen">
+  <p class="mb-6 py-4">
+    ¿Está seguro que desea eliminar la noticia?
+  </p>
+  <div class="text-right">
+    <button (click)="closeModal()" class="btn-cancel">
+      Cancelar
+    </button>
+    <button (click)="deleteNews()" class="btn-success">
+      Eliminar
+    </button>
+  </div>
+</app-modal>

src/app/pages/user/list-news-page/list-news-page.component.scss

@@ -4,7 +4,7 @@ table th {
 table td {
   @apply border-t border-slate-300 border-solid px-4 py-2 text-center text-smvs;
 }
-table button {
+table tr button {
   @apply bg-rose-500 hover:bg-rose-400 px-2.5 py-2 text-white;
 }
 table button svg {

src/app/pages/user/list-news-page/list-news-page.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, inject } from "@angular/core";
+import { ToastrService } from "ngx-toastr";
 
 import { NewsService } from "../../../core/services/news.service";
 
@@ -10,14 +11,45 @@ import { News } from "../../../core/interfaces/news.interface";
   styleUrl: "./list-news-page.component.scss",
 })
 export class ListNewsPageComponent implements OnInit {
+  private toastrService = inject(ToastrService);
+  
+  public idNews: string = "";
+  public isOpen: boolean = false;
   public listNews: News[] = [];
 
   constructor(
     private newsService: NewsService
   ) {}
 
   ngOnInit(): void {
+    this.loadNews();
+  }
+
+  loadNews() {
     this.newsService.getNewsByUser()
       .subscribe((news: News[]) => this.listNews = news);
   }
+
+  deleteNews() {
+    this.newsService.deleteNews(this.idNews)
+      .subscribe(
+        msg => {
+          this.listNews = [];
+          this.loadNews();
+          
+          this.isOpen = false;
+          this.toastrService.success(msg);
+        }
+      );
+  }
+  
+  openModal(id: string) {
+    this.idNews = id;
+    this.isOpen = true;
+  }
+
+  closeModal() {
+    this.idNews = "";
+    this.isOpen = false;
+  }
 }

src/app/shared/modal/modal.component.html

@@ -0,0 +1,7 @@
+@if (show) {
+  <div class="bg-black bg-opacity-60 fixed flex inset-0 items-center justify-center">
+    <div class="bg-white p-8 rounded-lg shadow-lg">
+      <ng-content></ng-content>
+    </div>
+  </div>
+}

src/app/shared/modal/modal.component.scss

@@ -0,0 +1,11 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "app-modal",
+  templateUrl: "./modal.component.html",
+  styleUrl: "./modal.component.scss",
+})
+export class ModalComponent {
+  @Input()
+  public show: boolean = false;
+}

src/app/shared/modal/modal.component.ts

@@ -1,18 +1,22 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { LoaderComponent } from "./loader/loader.component";
 import { NgxLoadingModule } from "ngx-loading";
 
+import { LoaderComponent } from "./loader/loader.component";
+import { ModalComponent } from "./modal/modal.component";
+
 @NgModule({
   declarations: [
-    LoaderComponent
+    LoaderComponent,
+    ModalComponent,
   ],
   imports: [
     CommonModule,
     NgxLoadingModule.forRoot({}),
   ],
   exports: [
-    LoaderComponent
+    LoaderComponent,
+    ModalComponent,
   ],
 })
 export class SharedModule {}