validasi add new master

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"
         />
       </div>
       <div class="form-group col-md-6" *ngIf="category">

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;
+  z-index: auto !important;
-  }
+}
-  
+
-  ::ng-deep .input-group-append .btn {
+::ng-deep .input-group-append .btn {
-      border-top-left-radius: 0;
+  border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+  border-bottom-left-radius: 0;
-      border-radius: 0;
+  border-radius: 0;
-      border-left: 0;
+  border-left: 0;
-      flex-grow: 0;
+  flex-grow: 0;
-      border-left: 1px solid #ced4da;
+  border-left: 1px solid #ced4da;
-      padding: 0.375rem 0.75rem;
+  padding: 0.375rem 0.75rem;
-  }
+}
-  
+
-  ::ng-deep .input-group {
+::ng-deep .input-group {
-    display: flex;
+  display: flex;
-    flex-wrap: nowrap; /* Prevents wrapping of the items */
+  flex-wrap: nowrap; /* Prevents wrapping of the items */
-    align-items: center;
+  align-items: center;
-  }
+}
-  
+
-  ::ng-deep .form-control {
+::ng-deep .form-control {
-    flex-grow: 1; /* Ensures select takes up available space */
+  flex-grow: 1; /* Ensures select takes up available space */
-    padding-right: 0.5rem;
+  padding-right: 0.5rem;
-  }
+}
-  
+
-  ::ng-deep .input-group select, 
+::ng-deep .input-group select,
-  ::ng-deep .input-group .input-group-append .btn {
+::ng-deep .input-group .input-group-append .btn {
-    padding-right: 5px; /* Adjust padding if necessary */
+  padding-right: 5px; /* Adjust padding if necessary */
-  }
+}
-  
+
-  ::ng-deep .input-group .form-control {
+::ng-deep .input-group .form-control {
-    margin-right: 2px; /* Adjust margin to make space */
+  margin-right: 2px; /* Adjust margin to make space */
-  }
+}
-  
+
-  
+.form-group {
-  .form-group {
+  margin-bottom: 1rem;
-    margin-bottom: 1rem;
+}
-  }
+
-  
+.form-control {
-  .form-control {
+  display: block;
-    display: block;
+  width: 100%;
-    width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
-    height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
-    padding: 0.375rem 0.75rem;
+  font-size: 1rem;
-    font-size: 1rem;
+  font-weight: 400;
-    font-weight: 400;
+  line-height: 1.5;
-    line-height: 1.5;
+  color: #495057;
-    color: #495057;
+  background-color: #fff;
-    background-color: #fff;
+  background-clip: padding-box;
-    background-clip: padding-box;
+  border: 1px solid #ced4da;
-    border: 1px solid #ced4da;
+  border-radius: 0.25rem;
-    border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    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;
+}

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}"
         />
+        <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched" class="text-danger">
+          Name is required.
+        </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="name" style="color: #ffffff">Email:</label>
+        <label for="email" style="color: #ffffff">Email:</label>
         <input
-          type="text"
+          type="email"
           class="form-control"
           id="email"
           formControlName="email"
+          maxlength="50"
+          [ngClass]="{'is-invalid': myForm.get('email').invalid && myForm.get('email').touched}"
         />
+        <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched" class="text-danger">
+          Please enter a valid email.
+        </div>
       </div>
       <div class="form-group col-md-6">
         <label for="phone" style="color: #ffffff">Phone:</label>
@@ -32,7 +42,12 @@
           class="form-control"
           id="phone"
           formControlName="phone"
+          maxlength="13"
+          [ngClass]="{'is-invalid': myForm.get('phone').invalid && myForm.get('phone').touched}"
         />
+        <div *ngIf="myForm.get('phone').invalid && myForm.get('phone').touched" class="text-danger">
+          Please enter a valid phone number.
+        </div>
       </div>
       <div class="form-group col-md-6">
         <label for="owner" style="color: #ffffff">Owner:</label>
@@ -41,7 +56,11 @@
           class="form-control"
           id="owner"
           formControlName="owner"
+          [ngClass]="{'is-invalid': myForm.get('owner').invalid && myForm.get('owner').touched}"
         />
+        <div *ngIf="myForm.get('owner').invalid && myForm.get('owner').touched" class="text-danger">
+          Owner is required.
+        </div>
       </div>
       <div class="form-group col-md-6">
         <label for="address" style="color: #ffffff">Address:</label>
@@ -50,37 +69,42 @@
           class="form-control"
           id="address"
           formControlName="address"
+          maxlength="90"
+          [ngClass]="{'is-invalid': myForm.get('address').invalid && myForm.get('address').touched}"
         />
+        <div *ngIf="myForm.get('address').invalid && myForm.get('address').touched" class="text-danger">
+          Address is required.
+        </div>
       </div>
       <div class="form-group col-md-6">
-        <label for="address" style="color: #ffffff">KWH:</label>
+        <label for="kwh" style="color: #ffffff">KWH:</label>
         <input
           type="number"
-          class="form-control"
+          class="form-control no-arrow"
           id="kwh"
           formControlName="kwh"
+          maxlength="20"
+          [ngClass]="{'is-invalid': myForm.get('kwh').invalid && myForm.get('kwh').touched}"
         />
+        <div *ngIf="myForm.get('kwh').invalid && myForm.get('kwh').touched" class="text-danger">
+          KWH is required.
+        </div>
       </div>
       <div class="form-group col-md-6">
         <label for="statusId" style="color: #ffffff">Status:</label>
-        <!-- <select
-          id="projectinput5"
-          class="form-control"
-          formControlName="statusId"
-        >
-          <option value="1">Aktif</option>
-          <option value="0">Tidak Aktif</option>
-        </select> -->
-
         <select
           id="projectinput5"
           class="form-control"
           formControlName="statusId"
+          [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">
+          Status is required.
+        </div>
       </div>
     </div>
   </form>

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,
     });
   }

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"
         />
       </div>
       <div class="form-group col-md-6">
@@ -35,6 +36,7 @@
           class="form-control"
           id="description"
           formControlName="description"
+          maxlength="50"
         />
       </div>
       <div class="form-group col-md-6">

src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.html

@@ -100,7 +100,7 @@
         </section>
         <section id="configuration">
           <div class="row">
-            <div class="col-lg-4 col-12" *ngFor="let item of filteredRows">
+            <div class="col-lg-4 col-12" *ngFor="let item of filteredDeviceRows">
               <div
                 class="card"
                 style="background-color: #252525; position: relative"

src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts

@@ -12,6 +12,7 @@ import { ToastrService } from 'ngx-toastr';
 export class ControlDeviceSeemoreComponent {
   data: any;
   filteredRows: any[];
+  filteredDeviceRows: any[];
   searchTerm: string = "";
   buildingSelected: any;
   statusSelected: any;
@@ -78,9 +79,18 @@ export class ControlDeviceSeemoreComponent {
       .subscribe((res) => {
         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(