Improve search page

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

@@ -8,12 +8,14 @@ import { SearchPageRoutingModule } from './search-routing.module';
 
 import { SearchPage } from './search.page';
 /* import { ComponentsModule } from 'src/app/components/components.module'; */
+import { TagCloudModule } from 'angular-tag-cloud-module';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    TagCloudModule,
     /* ComponentsModule, */
     SearchPageRoutingModule
   ],

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

@@ -14,15 +14,20 @@
       </div>
     </div>
   </ion-form>
-  <div class="icon-z icon-most-searched-word-open">
+  <!-- Advance 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>
+  <div *ngIf="showAdvanceSearch" class="icon-z icon-most-searched-word-open" (click)="advanceSearch()" >
+    <ion-icon src="assets/images/advance-search-show-modal.svg"  class="icon" slot="end"></ion-icon>
+  </div>
+
   <div class="profile">
     <ion-icon class="icon" src="assets/images/icons-profile.svg"></ion-icon>
   </div>
 </ion-header>
 
-<ion-content class="content">
+<ion-content class="main-content">
 
     <!-- search result categories-->
     <div class="options">
@@ -45,6 +50,7 @@
 
       <div class="most-searched-words" *ngIf="!showDocuments">
         <p class="title ion-text-center">Palavras mais pesquisadas</p>
+
       </div>
       
       <!-- search result document-->
@@ -78,3 +84,38 @@
     </div>
 
 </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

@@ -227,3 +227,47 @@
   
 
 }
+
+
+/* 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;
+  .icon{
+    color: #797979;
+    width: 45px;
+    height: 45px;
+    display: flex;
+    justify-content: center;
+    font-size: 25px;
+    align-items: center;
+  }
+  .input-container{
+    margin-bottom: 15px;
+    width: 100%;
+    border-radius: 5px;
+    border: solid 1px #ebebeb;
+  }
+  .date-container{
+    .icon{
+
+      margin-right: 10px;
+    }
+  }
+
+  ion-datetime{
+    width: 100%;
+  }
+  
+  .subject-container{
+
+  }
+}

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

@@ -5,6 +5,8 @@ import { SearchService } from "../../services/search.service";
 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';
+
 @Component({
   selector: 'app-search',
   templateUrl: './search.page.html',
@@ -14,18 +16,36 @@ export class SearchPage implements OnInit {
 
   // https params
   private searchSubject: string;
-  private searchDate: string;
+  private advanceSearchSubject: string;
+  private searchDocumentDate: string;
   private searchSender: string;
   private searchOrganicEntiry: string;
   private searchDocTypeId: string;
 
   searchCategories: SearchCategory[];
   searchDocuments: SearchDocument[];
-  showDocuments: boolean;
+  showDocuments = false;
+  showAdvanceSearch = false;
+
+
+
+  options: CloudOptions = {
+    // if width is between 0 and 1 it will be set to the width of the upper element multiplied by the value
+    width: 1000,
+    // if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value
+    height: 400,
+    overflow: false,
+  };
+ 
+  data: CloudData[] = [
+    {text: 'Weight-8-link-color', weight: 8, link: 'https://google.com', color: '#ffaaee'},
+    {text: 'Weight-10-link', weight: 10, link: 'https://google.com', tooltip: 'display a tooltip'},
+    // ...
+  ];
   
   constructor(private modalController: ModalController,
     private search: SearchService) {
-      this.showDocuments = false;
+
     }
 
   ngOnInit() {
@@ -35,12 +55,30 @@ export class SearchPage implements OnInit {
   }
 
   /**
-   * @description get respose from the server
+   * @description Basic search
    */
    basicSearch(){
       // search in API
 
-      this.search.basicSearch(this.searchSubject, this.searchDate, this.searchSender
+      this.search.basicSearch(this.searchSubject, "", "", "", "").subscribe(res=>{
+        
+        // bind respose
+        this.searchCategories = res.Categories;
+        this.searchDocuments = res.Documents;
+
+        // hide show document
+        if(this.searchDocuments.length >= 1){
+          this.showDocuments = true;  
+        } else {
+          this.showDocuments = false
+        }
+      
+      });
+   }
+
+   advanceSearch(){
+
+      this.search.basicSearch(this.advanceSearchSubject, this.searchDocumentDate, this.searchSender
         ,this.searchOrganicEntiry, this.searchDocTypeId).subscribe(res=>{
         
         // bind respose
@@ -75,4 +113,19 @@ export class SearchPage implements OnInit {
     return formatDate(date, 'dd/MM/yyyy', 'pt');
   }
 
+  /**
+   * @description Clean inputs
+   */
+  showHideAdvanceSearch(show:boolean) {
+    this.showAdvanceSearch = show;
+    
+    /* Clear inputs */
+    this.searchDocumentDate = "";
+    this.searchSender = "";
+    this.searchOrganicEntiry = "";
+    this.searchDocTypeId = "";
+    this.advanceSearchSubject = "";
+  }
+
+
 }