validasi add new master

2024-07-01 11:49:04 +07:00 · 2024-07-01 11:49:04 +07:00 · 5afb289070
parent 04e8abc487
commit 5afb289070
7 changed files with 126 additions and 72 deletions
--- 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"
        />
      </div>
      <div class="form-group col-md-6" *ngIf="category">
--- 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;
-  }
+  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-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 .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 .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 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 */
-  }
+::ng-deep .input-group .form-control {
+  margin-right: 2px; /* Adjust margin to make space */
+}

+.form-group {
+  margin-bottom: 1rem;
+}

-  .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;
+}

-  .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;
+}
--- 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}"
        />
+        <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>
--- 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,
    });
  }
--- 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"
        />
      </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">
--- 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 @@
        </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"
--- a/src/app/content/hemat-app/monitoring/control-device-seemore/control-device-seemore.component.ts
+++ b/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(