Merge pull request ioet#101 from ioet/78-customers-administration-screen

closes ioet#78

Author: enriquezrene

package-lock.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"
@@ -51,7 +52,7 @@
     "husky": "^4.2.3",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.3.0",
+    "karma": "^5.0.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~2.0.1",

package.json

@@ -5,28 +5,30 @@ import { AzureGuardService } from './guards/azure-guard.service';
 import { ReportsComponent } from './modules/reports/pages/reports.component';
 import { TimeClockComponent } from './modules/time-clock/pages/time-clock.component';
 import { TimeEntriesComponent } from './modules/time-entries/pages/time-entries.component';
-import { ProjectManagementComponent } from './modules/project-management/pages/project-management.component';
 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-managment/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: 'customers-management', 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-routing.module.ts

@@ -7,17 +7,16 @@ 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';
 import { UserComponent } from './modules/shared/components/user/user.component';
 import { SidebarComponent } from './modules/shared/components/sidebar/sidebar.component';
 import { ClockComponent } from './modules/shared/components/clock/clock.component';
 import { TimeClockComponent } from './modules/time-clock/pages/time-clock.component';
-import { ProjectManagementComponent } from './modules/project-management/pages/project-management.component';
 import { TimeEntriesComponent } from './modules/time-entries/pages/time-entries.component';
-import { ProjectListComponent } from './modules/project-management/components/project-list/project-list.component';
-import { CreateProjectComponent } from './modules/project-management/components/create-project/create-project.component';
 import { DetailsFieldsComponent } from './modules/shared/components/details-fields/details-fields.component';
 import { ProjectListHoverComponent } from './modules/time-clock/components/project-list-hover/project-list-hover.component';
 import { ModalComponent } from './modules/shared/components/modal/modal.component';
@@ -35,6 +34,20 @@ 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-managment/pages/customer.component';
+// tslint:disable-next-line: max-line-length
+import { CustomerListComponent } from './modules/customer-managment/components/customer-info/components/customer-list/customer-list.component';
+import { SearchComponent } from './modules/customer-managment/components/search/search.component';
+// tslint:disable-next-line: max-line-length
+import { ManagementCustomerProjectsComponent } from './modules/customer-managment/components/management-customer-projects/management-customer-projects.component';
+import { CreateCustomerComponent } from './modules/customer-managment/components/customer-info/components/create-customer/create-customer';
+// tslint:disable-next-line: max-line-length
+import { CreateProjectComponent } from './modules/customer-managment/components/projects/components/create-project/create-project.component';
+import { ProjectListComponent } from './modules/customer-managment/components/projects/components/project-list/project-list.component';
+// tslint:disable-next-line: max-line-length
+import { ProjectTypeListComponent } from './modules/customer-managment/components/projects-type/components/project-type-list/project-type-list.component';
+// tslint:disable-next-line: max-line-length
+import { CreateProjectTypeComponent } from './modules/customer-managment/components/projects-type/components/create-project-type/create-project-type.component';
 
 @NgModule({
   declarations: [
@@ -44,8 +57,6 @@ import { environment } from '../environments/environment';
     SidebarComponent,
     ClockComponent,
     TimeClockComponent,
-    ProjectManagementComponent,
-    ProjectListComponent,
     CreateProjectComponent,
     TimeClockComponent,
     DetailsFieldsComponent,
@@ -62,6 +73,15 @@ import { environment } from '../environments/environment';
     LoginComponent,
     FilterProjectPipe,
     SearchProjectComponent,
+    CustomerComponent,
+    CustomerListComponent,
+    SearchComponent,
+    ManagementCustomerProjectsComponent,
+    CreateCustomerComponent,
+    CreateProjectComponent,
+    ProjectListComponent,
+    ProjectTypeListComponent,
+    CreateProjectTypeComponent,
   ],
   imports: [
     CommonModule,
@@ -70,6 +90,7 @@ import { environment } from '../environments/environment';
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
+    NgxPaginationModule,
     StoreModule.forRoot(reducers, {
       metaReducers,
     }),

src/app/app.module.ts

@@ -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-primary">Save</button>
+      <button type="submit" class="btn btn-sm btn-secondary mb-2 ml-2 mt-2">Cancel</button>
+    </div>
+  </form>
+</div>

src/app/modules/customer-managment/components/customer-info/components/create-customer/create-customer.html

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

src/app/modules/customer-managment/components/customer-info/components/create-customer/create-customer.scss

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-customer',
+  templateUrl: './create-customer.html',
+  styleUrls: ['./create-customer.scss'],
+})
+export class CreateCustomerComponent {
+  constructor() {}
+}

src/app/modules/customer-managment/components/customer-info/components/create-customer/create-customer.spec.ts

@@ -0,0 +1,33 @@
+<table class="table table-sm table-bordered table-striped mb-0">
+  <thead class="thead-orange">
+    <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: itemsPerPage, currentPage: initPage1, id: 'first' }"
+    >
+      <td class="col-sm-9">{{ customer.name }}</td>
+      <td class="col-sm-3 text-center">
+        <button type="button" class="btn btn-sm btn-secondary">
+          <i class="fa fa-pencil fa-xs"></i>
+        </button>
+        <button type="button" class="btn btn-sm btn-danger 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-managment/components/customer-info/components/create-customer/create-customer.ts

@@ -0,0 +1 @@
+@import '../../../../../../../styles/themes/orange-theme';