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

style events to approve details view

Browse Source
This commit is contained in:
tiago.kayaya
2021-03-25 15:46:43 +01:00
parent 314400e04d
commit a29a25d7cc
8 changed files with 281 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html
+2 -2
View File
@@ -1,4 +1,4 @@
<ion-header hidden class="ion-no-border">
<!-- <ion-header hidden class="ion-no-border">
<ion-toolbar class="header-toolbar">
<div class="main-header">
<div class="title-content">
@@ -14,7 +14,7 @@
</div>
</div>
</ion-toolbar>
</ion-header>
</ion-header> -->
<ion-menu autoHide="false" side="end" content-id="main-content">
<ion-header>
src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss
+1 -1
View File
@@ -101,7 +101,7 @@ ion-button{
.label{
border-radius: 20px;
background: #fec077;
background: #ffb703;
float: right;
padding: 5px 13.5px 5px 13.5px;
color: #fff;
src/app/shared/agenda/approve-event/approve-event.component.html
+70 -62
View File
@@ -1,4 +1,4 @@
<ion-header class="ion-no-border px-20">
<ion-header hidden class="ion-no-border px-20">
<div class="header-content d-flex justify-space-between">
<div class="header-icon-left">
<ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
@@ -6,7 +6,7 @@
<div class="header-title flex-grow-1">
<label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
</div>
<div class="header-icon-right">
<div class="header-icon-right display-none-{{showAside}}">
<ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
</div>
</div>
@@ -36,72 +36,80 @@
</ion-menu>
<ion-content id="main-content">
<div class="upper-content">
<div class="content-location d-flex justify-space-between">
<div class="location-detail">
<ion-label >{{loadedEvent.workflowInstanceDataFields.Location}}</ion-label>
<div class="main-content d-flex height-100">
<div class="content">
<div class="header-content width-100 d-flex justify-space-between">
<div class="header-icon-left">
<ion-icon (click)="close()" src="assets/images/icons-arrow-arrow-left.svg"></ion-icon>
</div>
<div class="header-title flex-grow-1">
<label>{{loadedEvent.workflowInstanceDataFields.Subject}}</label>
</div>
<div class="header-icon-right display-none-{{showAside}}">
<ion-icon (click)="notImplemented()" src="assets/images/icons-edit.svg"></ion-icon>
</div>
</div>
<div class="button-calendar-type">
<ion-button class="button-calendar-type" slot="end">{{loadedEvent.workflowInstanceDataFields.Agenda}}</ion-button>
<div class="upper-content d-flex flex-column">
<div class="content-location">
<p>
<span class="location">{{loadedEvent.workflowInstanceDataFields.Location}}</span>
<span class="event-type-{{loadedEvent.workflowInstanceDataFields.Agenda}}">{{loadedEvent.workflowInstanceDataFields.Agenda}}</span>
</p>
</div>
<div class="content-details">
<ion-label>
<p>{{customDate}}</p>
<p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
<p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
<p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
</ion-label>
</div>
</div>
<div class="middle-content">
<h5>Intervenientes</h5>
<ion-item class="ion-no-margin ion-no-padding">
<ion-label>
<p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
</ion-label>
</ion-item>
<h5>Detalhes</h5>
<ion-item class="ion-no-margin ion-no-padding">
<ion-label>
<p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
</ion-label>
</ion-item>
</div>
</div>
<div class="content-details">
<ion-label>
<p>{{customDate}}</p>
<p>das {{loadedEvent.workflowInstanceDataFields.StartDate | date: 'hh:mm'}} às {{loadedEvent.workflowInstanceDataFields.EndDate | date: 'hh:mm'}}</p>
<p *ngIf="!loadedEvent.workflowInstanceDataFields.IsRecurring">(Não se repete)</p>
<p *ngIf="loadedEvent.workflowInstanceDataFields.IsRecurring">Repete</p>
</ion-label>
</div>
</div>
<div class="middle-content">
<ion-item>
<ion-label>
<h3>Intervenientes</h3>
<p>{{loadedEvent.workflowInstanceDataFields.Participants}}</p>
</ion-label>
</ion-item>
<ion-item>
<ion-label>
<h3>Detalhes</h3>
<p>{{loadedEvent.workflowInstanceDataFields.Body}}</p>
</ion-label>
</ion-item>
</div>
<div *ngIf="loadedAttachments" class="bottom-content">
<ion-list>
<h3>Documentos Anexados</h3>
<ion-item>
<ion-label>
<p class="attach-title-item">Receita por Natureza</p>
<p><span class="span-left">{{loadedAttachments.Remetente}}</span><span class="span-right">{{loadedAttachments.CreateDate}}<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
</ion-label>
</ion-item>
</ion-list>
<div *ngIf="loadedAttachments" class="bottom-content">
<ion-list>
<h3>Documentos Anexados</h3>
<ion-item class="ion-no-margin ion-no-padding">
<ion-label>
<p class="attach-title-item">Receita por Natureza</p>
<p><span class="span-left">{{loadedAttachments.Remetente}}</span><span class="span-right">{{loadedAttachments.CreateDate}}<!-- {{ task.CreateDate | date: 'dd-MM-yy' }} --></span></p>
</ion-label>
</ion-item>
</ion-list>
</div>
</div>
<div *ngIf="showAside" class="aside-right flex-column height-100">
<div class="aside-buttons">
<button full class="btn-ok" shape="round" >Editar evento</button>
<button full class="btn-ok" shape="round" >Aprovar</button>
<button class="btn-cancel" shape="round" >Emendar</button>
<div class="solid"></div>
<button full class="btn-delete" shape="round" >Rejeitar</button>
</div>
</div>
</div>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-footer class="display-none-{{showAside}}">
<div class="buttons">
<ion-item lines="none">
<p>
<ion-button class="button-edit-event" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Emendar</ion-button>
</p>
<p>
<ion-menu-button autoHide="false">
<button class="btn-cancel" shape="round" (click)="emendTask(loadedEvent.serialNumber)">Emendar</button>
<ion-menu-button autoHide="false">
<ion-icon (click)="openMenu()" name="ellipsis-vertical-outline"></ion-icon>
</ion-menu-button>
</p>
<p>
<ion-button class="button-approve" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</ion-button>
</p>
</ion-item>
<ion-item hidden>
<p>
<ion-button class="button-reject" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</ion-button>
</p>
</ion-item>
</div>
</ion-toolbar>
<button class="btn-ok" shape="round" (click)="approveTask(loadedEvent.serialNumber)">Aprovar</button>
<button hidden class="btn-delete" shape="round" (click)="rejectTask(loadedEvent.serialNumber)">Rejeitar</button>
</div>
</ion-footer>
src/app/shared/agenda/approve-event/approve-event.component.scss
+161 -86
View File
@@ -1,14 +1,12 @@
ion-content{
--padding-top:0px;
--padding-start: 20px;
--padding-end: 20px;
font-size: 18px;
}
ion-menu{
--height: 225px;
}
.display-none-true{
display: none;
border: 1px solid red;
}
.header-content{
margin: 25px auto;
//margin: 25px auto;
}
.header-icon-left{
width: 36px;
@@ -29,95 +27,146 @@ ion-content{
font-size: 45px;
float: left;
}
.upper-content{
margin-left: 50px;
font-size: 18px;
.content-location{
margin: 0 auto;
padding: 0;
}
.location-detail{
width: 210px;
font-weight: 700;
.content{
padding: 30px 20px 0 20px !important;
overflow: auto;
width: 100%;
.upper-content{
margin-left: 40px;
font-size: 18px;
float: left;
margin: 5px 5px 5px 0px;
}
.button-calendar-type{
width: 91px;
--border-radius: 12.5px;
--background: #ffb703;
margin-left: 5px;
float: left;
}
.button-calendar-type ion-button{
height: 25px;
}
.button-edit-event {
width: 140px;
height: 44px;
border-radius: 22.5px;
--background: #e0e9ee;
--color:#061b52;
}
.content-details p{
font-size: 16px;
}
}
.middle-conten{
.middle-content h3, .middle-content p{
font-size: 16px;
}
}
.bottom-content{
width: 360px;
margin: 0 auto;
.bottom-content h3{
font-size: 16px;
margin: 0 0 0 10px;
.content-location{
margin-top: 0px !important;
width: 100%;
padding: 0;
}
.location{
float: left;
}
.event-type-Oficial{
font-family: Roboto;
border-radius: 20px;
background: #fec077;
float: right !important;
padding: 5px 13.5px 5px 13.5px;
color: #fff;
}
.event-type-Pessoal{
font-family: Roboto;
border-radius: 20px;
background: #f05d5e;
float: right !important;
padding: 5px 13.5px 5px 13.5px;
color: #fff;
}
.button-edit-event {
width: 140px;
height: 44px;
border-radius: 22.5px;
--background: #e0e9ee;
--color:#061b52;
}
.content-details p{
font-size: 16px;
}
}
.attach-document{
font-size: 15px;
color: #0d89d1;
margin: 5px 5px 5px 10px;
padding: 5px;
float: left;
.middle-conten{
.middle-content h3, .middle-content p{
font-size: 16px;
}
}
.attach-icon{
width: 37px;
font-size: 35px;
float: left;
.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{
width: 100%;
font-size: 15px;
color:#0d89d1;
}
/* SPAN */
.span-left{
float: left;
font-size: 15x;
}
.span-right{
text-align: right;
float: right;
font-size: 13px;
}
}
.attach-title-item{
width: 100%;
font-size: 15px;
color:#0d89d1;
}
/* SPAN */
.span-left{
float: left;
font-size: 15x;
}
.span-right{
text-align: right;
float: right;
font-size: 13px;
}
}
}
.aside-right{
overflow: auto;
padding: 30px 20px 0 20px !important;
.buttons{
width: 360px;
margin: 0 auto;
.arrow-right{
display: flex;
justify-content: flex-end;
margin-bottom: 20px;
/* .arrow-right-icon{
width: 37px;
float: right;
font-size: 35px;
overflow: hidden;
} */
}
.aside-buttons{
width: 100% !important;
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;
}
}
.buttons{
display: flex;
justify-content: space-between;
overflow: auto;
.button-options {
height: 44px;
--color: #42b9fe;
/* opacity: 0; */
--color: #42b9fe;
/* opacity: 0; */
}
.button-approve {
width: 140px;
@@ -132,4 +181,30 @@ ion-content{
border-radius: 22.5px;
--background: #ffe0e0;
}
}
/* @media only screen and (max-width: 1140px) {
.content{
width: 100%;
}
.aside-right{
display: none;
}
} */
/* @media only screen and (min-width: 1140px) {
.div-icon{
display: none;
}
.content{
//width: 75%;
border-right: 1px solid #d8d8d8;
}
.aside-right{
width: 25%;
}
} */
src/app/shared/agenda/approve-event/approve-event.component.ts
+5 -1
View File
@@ -21,11 +21,13 @@ export class ApproveEventComponent implements OnInit {
loadedAttachments:any;
customDate:any;
today:any;
show: boolean = false;
months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
@Input() serialNumber:string;
@Input() showAside:boolean;
@Output() approveEventDismiss = new EventEmitter<any>();
@Output() closeEventToApprove = new EventEmitter<any>();
@@ -44,6 +46,8 @@ export class ApproveEventComponent implements OnInit {
ngOnInit() {
this.getTask();
this.getAttachments();
console.log(this.showAside);
}
notImplemented(){
@@ -53,6 +57,7 @@ export class ApproveEventComponent implements OnInit {
close(){
/* this.router.navigate(['/home/gabinete-digital/event-list']); */
this.closeEventToApprove.emit();
this.modalController.dismiss();
}
getTask(){
@@ -119,7 +124,6 @@ export class ApproveEventComponent implements OnInit {
const modal = await this.modalController.create({
component: EmendMessageModalPage,
componentProps:{
},
cssClass: 'emend-message-modal',
backdropDismiss: false
src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.html
+1 -1
View File
@@ -1,6 +1,6 @@
<ion-content>
<div class="title width-100">
<label>Eventos para Aprovação</label>
<label>Sim Eventos para Aprovação</label>
<ion-toolbar>
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="MDGPR">
src/app/shared/gabinete-digital/events-to-approve/events-to-approve.page.ts
+4 -3
View File
@@ -5,7 +5,7 @@ import { Event } from 'src/app/models/event.model';
import { ProcessesService } from 'src/app/services/processes.service';
import { ModalController, NavParams } from '@ionic/angular';
import { NavigationEnd, Router } from '@angular/router';
import { ApproveEventModalPage } from 'src/app/pages/gabinete-digital/event-list/approve-event-modal/approve-event-modal.page';
import { ApproveEventComponent } from '../../agenda/approve-event/approve-event.component';
@Component({
selector: 'app-events-to-approve',
@@ -71,12 +71,13 @@ S
if( window.innerWidth <= 1024){
classs = 'modal modal-desktop'
} else {
classs = 'modal modal-desktop'
classs = 'modal modal-desktop showAsideOptions'
}
const modal = await this.modalController.create({
component: ApproveEventModalPage,
component: ApproveEventComponent,
componentProps:{
serialNumber: eventSerialNumber,
showAside: true,
},
cssClass: classs,
});
src/global.scss
+37
View File
@@ -290,6 +290,43 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
height: 100%;
}
}
.hideAsideOptions{
@media only screen and (min-width: 1140px) {
.div-icon{
display: none;
}
.content{
width: 100%;
border-right: 1px solid #d8d8d8;
}
.aside-right{
display: none;
}
}
/* .aside-right{
display: none;
width: 0;
}
.content{
width: 100%;
} */
}
.showAsideOptions{
@media only screen and (min-width: 1140px) {
.div-icon{
display: none;
}
.content{
width: 75%;
border-right: 1px solid #d8d8d8;
}
.aside-right{
width: 25%;
}
}
}
.modal-width-100{
.modal-wrapper{