peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-21 13:55:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add search in header

Browse Source
This commit is contained in:
Peter Maquiran
2021-03-05 14:54:10 +01:00
parent b5990cf56f
commit 24269fa4d5
7 changed files with 107 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/search/search.page.html
+4 -4
View File
@@ -4,7 +4,7 @@
<div class="d-flex ion-justify-content-between">
<ion-progress-bar type="indeterminate" class="loader" *ngIf="showLoader"></ion-progress-bar>
<ion-form>
<div class="d-flex search-input-container ion-justify-content-between" >
<div class="d-md-none d-flex search-input-container ion-justify-content-between" >
<div class="icon" (click)="basicSearch()">
<ion-icon class="icon-z" slot="end" name="search"></ion-icon>
</div>
@@ -30,7 +30,7 @@
</div>
<!-- Search drop down -->
<div class="advance-search" *ngIf="showAdvanceSearch">
<div class="advance-search pa-0 pt-10" *ngIf="showAdvanceSearch">
<!-- -->
<li class="d-flex date-container ion-justify-content-between">
<div class="icon-mer icon">
@@ -101,13 +101,13 @@
<div style="height: calc(100% - 0px)">
<div class="d-flex seach-wrapper height-100 flex-row justify-space-between">
<div class="d-flex ion-wrap height-100 flex-1" *ngIf="!showDocuments || windowWidth >= 1024"
<div class="d-flex height-100 flex-1" *ngIf="!showDocuments || windowWidth >= 1024"
style="border-right: 1px solid #ddd7d7;">
<!-- most searched word-->
<div class="most-searched-words height-100">
<p class="title ion-text-center">Palavras mais pesquisadas</p>
<div class="most-searched-word-container">
<div class="most-searched-word-container overflow-y-auto">
</div>
</div>
</div>
src/app/pages/search/search.page.ts
+7
View File
@@ -64,6 +64,13 @@ export class SearchPage implements OnInit {
this.windowWidth = window.innerWidth
window['dynamicSearch'] = (search:string) =>{
this.searchSubject = search;
}
window['searchTriger'] = () =>{
this.basicSearch();
}
}
wordCloud(){
src/app/shared/header/header.page.html
+16 -2
View File
@@ -52,8 +52,22 @@
</div>
<div class="d-flex">
<div (click)="openSearch()" class="mr-10">
<ion-icon class="font-45" src='assets/images/icons-search.svg'></ion-icon>
<div class="mr-10 d-flex align-center">
<ion-icon *ngIf="!showSearch" (click)="showSearch=true" class="font-45" (click)="openSearch()" src='assets/images/icons-search.svg'></ion-icon>
<ion-icon *ngIf="showSearch" (click)="closeSearch()" (click)="showSearch=false" class="font-40" name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
<ion-form *ngIf="showSearch">
<div class="d-flex search-input-container ml-10 justify-between" *ngIf="showSearch" >
<div class="icon" (click)="basicSearch()">
<ion-icon class="icon-z" slot="end" name="search"></ion-icon>
</div>
<div class="input-text d-flex ion-align-items-center">
<ion-input [(ngModel)]='searchSubject' (ngModelChange)="dynamicSearch($event)" class="search-input text-black" type="search" placeholder="Pesquisar"></ion-input>
</div>
<div class="icon" (click)="clearSearchInput()">
<ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
</div>
</div>
</ion-form>
</div>
<div class="div-profile justify-end d-flex" (click)="openProfile()">
src/app/shared/header/header.page.scss
+22
View File
@@ -40,4 +40,26 @@
.active{
border-top: 7px solid white;
}
.search-input-container{
background-color: white;
border-radius: 27.5px;
border: solid 1px #ebebeb;
.icon{
color: #797979;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
font-size: 25px;
align-items: center;
}
.input-text{
width: 100%;
}
.icon-z{
width: 20px;
}
}
src/app/shared/header/header.page.ts
+25 -3
View File
@@ -12,6 +12,8 @@ import { ProfileComponent } from '../headers/header-no-search/profile/profile.co
export class HeaderPage implements OnInit {
profile: string = 'mdgpr';
searchSubject: string = '';
showSearch:false;
constructor(
private router: Router,private modalController: ModalController,
@@ -33,7 +35,7 @@ export class HeaderPage implements OnInit {
async openSearch() {
const modal = await this.modalController.create({
component: SearchPage,
cssClass: 'group-messages modal-desktop',
cssClass: 'group-messages modal-desktop search-modal search-modal-to-desktop',
componentProps: {
}
});
@@ -45,7 +47,6 @@ export class HeaderPage implements OnInit {
}
async openProfile() {
const enterAnimation = (baseEl: any) => {
@@ -83,5 +84,26 @@ export class HeaderPage implements OnInit {
return await modal.present();
}
}
async dynamicSearch(){
console.log('dynamic')
window['dynamicSearch'](this.searchSubject)
}
async closeSearch(){
document.querySelectorAll('.search-modal').forEach((e)=>e.remove())
}
/**
* @description set empty value to searchSubject
*/
clearSearchInput(){
this.searchSubject = "";
window['dynamicSearch'](this.searchSubject)
}
async basicSearch(){
window['searchTriger']()
}
}