peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 12:37:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search page improvve

Browse Source
This commit is contained in:
Peter Maquiran
2021-01-18 14:59:09 +01:00
parent ac654811cc
commit c4bbbb948d
11 changed files with 180 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/events/events.page.ts
+7
View File
@@ -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
+17
View File
@@ -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
+20
View File
@@ -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
+7
View File
@@ -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.scss
View File
src/app/pages/search/filter/filter.page.spec.ts
+24
View File
@@ -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
+15
View File
@@ -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
+4
View File
@@ -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
+33 -46
View File
@@ -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">
<div class="icon">
<li class="d-flex date-container ion-justify-content-between">
<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">
<p>{{ category.Name }}</p>
<ion-label class="label">{{ category.Qtd }}</ion-label>
</div>
<!-- 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">
<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>
@@ -139,6 +128,4 @@
</div>
</ion-content>
</ion-content>
src/app/pages/search/search.page.scss
+13 -2
View File
@@ -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
+40 -9
View File
@@ -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;
}
}