mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-20 05:16:07 +00:00
Improve
This commit is contained in:
Peter Maquiran
@@ -0,0 +1,17 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { TaskDetailsPage } from './task-details.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: TaskDetailsPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class TaskDetailsPageRoutingModule {}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { TaskDetailsPageRoutingModule } from './task-details-routing.module';
|
||||
|
||||
import { TaskDetailsPage } from './task-details.page';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
TaskDetailsPageRoutingModule
|
||||
],
|
||||
declarations: [TaskDetailsPage],
|
||||
exports: [TaskDetailsPage]
|
||||
})
|
||||
export class TaskDetailsPageModule {}
|
||||
@@ -0,0 +1,66 @@
|
||||
<ion-header *ngIf="task" class="ion-no-border">
|
||||
<div class="main-header">
|
||||
<div class="title-content width-100 d-flex justify-space-between align-center">
|
||||
<div class=" btn-dismiss font-30 cursor-pointer" (click)="goBack.emit()" defaultHref="#">
|
||||
<ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
|
||||
</div>
|
||||
<div class="middle d-flex align-center flex-grow-1">
|
||||
<ion-label class="title">{{ task.Folio}}</ion-label>
|
||||
</div>
|
||||
<div class="div-icon" (click)="openOptions.emit()">
|
||||
<ion-icon src="assets/images/icons-menu.svg"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upper-content">
|
||||
<div class="content-details">
|
||||
<ion-label>
|
||||
<p><span class="date">{{customDate}}</span><span class="label">{{ task.activityInstanceName }}</span></p>
|
||||
<p><span class="color-red">{{ fulltask.workflowInstanceDataFields.DeadlineType }}</span></p>
|
||||
</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div *ngIf="task" class="overflow-y-auto" style="margin-right: -20px; margin-right: -20px;">
|
||||
<div class="middle-content">
|
||||
<h5 *ngIf="intervenientes">Intervenientes</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label>
|
||||
<div *ngFor="let interveniente of intervenientes">
|
||||
<p>{{interveniente.Name}}</p>
|
||||
</div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<div *ngIf="cc.length > 0">
|
||||
<h5>Com conhecimento</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<ion-label>
|
||||
<div *ngFor="let c of cc">
|
||||
<p>{{c.Name}}</p>
|
||||
</div>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
<div *ngIf="fulltask.workflowInstanceDataFields.TaskMessage">
|
||||
<h5>Detalhes</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding">
|
||||
<p [innerHTML]="fulltask.workflowInstanceDataFields.TaskMessage"></p>
|
||||
</ion-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-content width-100">
|
||||
<ion-list>
|
||||
<h5>Documentos Anexados</h5>
|
||||
<ion-item class="ion-no-margin ion-no-padding cursor-pointer" *ngFor="let Document of fulltask.Documents">
|
||||
<ion-label class="d-block" (click)="viewDocument.emit(Document.DocId)">
|
||||
<p class="attach-title-item">{{ Document.Assunto }}<span class="span-right color-red btn-size"><ion-icon hidden name="close"></ion-icon></span></p>
|
||||
<p><span class="span-left">{{ Document.Sender}}</span><span class="span-right">{{ Document.DocDate | date: 'dd/MM/yyyy HH:mm' }}</span></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,197 @@
|
||||
@import '~src/function.scss';
|
||||
.main-content{
|
||||
background-color: #fff !important;
|
||||
border-top-left-radius: 25px;
|
||||
border-top-right-radius: 25px;
|
||||
}
|
||||
.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{
|
||||
display: flex;
|
||||
font-family: Roboto;
|
||||
background-color: #fff;
|
||||
color:#000;
|
||||
transform: translate3d(0, 1px, 0);
|
||||
.title-content{
|
||||
display: flex;
|
||||
justify-content: start !important;
|
||||
align-items: flex-start !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.title{
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
font-size: 25px;
|
||||
overflow: auto;
|
||||
float: left;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.div-icon{
|
||||
width: 40px !important;
|
||||
font-size: 35px !important;
|
||||
text-align: start !important;
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
ion-item-group{
|
||||
margin: 15px;
|
||||
}
|
||||
ion-button{
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.upper-content{
|
||||
font-family: Roboto;
|
||||
margin-top: 15px;
|
||||
margin-left: 41px;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { TaskDetailsPage } from './task-details.page';
|
||||
|
||||
describe('TaskDetailsPage', () => {
|
||||
let component: TaskDetailsPage;
|
||||
let fixture: ComponentFixture<TaskDetailsPage>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TaskDetailsPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TaskDetailsPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { customTask, fullTask } from 'src/app/models/dailyworktask.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-task-details',
|
||||
templateUrl: './task-details.page.html',
|
||||
styleUrls: ['./task-details.page.scss'],
|
||||
})
|
||||
export class TaskDetailsPage implements OnInit {
|
||||
|
||||
@Input() task = new customTask();
|
||||
@Input() intervenientes = []
|
||||
@Input() cc = []
|
||||
@Input() customDate = ''
|
||||
@Input() fulltask = new fullTask()
|
||||
|
||||
@Output() openOptions = new EventEmitter<any>();
|
||||
@Output() goBack = new EventEmitter<any>();
|
||||
@Output() viewDocument = new EventEmitter<any>();
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user