perbaikan UI

This commit is contained in:
Fuzi_fauzia 2024-08-20 11:02:10 +07:00
parent 57bcbcccde
commit 9377bebcb4
5 changed files with 74 additions and 27 deletions

View File

@ -13,7 +13,7 @@
href="https://allbestsistem.com/" href="https://allbestsistem.com/"
target="_blank" target="_blank"
style="background-color: #ffffff !important;" 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 </a></span
> >
</p> </p>

View File

@ -31,6 +31,5 @@ export class SelectIconComponent {
} else { } else {
this.iconSelected.emit(undefined); this.iconSelected.emit(undefined);
} }
} }
} }

View File

@ -45,7 +45,7 @@
<label for="status" style="color: #242222">Status:</label> <label for="status" style="color: #242222">Status:</label>
<select <select
id="projectinput5" id="projectinput5"
class="form-control" class="form-control custom-select"
formControlName="status" formControlName="status"
> >
<option *ngFor="let data of dataMasterStatus" [value]="data.id"> <option *ngFor="let data of dataMasterStatus" [value]="data.id">

View File

@ -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> <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">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body" style="background-color: #FBFBFB !important"> <div class="modal-body" style="background-color: #fbfbfb !important">
<form [formGroup]="myForm"> <form [formGroup]="myForm">
<div class="form-row"> <div class="form-row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
@ -15,9 +20,15 @@
id="name" id="name"
formControlName="name" formControlName="name"
maxlength="50" 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. Name is required.
</div> </div>
</div> </div>
@ -29,9 +40,15 @@
id="email" id="email"
formControlName="email" formControlName="email"
maxlength="50" 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. Please enter a valid email.
</div> </div>
</div> </div>
@ -44,9 +61,15 @@
formControlName="phone" formControlName="phone"
pattern="^[0-9]*$" pattern="^[0-9]*$"
maxlength="13" 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. Please enter a valid phone number.
</div> </div>
</div> </div>
@ -58,9 +81,15 @@
id="owner" id="owner"
maxlength="30" maxlength="30"
formControlName="owner" 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. Owner is required.
</div> </div>
</div> </div>
@ -72,9 +101,15 @@
id="address" id="address"
formControlName="address" formControlName="address"
maxlength="90" 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. Address is required.
</div> </div>
</div> </div>
@ -86,9 +121,14 @@
id="kwh" id="kwh"
formControlName="kwh" formControlName="kwh"
maxlength="15" 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. Please enter a valid KWH.
</div> </div>
</div> </div>
@ -96,29 +136,37 @@
<label for="statusId" style="color: #242222">Status:</label> <label for="statusId" style="color: #242222">Status:</label>
<select <select
id="statusId" id="statusId"
class="form-control" class="form-control custom-select"
formControlName="statusId" 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"> <option *ngFor="let data of filteredDataStatus" [value]="data.id">
{{ data.name }} {{ data.name }}
</option> </option>
</select> </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. Status is required.
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer" style="background-color: #FBFBFB !important"> <div class="modal-footer" style="background-color: #fbfbfb !important">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn btn-secondary"
style=" style="
color: #242222 !important; color: #242222 !important;
background-color: #FBFBFB !important; background-color: #fbfbfb !important;
border-color: #FBFBFB !important; border-color: #fbfbfb !important;
" "
(click)="activeModal.dismiss('Cross click')" (click)="activeModal.dismiss('Cross click')"
> >
@ -126,7 +174,7 @@
</button> </button>
<button <button
type="button" type="button"
style="color: #ffffff !important; background-color: #37A647 !important" style="color: #ffffff !important; background-color: #37a647 !important"
class="btn btn-primary" class="btn btn-primary"
(click)="addRow()" (click)="addRow()"
> >

View File

@ -138,7 +138,7 @@
<p <p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1" 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> </p>
<!-- <div class="card-body"> <!-- <div class="card-body">
<a <a