diff --git a/matsen-tool/src/app/_components/paging/paging.component.html b/matsen-tool/src/app/_components/paging/paging.component.html index cfe952c..4eefcc4 100644 --- a/matsen-tool/src/app/_components/paging/paging.component.html +++ b/matsen-tool/src/app/_components/paging/paging.component.html @@ -12,6 +12,7 @@ (page)="handlePageEvent($event)" [pageSize]="pageSize" [pageIndex]="pageIndex" + [hidePageSize]="hidePageSize" showFirstLastButtons> @@ -24,6 +25,7 @@ (page)="handlePageEvent($event)" [pageSize]="pageSize" [pageIndex]="pageIndex" + [hidePageSize]="hidePageSize" showFirstLastButtons> diff --git a/matsen-tool/src/app/_components/paging/paging.component.ts b/matsen-tool/src/app/_components/paging/paging.component.ts index 8080771..1f00393 100644 --- a/matsen-tool/src/app/_components/paging/paging.component.ts +++ b/matsen-tool/src/app/_components/paging/paging.component.ts @@ -17,6 +17,7 @@ export class PagingComponent implements OnInit, AfterViewInit { @Input() public pageSize!: number; @Input() public pageSizeOptions!: number[]; @Input() public searchable: boolean; + @Input() public hidePageSize: boolean; @ViewChild(MatPaginator) public paginator!: MatPaginator; @@ -41,6 +42,7 @@ export class PagingComponent implements OnInit, AfterViewInit { this.pageEvent = new PageEvent(); this.pageIndex = 0; this.searchable = false; + this.hidePageSize = false; this.loadingSub = new Subscription(); } diff --git a/matsen-tool/src/app/_components/search-select/search-select.component.html b/matsen-tool/src/app/_components/search-select/search-select.component.html index f53213a..c468ce6 100644 --- a/matsen-tool/src/app/_components/search-select/search-select.component.html +++ b/matsen-tool/src/app/_components/search-select/search-select.component.html @@ -1,41 +1,51 @@ - +
+
+

+ +
+ +
+ -
- +
+
- - - - - - - - - - - + + + + + + + + + + + - + - - + + -
- {{ column.columnHeader | translate }} - - {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} - - - - {{ getElementValue(element, column) }} - + {{ column.columnHeader | translate }} + + {{ pagingComponent.getPageSize() * (pagingComponent.getPageIndex()-1) + dataSource.filteredData.indexOf(element) + 1 }} + + + + {{ getElementValue(element, column) }} +
+ +
+
- \ No newline at end of file +
\ No newline at end of file diff --git a/matsen-tool/src/app/_components/search-select/search-select.component.ts b/matsen-tool/src/app/_components/search-select/search-select.component.ts index 1996537..613c69a 100644 --- a/matsen-tool/src/app/_components/search-select/search-select.component.ts +++ b/matsen-tool/src/app/_components/search-select/search-select.component.ts @@ -1,4 +1,4 @@ -import {AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; import {PagingComponent} from "@app/_components/paging/paging.component"; import {FormGroup} from "@angular/forms"; import {SearchInputColDef} from "@app/_components/search-input/search-input-col-def"; @@ -12,15 +12,6 @@ import {OrderFilter} from "@app/_models/orderFilter"; }) export class SearchSelectComponent implements OnInit, AfterViewInit { - static COLUMN_TYPE_POSITION: string = 'position'; - static COLUMN_TYPE_TEXT: string = 'text'; - static COLUMN_TYPE_IMAGE: string = 'image'; - static validColumnTypes: string[] = [ - SearchSelectComponent.COLUMN_TYPE_POSITION, - SearchSelectComponent.COLUMN_TYPE_TEXT, - SearchSelectComponent.COLUMN_TYPE_IMAGE - ]; - @Input() public formId!: string; @Input() public formLabelLangKey!: string; @Input() public documentForm!: FormGroup; @@ -28,15 +19,33 @@ export class SearchSelectComponent implements OnInit, AfterViewInit { @Input() public getDataFunction!: Function; @Input() public dataSource: any; @Input() public searchSelectColDefs!: SearchInputColDef[]; + @Output() rowSelected = new EventEmitter(); + + @ViewChild('paragraphRef', { static: false }) paragraphRef!: ElementRef; @ViewChild("pagingComponent", { static: false }) pagingComponent!: PagingComponent @ViewChild(MatSort) sort; + static COLUMN_TYPE_POSITION: string = 'position'; + static COLUMN_TYPE_TEXT: string = 'text'; + static COLUMN_TYPE_IMAGE: string = 'image'; + static validColumnTypes: string[] = [ + SearchSelectComponent.COLUMN_TYPE_POSITION, + SearchSelectComponent.COLUMN_TYPE_TEXT, + SearchSelectComponent.COLUMN_TYPE_IMAGE + ]; + protected displayedColumns!: string[]; protected selectedRowIndex: number | null = null; + protected searchBoxOpen: boolean; + protected searchBoxInitialized: boolean; + protected searchBoxFilled: boolean; constructor() { this.sort = new MatSort(); + this.searchBoxOpen = false; + this.searchBoxInitialized = false; + this.searchBoxFilled = false; } ngOnInit(): void { @@ -47,11 +56,11 @@ export class SearchSelectComponent implements OnInit, AfterViewInit { } ngAfterViewInit(): void { - + // this.searchBoxOpen = false; } getData(): void { - this.pagingComponent.getData(); + } setData(dataSource: any, data: any[], dataLength: number): void { @@ -81,6 +90,9 @@ export class SearchSelectComponent implements OnInit, AfterViewInit { console.log(row, index); this.selectedRowIndex = index; this.documentForm.get(this.formId)?.setValue(row.id); + this.paragraphRef.nativeElement.textContent = row.fullName; + this.searchBoxFilled = true; + this.searchBoxOpen = false; } get COLUMN_TYPE_POSITION(): string { @@ -120,4 +132,21 @@ export class SearchSelectComponent implements OnInit, AfterViewInit { res.subResource = subResource return res; } + + openSearchBox() { + // if (this.paragraphRef.nativeElement.textContent !== '') { + this.searchBoxOpen = !this.searchBoxOpen; + if (this.searchBoxOpen && !this.searchBoxInitialized) { + this.pagingComponent.getData(); + this.searchBoxInitialized = true; + } + // } + } + + clearSearch() { + this.paragraphRef.nativeElement.textContent = ''; + this.searchBoxFilled = false; + this.documentForm.get(this.formId)?.setValue(undefined); + // this.searchBoxOpen = true; + } } diff --git a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html index e1a7bbf..9a2e629 100644 --- a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html +++ b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html @@ -33,7 +33,7 @@ {{ 'overview.logo' | translate }} - + - {{ element.name }} + {{ element.name }} diff --git a/matsen-tool/src/app/_views/products/product-list/product-list.component.html b/matsen-tool/src/app/_views/products/product-list/product-list.component.html index 36bfae1..1c1f89c 100644 --- a/matsen-tool/src/app/_views/products/product-list/product-list.component.html +++ b/matsen-tool/src/app/_views/products/product-list/product-list.component.html @@ -35,7 +35,7 @@ {{ 'overview.image' | translate }} - + - {{ element.name }} + {{ element.name }} diff --git a/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.html b/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.html index b6eae5f..8c02452 100644 --- a/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.html +++ b/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.html @@ -11,6 +11,7 @@
+ - +

{{ 'form.contact-type' | translate }}:

diff --git a/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.ts b/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.ts index fcb3eb6..a95ea8c 100644 --- a/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.ts +++ b/matsen-tool/src/app/_views/tasks/new-task-note/new-task-note.component.ts @@ -61,7 +61,7 @@ export class NewTaskNoteComponent implements OnInit, AfterViewInit { } ngAfterViewInit(): void { - this.contactSearchSelect.getData(); + } getContacts = (term?: string): void => { diff --git a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html index c3de6c2..33b7409 100644 --- a/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html +++ b/matsen-tool/src/app/_views/tasks/task-list/task-list.component.html @@ -104,7 +104,11 @@
-

{{ taskNote.owner?.firstName }} {{ taskNote.owner?.lastName }} - {{ getTranslationKey(taskNote.contactType) | translate }}

+

{{ taskNote.owner?.firstName }} {{ taskNote.owner?.lastName }} - {{ getTranslationKey(taskNote.contactType) | translate }} + + mit {{ taskNote.contact?.firstName }} {{ taskNote.contact?.lastName }} + +

{{ taskNote.createdAt | date:'dd.MM.YYYY - HH:mm':'GMT+0000' }} Uhr

diff --git a/matsen-tool/src/assets/scss/_basics.scss b/matsen-tool/src/assets/scss/_basics.scss index 3413068..d6d1411 100644 --- a/matsen-tool/src/assets/scss/_basics.scss +++ b/matsen-tool/src/assets/scss/_basics.scss @@ -340,3 +340,55 @@ img { box-shadow: 4px -100px rgba(255, 255, 255, 0), 8px -90px rgba(255, 255, 255, 0), 10px -120px rgba(255, 255, 255, 0), 15px -45px rgba(255, 255, 255, 0); } } + +.search-select { + table { + thead { + display: none; + } + img { + width: 30px; + } + } + .mat-mdc-paginator-range-actions { + justify-content: flex-end; + flex-wrap: wrap; + margin-right: -15px; + } + .mat-mdc-paginator-range-label { + text-align: right; + flex-basis: 100%; + flex-grow: 0; + margin: 0 7px 0 0; + } + .mat-mdc-icon-button.mat-mdc-button-base { + width: 30px; + height: 30px; + padding: 0px; + } + .mat-mdc-table .mdc-data-table__cell, + .mat-mdc-table .mdc-data-table__header-cell { + padding-top: 4px; + padding-bottom: 4px; + } + .spt-tools.single { + display: none; + } + .show-name { + position: relative; + p { + border: 1px solid #dee2e6; + padding: 6px 12px; + font-size: 16px; + line-height: 24px; + min-height: 38px; + cursor: text; + } + } + .search-toggle { + display: none; + } + .search-box-open { + display: block; + } +} \ No newline at end of file diff --git a/matsen-tool/src/assets/scss/_text.scss b/matsen-tool/src/assets/scss/_text.scss index 1616e10..38be516 100644 --- a/matsen-tool/src/assets/scss/_text.scss +++ b/matsen-tool/src/assets/scss/_text.scss @@ -95,6 +95,7 @@ dl, } .btn-link { color: $color-matsen; + cursor: pointer; @include transition(); &:hover { color: $color-matsen-dark;