From b3a52f6a4bd3a16a5349534b7a78b9a76c6298d8 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Fri, 30 Aug 2024 09:52:00 +0200 Subject: [PATCH] Extract search bar into a standalone component and fix header design. --- .../components/header/header.component.html | 17 ++--- .../components/header/header.component.scss | 67 +++++++------------ .../app/components/header/header.component.ts | 20 +++++- .../publications-search-bar.component.html | 6 ++ .../publications-search-bar.component.scss | 37 ++++++++++ .../publications-search-bar.component.ts | 31 +++++++++ .../publications-search-bar.service.ts | 18 +++++ 7 files changed, 141 insertions(+), 55 deletions(-) create mode 100644 frontend/src/app/components/publications-search-bar/publications-search-bar.component.html create mode 100644 frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss create mode 100644 frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts create mode 100644 frontend/src/app/components/publications-search-bar/publications-search-bar.service.ts diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html index 8ddb50f..df0f00c 100644 --- a/frontend/src/app/components/header/header.component.html +++ b/frontend/src/app/components/header/header.component.html @@ -1,5 +1,5 @@ -
- @@ -7,15 +7,12 @@ Codiki
-
-
- - -
+ +
+
-
+ +
Disconnect diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss index fd7532a..ab8db28 100644 --- a/frontend/src/app/components/header/header.component.scss +++ b/frontend/src/app/components/header/header.component.scss @@ -14,15 +14,17 @@ $headerHeight: 3.5em; display: flex; flex-direction: row; justify-content: center; + position: relative; height: $headerHeight; - &:nth-child(1) { + &.left { position: absolute; top: 0; left: 0; align-items: center; gap: 1em; padding: 0 1em; + z-index: 2; button { background-color: #3f51b5; @@ -70,79 +72,56 @@ $headerHeight: 3.5em; } } - &:nth-child(2) { + &.middle { flex: 1; + $borderRadiusValue: 10em; + position: relative; + transition: max-width .2s ease-in-out; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; - .search-bar { - flex: 1; - $borderRadiusValue: 10em; - position: relative; + app-publications-search-bar { + width: 100%; max-width: 12em; - transition: max-width .2s ease-in-out; - + @media screen and (min-width: 435px) { max-width: 16em; } - + @media screen and (min-width: 500px) { max-width: 20em; } - + @media screen and (min-width: 700px) { max-width: 24em; } - + @media screen and (min-width: 800px) { max-width: 32em; } - + @media screen and (min-width: 900px) { max-width: 38em; } - + @media screen and (min-width: 1000px) { max-width: 45em; } - + @media screen and (min-width: 1100px) { max-width: 50em; } - - input { - flex: 1; - width: 60%; - max-width: 50em; - border-radius: $borderRadiusValue; - background-color: white; - border: solid 1px #ddd; - padding: .2em 2.7em .2em 1em; - height: 2em; - } - - button { - position: absolute; - display: flex; - align-items: center; - border-radius: $borderRadiusValue; - background-color: white; - border: none; - margin: .5em 0; - right: 1.1em; - color: #aaaaaa; - - &:hover { - background-color: #eee; - cursor: pointer; - } - } } } - &:nth-child(3) { + &.right { position: absolute; top: 0; right: 0; - + z-index: 2; + a { display: flex; justify-content: center; diff --git a/frontend/src/app/components/header/header.component.ts b/frontend/src/app/components/header/header.component.ts index a12dacb..95ef6ef 100644 --- a/frontend/src/app/components/header/header.component.ts +++ b/frontend/src/app/components/header/header.component.ts @@ -6,18 +6,36 @@ import { AuthenticationService } from '../../core/service/authentication.service import { CommonModule } from '@angular/common'; import { SideMenuComponent } from '../side-menu/side-menu.component'; import { MatRippleModule } from '@angular/material/core'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { PublicationsSearchBarComponent } from '../publications-search-bar/publications-search-bar.component'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ selector: 'app-header', standalone: true, - imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule, SideMenuComponent, MatRippleModule], + imports: [ + CommonModule, + MatButtonModule, + MatIconModule, + RouterModule, + SideMenuComponent, + MatRippleModule, + ReactiveFormsModule, + PublicationsSearchBarComponent, + MatTooltipModule + ], templateUrl: './header.component.html', styleUrl: './header.component.scss', }) export class HeaderComponent { private authenticationService = inject(AuthenticationService); + searchControl = new FormControl(''); get isAuthenticated(): boolean { return this.authenticationService.isAuthenticated(); } + + searchPublications(): void { + + } } diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.html b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.html new file mode 100644 index 0000000..6a89b0b --- /dev/null +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.html @@ -0,0 +1,6 @@ +
+ + +
\ No newline at end of file diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss new file mode 100644 index 0000000..72b9a11 --- /dev/null +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss @@ -0,0 +1,37 @@ +:host { + $borderRadiusValue: 10em; + position: relative; + flex-direction: row; + align-items: center; + + form { + display: flex; + + input { + flex: 1; + border-radius: $borderRadiusValue; + background-color: white; + border: solid 1px #ddd; + padding: .2em 2.7em .2em 1em; + height: 2em; + width: 100%; + } + + button { + position: absolute; + display: flex; + align-items: center; + border-radius: $borderRadiusValue; + background-color: white; + border: none; + top: .4em; + right: 0; + color: #aaaaaa; + + &:hover { + background-color: #eee; + cursor: pointer; + } + } + } +} \ No newline at end of file diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts new file mode 100644 index 0000000..ec362a6 --- /dev/null +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts @@ -0,0 +1,31 @@ +import { HttpParams } from "@angular/common/http"; +import { Component, inject } from "@angular/core"; +import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; +import { MatIconModule } from "@angular/material/icon"; +import { Router } from "@angular/router"; + + +@Component({ + selector: 'app-publications-search-bar', + templateUrl: './publications-search-bar.component.html', + styleUrl: './publications-search-bar.component.scss', + standalone: true, + imports: [ + ReactiveFormsModule, + MatIconModule + ], + providers: [] +}) +export class PublicationsSearchBarComponent { + private formBuilder = inject(FormBuilder); + private router = inject(Router); + formGroup = this.formBuilder.group({ + criteria: new FormControl('', [Validators.required]) + }); + + searchPublications(): void { + let queryParams = new HttpParams(); + queryParams = queryParams.set('query', this.formGroup.controls.criteria.value ?? ''); + this.router.navigate(['/publications'], {queryParams}); + } +} \ No newline at end of file diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.service.ts b/frontend/src/app/components/publications-search-bar/publications-search-bar.service.ts new file mode 100644 index 0000000..af06724 --- /dev/null +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.service.ts @@ -0,0 +1,18 @@ +import { HttpParams } from "@angular/common/http"; +import { inject, Injectable } from "@angular/core"; +import { Router } from "@angular/router"; +import { BehaviorSubject } from "rxjs"; + +@Injectable() +export class PublicationsSearchBarService { + private router = inject(Router); + private criteriaSubject = new BehaviorSubject(''); + + private cri + + searchPublications(): void { + let queryParams = new HttpParams(); + queryParams = queryParams.set('query', this.criteriaSubject.value); + this.router.navigate(['/publications'], {queryParams}); + } +} \ No newline at end of file