Hello, I would like after uploading a file, the user of my app would be redirected to the previous page had their list of items updated. Today as I can’t update the list I use a second one where I create the item that was sent and to update I use ion-refresh and dorefresh (), but I don’t want the user to have to interact to refresh/update, I want it to be right after the execution of the sending automatically.
SEND PAGE
enviar(){
this.apiService.salvarMalote(payload)
}
SERVICE:
import { DatePipe } from '@angular/common';
import { ApplicationRef, Injectable } from '@angular/core';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
import { Device } from '@ionic-native/device/ngx';
import { DocumentViewer } from '@ionic-native/document-viewer/ngx';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { FileTransfer, FileTransferObject, FileUploadOptions } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file/ngx';
import { HTTP } from '@ionic-native/http/ngx';
import { Network } from '@ionic-native/network/ngx';
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
import { AlertController, LoadingController, NavController, Platform, ToastController } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';
import { DatabaseService } from './database.service';
import { UtilService } from './util.service';
import { AppVersion } from '@ionic-native/app-version/ngx';
@Injectable({
providedIn: 'root'
})
export class ApiService {
token :any
dados:any = {
nome : '',
id : '',
cli : [],
usuario : ''
}
cliselecionado:any
arquivoSelecionado: any = {
unidade : '',
codCliente : '',
id : ''
}
versaoApp
arquivos = [];
valorQR:any;
qrScan:any;
rotasArmazenadas:any = [];
rota: any
private porcentagem: Array<BehaviorSubject<{ id: string, aux: number, porcentagem: string, nome: string, dataEnvio: string, idAposEnvio: string, status: number, codCli: string }>> = []
constructor(
private alertController : AlertController,
private appVersion : AppVersion,
private camera : Camera,
private databaseService : DatabaseService,
private datePipe : DatePipe,
private device : Device,
private document : DocumentViewer,
private filePath : FilePath,
private file : File,
private fileOpener : FileOpener,
private http: HTTP,
public loadingController : LoadingController,
private nav : NavController,
private network : Network,
private platform : Platform,
private qrScanner : QRScanner,
private ref: ApplicationRef,
private toastController : ToastController,
private transfer : FileTransfer,
private utilService: UtilService
) { }
listar(payload){
return this.http.post(url, archive, {
'Content-Type': 'application/x-www-form-urlencoded'
})
.then(data => {
let retorno
retorno = JSON.parse(data.data)
console.log(retorno)
if (retorno.sucesso) {
this.arquivos = retorno.retorno;
if (vaifiltrar == 1 ) {
this.toast(retorno.mensagem + ' a partir da data selecionada')
return this.arquivos
} else {
return this.arquivos
}
} else {
console.log('Erro')
this.toast('Erro ao filtrar malotes')
return retorno.mensagem
}
})
.catch(error => {
console.log(error); // error message as string
});
});
}
salvarArquivo(payload){
console.log(payload)
var filePath = payload.imageURI;
var filename = filePath.split("/").pop();
var extencao = filename.split(".").pop();
let codigoCliente = payload.codCli
var paramsEnvio = {
descCliente: payload.descricao,
nomeArquivo: filename,
chaveappmury: payload.dataEnv
}
let parametros = JSON.stringify(paramsEnvio)
console.log(paramsEnvio)
console.log(parametros)
let server
let fileTransfer: FileTransferObject = this.transfer.create();
var options : FileUploadOptions;
server= meuServer
options = {
fileKey: "file",
fileName: filename,
headers : {
'Cookie' : this.token
},
params: {
idCliente: this.cliSelecionado.id,
descricao: payload.descricao,
}
}
let id = payload.dataEnv
console.log(id)
//Verificação de progresso
fileTransfer.onProgress((progressEvent) => {
let perc
if (progressEvent.lengthComputable) {
perc = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
this.setPorcentagem(perc, id, payload.descricao,0,0, codCli)
} else {
perc++
}
});
//upload
console.log(filePath, server, options)
return fileTransfer.upload(filePath, server, options).then((data) => {
let retorno = JSON.parse(data.response)
console.log(retorno)
if (retorno.sucesso) {
let idArquivoSalvo = retorno.retorno.id //Terá valor apenas quando malote for salvo np servidor
this.setPorcentagem(100, id, payload.descricao,idMaloteSalvo,0, codigoCliente)
} else if (!retorno.sucesso) {
console.log('erro')
this.setPorcentagem(100, id, payload.descricao,id,1, codigoCliente)
fileTransfer.abort()
}
}, (error) => {
console.log(error)
this.setPorcentagem(100, id, payload.descricao,id, 1, codigoCliente)
fileTransfer.abort()
});
}
//Metodos Observable
setPorcentagem(perc, id, descricao,idMaloteSalvo, status, codigoCliente) {
let dataEnv
let porcentagem;
let aux;
let already = this.porcentagem.findIndex(i => {
return i.value.id == id
})
dataEnv = this.datePipe.transform(Date.now(), 'dd/MM/yyyy HH:mm')
if (perc == 1) {
porcentagem = perc / 100
aux = perc
this.ref.tick();
} else if (perc == 100) {
porcentagem = 0
aux = 0
this.ref.tick();
} else {
porcentagem = perc / 100
aux = perc
this.ref.tick();
}
console.log(status)
if (already != -1) {
let value = this.porcentagem[already].value;
value.porcentagem = porcentagem;
value.aux = aux;
value.dataEnvio = dataEnv,
value.idArquivoAposSalvar = idArquivo
value.status = status
value.codCli = codCli
this.porcentagem[already].next(value)
this.ref.tick();
} else {
this.porcentagem.unshift(new BehaviorSubject({ id: id, aux: aux, porcentagem: porcentagem, nome: descricao, dataEnvio: dataEnv, idArquivoAposSalvar:idArquivo, status:status, codCli: codCli}))
}
}
getPorcentagemObservable(): Array<BehaviorSubject<{ id: string, porcentagem: string }>> {
return this.porcentagem;
}
public zeraEnvio(){
this.porcentagem = []
}
PREVIOUS PAGE
listar(){
let payload = {
paginaAtual : this.paginaAtual,
descricao : this.descricao,
dataInicial : this.dataInicio,
dataFinal : this.dataFim,
vaiFiltrar : this.vaifiltrar
}
this.apiService.listar(this.paginaAtual,this.descricao,this.dataInicio,this.dataFim, this.vaifiltrar).then((data)=> {
if (this.arquivos == []) {
this.arquivos = data
} else {
this.arquivos = this.arquivos.concat(data);
}
}).catch((error) => {
console.log(error)
})
}
loadMoreData(event) {
this.paginaAtual ++;
this.listar()
event.target.complete();
if (this.total_apginas == this.paginaAtual) {
event.target.disabled = true;
}
}
doRefresh(event){
this.arquivos = []
this.apiService.zeraEnvio();
this.listar()
event.target.complete();
}
HTML PREVIOUS PAGE
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button class="voltar" color="primary" defaultHref="lista-clientes" ></ion-back-button>
<ion-item>
<ion-label>Arquivos - <br> {{cliSelecionado.nome}}</ion-label>
</ion-item>
<ion-button color="none" (click)="filtrar()"><ion-icon name="funnel" color="primary"></ion-icon></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- Atualizar pagina ao arrastar -->
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-item>
<ion-grid>
<ion-row>
<ion-col size="7">
<ion-label class="cabecalho" class="esquerda"><strong>Descrição</strong></ion-label>
</ion-col>
<ion-col size="1"></ion-col>
<ion-col>
<ion-label class="cabecalho" class="direita"><strong>Data Envio</strong></ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<!-- Lista de upload de arquivos -->
<ion-list>
<ion-item-group *ngFor="let item of apiService.getPorcentagemObservable(); let i = index">
<ion-item tappable (click)="detalharItem(item)" *ngIf="item.value.codCli == cliSelecionado.codigo">
<ion-grid *ngIf="item|async">
<ion-row>
<ion-col size="7">
<ion-label class="descricao" text-wrap>{{item.value.nome}}</ion-label>
</ion-col>
<ion-col size="1"></ion-col>
<ion-col>
<ion-text class="horario" *ngIf="item.value.porcentagem != 0">Enviando...</ion-text>
<ion-progress-bar type="indeterminate" class="horario" color="secondary" *ngIf="item.value.porcentagem != 0"> </ion-progress-bar>
<ion-label class="descricao" *ngIf="item.value.porcentagem == 0 && item.value.status == 0" text-wrap>{{item.value.dataEnvio}}</ion-label>
<ion-label *ngIf="item.value.status == 1"><ion-icon [src]="personalizado"></ion-icon></ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-item-group>
</ion-list>
<!-- Lista de arquivos carregados -->
<ion-item class="lista" *ngFor="let arquivos of arquivos" (click)="detalharMalote(arquivo)">
<ion-grid>
<ion-row>
<ion-col size="7">
<ion-label class="descricao" text-wrap>{{arquivo.descricao}}</ion-label>
</ion-col>
<ion-col size="1"></ion-col>
<ion-col>
<ion-label class="horario" text-wrap>{{arquivo.dataEnvio }}</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<!-- Scroll infinito -->
<ion-infinite-scroll threshold = " 100px " id= "infinite-scroll" (ionInfinite)="loadMoreData($event)">
<ion-infinite-scroll-content loading-spinner= "bolhas" loading-text= "Carregando mais dados ... ">
</ion-infinite-scroll-content >
</ion-infinite-scroll>
</ion-content>
<!-- Footer -->
<ion-footer>
<ion-toolbar>
<ion-button expand="full" color="primary" (click)="novoMalote()">
<ion-icon name="briefcase"></ion-icon>
<ion-text size="large">Novo Malote</ion-text>
</ion-button>
</ion-toolbar>
</ion-footer>
So I wanted to use that first ListeningStateChangedEvent more, because when the file was automatically downloaded, the list of uploaded files would be reloaded.