Improve search page

This commit is contained in:
Peter Maquiran
2021-01-16 17:45:09 +01:00
parent cde236d4ca
commit 8c4fea8c92
11 changed files with 176 additions and 45 deletions
@@ -7,6 +7,10 @@ const routes: Routes = [
{
path: '',
component: SearchPage
},
{
path: 'sender',
loadChildren: () => import('./sender/sender.module').then( m => m.SenderPageModule)
}
];
+56 -33
View File
@@ -29,6 +29,62 @@
<ion-content class="main-content">
<!-- Advance search -->
<div class="advance-search" *ngIf="showAdvanceSearch">
<li class="d-flex date-container ion-justify-content-between">
<div class="icon">
<ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-document.svg"></ion-icon>
</div>
<div class="input-container d-flex ion-align-items-center">
<ion-datetime [(ngModel)]='searchDocumentDate' display-timezone="utc"></ion-datetime>
</div>
</li>
<!-- Sender -->
<li (click)="openAdvanceSearchSelection()" class="d-flex date-container ion-justify-content-between">
<div class="icon">
<ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-sender.svg"></ion-icon>
</div>
<div class="input-container d-flex ion-align-items-center">
<ion-input [(ngModel)]='searchSender' class="search-input" type="search" placeholder="Remetentes"></ion-input>
</div>
</li>
<!-- Organic entity -->
<li class="d-flex date-container ion-justify-content-between">
<div class="icon">
<ion-icon name="restaurant-outline" src="assets/images/icons-arrow-arrow-down-25-copy.svg"></ion-icon>
</div>
<div class="input-container d-flex ion-align-items-center">
<ion-input [(ngModel)]='searchOrganicEntiry' class="search-input" type="search" placeholder="Entidade Orgânica"></ion-input>
</div>
</li>
</div>
<ion-content>
<ion-slides pager="true" [options]="slideOpts">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
<ion-slide>
<h1>Slide 4</h1>
</ion-slide>
<ion-slide>
<h1>Slide 5</h1>
</ion-slide>
<ion-slide>
<h1>Slide 6</h1>
</ion-slide>
<ion-slide>
<h1>Slide 7</h1>
</ion-slide>
</ion-slides>
</ion-content>
<!-- search result categories-->
<div class="options">
<div class="container ion-justify-content-between ion-align-items-center">
@@ -86,36 +142,3 @@
</ion-content>
<div class="advance-search" *ngIf="showAdvanceSearch">
<li class="d-flex date-container ion-justify-content-between">
<div class="icon">
<ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-document.svg"></ion-icon>
</div>
<div class="input-container d-flex ion-align-items-center">
<ion-datetime [(ngModel)]='searchDocumentDate' display-timezone="utc"></ion-datetime>
</div>
</li>
<li class="d-flex subject-container ion-justify-content-between">
<div class="input-container d-flex ion-align-items-center">
<ion-input [(ngModel)]='advanceSearchSubject' class="search-input" type="search" placeholder="Asusnto"></ion-input>
</div>
</li>
<!-- Sender -->
<li class="d-flex date-container ion-justify-content-between">
<div class="icon">
<ion-icon name="restaurant-outline" src="assets/images/icons-advance-search-sender.svg"></ion-icon>
</div>
<div class="input-container d-flex ion-align-items-center">
<ion-input [(ngModel)]='searchSender' class="search-input" type="search" placeholder="Remetentes"></ion-input>
</div>
</li>
<!-- Organic entity -->
<li class="d-flex date-container ion-justify-content-between">
<div class="icon">
<ion-icon name="restaurant-outline" src="assets/images/icons-arrow-arrow-down-25-copy.svg"></ion-icon>
</div>
<div class="input-container d-flex ion-align-items-center">
<ion-input [(ngModel)]='searchOrganicEntiry' class="search-input" type="search" placeholder="Entidade Orgânica"></ion-input>
</div>
</li>
</div>
+2 -9
View File
@@ -232,15 +232,8 @@
/* Advance search */
.advance-search{
padding: 20px 20px;
padding-bottom: 10px;
width: 368px;
background-color: white;
position: absolute;
top: 100px;
left: 22px;
border-radius: 10px;
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.3);
margin-top: 20px;
padding-top: 14px;
.icon{
color: #797979;
width: 45px;
+23 -1
View File
@@ -6,6 +6,7 @@ import { SearchCategory } from "src/app/models/search-category";
import { SearchDocument } from "src/app/models/search-document";
import { formatDate } from '@angular/common';
import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
import { SenderPage } from 'src/app/pages/search/sender/sender.page';
@Component({
selector: 'app-search',
@@ -42,7 +43,15 @@ export class SearchPage implements OnInit {
{text: 'Weight-10-link', weight: 10, link: 'https://google.com', tooltip: 'display a tooltip'},
// ...
];
// See http://idangero.us/swiper/api/ for valid options.
slideOpts = {
slidesPerView: 3,
initialSlide: 0,
speed: 400,
height: '100px'
}
constructor(private modalController: ModalController,
private search: SearchService) {
@@ -128,4 +137,17 @@ export class SearchPage implements OnInit {
}
async openAdvanceSearchSelection() {
const modal = await this.modalController.create({
component: SenderPage,
cssClass: 'sender',
componentProps: {
}
});
return await modal.present();
}
}
@@ -0,0 +1,17 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SenderPage } from './sender.page';
const routes: Routes = [
{
path: '',
component: SenderPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SenderPageRoutingModule {}
@@ -0,0 +1,20 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { SenderPageRoutingModule } from './sender-routing.module';
import { SenderPage } from './sender.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SenderPageRoutingModule
],
declarations: [SenderPage]
})
export class SenderPageModule {}
@@ -0,0 +1,9 @@
<ion-header>
<ion-toolbar>
<ion-title (click)="close()">Remetentes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
@@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { SenderPage } from './sender.page';
describe('SenderPage', () => {
let component: SenderPage;
let fixture: ComponentFixture<SenderPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SenderPage ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(SenderPage);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,21 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-sender',
templateUrl: './sender.page.html',
styleUrls:
['./sender.page.scss'],
})
export class SenderPage implements OnInit {
constructor(private modalController:ModalController) { }
ngOnInit() {
}
close(){
this.modalController.dismiss();
}
}
-2
View File
@@ -24,6 +24,4 @@ export class HeaderPage implements OnInit {
return await modal.present();
}
}