feat: Delete photos

src/app/audit/photos/photos.component.html

@@ -81,6 +81,7 @@
               :
               (item.auditName.auditName | uppercase)
         }}
+        <button class="btn btn-link bi-trash" ngbTooltip="Delete" (click)="deletePhoto(item.id)"></button>
       </div>
     </div>
   }

src/app/audit/photos/photos.component.scss

@@ -5,40 +5,18 @@
 .image-box {
   position: relative;
   overflow: hidden;
-  // padding: 4px;
-  // margin: 6px 3px;
-  // width: 50%;
-  // max-width: 300px;
+  min-height: 100px;
 }
 
-// img {
-  // display: block;
-  // width: 100%;
-  // height: auto;
-  // min-height: 230px;
-  // padding: 4px;
-// }
-
-// .imagee {
-//   background-color: #ebebeb;
-//   background-size: cover;
-//   background-position: center center;
-//   background-repeat: no-repeat;
-// }
-
 .overlay {
   position: absolute;
   bottom: 0;
-  // background: rgb(0, 0, 0);
-  background: rgba(0, 0, 0, 0.5); /* Black see-through */
-  color: #f1f1f1;
   width: 100%;
-  transition: 0.7s ease;
-  opacity: 0;
-  color: white;
-  font-size: 15px;
-  padding: 10px;
   text-align: center;
+  color: white;
+  background: rgba(0, 0, 0, 0.5); /* Black see-through */
+  opacity: 0;
+  transition: opacity 0.7s ease;
 }
 
 .image-box:hover .overlay {

src/app/audit/photos/photos.component.ts

@@ -156,4 +156,12 @@ export class PhotosComponent implements OnInit {
   changeSubType() {
     this.getData({pageIndex: 0, pageSize: 8});
   }
+
+  deletePhoto(id: number) {
+    this.auditService.deletePhoto(id).subscribe(() => {
+      this.data = this.data.filter((a: any) => a.id !== id);
+      this.data2 = this.data2.filter((a: any) => a.id !== id);
+      this.dataForLength = this.dataForLength.filter((a: any) => a.id !== id);
+    });
+  }
 }

src/app/shared/services/audit.service.ts

@@ -49,6 +49,9 @@ export class AuditService {
   getPhotos(auditId: Number): Observable<any> {
     return this.http.get(`${this.rootUrl}api/auditPhoto?auditId=${auditId}`);
   }
+  deletePhoto(id: number): Observable<any> {
+    return this.http.delete(`${this.rootUrl}api/auditPhoto`, {params: {id}});
+  }
   uploadPhoto(auditId: Number, formData: any): Observable<any> {
     return this.http.post(`${this.rootUrl}api/auditPhoto?auditId=${auditId}`, formData);
   }