penambahan button new device

src/app/_layout/header/vertical/vertical.component.html

@@ -340,10 +340,10 @@
               class="dropdown-menu dropdown-menu-right"
               aria-labelledby="dropdownProfileMenu"
             >
-              <a class="dropdown-item" 
+              <a class="dropdown-item" [routerLink]="'/user-profil'"
                 ><i class="feather ft-user"></i> Edit Profile
               </a>
-              <a class="dropdown-item" 
+              <!-- <a class="dropdown-item" 
                 ><i class="feather ft-mail"></i> My Inbox
               </a>
               <a class="dropdown-item" 
@@ -351,7 +351,7 @@
               </a>
               <a class="dropdown-item"
                 ><i class="feather ft-message-square"></i> Chats
-              </a>
+              </a> -->
               <div class="dropdown-divider"></div>
               <a class="dropdown-item" [routerLink]="" (click)="logout()"
                 ><i class="feather ft-power"></i> Logout</a

src/app/app.routing.ts

@@ -76,6 +76,10 @@ const appRoutes: Routes = [
         path: 'master', loadChildren: () => import('../app/content/hemat-app/master/master.module').then(m => m.MasterModule)
         , canActivate: [AuthGuard]
       },
+      {
+        path: 'user-profil', loadChildren: () => import('../app/content/hemat-app/user-profile/user-profile.module').then(m => m.UserProfileModule)
+        , canActivate: [AuthGuard]
+      },
       {
         path: 'dashboard', loadChildren: () => import('../app/content/dashboard/dashboard.module').then(m => m.DashboardModule)
         , canActivate: [AuthGuard]

src/app/content/hemat-app/device/device.component.html

@@ -43,10 +43,7 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div
+            <div class="card" style="background-color: #252525 !important">
-              class="card"
-              style="background-color: #252525 !important"
-            >
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
@@ -80,10 +77,7 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div
+            <div class="card" style="background-color: #252525 !important">
-              class="card"
-              style="background-color: #252525 !important"
-            >
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
@@ -132,6 +126,7 @@
                           class="select-custom"
                           [items]="dataBuildingList"
                           [searchable]="true"
+                          [disabled]="newDeviceActive"
                           bindLabel="name"
                           bindValue="id"
                           placeholder="Select Building"
@@ -146,6 +141,7 @@
                           class="select-custom"
                           [items]="dataMasterCategori"
                           [searchable]="true"
+                          [disabled]="newDeviceActive"
                           bindLabel="name"
                           bindValue="id"
                           placeholder="Select Category"
@@ -160,6 +156,7 @@
                           class="select-custom"
                           [items]="dataMasterStatus"
                           [searchable]="true"
+                          [disabled]="newDeviceActive"
                           bindLabel="name"
                           bindValue="id"
                           placeholder="Select Status"
@@ -179,7 +176,7 @@
                             border-color: #ffffff !important;
                             border-radius: 12px;
                           "
-                          [disabled]="spinnerFilterActive"
+                          [disabled]="spinnerFilterActive || newDeviceActive"
                         >
                           <i
                             class="la la-search"
@@ -253,6 +250,52 @@
                         <span style="font-weight: 600">Export</span>
                       </button>
                     </div>
+                    <div class="col-6 col-md-3 mb-2">
+                      <button
+                        class="btn btn-secondary btn-block"
+                        *ngIf="!newDeviceActive"
+                        [disabled]="spinnerNewDeviceActive"
+                        (click)="newDevice()"
+                        style="
+                          background-color: #bef264 !important;
+                          border-color: #bef264 !important;
+                          color: #000000 !important;
+                        "
+                      >
+                        <i
+                          class="la la-spinner spinner"
+                          *ngIf="spinnerNewDeviceActive"
+                        ></i>
+                        <i
+                          class="ri-sticky-note-add-fill"
+                          *ngIf="!spinnerNewDeviceActive"
+                        ></i>
+                        &nbsp;
+                        <span style="font-weight: 600">New Device</span>
+                      </button>
+                      <button
+                        class="btn btn-secondary btn-block"
+                        *ngIf="newDeviceActive"
+                        [disabled]="spinnerNewDeviceActive"
+                        (click)="allDevice()"
+                        style="
+                          background-color: #bef264 !important;
+                          border-color: #bef264 !important;
+                          color: #000000 !important;
+                        "
+                      >
+                        <i
+                          class="la la-spinner spinner"
+                          *ngIf="spinnerNewDeviceActive"
+                        ></i>
+                        <i
+                          class="ri-arrow-left-circle-line"
+                          *ngIf="!spinnerNewDeviceActive"
+                        ></i>
+                        &nbsp;
+                        <span style="font-weight: 600">All Device</span>
+                      </button>
+                    </div>
                   </div>
 
                   <div class="card-dashboard">

src/app/content/hemat-app/device/device.component.ts

@@ -35,7 +35,9 @@ export class DeviceComponent implements OnInit {
   public breadcrumb: any;
   spinnerActive: boolean = false;
   spinnerExportActive: boolean = false;
-
+  spinnerNewDeviceActive: boolean = false;
+  newDeviceActive: boolean = false;
+  
   singlebasicSelected: any;
 
   constructor(
@@ -64,6 +66,10 @@ export class DeviceComponent implements OnInit {
     };
     this.storedData = JSON.parse(localStorage.getItem("currentUser"));
     this.buildingSelected = this.storedData.buildingId;
+
+    if (this.newDeviceActive === true) {
+      
+    }
     this.fetchData(
       this.buildingSelected,
       this.categorySelected,
@@ -74,6 +80,8 @@ export class DeviceComponent implements OnInit {
   }
 
   fetchData(buildingSelected, categorySelected, statusSelected) {
+    this.newDeviceActive = false;
+    this.buildingSelected = buildingSelected;
     this.deviceService
       .getDeviceData(buildingSelected, categorySelected, statusSelected)
       .subscribe((res) => {
@@ -99,6 +107,35 @@ export class DeviceComponent implements OnInit {
       });
   }
 
+  newDevice() {
+    this.spinnerNewDeviceActive = true;
+    this.newDeviceActive = true;
+    this.deviceService.getDeviceData(0, 0, 0).subscribe((res) => {
+      this.data = res;
+      this.filteredRows = this.data.results.data;
+      this.spinnerNewDeviceActive = false;
+      this.data_device = this.filteredRows.map((item) => ({
+        buildingName: item.building_name,
+        id: item.id,
+        name: item.name,
+        icon: item.icon,
+        watt: item.watt,
+        categoryName: item.category_name,
+        typeName: item.type_name,
+        voltageName: item.voltage_name,
+        statusName: item.status_name,
+      }));
+    });
+  }
+
+  allDevice(){
+    this.fetchData(
+      this.buildingSelected,
+      this.categorySelected,
+      this.statusSelected
+    );
+  }
+
   dataListMaster() {
     this.monitoringApiService.getMasterListData().subscribe((data) => {
       const dataCategory = data.data.find(

src/app/content/hemat-app/user-profile/user-profile.component.css

@@ -0,0 +1,4 @@
+:host ::ng-deep .nav.nav-tabs .nav-item .nav-link {
+    padding: 1.5rem 0.7rem !important;
+    display: inline-flex;
+}

src/app/content/hemat-app/user-profile/user-profile.component.html

@@ -0,0 +1,12 @@
+<div class="app-content content" style="background-color: #000000 !important">
+  <div class="content-wrapper">
+    <div class="content-header row mb-1">
+      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+    </div>
+    <div class="content-body">
+      <section id="user-profile">
+        
+      </section>
+    </div>
+  </div>
+</div>

src/app/content/hemat-app/user-profile/user-profile.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserProfileComponent } from './user-profile.component';
+
+describe('UserProfileComponent', () => {
+  let component: UserProfileComponent;
+  let fixture: ComponentFixture<UserProfileComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserProfileComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/user-profile/user-profile.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-user-profile',
+  templateUrl: './user-profile.component.html',
+  styleUrls: ['./user-profile.component.css']
+})
+export class UserProfileComponent {
+  public breadcrumb: any;
+}

src/app/content/hemat-app/user-profile/user-profile.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserProfileComponent } from './user-profile.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { RouterModule } from '@angular/router';
+
+
+
+@NgModule({
+  declarations: [UserProfileComponent],
+  imports: [
+    CommonModule,
+    NgbModule,
+    BreadcrumbModule,
+    RouterModule.forChild([
+      {
+        path: '',
+        component: UserProfileComponent
+      },
+    ])
+  ]
+})
+export class UserProfileModule { }