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/"
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>

View File

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

View File

@ -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">

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>
<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>
</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()"
>

View File

@ -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