feat: add search box

frontend/build.gradle

@@ -17,6 +17,10 @@
 group = 'ch.xxx'
 version = '0.0.1-SNAPSHOT'
 
+java {
+	sourceCompatibility = '21'
+}
+
 task cleanAngular {
 	if(project.hasProperty('withAngular')) {	
 		logger.info('Task cleanAngular')	

frontend/src/angular/src/app/doc-search/doc-search.component.html

@@ -14,3 +14,14 @@
     </div>
   </div>
 </mat-toolbar>
+	<div class="search-bar">
+		<mat-form-field class="example-full-width">
+  			<mat-label i18n="@@search">Search</mat-label>
+  			<textarea matInput [(ngModel)]="searchValue"></textarea>
+		</mat-form-field>
+		<div class="search-button-box">
+		<button mat-flat-button color="primary" (click)="search()" i18n="@@search">
+        	Search
+      	</button>
+      	</div>	
+	</div>

frontend/src/angular/src/app/doc-search/doc-search.component.scss

@@ -25,6 +25,20 @@
   flex: 1 1 auto;
 }
 
+.example-full-width {
+  width: 100%;
+}
+
+.search-bar {
+	display: flex;
+	width: 100%;
+	align-items: center;
+}
+
+.search-button-box {
+	margin: 10px;
+}
+
 .contact-list {
   width: 300px;
   overflow-x: hidden;

frontend/src/angular/src/app/doc-search/doc-search.component.spec.ts

@@ -1,7 +1,19 @@
+/**
+ *    Copyright 2023 Sven Loesekann
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+       http://www.apache.org/licenses/LICENSE-2.0
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DocSearchComponent } from './doc-search.component';
-
+/*
 describe('DocSearchComponent', () => {
   let component: DocSearchComponent;
   let fixture: ComponentFixture<DocSearchComponent>;
@@ -19,3 +31,4 @@ describe('DocSearchComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+*/

frontend/src/angular/src/app/doc-search/doc-search.component.ts

@@ -15,22 +15,31 @@ import { CommonModule } from '@angular/common';
 import {MatToolbarModule} from '@angular/material/toolbar'; 
 import {MatButtonModule} from '@angular/material/button';
 import {MatTableModule} from '@angular/material/table';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {FormsModule} from '@angular/forms';
 import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-doc-search',
   standalone: true,
-  imports: [CommonModule,MatToolbarModule,MatButtonModule,MatTableModule],
+  imports: [CommonModule,MatToolbarModule,MatButtonModule,MatTableModule,MatInputModule,MatFormFieldModule,FormsModule],
   templateUrl: './doc-search.component.html',
   styleUrls: ['./doc-search.component.scss']
 })
 export class DocSearchComponent {        
+	protected searchValue = '';
+
     constructor(private destroyRef: DestroyRef, private router: Router) { }
 
 	protected showList(): void {
 		this.router.navigate(['/doclist']);
 	}
 
+	protected search(): void {
+		console.log(this.searchValue);
+	}
+
 	protected logout(): void {
 		console.log('logout');
 	}