Revize 443415f5

Feature #7724: Implementace architektury FE
- přidání search-box component

fe/fulltextsearch/src/app/app.module.ts

@@ -5 +5 @@
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
-import { SearchComponentComponent } from './components/shared-components/search-component/search-component.component';
 import { HomeComponent } from './components/pages/home/home.component';
 import { HeaderComponent } from './components/layout/header/header.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { SearchComponent } from './components/pages/search/search.component';
 import { BrowseComponent } from './components/pages/browse/browse.component';
 import { UploadComponent } from './components/pages/upload/upload.component';
 import { HelpComponent } from './components/pages/help/help.component';
-import {MatSelectModule} from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { SearchBoxComponent } from './components/shared-components/search-box/search-box.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    SearchComponentComponent,
     HomeComponent,
     HeaderComponent,
     SearchComponent,
     BrowseComponent,
     UploadComponent,
-    HelpComponent
+    HelpComponent,
+    SearchBoxComponent
   ],
   imports: [
     BrowserModule,

fe/fulltextsearch/src/app/components/pages/home/home.component.css

@@ -1 @@
-.test {
-  width: 80%;
-  height: 80%;
-  margin: 10%;
-  border: 3px solid grey;
-  padding: 10px;
+body {
+  background-image: url("../../../../assets/img/img1.jpg");
 }

fe/fulltextsearch/src/app/components/pages/home/home.component.html

@@ -1 @@
-<div class="test">
-  <h1 style="text-align: center">Hello in {{title}} frontend</h1>
-  <form #queryForm="ngForm" (ngSubmit)="sendQuery(queryForm.value)">
-    <span><b>Object query:</b> </span>{{ queryForm.value | json }}
-    <div class="input-group mb-3">
-      <input type="text" class="form-control" placeholder="Query" aria-describedby="basic-addon2" ngModel name="query">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary" type="submit">Search</button>
-      </div>
-    </div>
+<app-search-box></app-search-box>
 
-    <div class="form-group">
-      <label for="exampleFormControlTextarea1">Response:</label>
-      <textarea readonly class="form-control" id="exampleFormControlTextarea1" rows="10">{{response.response}}</textarea>
-    </div>
-  </form>
-</div>
-
-<!-- Routing -->
-<router-outlet></router-outlet>

fe/fulltextsearch/src/app/components/pages/home/home.component.ts

@@ -1 +1 @@
 import { Component, OnInit } from '@angular/core';
-import { QueryResponse } from "../../../model/QueryResponse";
-import { QueryService } from "../../../services/query.service";
-import { Query } from "../../../model/Query";
-
 
 @Component({
   selector: 'app-home',
@@ -10 +6 @@
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-  title = 'Fulltext search';
-  response: QueryResponse = new QueryResponse();
-
-  constructor(private queryService: QueryService) { }
-
-  sendQuery(temp: Query) {
-    console.log(temp);
-    temp.date = new Date();
-    this.queryService.sendQuery(temp).subscribe( response => {
-      this.response = response;
-    });
-  }
 
   ngOnInit() {
-
   }
 
 }

fe/fulltextsearch/src/app/components/shared-components/search-box/search-box.component.css

@@ +1 @@
+button {
+  font-weight: bold;
+  font-size: large;
+  background-color: var(--primary-color);
+  color: var(--search-text-color);
+  border-style: none;
+  border-radius: 0;
+  min-width: 80pt;
+}
+
+button:hover {
+  background-color: var(--primary-color-dark);
+}
+
+.input-group-text {
+  background-color: var(--search-background-color);
+  color: grey;
+  border-style: none;
+}
+
+.form-control {
+  height: 35pt;
+  border-style: none;
+}

fe/fulltextsearch/src/app/components/shared-components/search-box/search-box.component.html

@@ +1 @@
+<div class="container">
+
+  <div class="row justify-content-center align-items-center" style="height: 500px">
+
+    <div class="col-sm-10 col-md-8 col-lg-6">
+      <div class="input-group mb-3">
+        <div class="input-group-prepend">
+      <span class="input-group-text">
+        <mat-icon>search</mat-icon>
+      </span>
+        </div>
+        <input type="text" class="form-control" [(ngModel)]="expression" placeholder="Enter text to search..." aria-label="Search" aria-describedby="basic-addon2">
+        <div class="input-group-append">
+          <button class="btn btn-outline-secondary" type="button" (click)="onSubmit()">Search</button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</div>

fe/fulltextsearch/src/app/components/shared-components/search-box/search-box.component.spec.ts

@@ +1 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchBoxComponent } from './search-box.component';
+
+describe('SearchBoxComponent', () => {
+  let component: SearchBoxComponent;
+  let fixture: ComponentFixture<SearchBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

fe/fulltextsearch/src/app/components/shared-components/search-box/search-box.component.ts

@@ +1 @@
+import { Component, OnInit } from '@angular/core';
+import { SearchRequest } from '../../../model/SearchRequest';
+import { QueryService } from '../../../services/query.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-search-box',
+  templateUrl: './search-box.component.html',
+  styleUrls: ['./search-box.component.css']
+})
+export class SearchBoxComponent implements OnInit {
+  expression: string
+
+  constructor(private queryService: QueryService, private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  onSubmit() {
+    const searchRequest: SearchRequest = new SearchRequest(this.expression, new Date());
+
+    //TODO: naimplementovat searchPost
+    /*
+    this.queryService.searchPost(searchRequest).subscribe (() => {
+      //TODO: ulozit objekt SearchResponse[]
+      this.router.navigate(['/search']);
+    });
+    */
+  }
+
+}

fe/fulltextsearch/src/app/components/shared-components/search-component/search-component.component.html

@@ -1 @@
-<p>search-component works!</p>

fe/fulltextsearch/src/app/components/shared-components/search-component/search-component.component.spec.ts

@@ -1 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SearchComponentComponent } from './search-component.component';
-
-describe('SearchComponentComponent', () => {
-  let component: SearchComponentComponent;
-  let fixture: ComponentFixture<SearchComponentComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SearchComponentComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SearchComponentComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

fe/fulltextsearch/src/app/components/shared-components/search-component/search-component.component.ts

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-search-component',
-  templateUrl: './search-component.component.html',
-  styleUrls: ['./search-component.component.css']
-})
-export class SearchComponentComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

fe/fulltextsearch/src/app/model/SearchRequest.ts

@@ -1 +1 @@
 export class SearchRequest {
   public expression: string;
   public timestamp: Date;
+
+  constructor(expression: string, timestamp: Date) {
+    this.expression = expression;
+    this.timestamp = timestamp;
+  }
 }

fe/fulltextsearch/src/theme.css

@@ -2 +2 @@
 :root {
   --primary-color: #AD2624;
   --primary-color-dark: #932523;
+  --search-text-color: #ffffff;
+  --search-background-color: #ffffff;
   --navbar-text-color: #ffffff;
 }