customer administration screens

package.json

@@ -27,6 +27,7 @@
     "jquery": "^3.4.1",
     "minimist": "^1.2.5",
     "msal": "^1.2.1",
+    "ngx-pagination": "^5.0.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/app-routing.module.ts

@@ -9,24 +9,28 @@ import { ProjectManagementComponent } from './modules/project-management/pages/p
 import { ActivitiesManagementComponent } from './modules/activities-management/pages/activities-management.component';
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
+import { CustomerComponent } from './modules/customer/pages/customer.component';
 
 const routes: Routes = [
-
-  { path: '', component: HomeComponent, canActivate: [AzureGuardService],
+  {
+    path: '',
+    component: HomeComponent,
+    canActivate: [AzureGuardService],
     children: [
       { path: 'reports', component: ReportsComponent },
       { path: 'time-clock', component: TimeClockComponent },
       { path: 'time-entries', component: TimeEntriesComponent },
       { path: 'project-management', component: ProjectManagementComponent },
       { path: 'activities-management', component: ActivitiesManagementComponent },
-      {path: '', pathMatch: 'full', redirectTo: 'time-clock'},
-    ]
+      { path: 'customer', component: CustomerComponent },
+      { path: '', pathMatch: 'full', redirectTo: 'time-clock' },
+    ],
   },
   { path: 'login', component: LoginComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.module.ts

@@ -7,6 +7,8 @@ import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
+import { NgxPaginationModule } from 'ngx-pagination';
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './modules/shared/components/navbar/navbar.component';
@@ -35,6 +37,15 @@ import { ActivityEffects } from './modules/activities-management/store/activity-
 import { ProjectEffects } from './modules/project-management/store/project.effects';
 import { reducers, metaReducers } from './reducers';
 import { environment } from '../environments/environment';
+import { CustomerComponent } from './modules/customer/pages/customer.component';
+import { CustomerTableListComponent } from './modules/customer/components/customer-table-list/customer-table-list.component';
+import { SearchComponent } from './modules/customer/components/search/search.component';
+import { ManagmentCustomerProjectsComponent } from './modules/customer/components/managment-customer-projects/managment-customer-projects.component';
+import { InputCustomerComponent } from './modules/customer/components/input-customer/input-customer';
+import { InputProjectComponent } from './modules/customer/components/input-project/input-project.component';
+import { ProjectTableListComponent } from './modules/customer/components/project-table-list/project-table-list.component';
+import { ProjectTypeTableListComponent } from './modules/customer/components/project-type-table-list/project-type-table-list.component';
+import { InputProjectTypeComponent } from './modules/customer/components/input-project-type/input-project-type.component';
 
 @NgModule({
   declarations: [
@@ -62,6 +73,15 @@ import { environment } from '../environments/environment';
     LoginComponent,
     FilterProjectPipe,
     SearchProjectComponent,
+    CustomerComponent,
+    CustomerTableListComponent,
+    SearchComponent,
+    ManagmentCustomerProjectsComponent,
+    InputCustomerComponent,
+    InputProjectComponent,
+    ProjectTableListComponent,
+    ProjectTypeTableListComponent,
+    InputProjectTypeComponent,
   ],
   imports: [
     CommonModule,
@@ -70,6 +90,7 @@ import { environment } from '../environments/environment';
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
+    NgxPaginationModule,
     StoreModule.forRoot(reducers, {
       metaReducers,
     }),

src/app/modules/customer/components/customer-table-list/customer-table-list.component.html

@@ -0,0 +1,31 @@
+<table class="table table-sm table-bordered table-striped mb-0">
+  <thead class="bg-header">
+    <tr class="d-flex">
+      <th class="col-9">Name</th>
+      <th class="col-3 text-center"></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr
+      class="d-flex"
+      *ngFor="let customer of customers | paginate: { itemsPerPage: 3, currentPage: initPage1, id: 'first' }"
+    >
+      <td class="col-sm-9">{{ customer.name }}</td>
+      <td class="col-sm-3 text-center">
+        <button (click)="activateCustomerForm()" type="button" class="btn btn-sm btn-edit">
+          <i class="fa fa-pencil fa-xs"></i>
+        </button>
+        <button type="button" class="btn btn-sm btn-delete ml-2"><i class="fas fa-trash-alt fa-xs"></i></button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+<div class="d-flex align-items-end flex-column">
+  <pagination-controls
+    class="mt-auto p-2 custom-pagination"
+    (pageChange)="initPage1 = $event"
+    id="first"
+    previousLabel=""
+    nextLabel=""
+  ></pagination-controls>
+</div>

src/app/modules/customer/components/customer-table-list/customer-table-list.component.scss

@@ -0,0 +1,26 @@
+@import '../../../../../styles/colors.scss';
+
+.bg-header {
+  background-image: $title-card-header-background;
+  color: white;
+}
+
+.btn-edit {
+  background-color: $modal-button-secondary;
+  color: white;
+}
+
+.btn-delete {
+  background-color: $danger-color;
+  color: white;
+}
+
+.scroll {
+  max-height: 165px;
+  overflow-y: auto;
+}
+
+.custom-pagination ::ng-deep .ngx-pagination .current {
+  background-image: $title-card-header-background;
+  border-radius: 8px;
+}

src/app/modules/customer/components/customer-table-list/customer-table-list.component.spec.ts

@@ -0,0 +1,33 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerTableListComponent } from './customer-table-list.component';
+import { NgxPaginationModule } from 'ngx-pagination';
+
+describe('CustomerTableListComponent', () => {
+  let component: CustomerTableListComponent;
+  let fixture: ComponentFixture<CustomerTableListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NgxPaginationModule],
+      declarations: [CustomerTableListComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerTableListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('changeShowCustomerForm should listen form changes', () => {
+    component.showCustomerForm = true;
+    spyOn(component.changeShowCustomerForm, 'emit');
+    component.activateCustomerForm();
+    expect(component.changeShowCustomerForm.emit).toHaveBeenCalled();
+  });
+});

src/app/modules/customer/components/customer-table-list/customer-table-list.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-table-list',
+  templateUrl: './customer-table-list.component.html',
+  styleUrls: ['./customer-table-list.component.scss'],
+})
+export class CustomerTableListComponent implements OnInit {
+  initPage1: number = 1;
+
+  customers = [
+    {
+      id: '1',
+      name: 'GoSpace',
+    },
+    {
+      id: '2',
+      name: 'GruHub',
+    },
+    {
+      id: '3',
+      name: 'e&y',
+    },
+    {
+      id: '4',
+      name: 'Mido',
+    },
+  ];
+
+  @Input() showCustomerForm;
+  @Output() changeShowCustomerForm = new EventEmitter<boolean>();
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  activateCustomerForm() {
+    this.showCustomerForm = true;
+    this.changeShowCustomerForm.emit(this.showCustomerForm);
+  }
+}

src/app/modules/customer/components/input-customer/input-customer.html

@@ -0,0 +1,15 @@
+<div class="container">
+  <form style="width: 600px;">
+    <div class="form-group">
+      <input type="text" class="form-control form-control-sm" id="" aria-describedby="" placeholder="Customer name" />
+      <textarea
+        class="form-control form-control-sm mt-2"
+        id="exampleFormControlTextarea1"
+        rows="3"
+        placeholder="Customer description"
+      ></textarea>
+      <button type="submit" class="btn btn-sm btn-save mb-2 mt-2">Save</button>
+      <button type="submit" class="btn btn-sm btn-cancel mb-2 ml-2 mt-2">Cancel</button>
+    </div>
+  </form>
+</div>

src/app/modules/customer/components/input-customer/input-customer.scss

@@ -0,0 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
+.btn-cancel {
+  background-color: $modal-button-secondary;
+  color: white;
+}
+
+.btn-save {
+  background-color: $danger-color;
+  color: white;
+}

src/app/modules/customer/components/input-customer/input-customer.spec.ts

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

src/app/modules/customer/components/input-customer/input-customer.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-input-customer',
+  templateUrl: './input-customer.html',
+  styleUrls: ['./input-customer.scss'],
+})
+export class InputCustomerComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/modules/customer/components/input-project-type/input-project-type.component.html

@@ -0,0 +1,17 @@
+<div class="container">
+  <form style="width: 600px;">
+    <div class="form-group">
+      <input type="text" class="form-control form-control-sm" id="" aria-describedby="" placeholder="Name" />
+      <textarea
+        class="form-control form-control-sm mt-2"
+        id="exampleFormControlTextarea1"
+        rows="3"
+        placeholder="Description"
+      ></textarea>
+      <button type="submit" class="btn btn-sm btn-save mb-2 mt-2">Save</button>
+      <button type="submit" class="btn btn-sm btn-cancel mb-2 ml-2 mt-2">Cancel</button>
+    </div>
+  </form>
+  <hr />
+  <app-project-type-table-list></app-project-type-table-list>
+</div>

src/app/modules/customer/components/input-project-type/input-project-type.component.scss

@@ -0,0 +1,11 @@
+@import '../../../../../styles/colors.scss';
+
+.btn-cancel {
+  background-color: $modal-button-secondary;
+  color: white;
+}
+
+.btn-save {
+  background-color: $danger-color;
+  color: white;
+}

src/app/modules/customer/components/input-project-type/input-project-type.component.spec.ts

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

src/app/modules/customer/components/input-project-type/input-project-type.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-input-project-type',
+  templateUrl: './input-project-type.component.html',
+  styleUrls: ['./input-project-type.component.scss'],
+})
+export class InputProjectTypeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}