- [KON-130], [KON-141], [KON-142]: Dropdown-Button; Style adapted
- [KON-143]: Unittests adapted, because of changes
- [KON-149]: Add search fields under column description
Signed-off-by: Dennis Schmitt <dennis.schmitt@pta.de>
diff --git a/i18n/contacts.de.json b/i18n/contacts.de.json
index f6f2b09..8f307ac 100644
--- a/i18n/contacts.de.json
+++ b/i18n/contacts.de.json
@@ -4,7 +4,11 @@
"Name": "Name",
"ContactType": "Kontakttyp",
"Note": "Notiz",
- "MainAddress": "Hauptadresse"
+ "MainAddress": "Hauptadresse",
+ "CreateNewContact": "Neuer Kontakt anlegen",
+ "InternContact": "Interner Kontakt",
+ "ExternContact": "Externer Kontakt",
+ "Company": "Unternehmen"
},
"ProductDetails": {
"Title": "Details",
diff --git a/i18n/en.json b/i18n/en.json
index f6f2b09..8f307ac 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -4,7 +4,11 @@
"Name": "Name",
"ContactType": "Kontakttyp",
"Note": "Notiz",
- "MainAddress": "Hauptadresse"
+ "MainAddress": "Hauptadresse",
+ "CreateNewContact": "Neuer Kontakt anlegen",
+ "InternContact": "Interner Kontakt",
+ "ExternContact": "Externer Kontakt",
+ "Company": "Unternehmen"
},
"ProductDetails": {
"Title": "Details",
diff --git a/src/app/pages/contacts/contacts-list/contacts-list-column-definition.ts b/src/app/pages/contacts/contacts-list/contacts-list-column-definition.ts
index 62f9323..1b2aebf 100644
--- a/src/app/pages/contacts/contacts-list/contacts-list-column-definition.ts
+++ b/src/app/pages/contacts/contacts-list/contacts-list-column-definition.ts
@@ -5,20 +5,20 @@
field: 'name',
headerName: 'Contacts.Name',
sortable: true,
- filter: 'setFilterComponent',
+ filter: 'agTextColumnFilter',
},
{
field: 'contactType',
headerName: 'Contacts.ContactType',
sortable: true,
- filter: true,
+ filter: 'agTextColumnFilter',
cellRendererFramework: ContactTypeCellRendererComponent
},
{
field: 'note',
headerName: 'Contacts.Note',
sortable: true,
- filter: true,
+ filter: 'agTextColumnFilter',
},
{
valueGetter: function(params) {
@@ -30,6 +30,6 @@
},
headerName: 'Contacts.MainAddress',
sortable: true,
- filter: true,
+ filter: 'agTextColumnFilter',
}
];
diff --git a/src/app/pages/contacts/contacts-list/contacts-list.component.html b/src/app/pages/contacts/contacts-list/contacts-list.component.html
index f13536c..a325b1c 100644
--- a/src/app/pages/contacts/contacts-list/contacts-list.component.html
+++ b/src/app/pages/contacts/contacts-list/contacts-list.component.html
@@ -5,16 +5,13 @@
<div class="contacts-grid-wrapper" body>
<div class="diverse-btn">
- <div class="dropdown-open">
- <a class="btn dropdown-toggle dropdown-button" style="min-width: 80px;" data-toggle="dropdown" href="#" aria-expanded="true">
- Neuer Kontakt erstellen
- <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- <li class="dropdown-item"><a routerLink="/new_intern_contact" >Interne Person</a></li>
- <li class="dropdown-item"><a routerLink="/new_extern_contact" >Externe Person</a></li>
- <li class="dropdown-item"><a routerLink="/new_company"> Unternehmen</a></li>
- </ul>
+ <div class="selectTypeOfNewContact">
+ <select [required]="false" type="text" class="form-control" (change)="navigateTo($event.target.value)">
+ <option value="" disabled selected>{{ 'Contacts.CreateNewContact' | translate }}</option>
+ <option value="/new_intern_contact">{{ 'Contacts.InternContact' | translate }}</option>
+ <option value="/new_extern_contact">{{ 'Contacts.ExternContact' | translate }}</option>
+ <option value="/new_company">{{ 'Contacts.Company' | translate }}</option>
+ </select>
</div>
</div>
@@ -25,6 +22,7 @@
[gridOptions]="gridOptions"
[columnDefs]="columnDefinition"
[rowSelection]="'single'"
+ [floatingFilter]="true"
[frameworkComponents]="frameworkComponents"
>
</ag-grid-angular>
diff --git a/src/app/pages/contacts/contacts-list/contacts-list.component.scss b/src/app/pages/contacts/contacts-list/contacts-list.component.scss
index 86c822a..6212e64 100644
--- a/src/app/pages/contacts/contacts-list/contacts-list.component.scss
+++ b/src/app/pages/contacts/contacts-list/contacts-list.component.scss
@@ -9,49 +9,25 @@
.diverse-btn{
display: flex;
justify-content: flex-end;
+ background-color: #f5f7f7;
+ border: 1px solid rgb(189, 195, 199);
+ padding: 7px 7px 5px 0px;
+ margin-bottom: 1px;
}
-.dropdown-button {
- border: 1px solid #f8fafd;
-}
-
-.dropdown-menu {
- position: absolute;
- z-index: 10000;
- left: auto;
- right: 0px;
- top: 48px;
-}
ag-grid-angular{
- height: calc(100vh - 250px);
+ height: calc(100vh - 275px);
}
-.dropdown-item {
- padding: 8px 12px;
- background-color: transparent;
+.form-field-label {
+ width: 100%;
+ font-size: 14px;
+ font-weight: bold;
+ margin-bottom: 5px;
}
-.dropdown-menu > li > a {
- cursor: pointer;
-}
-
-.dropdown-menu{
- max-width: 210px;
- background-color: white;
-}
-
-.dropdown-menu > li > div {
- margin-left: 20px;
- color: #333;
-}
-
-.dropdown-menu > li > a {
- display: block;
- padding: 3px 0px;
- clear: both;
- font-weight: 400;
- line-height: 1.42857143;
- color: #333;
- white-space: nowrap;
+.selectTypeOfNewContact{
+ margin-right: 2px;
+ margin-bottom: 2px;
}
\ No newline at end of file
diff --git a/src/app/pages/contacts/contacts-list/contacts-list.component.spec.ts b/src/app/pages/contacts/contacts-list/contacts-list.component.spec.ts
index 9a3010e..e912887 100644
--- a/src/app/pages/contacts/contacts-list/contacts-list.component.spec.ts
+++ b/src/app/pages/contacts/contacts-list/contacts-list.component.spec.ts
@@ -26,7 +26,9 @@
class MockContactSandbox {}
-class MockToastrService{}
+class MockToastrService{
+ public success(v1:string, v2:string){return null;}
+}
class MockStore{}
class MockActionsSubject{}
@@ -70,10 +72,11 @@
})
contactsSandbox = TestBed.get(ContactsSandbox);
+ toastr = TestBed.get(ToastrService);
router = TestBed.get(Router);
location = TestBed.get(Location);
- component = new ContactsListComponent(contactsSandbox, toastr);
+ component = new ContactsListComponent(contactsSandbox, router, toastr);
fixture = TestBed.createComponent(ContactsListComponent);
});
@@ -82,21 +85,31 @@
expect(component).toBeTruthy();
});
- it('should have a link to /new_intern_contact', () => {
- let routerLink = fixture.debugElement.query(By.css('li:nth-child(1) > a')).nativeElement
- .getAttribute('routerLink');
- expect(routerLink).toEqual('/new_intern_contact');
+ it('should have value of /new_intern_contact', () => {
+ let value = fixture.debugElement.query(By.css('select > option:nth-child(2)')).nativeElement
+ .getAttribute('value');
+ console.log(value);
+ expect(value).toEqual('/new_intern_contact');
});
- it('should have a link to /new_extern_contact', () => {
- let routerLink = fixture.debugElement.query(By.css('li:nth-child(2) > a')).nativeElement
- .getAttribute('routerLink');
- expect(routerLink).toEqual('/new_extern_contact');
+ it('should have value of /new_extern_contact', () => {
+ let value = fixture.debugElement.query(By.css('select > option:nth-child(3)')).nativeElement
+ .getAttribute('value');
+ expect(value).toEqual('/new_extern_contact');
});
- it('should have a link to /new_company', () => {
- let routerLink = fixture.debugElement.query(By.css('li:nth-child(3) > a')).nativeElement
- .getAttribute('routerLink');
- expect(routerLink).toEqual('/new_company');
+ it('should have value of /new_company', () => {
+ let value = fixture.debugElement.query(By.css('select > option:nth-child(4)')).nativeElement
+ .getAttribute('value');
+ expect(value).toEqual('/new_company');
+ });
+
+ it('checks if function NavigateTo works', () => {
+ const routerSpy = spyOn(router, 'navigate');
+
+ let url = '/new_intern_contact';
+ component.navigateTo(url);
+ expect(routerSpy).toHaveBeenCalledTimes(1);
+
});
});
diff --git a/src/app/pages/contacts/contacts-list/contacts-list.component.ts b/src/app/pages/contacts/contacts-list/contacts-list.component.ts
index 28ab03d..fb63def 100644
--- a/src/app/pages/contacts/contacts-list/contacts-list.component.ts
+++ b/src/app/pages/contacts/contacts-list/contacts-list.component.ts
@@ -4,6 +4,7 @@
import { BaseList } from '@shared/components/base-components/base.list';
import { SetFilterComponent } from '@app/shared/filters/ag-grid/set-filter/set-filter.component';
import { ToastrService } from 'ngx-toastr';
+import { Router } from '@angular/router';
@Component({
selector: 'app-contacts-list',
@@ -13,10 +14,32 @@
export class ContactsListComponent extends BaseList {
public columnDefinition: any = CONTACTS_COLDEF;
public frameworkComponents: { setFilterComponent: any };
- constructor( public contactsSandbox: ContactsSandbox, protected toastr: ToastrService ) {
+
+
+ constructor(public contactsSandbox: ContactsSandbox, public router: Router, protected toastr: ToastrService) {
super();
this.frameworkComponents = { setFilterComponent: SetFilterComponent };
-
- // this.toastr.success('Hello world!', 'Toastr fun!');
+
+ this.toastr.success('Hello world!', 'Toastr fun!');
+ }
+
+ ngOnInit() {
+ this.gridOptions = {
+ ...this.gridOptions,
+ localeText: {
+ contains: 'enthält',
+ notContains: 'enthält nicht',
+ startsWith: 'beginnt mit',
+ endsWith: 'endet mit',
+ andCondition: 'UND',
+ orCondition: 'ODER',
+ equals: 'ist gleich',
+ notEqual: 'ist nicht gleich',
+ }
+ };
+ }
+
+ public navigateTo(url) {
+ this.router.navigate([url]);
}
}
diff --git a/src/app/shared/containers/card-layout/card-layout.component.scss b/src/app/shared/containers/card-layout/card-layout.component.scss
index b74b9ed..b25f222 100644
--- a/src/app/shared/containers/card-layout/card-layout.component.scss
+++ b/src/app/shared/containers/card-layout/card-layout.component.scss
@@ -1,5 +1,5 @@
.card {
- height: calc(100vh - 135px);
+ height: calc(100vh - 145px);
overflow: auto;
border: none;;
}
diff --git a/src/styles.scss b/src/styles.scss
index e112aa5..00c3adc 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1358,8 +1358,8 @@
.form-control {
display: block;
width: 100%;
- padding: 0.5rem 0.75rem;
- font-size: 1rem;
+ padding: 6px 12px;
+ font-size: 14px;
line-height: 1.25;
color: #495057;
background-color: #fff;
