Improve search page

src/app/pages/search/search-routing.module.ts

@@ -7,6 +7,10 @@ const routes: Routes = [
   {
     path: '',
     component: SearchPage
+  },
+  {
+    path: 'sender',
+    loadChildren: () => import('./sender/sender.module').then( m => m.SenderPageModule)
   }
 ];
 

src/app/pages/search/search.page.html

@@ -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>

src/app/pages/search/search.page.scss

@@ -232,15 +232,8 @@
 /* Advance search */
 .advance-search{
   padding: 20px 20px;
-  padding-bottom: 10px;
+  padding-top: 14px;
-  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;
   .icon{
     color: #797979;
     width: 45px;

src/app/pages/search/search.page.ts

@@ -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();
+
+  }
+
 }

src/app/pages/search/sender/sender-routing.module.ts

@@ -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 {}

src/app/pages/search/sender/sender.module.ts

@@ -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 {}

src/app/pages/search/sender/sender.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title (click)="close()">Remetentes</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/pages/search/sender/sender.page.spec.ts

@@ -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();
+  });
+});

src/app/pages/search/sender/sender.page.ts

@@ -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();
+  }
+
+}

src/app/shared/header/header.page.ts

@@ -24,6 +24,4 @@ export class HeaderPage implements OnInit {
     return await modal.present();
   }
 
-  
-
 }