perbaikan UI
This commit is contained in:
		
							parent
							
								
									57bcbcccde
								
							
						
					
					
						commit
						9377bebcb4
					
				| @ -13,7 +13,7 @@ | ||||
|         href="https://allbestsistem.com/" | ||||
|         target="_blank" | ||||
|         style="background-color: #ffffff !important;" | ||||
|         >Smart Building Management Systems (V@2024-08-19.2) | ||||
|         >Smart Building Management Systems (V@2024-08-20.2) | ||||
|       </a></span | ||||
|     > | ||||
|   </p> | ||||
|  | ||||
| @ -31,6 +31,5 @@ export class SelectIconComponent { | ||||
|     } else { | ||||
|       this.iconSelected.emit(undefined); | ||||
|     } | ||||
|      | ||||
|   } | ||||
| } | ||||
|  | ||||
| @ -45,7 +45,7 @@ | ||||
|         <label for="status" style="color: #242222">Status:</label> | ||||
|         <select | ||||
|           id="projectinput5" | ||||
|           class="form-control" | ||||
|           class="form-control custom-select" | ||||
|           formControlName="status" | ||||
|         > | ||||
|           <option *ngFor="let data of dataMasterStatus" [value]="data.id"> | ||||
|  | ||||
| @ -1,10 +1,15 @@ | ||||
| <div class="modal-header" style="background-color: #FBFBFB !important"> | ||||
| <div class="modal-header" style="background-color: #fbfbfb !important"> | ||||
|   <h4 class="modal-title" style="color: #242222">{{ labelModal }}</h4> | ||||
|   <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"> | ||||
|   <button | ||||
|     type="button" | ||||
|     class="close" | ||||
|     aria-label="Close" | ||||
|     (click)="activeModal.dismiss('Cross click')" | ||||
|   > | ||||
|     <span aria-hidden="true">×</span> | ||||
|   </button> | ||||
| </div> | ||||
| <div class="modal-body" style="background-color: #FBFBFB !important"> | ||||
| <div class="modal-body" style="background-color: #fbfbfb !important"> | ||||
|   <form [formGroup]="myForm"> | ||||
|     <div class="form-row"> | ||||
|       <div class="form-group col-md-6"> | ||||
| @ -15,9 +20,15 @@ | ||||
|           id="name" | ||||
|           formControlName="name" | ||||
|           maxlength="50" | ||||
|           [ngClass]="{'is-invalid': myForm.get('name').invalid && myForm.get('name').touched}" | ||||
|           [ngClass]="{ | ||||
|             'is-invalid': | ||||
|               myForm.get('name').invalid && myForm.get('name').touched | ||||
|           }" | ||||
|         /> | ||||
|         <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched" class="text-danger"> | ||||
|         <div | ||||
|           *ngIf="myForm.get('name').invalid && myForm.get('name').touched" | ||||
|           class="text-danger" | ||||
|         > | ||||
|           Name is required. | ||||
|         </div> | ||||
|       </div> | ||||
| @ -29,9 +40,15 @@ | ||||
|           id="email" | ||||
|           formControlName="email" | ||||
|           maxlength="50" | ||||
|           [ngClass]="{'is-invalid': myForm.get('email').invalid && myForm.get('email').touched}" | ||||
|           [ngClass]="{ | ||||
|             'is-invalid': | ||||
|               myForm.get('email').invalid && myForm.get('email').touched | ||||
|           }" | ||||
|         /> | ||||
|         <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched" class="text-danger"> | ||||
|         <div | ||||
|           *ngIf="myForm.get('email').invalid && myForm.get('email').touched" | ||||
|           class="text-danger" | ||||
|         > | ||||
|           Please enter a valid email. | ||||
|         </div> | ||||
|       </div> | ||||
| @ -44,9 +61,15 @@ | ||||
|           formControlName="phone" | ||||
|           pattern="^[0-9]*$" | ||||
|           maxlength="13" | ||||
|           [ngClass]="{'is-invalid': myForm.get('phone').invalid && myForm.get('phone').touched}" | ||||
|           [ngClass]="{ | ||||
|             'is-invalid': | ||||
|               myForm.get('phone').invalid && myForm.get('phone').touched | ||||
|           }" | ||||
|         /> | ||||
|         <div *ngIf="myForm.get('phone').invalid && myForm.get('phone').touched" class="text-danger"> | ||||
|         <div | ||||
|           *ngIf="myForm.get('phone').invalid && myForm.get('phone').touched" | ||||
|           class="text-danger" | ||||
|         > | ||||
|           Please enter a valid phone number. | ||||
|         </div> | ||||
|       </div> | ||||
| @ -58,9 +81,15 @@ | ||||
|           id="owner" | ||||
|           maxlength="30" | ||||
|           formControlName="owner" | ||||
|           [ngClass]="{'is-invalid': myForm.get('owner').invalid && myForm.get('owner').touched}" | ||||
|           [ngClass]="{ | ||||
|             'is-invalid': | ||||
|               myForm.get('owner').invalid && myForm.get('owner').touched | ||||
|           }" | ||||
|         /> | ||||
|         <div *ngIf="myForm.get('owner').invalid && myForm.get('owner').touched" class="text-danger"> | ||||
|         <div | ||||
|           *ngIf="myForm.get('owner').invalid && myForm.get('owner').touched" | ||||
|           class="text-danger" | ||||
|         > | ||||
|           Owner is required. | ||||
|         </div> | ||||
|       </div> | ||||
| @ -72,9 +101,15 @@ | ||||
|           id="address" | ||||
|           formControlName="address" | ||||
|           maxlength="90" | ||||
|           [ngClass]="{'is-invalid': myForm.get('address').invalid && myForm.get('address').touched}" | ||||
|           [ngClass]="{ | ||||
|             'is-invalid': | ||||
|               myForm.get('address').invalid && myForm.get('address').touched | ||||
|           }" | ||||
|         /> | ||||
|         <div *ngIf="myForm.get('address').invalid && myForm.get('address').touched" class="text-danger"> | ||||
|         <div | ||||
|           *ngIf="myForm.get('address').invalid && myForm.get('address').touched" | ||||
|           class="text-danger" | ||||
|         > | ||||
|           Address is required. | ||||
|         </div> | ||||
|       </div> | ||||
| @ -86,9 +121,14 @@ | ||||
|           id="kwh" | ||||
|           formControlName="kwh" | ||||
|           maxlength="15" | ||||
|           [ngClass]="{'is-invalid': myForm.get('kwh').invalid && myForm.get('kwh').touched}" | ||||
|           [ngClass]="{ | ||||
|             'is-invalid': myForm.get('kwh').invalid && myForm.get('kwh').touched | ||||
|           }" | ||||
|         /> | ||||
|         <div *ngIf="myForm.get('kwh').invalid && myForm.get('kwh').touched" class="text-danger"> | ||||
|         <div | ||||
|           *ngIf="myForm.get('kwh').invalid && myForm.get('kwh').touched" | ||||
|           class="text-danger" | ||||
|         > | ||||
|           Please enter a valid KWH. | ||||
|         </div> | ||||
|       </div> | ||||
| @ -96,29 +136,37 @@ | ||||
|         <label for="statusId" style="color: #242222">Status:</label> | ||||
|         <select | ||||
|           id="statusId" | ||||
|           class="form-control" | ||||
|           class="form-control custom-select" | ||||
|           formControlName="statusId" | ||||
|           [ngClass]="{'is-invalid': myForm.get('statusId').invalid && myForm.get('statusId').touched}" | ||||
|           [ngClass]="{ | ||||
|             'is-invalid': | ||||
|               myForm.get('statusId').invalid && myForm.get('statusId').touched | ||||
|           }" | ||||
|         > | ||||
|           <option *ngFor="let data of filteredDataStatus" [value]="data.id"> | ||||
|             {{ data.name }} | ||||
|           </option> | ||||
|         </select> | ||||
|         <div *ngIf="myForm.get('statusId').invalid && myForm.get('statusId').touched" class="text-danger"> | ||||
|         <div | ||||
|           *ngIf=" | ||||
|             myForm.get('statusId').invalid && myForm.get('statusId').touched | ||||
|           " | ||||
|           class="text-danger" | ||||
|         > | ||||
|           Status is required. | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </form> | ||||
| </div> | ||||
| <div class="modal-footer" style="background-color: #FBFBFB !important"> | ||||
| <div class="modal-footer" style="background-color: #fbfbfb !important"> | ||||
|   <button | ||||
|     type="button" | ||||
|     class="btn btn-secondary" | ||||
|     style=" | ||||
|       color: #242222 !important; | ||||
|       background-color: #FBFBFB !important; | ||||
|       border-color: #FBFBFB !important; | ||||
|       background-color: #fbfbfb !important; | ||||
|       border-color: #fbfbfb !important; | ||||
|     " | ||||
|     (click)="activeModal.dismiss('Cross click')" | ||||
|   > | ||||
| @ -126,7 +174,7 @@ | ||||
|   </button> | ||||
|   <button | ||||
|     type="button" | ||||
|     style="color: #ffffff !important; background-color: #37A647 !important" | ||||
|     style="color: #ffffff !important; background-color: #37a647 !important" | ||||
|     class="btn btn-primary" | ||||
|     (click)="addRow()" | ||||
|   > | ||||
|  | ||||
| @ -138,7 +138,7 @@ | ||||
|                 <p | ||||
|                   class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1" | ||||
|                 > | ||||
|                   <span>(v@2024.08.19.2)</span> | ||||
|                   <span>(v@2024.08.20.2)</span> | ||||
|                 </p> | ||||
|                 <!-- <div class="card-body"> | ||||
|                   <a | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user