mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 21:06:06 +00:00
view doc from search
This commit is contained in:
tiago.kayaya
@@ -1,10 +1,151 @@
|
||||
<ion-header>
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<ion-toolbar>
|
||||
<ion-title>document-detail</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-menu autoHide="false" side="end" content-id="main-content">
|
||||
<ion-header>
|
||||
<ion-toolbar translucent>
|
||||
<ion-title>Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item >
|
||||
<ion-icon name="documents" slot="start"></ion-icon>
|
||||
<ion-label>Efectuar Despacho</ion-label>
|
||||
</ion-item>
|
||||
<ion-item >
|
||||
<ion-icon name="arrow-undo" slot="start"></ion-icon>
|
||||
<ion-label>Pedido de Parecer</ion-label>
|
||||
</ion-item>
|
||||
<ion-item >
|
||||
<ion-icon name="arrow-redo" slot="start"></ion-icon>
|
||||
<ion-label>Pedido de Deferimento</ion-label>
|
||||
</ion-item>
|
||||
<ion-item >
|
||||
<ion-icon name="calendar" slot="start"></ion-icon>
|
||||
<ion-label>Marcar reunião</ion-label>
|
||||
</ion-item>
|
||||
<ion-item >
|
||||
<ion-icon name="trash" slot="start"></ion-icon>
|
||||
<ion-label>Descartar</ion-label>
|
||||
</ion-item>
|
||||
<ion-item disabled>
|
||||
<ion-icon name="paper-plane" slot="start"></ion-icon>
|
||||
<ion-label>Enviar para pendentes</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
<div class="ion-page" id="main-content">
|
||||
<ion-menu-button></ion-menu-button>
|
||||
</div>
|
||||
|
||||
<ion-content>
|
||||
<div class="main-content d-flex">
|
||||
<div class="content d-flex flex-column" >
|
||||
<div class="main-header">
|
||||
<div class="title-content">
|
||||
<app-btn-modal-dismiss></app-btn-modal-dismiss>
|
||||
<div class="middle">
|
||||
<ion-label class="title">{{LoadedDocument.Subject}}</ion-label>
|
||||
</div>
|
||||
<div class="div-icon">
|
||||
<ion-menu-button autoHide="false">
|
||||
<ion-icon name="ellipsis-vertical-outline"></ion-icon>
|
||||
</ion-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upper-content">
|
||||
<div class="content-details">
|
||||
<ion-label>
|
||||
<p><span class="date">Sexta, 14 de Abril</span><span class="label">{{LoadedDocument.Type}}</span></p>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="middle-content">
|
||||
<h5>Intervenientes</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label>
|
||||
<div>
|
||||
<p>{{LoadedDocument.Interveners}}</p>
|
||||
</div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<h5>Status</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<p >{{LoadedDocument.Status}}</p>
|
||||
</ion-item>
|
||||
</div>
|
||||
<div class="bottom-content width-100">
|
||||
<ion-list>
|
||||
<h5>Documentos Anexados</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label
|
||||
>
|
||||
<p class="attach-title-item">{{LoadedDocument.Subject}}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
|
||||
<p><span class="span-left">{{LoadedDocument.UserName}}</span><span class="span-right"></span></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="aside-right flex-column height-100">
|
||||
<div class="buttons">
|
||||
<button class="btn-ok" shape="round" >Efectuar Despacho</button>
|
||||
<button class="btn-cancel" shape="round" >Descartar</button>
|
||||
<div class="solid"></div>
|
||||
<button class="btn-cancel" shape="round" >Solicitar Parecer</button>
|
||||
<button class="btn-cancel" shape="round" >Pedido de Deferimento</button>
|
||||
<button class="btn-cancel" shape="round" >Marcar Reunião</button>
|
||||
<button class="btn-cancel" shape="round" >Enviar para Pendentes</button>
|
||||
<div class="solid"></div>
|
||||
<button class="btn-cancel" shape="round" >Executar</button>
|
||||
<button class="btn-cancel" shape="round" >Delegar</button>
|
||||
<button class="btn-cancel" shape="round" >Arquivar</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>
|
||||
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
|
||||
</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>
|
||||
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
|
||||
</h3>
|
||||
<p>
|
||||
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>
|
||||
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
|
||||
</h3>
|
||||
<p><ion-skeleton-text animated style="width: 80%"></ion-skeleton-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h3>
|
||||
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
|
||||
</h3>
|
||||
<p>
|
||||
<ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
|
||||
</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-button color="medium" shape="round" expand="block">
|
||||
<!-- <ion-icon color="medium" name="attach" slot="start"></ion-icon> -->
|
||||
<ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
|
||||
</ion-button>
|
||||
</ion-list>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
@import '~src/function.scss';
|
||||
.content{
|
||||
padding: 30px 20px 0 20px !important;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
.color-red{
|
||||
font-weight: 500;
|
||||
color:#d30a0a !important;
|
||||
}
|
||||
.btn-size{
|
||||
font-size: 18px !important;
|
||||
}
|
||||
.main-header{
|
||||
font-family: Roboto;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
background-color: #fff;
|
||||
overflow:auto;
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
.header-top{
|
||||
width: 360px;
|
||||
margin: 0px auto;
|
||||
overflow: auto;
|
||||
padding: 0 !important;
|
||||
background: #fff;
|
||||
.middle{
|
||||
padding: 0!important;
|
||||
float: left;
|
||||
width: 280px;
|
||||
margin: 2.5px 0 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.right{
|
||||
padding: 0!important;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
color: #0782c9;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
.header-bottom{
|
||||
width: 310px;
|
||||
overflow: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
.header-bottom-icon{
|
||||
width: 30px;
|
||||
font-size: 25px;
|
||||
float: left;
|
||||
padding: 2px;
|
||||
}
|
||||
.header-bottom-contacts{
|
||||
width: 275px;
|
||||
font-size: 15px;
|
||||
color: #797979;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float: left;
|
||||
padding: 5px;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
overflow: auto;
|
||||
float: left;
|
||||
padding-top: 4px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: auto;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
ion-item-group{
|
||||
margin: 15px;
|
||||
}
|
||||
ion-button{
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
|
||||
.upper-content{
|
||||
font-family: Roboto;
|
||||
margin-left: 41px;
|
||||
overflow: auto;
|
||||
font-size: 18px;
|
||||
|
||||
.label{
|
||||
border-radius: 20px;
|
||||
background: #ffb703;
|
||||
float: right;
|
||||
padding: 5px 13.5px 5px 13.5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button-calendar-type ion-button{
|
||||
height: 25px;
|
||||
}
|
||||
.content-details{
|
||||
font-size: 17px;
|
||||
.date{
|
||||
color: #797979;
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle-conten{
|
||||
.middle-content p{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.bottom-content{
|
||||
//width: 360px;
|
||||
margin: 0 auto;
|
||||
|
||||
.bottom-content h3{
|
||||
font-size: 16px;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
.attach-document{
|
||||
font-size: 15px;
|
||||
color: #0d89d1;
|
||||
margin: 5px 5px 5px 10px;
|
||||
padding: 5px;
|
||||
float: left;
|
||||
}
|
||||
.attach-icon{
|
||||
width: 37px;
|
||||
font-size: 35px;
|
||||
float: left;
|
||||
}
|
||||
.attach-title-item{
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
color:#0d89d1;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
/* SPAN */
|
||||
.span-left{
|
||||
float: left;
|
||||
font-size: 15x;
|
||||
}
|
||||
.span-right{
|
||||
text-align: right;
|
||||
float: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.aside-right{
|
||||
padding: 30px 20px 0 20px !important;
|
||||
|
||||
.arrow-right{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.arrow-right-icon{
|
||||
width: 37px;
|
||||
float: right;
|
||||
font-size: 35px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.buttons{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn-ok, .btn-cancel, .btn-delete{
|
||||
height: auto !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600 !important;
|
||||
width: 100% !important;
|
||||
margin-bottom: 10px !important;
|
||||
padding: 15px !important;
|
||||
}
|
||||
}
|
||||
.solid {
|
||||
display: block;
|
||||
width: 90%;
|
||||
border-top: 1px solid #ebebeb;
|
||||
margin: 0 auto !important;
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
.content{
|
||||
width: 100% !important;
|
||||
}
|
||||
.aside-right{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 801px) {
|
||||
.div-icon{
|
||||
display: none;
|
||||
}
|
||||
.content{
|
||||
width: 65%;
|
||||
border-right: 1px solid #d8d8d8;
|
||||
}
|
||||
|
||||
.aside-right{
|
||||
width: 35%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px){
|
||||
.content{
|
||||
width: 70%;
|
||||
}
|
||||
.aside-right{
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1140px){
|
||||
.content{
|
||||
width: 75%;
|
||||
}
|
||||
.aside-right{
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { MenuController, ModalController, NavParams } from '@ionic/angular';
|
||||
import { AlertService } from 'src/app/services/alert.service';
|
||||
import { ProcessesService } from 'src/app/services/processes.service';
|
||||
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
|
||||
|
||||
@Component({
|
||||
selector: 'app-document-detail',
|
||||
@@ -7,9 +11,51 @@ import { Component, OnInit } from '@angular/core';
|
||||
})
|
||||
export class DocumentDetailPage implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
docId: string;
|
||||
applicationId:string;
|
||||
LoadedDocument:any;
|
||||
|
||||
constructor(
|
||||
private navParams: NavParams,
|
||||
private modalController: ModalController,
|
||||
private alertService: AlertService,
|
||||
private processes: ProcessesService,
|
||||
private menu: MenuController,
|
||||
private iab: InAppBrowser,
|
||||
) {
|
||||
this.docId = this.navParams.get('docId');
|
||||
this.applicationId = this.navParams.get('applicationId');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
console.log(this.docId);
|
||||
console.log(this.applicationId);
|
||||
this.LoadDocumentDetails();
|
||||
}
|
||||
|
||||
async LoadDocumentDetails(){
|
||||
this.processes.GetDocumentDetails(this.docId, '').subscribe(res=>{
|
||||
console.log(res);
|
||||
this.LoadedDocument = res[0];
|
||||
});
|
||||
}
|
||||
|
||||
viewDocument(){
|
||||
this.processes.GetDocumentUrl(this.docId, '8').subscribe(res=>{
|
||||
console.log(res);
|
||||
const url: string = res.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
|
||||
const browser = this.iab.create(url,"_blank");
|
||||
browser.show();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
this.menu.open();
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
close(){
|
||||
this.modalController.dismiss();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user