Add dynamic list for service response

This commit is contained in:
Peter Maquiran
2021-01-08 11:04:36 +01:00
parent a96cdb2487
commit 0dea72f508
3 changed files with 57 additions and 82 deletions
+9 -77
View File
@@ -24,33 +24,13 @@
<ion-content class="content">
<!-- search result type-->
<!-- search result categories-->
<div class="options">
<div class="container ion-justify-content-between ion-align-items-center">
<div class="d-flex ion-justify-content-center ion-text-center">
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
</div>
<div class="button">
<p>Relatório</p>
<ion-label class="label">10</ion-label>
<div *ngFor="let category of searchCategories" class="button">
<p>{{ category.Name }}</p>
<ion-label class="label">{{ category.Qtd }}</ion-label>
</div>
</div>
<div class="icon-z icon-most-searched-word-open">
@@ -66,7 +46,7 @@
<p>Palavas mais pesquisdas</p>
</div>
<!-- search result-->
<!-- search result document-->
<div class="search-result">
<div class="header">
<div class="d-flex ion-justify-content-between ion-align-items-center">
@@ -79,63 +59,15 @@
</div>
</div>
<ul>
<li class="d-flex">
<li *ngFor="let searchDocument of searchDocuments" class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content ion-align-items-center">
<p class="result-name">title</p>
<p class="result-name">{{ searchDocument.Assunto}}</p>
<div class="d-flex ion-justify-content-between ">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
</div>
</div>
</li>
<li class="d-flex">
<div class="icon">
<ion-icon src="assets/images/icons-search-document.svg"></ion-icon>
</div>
<div class="content">
<p class="result-name">title</p>
<div class="d-flex ion-justify-content-between">
<span>MINEC, MINFIN</span>
<span>13/04/2020</span>
<span class="organic-entity">{{ searchDocument.EntidadeOrganicaNome }}</span>
<span class="documente-date">{{ formateIsoDate(searchDocument.Data) }}</span>
</div>
</div>
</li>
+8 -3
View File
@@ -44,7 +44,7 @@
width: 100%;
flex-wrap: wrap;
.button{
width: 116px;
min-width: 116px;
border: solid 1px #e9e9e9;
margin: 0px 5px;
margin-bottom: 10px;
@@ -92,7 +92,7 @@
}
// document
.d-flex{
display: flex;
// search result
@@ -148,12 +148,17 @@
line-height: 1.67;
}
span{
height: 15px;
font-family: Roboto;
font-size: 13px;
font-weight: 300;
color: #797979;
}
span.documente-date{
}
span.organic-entity{
width: 100%;
}
}
}
}
+40 -2
View File
@@ -1,6 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ProcessesService } from 'src/app/services/processes.service';
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';
@Component({
selector: 'app-search',
templateUrl: './search.page.html',
@@ -8,7 +12,31 @@ import { ModalController } from '@ionic/angular';
})
export class SearchPage implements OnInit {
constructor(private modalController: ModalController) { }
// https params
private searchSubject: string;
private searchDate: string;
private searchSender: string;
private searchOrganicEntiry: string;
private searchDocTypeId: string;
searchCategories: SearchCategory[];
searchDocuments: SearchDocument[];
constructor(private modalController: ModalController,
private search: SearchService) {
// search in API
this.search.basicSearch(this.searchSubject, this.searchDate, this.searchSender
,this.searchOrganicEntiry, this.searchDocTypeId).subscribe(res=>{
this.searchCategories = res.Categories;
this.searchDocuments = res.Documents;
console.log(this.searchDocuments);
console.log(this.searchCategories);
});
}
ngOnInit() {
}
@@ -16,4 +44,14 @@ export class SearchPage implements OnInit {
this.modalController.dismiss();
}
/**
* @param isoDate String Iso date
* @returns date in formate DD:MM:YYYY
* @description convert Iso date to MM/DD/YYYY
*/
formateIsoDate(isoDate:string): string{
const date = new Date(isoDate);
return formatDate(date, 'dd/MM/yyyy', 'pt');
}
}