add ปุ่ม delete

src/app/pages/admin-equirment/admin-equirment.component.html

@@ -41,7 +41,7 @@
                                                     <button class="btn btn-sm btn-outline-primary"
                                                         (click)="Ropen(editroom,((pageListRoom-1) * pageSizeListRoom)+i)">แก้ไข</button>
                                                     <button class="btn btn-sm btn-danger" type="button.dispose"
-                                                        (click)="modal.close()">ลบ</button>
+                                                        (click)="openDelete(deleteRoom)">ลบ</button>
                                                 </div>
                                             </div>
                                         </div>
@@ -146,7 +146,7 @@
                                 <input class=" form-control" placeholder="" type="text"
                                     [(ngModel)]="modelEquirment.eqName" value="" formControlName="eqName" />
                                 <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
-                                   กรุณากรอกชื่อ</div>
+                                    กรุณากรอกชื่อ</div>
                             </div>
                         </div>
                     </div>
@@ -162,7 +162,7 @@
                                     <option value="5">Company</option>
                                 </select>
                                 <div style="color: red;" *ngIf="myFormEquir.controls.eqType.status=='INVALID'">
-                                   กรุณากรอกหมวดหมู่.</div>
+                                    กรุณากรอกหมวดหมู่.</div>
                             </div>
                         </div>
                     </div>
@@ -174,7 +174,7 @@
                                     placeholder="......" [(ngModel)]="modelEquirment.eqDesc"
                                     formControlName="eqDesc"></textarea>
                                 <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
-                                   กรุณากรอกรายละเอียด.</div>
+                                    กรุณากรอกรายละเอียด.</div>
                             </div>
                         </div>
                     </div>
@@ -205,7 +205,8 @@
                             <div class=" form-group">
                                 <label> ชื่อ </label>
                                 <input class=" form-control" placeholder="" type="text" formControlName="rName">
-                                <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">กรุณากรอกชื่อ.</div>
+                                <div style="color: red;" *ngIf="myFormRoom.controls.rName.status=='INVALID'">
+                                    กรุณากรอกชื่อ.</div>
                             </div>
                         </div>
                     </div>
@@ -219,7 +220,8 @@
                                     <option value="1">ห้อง</option>
                                     <option value="2">รถ</option>
                                 </select>
-                                <div style="color: red;" *ngIf="myFormRoom.controls.rType.status=='INVALID'">กรุณากรอกประเภท</div>
+                                <div style="color: red;" *ngIf="myFormRoom.controls.rType.status=='INVALID'">
+                                    กรุณากรอกประเภท</div>
                             </div>
                         </div>
                     </div>
@@ -302,19 +304,22 @@
                     <div class=" row">
                         <div class=" col-md-12">
                             <label>ชื่ออุปกรณ์</label>
-                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqName" formControlName="eqName">
+                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqName"
+                                formControlName="eqName">
                             <div style="color: red;" *ngIf="myFormEquir.controls.eqName.status=='INVALID'">
                                 กรุณากรอกชื่ออุปกรณ์</div>
                         </div>
                         <div class=" col-md-12">
                             <label>ประเภทอุปกรณ์</label>
-                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqType" formControlName="eqType">
+                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqType"
+                                formControlName="eqType">
                             <div style="color: red;" *ngIf="myFormEquir.controls.eqType.status=='INVALID'">
                                 กรุณากรอกประเภทอุปกรณ์</div>
                         </div>
                         <div class=" col-md-12">
                             <label>รายละเอียดอุปกรณ์</label>
-                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqDesc" formControlName="eqDesc">
+                            <input class=" form-control" type="text" [(ngModel)]="listEquirmentModelEdit.eqDesc"
+                                formControlName="eqDesc">
                             <div style="color: red;" *ngIf="myFormEquir.controls.eqDesc.status=='INVALID'">
                                 กรุณากรอกรายละเอียดอุปกรณ์</div>
                         </div>
@@ -328,4 +333,21 @@
             </div>
         </div>
     </div>
+</ng-template>
+
+<ng-template #deleteRoom let-modal>
+    <div class=" col-md-12" style="padding: 0; ">
+        <div class="card" style="margin: 0; ">
+            <div class=" card-header">
+                <h5 class=" title">ลบข้อมูล</h5>
+            </div>
+            <div class="card-body">
+                <h4 class="text">คุณต้องการลบข้อมูลจริงหรือไม่</h4>
+            </div>
+            <div class=" card-footer">
+                <button class=" btn btn-fill btn-danger" (click)="deleteRoomProfile(item)">ยืนยัน</button>
+                <button class=" btn btn-fill btn-danger" (click)="modal.dismiss()">ยกเลิก</button>
+            </div>
+        </div>
+    </div>
 </ng-template>
\ No newline at end of file

src/app/pages/admin-equirment/admin-equirment.component.ts

@@ -266,18 +266,29 @@ export class AdminEquirmentComponent implements OnInit {
     this.roomService.updateRoomProfile(this.listRoomModel[this.index])
     this.modalService.dismissAll();
     this.ngOnInit();
-    console.log("this.listRoomModelEdit",this.listRoomModel)
   }
 
   updateItemProfile() {
-    let temp = {
-      eqName: this.listEquirmentModelEdit.eqName,
-      eqType: this.listEquirmentModelEdit.eqType,
-      eqDesc: this.listEquirmentModelEdit.eqDesc,
-      eqId: this.listEquirmentModelEdit.eqId,
-      eqPic: this.listEquirmentModelEdit.eqPic,
-    }
-    this.listEquirmentModel[this.index] = temp
+    this.listEquirmentModel[this.index].eqName = this.myFormEquir.value.eqName
+    this.listEquirmentModel[this.index].eqDesc = this.myFormEquir.value.eqDesc
+    this.listEquirmentModel[this.index].eqType = this.myFormEquir.value.eqType
+    this.equirmentService.updateEquirProfile(this.listEquirmentModel[this.index])
+    this.modalService.dismissAll();
+    this.ngOnInit();
+  }
+
+  deleteRoomProfile(item : Room) {
+    this.roomService.deleteRoomProfile(item)
+    this.modalService.dismissAll();
+    this.ngOnInit();
+  }
+
+  openDelete(deleteRoomProfile) {
+    this.modalService.open(deleteRoomProfile, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
+      this.closeResult = `Closed with: ${result}`;
+    }, (reason) => {
+      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+    });
   }
 
 }

src/app/service/room.service.ts

@@ -256,6 +256,12 @@ export class RoomService {
   });
   }
 
+  deleteRoomProfile(row_obj: Room) {
+    this.listRoomModel = this.listRoomModel.filter((value, key) => {
+      return value.rId !== row_obj.rId;
+    });
+  }
+
   roomModel(rId: string) {
 
   }