78 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-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: '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,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 { ManagmentCustomerProjectsComponent } from './modules/customer-managment/components/managment-customer-projects/managment-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 { CreateeProjectComponent } from './modules/customer-managment/components/projects/components/create-project/createe-project.component';
+import { ProjectLiistComponent } from './modules/customer-managment/components/projects/components/project-liist/project-liist.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: [
@@ -62,6 +78,15 @@ import { environment } from '../environments/environment';
     LoginComponent,
     FilterProjectPipe,
     SearchProjectComponent,
+    CustomerComponent,
+    CustomerListComponent,
+    SearchComponent,
+    ManagmentCustomerProjectsComponent,
+    CreateCustomerComponent,
+    CreateeProjectComponent,
+    ProjectLiistComponent,
+    ProjectTypeListComponent,
+    CreateProjectTypeComponent,
   ],
   imports: [
     CommonModule,
@@ -70,6 +95,7 @@ import { environment } from '../environments/environment';
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
+    NgxPaginationModule,
     StoreModule.forRoot(reducers, {
       metaReducers,
     }),

src/app/modules/customer-managment/components/customer-info/components/create-customer/create-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-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.spec.ts

@@ -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('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

src/app/modules/customer-managment/components/customer-info/components/customer-list/customer-list.component.html

@@ -0,0 +1,31 @@
+<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: 5, 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-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/customer-list/customer-list.component.scss

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

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

@@ -0,0 +1,33 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomerListComponent } from './customer-list.component';
+import { NgxPaginationModule } from 'ngx-pagination';
+
+describe('CustomerTableListComponent', () => {
+  let component: CustomerListComponent;
+  let fixture: ComponentFixture<CustomerListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NgxPaginationModule],
+      declarations: [CustomerListComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomerListComponent);
+    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-managment/components/customer-info/components/customer-list/customer-list.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-customer-list',
+  templateUrl: './customer-list.component.html',
+  styleUrls: ['./customer-list.component.scss'],
+})
+export class CustomerListComponent implements OnInit {
+  initPage1 = 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-managment/components/managment-customer-projects/managment-customer-projects.component.html

@@ -0,0 +1,53 @@
+<div class="container border mb-4 mt-0">
+  <ul class="nav nav-tabs mt-2" id="myTab" role="tablist">
+    <li class="nav-item">
+      <a
+        class="nav-link active nav-active text-black font-weight-bold"
+        id="customer-information-tab"
+        data-toggle="tab"
+        href="#customer-information"
+        role="tab"
+        aria-controls="customer-information"
+        >Customer information</a
+      >
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link nav-active text-black font-weight-bold"
+        id="projects-type-tab"
+        data-toggle="tab"
+        href="#projectsType"
+        role="tab"
+        aria-controls="projects-type"
+        >Project types</a
+      >
+    </li>
+    <li class="nav-item">
+      <a
+        class="nav-link nav-active text-black font-weight-bold"
+        id="projects-tab"
+        data-toggle="tab"
+        href="#projects"
+        role="tab"
+        aria-controls="projects"
+        >Projects</a
+      >
+    </li>
+  </ul>
+  <div class="tab-content" id="myTabContent">
+    <div
+      class="tab-pane fade show active mt-3"
+      id="customer-information"
+      role="tabpanel"
+      aria-labelledby="customer-information-tab"
+    >
+      <app-create-customer></app-create-customer>
+    </div>
+    <div class="tab-pane fade mt-3" id="projects" role="tabpanel" aria-labelledby="projects-tab">
+      <app-createe-project></app-createe-project>
+    </div>
+    <div class="tab-pane fade mt-3" id="projectsType" role="tabpanel" aria-labelledby="projects-type-tab">
+      <app-create-project-type></app-create-project-type>
+    </div>
+  </div>
+</div>

src/app/modules/customer-managment/components/managment-customer-projects/managment-customer-projects.component.scss

@@ -0,0 +1,8 @@
+@import '../../../../../styles/colors.scss';
+
+.nav-active {
+  color: $modal-button-secondary;
+}
+.nav-item > a:hover {
+  opacity: 0.6;
+}

src/app/modules/customer-managment/components/managment-customer-projects/managment-customer-projects.component.spec.ts

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

src/app/modules/customer-managment/components/managment-customer-projects/managment-customer-projects.component.ts

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

src/app/modules/customer-managment/components/projects-type/components/create-project-type/create-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-primary mb-2 mt-2">Save</button>
+      <button type="submit" class="btn btn-sm btn-secondary mb-2 ml-2 mt-2">Cancel</button>
+    </div>
+  </form>
+  <hr />
+  <app-project-type-list></app-project-type-list>
+</div>