From 5afb289070864d421725bdc52c8f697e0483b26f Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Mon, 1 Jul 2024 11:49:04 +0700 Subject: [PATCH] validasi add new master --- .../add-edit-master.component.html | 1 + .../add-edit-master-building.component.css | 125 ++++++++++-------- .../add-edit-master-building.component.html | 50 +++++-- .../add-edit-master-building.component.ts | 8 +- .../add-edit-master-room.component.html | 2 + .../control-device-seemore.component.html | 2 +- .../control-device-seemore.component.ts | 10 ++ 7 files changed, 126 insertions(+), 72 deletions(-) diff --git a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html index 7610773..7842f52 100644 --- a/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html +++ b/src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html @@ -14,6 +14,7 @@ class="form-control" id="name" formControlName="name" + maxlength="50" />
diff --git a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.css b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.css index fa6d7fd..a717b0a 100644 --- a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.css +++ b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.css @@ -1,56 +1,73 @@ /* modal-add-edit.component.css */ ::ng-deep .modal-backdrop.show { - z-index: auto !important; - } - - ::ng-deep .input-group-append .btn { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - border-radius: 0; - border-left: 0; - flex-grow: 0; - border-left: 1px solid #ced4da; - padding: 0.375rem 0.75rem; - } - - ::ng-deep .input-group { - display: flex; - flex-wrap: nowrap; /* Prevents wrapping of the items */ - align-items: center; - } - - ::ng-deep .form-control { - flex-grow: 1; /* Ensures select takes up available space */ - padding-right: 0.5rem; - } - - ::ng-deep .input-group select, - ::ng-deep .input-group .input-group-append .btn { - padding-right: 5px; /* Adjust padding if necessary */ - } - - ::ng-deep .input-group .form-control { - margin-right: 2px; /* Adjust margin to make space */ - } - - - .form-group { - margin-bottom: 1rem; - } - - .form-control { - display: block; - width: 100%; - height: calc(1.5em + 0.75rem + 2px); - padding: 0.375rem 0.75rem; - font-size: 1rem; - font-weight: 400; - line-height: 1.5; - color: #495057; - background-color: #fff; - background-clip: padding-box; - border: 1px solid #ced4da; - border-radius: 0.25rem; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - } - \ No newline at end of file + z-index: auto !important; +} + +::ng-deep .input-group-append .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-radius: 0; + border-left: 0; + flex-grow: 0; + border-left: 1px solid #ced4da; + padding: 0.375rem 0.75rem; +} + +::ng-deep .input-group { + display: flex; + flex-wrap: nowrap; /* Prevents wrapping of the items */ + align-items: center; +} + +::ng-deep .form-control { + flex-grow: 1; /* Ensures select takes up available space */ + padding-right: 0.5rem; +} + +::ng-deep .input-group select, +::ng-deep .input-group .input-group-append .btn { + padding-right: 5px; /* Adjust padding if necessary */ +} + +::ng-deep .input-group .form-control { + margin-right: 2px; /* Adjust margin to make space */ +} + +.form-group { + margin-bottom: 1rem; +} + +.form-control { + display: block; + width: 100%; + height: calc(1.5em + 0.75rem + 2px); + padding: 0.375rem 0.75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: 0.25rem; + transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; +} + +::ng-deep .no-arrow::-webkit-inner-spin-button, +.no-arrow::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +::ng-deep .no-arrow { + -moz-appearance: textfield; +} + +/* Add this CSS to style invalid form controls */ +.is-invalid { + border-color: #dc3545; +} + +.text-danger { + color: #dc3545; +} diff --git a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html index fe141ea..f42e9e6 100644 --- a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html +++ b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html @@ -14,16 +14,26 @@ class="form-control" id="name" formControlName="name" + maxlength="50" + [ngClass]="{'is-invalid': myForm.get('name').invalid && myForm.get('name').touched}" /> +
+ Name is required. +
- + +
+ Please enter a valid email. +
@@ -32,7 +42,12 @@ class="form-control" id="phone" formControlName="phone" + maxlength="13" + [ngClass]="{'is-invalid': myForm.get('phone').invalid && myForm.get('phone').touched}" /> +
+ Please enter a valid phone number. +
@@ -41,7 +56,11 @@ class="form-control" id="owner" formControlName="owner" + [ngClass]="{'is-invalid': myForm.get('owner').invalid && myForm.get('owner').touched}" /> +
+ Owner is required. +
@@ -50,37 +69,42 @@ class="form-control" id="address" formControlName="address" + maxlength="90" + [ngClass]="{'is-invalid': myForm.get('address').invalid && myForm.get('address').touched}" /> +
+ Address is required. +
- + +
+ KWH is required. +
- - +
+ Status is required. +
diff --git a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.ts b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.ts index 6721819..0dcede8 100644 --- a/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.ts +++ b/src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.ts @@ -37,10 +37,10 @@ export class AddEditMasterBuildingComponent { this.myForm = this.fb.group({ name: ["", Validators.required], statusId: [0, Validators.required], - email: ["", Validators.required], + email: ["", [Validators.required, Validators.email]], owner: ["", Validators.required], address: ["", Validators.required], - phone: ["", Validators.required], + phone: ["", [Validators.required, Validators.pattern("^[0-9]*$")]], kwh: ["", Validators.required], }); } @@ -50,10 +50,10 @@ export class AddEditMasterBuildingComponent { id: this.dataRow.id, name: this.dataRow.name, statusId: this.dataRow.statusId, - email: this.dataRow.email, + email: [this.dataRow.email, [Validators.required, Validators.email]], owner: this.dataRow.owner, address: this.dataRow.address, - phone: this.dataRow.phone, + phone: [this.dataRow.phone, [Validators.required, Validators.pattern("^[0-9]*$")]], kwh: this.dataRow.kwh, }); } diff --git a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html index 4f22560..02b92d0 100644 --- a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html +++ b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html @@ -14,6 +14,7 @@ class="form-control" id="name" formControlName="name" + maxlength="50" />
@@ -35,6 +36,7 @@ class="form-control" id="description" formControlName="description" + maxlength="50" />
diff --git a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html index 3439b41..ebcf29c 100644 --- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html +++ b/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html @@ -100,7 +100,7 @@
-
+
{ this.data = res; this.filteredRows = this.data.results.data; + this.filteredDeviceRows = this.filterDevices(this.filteredRows); }); } + filterDevices(devices: any[]): any[] { + return devices.filter((device) => + device.mapping.some( + (map) => map.name.startsWith("switch") && map.type === "Boolean" + ) + ); + } + dataListMaster() { this.monitoringApiService.getMasterListData().subscribe((data) => { const dataCategory = data.data.find(