Skip to content

Commit fdbff24

Browse files
daros10daros10
committed
customer administration screens
1 parent 00a03df commit fdbff24

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+799
-14
lines changed

‎package-lock.json

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"jquery": "^3.4.1",
2828
"minimist": "^1.2.5",
2929
"msal": "^1.2.1",
30+
"ngx-pagination": "^5.0.0",
3031
"rxjs": "~6.5.4",
3132
"tslib": "^1.10.0",
3233
"zone.js": "~0.10.2"

‎src/app/app-routing.module.ts

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,28 @@ import { ProjectManagementComponent } from './modules/project-management/pages/p
99
import { ActivitiesManagementComponent } from './modules/activities-management/pages/activities-management.component';
1010
import { HomeComponent } from './modules/home/home.component';
1111
import { LoginComponent } from './modules/login/login.component';
12+
import { CustomerComponent } from './modules/customer/pages/customer.component';
1213

1314
const routes: Routes = [
14-
15-
{ path: '', component: HomeComponent, canActivate: [AzureGuardService],
15+
{
16+
path: '',
17+
component: HomeComponent,
18+
canActivate: [AzureGuardService],
1619
children: [
1720
{ path: 'reports', component: ReportsComponent },
1821
{ path: 'time-clock', component: TimeClockComponent },
1922
{ path: 'time-entries', component: TimeEntriesComponent },
2023
{ path: 'project-management', component: ProjectManagementComponent },
2124
{ path: 'activities-management', component: ActivitiesManagementComponent },
22-
{path: '', pathMatch: 'full', redirectTo: 'time-clock'},
23-
]
25+
{ path: 'customer', component: CustomerComponent },
26+
{ path: '', pathMatch: 'full', redirectTo: 'time-clock' },
27+
],
2428
},
2529
{ path: 'login', component: LoginComponent },
2630
];
2731

2832
@NgModule({
2933
imports: [RouterModule.forRoot(routes)],
30-
exports: [RouterModule]
34+
exports: [RouterModule],
3135
})
32-
export class AppRoutingModule { }
36+
export class AppRoutingModule {}

‎src/app/app.module.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { StoreModule } from '@ngrx/store';
77
import { EffectsModule } from '@ngrx/effects';
88
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
99

10+
import { NgxPaginationModule } from 'ngx-pagination';
11+
1012
import { AppRoutingModule } from './app-routing.module';
1113
import { AppComponent } from './app.component';
1214
import { NavbarComponent } from './modules/shared/components/navbar/navbar.component';
@@ -35,6 +37,15 @@ import { ActivityEffects } from './modules/activities-management/store/activity-
3537
import { ProjectEffects } from './modules/project-management/store/project.effects';
3638
import { reducers, metaReducers } from './reducers';
3739
import { environment } from '../environments/environment';
40+
import { CustomerComponent } from './modules/customer/pages/customer.component';
41+
import { CustomerTableListComponent } from './modules/customer/components/customer-table-list/customer-table-list.component';
42+
import { SearchComponent } from './modules/customer/components/search/search.component';
43+
import { ManagmentCustomerProjectsComponent } from './modules/customer/components/managment-customer-projects/managment-customer-projects.component';
44+
import { InputCustomerComponent } from './modules/customer/components/input-customer/input-customer';
45+
import { InputProjectComponent } from './modules/customer/components/input-project/input-project.component';
46+
import { ProjectTableListComponent } from './modules/customer/components/project-table-list/project-table-list.component';
47+
import { ProjectTypeTableListComponent } from './modules/customer/components/project-type-table-list/project-type-table-list.component';
48+
import { InputProjectTypeComponent } from './modules/customer/components/input-project-type/input-project-type.component';
3849

3950
@NgModule({
4051
declarations: [
@@ -62,6 +73,15 @@ import { environment } from '../environments/environment';
6273
LoginComponent,
6374
FilterProjectPipe,
6475
SearchProjectComponent,
76+
CustomerComponent,
77+
CustomerTableListComponent,
78+
SearchComponent,
79+
ManagmentCustomerProjectsComponent,
80+
InputCustomerComponent,
81+
InputProjectComponent,
82+
ProjectTableListComponent,
83+
ProjectTypeTableListComponent,
84+
InputProjectTypeComponent,
6585
],
6686
imports: [
6787
CommonModule,
@@ -70,6 +90,7 @@ import { environment } from '../environments/environment';
7090
FormsModule,
7191
ReactiveFormsModule,
7292
HttpClientModule,
93+
NgxPaginationModule,
7394
StoreModule.forRoot(reducers, {
7495
metaReducers,
7596
}),

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<table class="table table-sm table-bordered table-striped mb-0">
2+
<thead class="bg-header">
3+
<tr class="d-flex">
4+
<th class="col-9">Name</th>
5+
<th class="col-3 text-center"></th>
6+
</tr>
7+
</thead>
8+
<tbody>
9+
<tr
10+
class="d-flex"
11+
*ngFor="let customer of customers | paginate: { itemsPerPage: 3, currentPage: initPage1, id: 'first' }"
12+
>
13+
<td class="col-sm-9">{{ customer.name }}</td>
14+
<td class="col-sm-3 text-center">
15+
<button (click)="activateCustomerForm()" type="button" class="btn btn-sm btn-edit">
16+
<i class="fa fa-pencil fa-xs"></i>
17+
</button>
18+
<button type="button" class="btn btn-sm btn-delete ml-2"><i class="fas fa-trash-alt fa-xs"></i></button>
19+
</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
<div class="d-flex align-items-end flex-column">
24+
<pagination-controls
25+
class="mt-auto p-2 custom-pagination"
26+
(pageChange)="initPage1 = $event"
27+
id="first"
28+
previousLabel=""
29+
nextLabel=""
30+
></pagination-controls>
31+
</div>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@import '../../../../../styles/colors.scss';
2+
3+
.bg-header {
4+
background-image: $title-card-header-background;
5+
color: white;
6+
}
7+
8+
.btn-edit {
9+
background-color: $modal-button-secondary;
10+
color: white;
11+
}
12+
13+
.btn-delete {
14+
background-color: $danger-color;
15+
color: white;
16+
}
17+
18+
.scroll {
19+
max-height: 165px;
20+
overflow-y: auto;
21+
}
22+
23+
.custom-pagination ::ng-deep .ngx-pagination .current {
24+
background-image: $title-card-header-background;
25+
border-radius: 8px;
26+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { CustomerTableListComponent } from './customer-table-list.component';
4+
import { NgxPaginationModule } from 'ngx-pagination';
5+
6+
describe('CustomerTableListComponent', () => {
7+
let component: CustomerTableListComponent;
8+
let fixture: ComponentFixture<CustomerTableListComponent>;
9+
10+
beforeEach(async(() => {
11+
TestBed.configureTestingModule({
12+
imports: [NgxPaginationModule],
13+
declarations: [CustomerTableListComponent],
14+
}).compileComponents();
15+
}));
16+
17+
beforeEach(() => {
18+
fixture = TestBed.createComponent(CustomerTableListComponent);
19+
component = fixture.componentInstance;
20+
fixture.detectChanges();
21+
});
22+
23+
it('should create', () => {
24+
expect(component).toBeTruthy();
25+
});
26+
27+
it('changeShowCustomerForm should listen form changes', () => {
28+
component.showCustomerForm = true;
29+
spyOn(component.changeShowCustomerForm, 'emit');
30+
component.activateCustomerForm();
31+
expect(component.changeShowCustomerForm.emit).toHaveBeenCalled();
32+
});
33+
});

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-customer-table-list',
5+
templateUrl: './customer-table-list.component.html',
6+
styleUrls: ['./customer-table-list.component.scss'],
7+
})
8+
export class CustomerTableListComponent implements OnInit {
9+
initPage1: number = 1;
10+
11+
customers = [
12+
{
13+
id: '1',
14+
name: 'GoSpace',
15+
},
16+
{
17+
id: '2',
18+
name: 'GruHub',
19+
},
20+
{
21+
id: '3',
22+
name: 'e&y',
23+
},
24+
{
25+
id: '4',
26+
name: 'Mido',
27+
},
28+
];
29+
30+
@Input() showCustomerForm;
31+
@Output() changeShowCustomerForm = new EventEmitter<boolean>();
32+
33+
constructor() {}
34+
35+
ngOnInit(): void {}
36+
37+
activateCustomerForm() {
38+
this.showCustomerForm = true;
39+
this.changeShowCustomerForm.emit(this.showCustomerForm);
40+
}
41+
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="container">
2+
<form style="width: 600px;">
3+
<div class="form-group">
4+
<input type="text" class="form-control form-control-sm" id="" aria-describedby="" placeholder="Customer name" />
5+
<textarea
6+
class="form-control form-control-sm mt-2"
7+
id="exampleFormControlTextarea1"
8+
rows="3"
9+
placeholder="Customer description"
10+
></textarea>
11+
<button type="submit" class="btn btn-sm btn-save mb-2 mt-2">Save</button>
12+
<button type="submit" class="btn btn-sm btn-cancel mb-2 ml-2 mt-2">Cancel</button>
13+
</div>
14+
</form>
15+
</div>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@import '../../../../../styles/colors.scss';
2+
3+
.btn-cancel {
4+
background-color: $modal-button-secondary;
5+
color: white;
6+
}
7+
8+
.btn-save {
9+
background-color: $danger-color;
10+
color: white;
11+
}

0 commit comments

Comments
 (0)