feat: doc search

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

@@ -1 +1,16 @@
-<p>doc-search works!</p>
+<mat-toolbar color="primary" class="custom-toolbar">
+  <div class="toolbar-content">
+    <div i18n="@@doclistHeading">Document Search</div>
+    <div class="example-fill-remaining-space"></div>
+    <div>
+      <button mat-flat-button color="primary" (click)="showList()" i18n="@@list">
+        List
+      </button>
+    </div>
+    <div>
+      <button mat-flat-button color="primary" (click)="logout()" i18n="@@logout">
+        Logout
+      </button>
+    </div>
+  </div>
+</mat-toolbar>

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

@@ -0,0 +1,47 @@
+/**
+ *    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.
+ */
+
+.toolbar-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 100%;
+}
+
+.example-fill-remaining-space {
+  // This fills the remaining space, by using flexbox.
+  // Every toolbar row uses a flexbox row layout.
+  flex: 1 1 auto;
+}
+
+.contact-list {
+  width: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.table {
+	width: 100%;
+}
+
+@media (max-width: 900px), (max-height: 480px) {
+  .custom-toolbar {
+    height: fit-content;
+    overflow: hidden;
+  }
+  .icon-bar {
+    justify-content: space-between;
+    width: 60%;
+  }
+}

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

@@ -1,13 +1,37 @@
-import { Component } from '@angular/core';
+/**
+ *    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 { Component, DestroyRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {MatToolbarModule} from '@angular/material/toolbar'; 
+import {MatButtonModule} from '@angular/material/button';
+import {MatTableModule} from '@angular/material/table';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-doc-search',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule,MatToolbarModule,MatButtonModule,MatTableModule],
   templateUrl: './doc-search.component.html',
   styleUrls: ['./doc-search.component.scss']
 })
-export class DocSearchComponent {
-
+export class DocSearchComponent {        
+    constructor(private destroyRef: DestroyRef, private router: Router) { }
+
+	protected showList(): void {
+		this.router.navigate(['/doclist']);
+	}
+
+	protected logout(): void {
+		console.log('logout');
+	}
 }