Improve search page

package-lock.json

@@ -3328,6 +3328,21 @@
         "semver": "^5.4.1"
       }
     },
+    "angular-tag-cloud-module": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/angular-tag-cloud-module/-/angular-tag-cloud-module-5.2.0.tgz",
+      "integrity": "sha512-F89pvDWmpy4VHMhw1CN5kSwiGjGhBIXS4ektJZraJTBwjxCf9GsTNiw0mjcMWpuqEIxccxcaN3kIx+Z+wvoV3Q==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "ansi": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.1.tgz",

package.json

@@ -36,6 +36,7 @@
     "@ionic/pwa-elements": "^3.0.1",
     "@ionic/storage": "^2.3.1",
     "@logisticinfotech/ionic4-datepicker": "^1.4.4",
+    "angular-tag-cloud-module": "^5.2.0",
     "axios": "^0.19.2",
     "cordova-ios": "6.1.0",
     "cordova-plugin-camera": "^5.0.1",

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

@@ -131,6 +131,8 @@ export class EventsPage implements OnInit {
         if(this.profile == "mdgpr"){
           this.eventService.getAllMdEvents(formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss', 'pt') /* + ' 00:00:00' */, formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
             this.eventsList = res;
+            console.log(res)
+            console.log(res[0])
             this.currentEvent = res[0].Subject;
             this.totalEvent = this.eventsList.length;
             this.showLoader = false;
@@ -139,6 +141,8 @@ export class EventsPage implements OnInit {
           this.eventService.getAllPrEvents(formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 00:00:00', formatDate(new Date(), 'yyyy-MM-dd', 'pt') + ' 23:59:59').subscribe(res => {
               this.eventsList = res;
               console.log(this.eventsList);
+              console.log(res)
+              console.log(res[0])
               this.currentEvent = res[0].Subject;
               this.totalEvent = this.eventsList.length;
               this.showLoader = false;

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 = "";
+  }
+
+
 }

src/assets/images/advance-search-show-modal.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-337 -26) translate(337 26)">
+                <circle cx="22.5" cy="22.5" r="22.5" fill="#FFB703"/>
+                <g>
+                    <g stroke="#061B52" stroke-width="2" transform="translate(11 11) translate(6)">
+                        <circle cx="7.714" cy="7.714" r="6.714"/>
+                        <path stroke-linecap="round" d="M12.857 12.857L17.357 17.357"/>
+                    </g>
+                    <g fill="#061B52" transform="translate(11 11) translate(.857 15.857)">
+                        <rect width="2" height="8" x="3" rx="1"/>
+                        <rect width="8" height="2" y="3" rx="1"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/icons-advance-search-document.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+    <defs>
+        <filter id="up2p1o8sza">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g filter="url(#up2p1o8sza)" transform="translate(-46 -105) translate(16 64) translate(20 31)">
+                    <g>
+                        <g stroke="#42B9FE" stroke-width="2" transform="translate(10 10) translate(5 5)">
+                            <rect width="14" height="15" rx="2"/>
+                            <path d="M1 5H14V6H1zM10 8H11V9H10zM7 8H8V9H7zM7 11H8V12H7zM10 11H11V12H10zM4 8H5V9H4zM4 11H5V12H4z"/>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/icons-advance-search-sender.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+    <defs>
+        <filter id="pug9jz8f1a">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g>
+            <g>
+                <g filter="url(#pug9jz8f1a)" transform="translate(-46 -225) translate(16 64) translate(20 151)">
+                    <g>
+                        <path stroke="#42B9FE" stroke-width="2" d="M12.5 4C14.985 4 17 6.015 17 8.5c0 1.42-.658 2.687-1.685 3.511 2.903 1.13 4.963 3.952 4.963 7.257 0 4.296-15.556 4.296-15.556 0 0-3.305 2.06-6.128 4.967-7.255C8.658 11.187 8 9.92 8 8.5 8 6.015 10.015 4 12.5 4z" transform="translate(10 10)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/images/icons-arrow-arrow-down-25-copy.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+    <defs>
+        <filter id="mwy495cifa">
+            <feColorMatrix in="SourceGraphic" values="0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 0 0.476308 0 0 0 1.000000 0"/>
+        </filter>
+    </defs>
+    <g fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g>
+            <g>
+                <g filter="url(#mwy495cifa)" transform="translate(-46 -285) translate(16 64) translate(20 211)">
+                    <g stroke="#42B9FE" stroke-width="2">
+                        <path d="M13 10c-1.657 0-3 1.343-3 3 0 .88.379 1.671.982 2.22C8.683 15.895 7 18.074 7 20.657c0 3.124 11 3.124 11 0 0-2.32-1.358-4.314-3.3-5.186.785-.54 1.3-1.445 1.3-2.471 0-1.657-1.343-3-3-3z" transform="translate(10 10)"/>
+                        <path stroke-linecap="round" d="M11 3.563C10.426 2.624 9.407 2 8.246 2 6.453 2 5 3.487 5 5.322v.064c0 1.06.743 2.506 1.5 3.114M5.622 15C4.094 14.632 3 13.983 3 13.053c0-2.31 1.346-3.707 3.5-4.553M14 3.563C14.574 2.624 15.593 2 16.754 2 18.547 2 20 3.487 20 5.322v.064c0 1.06-.743 2.506-1.5 3.114m.878 6.5C20.906 14.632 22 13.983 22 13.053c0-2.31-1.346-3.707-3.5-4.553" transform="translate(10 10)"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>