Search page improvve

src/app/pages/events/events.page.ts

@@ -123,6 +123,13 @@ export class EventsPage implements OnInit {
     event.target.complete();
   }
 
+
+  sortArrayISODate(myArray: any){
+    return myArray.sort(function(a, b) {
+      return (a.Data < b.Data) ? -1 : ((a.Data > b.Data) ? 1 : 0);
+    });
+  }
+
   onSegmentChange(){
     this.RefreshEvents();
   }

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

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FilterPage } from './filter.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: FilterPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FilterPageRoutingModule {}

src/app/pages/search/filter/filter.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 { FilterPageRoutingModule } from './filter-routing.module';
+
+import { FilterPage } from './filter.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FilterPageRoutingModule
+  ],
+  declarations: [FilterPage]
+})
+export class FilterPageModule {}

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

@@ -0,0 +1,7 @@
+<ion-list>
+  <ion-list-header>Ionic</ion-list-header>
+  <button ion-item (click)="close()">Learn Ionic</button>
+  <button ion-item (click)="close()">Documentation</button>
+  <button ion-item (click)="close()">Showcase</button>
+  <button ion-item (click)="close()">GitHub Repo</button>
+</ion-list>

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FilterPage } from './filter.page';
+
+describe('FilterPage', () => {
+  let component: FilterPage;
+  let fixture: ComponentFixture<FilterPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FilterPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FilterPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-filter',
+  templateUrl: './filter.page.html',
+  styleUrls: ['./filter.page.scss'],
+})
+export class FilterPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

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

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

@@ -14,7 +14,7 @@
       </div>
     </div>
   </ion-form>
-  <!-- Advance search -->
+  <!--  search -->
   <div *ngIf="!showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="showHideAdvanceSearch(true)">
     <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
   </div>
@@ -29,81 +29,70 @@
 
 <ion-content class="main-content">
 
-    <!-- Advance search -->
+    <!-- Search drop down -->
     <div class="advance-search" *ngIf="showAdvanceSearch">
+      <!--  -->
       <li class="d-flex date-container ion-justify-content-between">
-        <div class="icon">
+        <div class="icon-mer 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 class="icon" (click)="clearInputDocumentDate()">
+            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+          </div>
         </div>
       </li>
       <!-- Sender -->
-      <li (click)="openAdvanceSearchSelection()" class="d-flex date-container ion-justify-content-between">
+      <li class="d-flex date-container ion-justify-content-between">
-        <div class="icon">
+        <div class="icon-mer 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>
+          <ion-input [(ngModel)]='searchSender' class="search-input" (click)="openAdvanceSearchSelection()" type="search" placeholder="Remetentes"></ion-input>
+          <div class="icon" (click)="clearInputRemetente()" >
+            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+          </div>
         </div>
       </li>
       <!-- Organic entity -->
       <li class="d-flex date-container ion-justify-content-between">
-        <div class="icon">
+        <div class="icon-mer 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 class="icon" (click)="clearInputOrganicEntity()" >
+            <ion-icon name="restaurant-outline" src="assets/images/icons-search-close.svg"></ion-icon>
+          </div>
         </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="options" *ngIf="showDocuments">
       <div class="container ion-justify-content-between ion-align-items-center">
         <div class="d-flex ion-justify-content-center ion-text-center">
-          <div *ngFor="let category of searchCategories" class="button">
+          <!-- SLIDE -->
+          <ion-slides class="slide" pager="false" [options]="slideOpts">
+            <ion-slide *ngFor="let category of searchCategories">
+              <div class="button" (click)="filterDocList(category.Name)">
                 <p>{{ category.Name }}</p>
                 <ion-label class="label">{{ category.Qtd }}</ion-label>
               </div>
+            </ion-slide>
+          </ion-slides>
         </div>
-        <div class="icon-z icon-most-searched-word-open">
+
+        <button class="icon-z icon-most-searched-word-open" ion-button icon-only >
           <ion-icon src="assets/images/icons-most-searched-words-open.svg" class="icon" slot="end"></ion-icon>
-        </div>
+        </button>
       </div>
 
     </div>
 
     <div class="d-flex ion-wrap word-searh-result-container">      
       <!-- most searched word-->
-
       <div class="most-searched-words" *ngIf="!showDocuments">
         <p class="title ion-text-center">Palavras mais pesquisadas</p>
 
@@ -122,7 +111,7 @@
           </div>
         </div>
         <ul>
-          <li *ngFor="let searchDocument of searchDocuments" class="d-flex">
+          <li *ngFor="let searchDocument of showSearchDocuments" class="d-flex">
             <div class="icon">
               <ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
             </div>
@@ -140,5 +129,3 @@
     </div>
 
 </ion-content>
-
-

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

@@ -39,6 +39,10 @@
   
 }
 
+ion-slide{
+  padding-top: 5px
+}
+
 // search result type
 .options{
   margin-top: 10px;
@@ -55,14 +59,22 @@
         margin: 0px 5px;
         margin-bottom: 10px;
         padding: 5px 20px;
+        height: 100%;
+        box-sizing: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
         p{
           padding: 0px;
           margin: 0px;
           font-family: Roboto;
           color: #0d89d1;
           font-size: 15px;
+          width: 100%;
         }
         .label{
+          width: 100%;
           font-family: Roboto;
           font-size: 13px;
           font-weight: 300;
@@ -256,8 +268,7 @@
     border: solid 1px #ebebeb;
   }
   .date-container{
-    .icon{
+    .icon-mer{
-
       margin-right: 10px;
     }
   }

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

@@ -7,7 +7,6 @@ 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',
   templateUrl: './search.page.html',
@@ -23,7 +22,10 @@ export class SearchPage implements OnInit {
   private searchDocTypeId: string;
 
   searchCategories: SearchCategory[];
+  showSearchDocuments: SearchDocument[];
+  showCategory: string;
   searchDocuments: SearchDocument[];
+
   showDocuments = false;
   showAdvanceSearch = false;
 
@@ -46,9 +48,6 @@ export class SearchPage implements OnInit {
     slidesPerView: 3,
     initialSlide: 0,
     speed: 400,
-    autoHeight: true,
-    calculateHeight:true,
-    height: 50
   }
 
   constructor(private modalController: ModalController,
@@ -63,17 +62,26 @@ export class SearchPage implements OnInit {
   }
 
 
+  sortArrayISODate(myArray: any){
+    return myArray.sort(function(a, b) {
+      return (a.Data < b.Data) ? -1 : ((a.Data > b.Data) ? 1 : 0);
+    });
+  }
+
   /**
    * @description Basic search
    */
    basicSearch(){
 
+      console.log(this.searchDocumentDate);
+
       this.search.basicSearch(this.searchSubject, this.searchDocumentDate, this.searchSender
         ,this.searchOrganicEntiry, this.searchDocTypeId).subscribe(res=>{
         
         // bind respose
         this.searchCategories = res.Categories;
-        this.searchDocuments = res.Documents;
+        this.searchDocuments = this.sortArrayISODate(res.Documents);
+        this.showSearchDocuments = this.sortArrayISODate(this.searchDocuments);
 
         // hide show document
         if(this.searchDocuments.length >= 1){
@@ -82,7 +90,6 @@ export class SearchPage implements OnInit {
           this.showDocuments = false
         }
       
-
       });
    }
 
@@ -103,12 +110,24 @@ export class SearchPage implements OnInit {
     return formatDate(date, 'dd/MM/yyyy', 'pt');
   }
 
+
+  clearInputRemetente(){
+    this.searchSender = "";
+  }
+
+  clearInputDocumentDate(){
+    this.searchDocumentDate = "";
+  }
+
+  clearInputOrganicEntity(){
+    this.searchOrganicEntiry = "";
+  }
+
   /**
    * @description Clean inputs
    */
   showHideAdvanceSearch(show:boolean) {
     this.showAdvanceSearch = show;
-    
     /* Clear inputs */
     this.searchDocumentDate = "";
     this.searchSender = "";
@@ -117,7 +136,6 @@ export class SearchPage implements OnInit {
     this.searchSubject = "";
   }
 
-
   async openAdvanceSearchSelection() {
 
     const modal = await this.modalController.create({
@@ -131,4 +149,17 @@ export class SearchPage implements OnInit {
 
   }
 
+  async filterDocList(categoryName:string){
+    
+    // show all category
+    if(this. showCategory == categoryName ){
+      
+      this.showSearchDocuments = this.searchDocuments;
+
+    } else { // filter category
+      this.showSearchDocuments = this.searchDocuments.filter((e) => e.DocTypeDesc == categoryName);
+    }
+
+    this.showCategory = categoryName;
+  }
 }