feat: add header

Angular2Guy · May 6, 2024 · 64ddea7 · 64ddea7
1 parent 0215aa9
commit 64ddea7
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 3 deletions.
diff --git a/frontend/src/angular/i18n/messages.de.json b/frontend/src/angular/i18n/messages.de.json
@@ -27,7 +27,7 @@
     "link": " Link: {$START_LINK}{$INTERPOLATION}{$CLOSE_LINK}",
     "docSearchOtherDocuments": "Other Documents:",
     "functionSearchHeading": "Function Search",
-    "imagequeryHeading": "Image description",
+    "imageQueryHeading": "Image Query",
     "imagequeryQuery": "Image query",
     "tableSearchHeading": "Table Search",
     "tableSearchDataImport": "A new DB instance needs a data import first.",

diff --git a/frontend/src/angular/src/app/image-query/image-query.component.html b/frontend/src/angular/src/app/image-query/image-query.component.html
@@ -1,5 +1,30 @@
+<mat-toolbar color="primary" class="custom-toolbar">
+  <div class="toolbar-content">
+    <div i18n="@@imageQueryHeading">Image Query</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>
 <div>
-<h1 i18n="@@imagequeryHeading">Image description</h1>
 <form [formGroup]="imageForm">
  @if(uploading) {
   <div class="upload-spinner"><mat-spinner></mat-spinner></div>

diff --git a/frontend/src/angular/src/app/image-query/image-query.component.scss b/frontend/src/angular/src/app/image-query/image-query.component.scss
@@ -10,6 +10,31 @@
    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;
+}
+
+.example-full-width {
+  width: 100%;
+}
+
+.search-bar {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+
  .example-full-width {
   width: 100%;
 }

diff --git a/frontend/src/angular/src/app/image-query/image-query.component.ts b/frontend/src/angular/src/app/image-query/image-query.component.ts
@@ -21,11 +21,12 @@ import { ImageService } from '../service/image.service';
 import { ImageFile } from '../model/image-file';
 import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
   selector: 'app-image-query',
   standalone: true,
-  imports: [CommonModule, MatProgressSpinnerModule, MatInputModule,MatButtonModule,ReactiveFormsModule],
+  imports: [CommonModule, MatProgressSpinnerModule, MatInputModule,MatButtonModule,ReactiveFormsModule,MatToolbarModule],
   templateUrl: './image-query.component.html',
   styleUrl: './image-query.component.scss'
 })
@@ -83,6 +84,14 @@ export class ImageQueryComponent {
 	}
   }
 
+  	protected showList(): void {
+		this.router.navigate(['/doclist']);
+	}
+
+  protected logout(): void {
+	console.log('logout');
+  }
+
   protected cancel(): void {
 	this.router.navigate(['/']);
   }