mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 21:06:06 +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 { TaskListPage } from './task-list.page';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: TaskListPage
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule],
|
||||
})
|
||||
export class TaskListPageRoutingModule {}
|
||||
@@ -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 { TaskListPageRoutingModule } from './task-list-routing.module';
|
||||
|
||||
import { TaskListPage } from './task-list.page';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
IonicModule,
|
||||
TaskListPageRoutingModule
|
||||
],
|
||||
declarations: [TaskListPage],
|
||||
exports: [TaskListPage]
|
||||
})
|
||||
export class TaskListPageModule {}
|
||||
@@ -0,0 +1,75 @@
|
||||
<ion-content>
|
||||
<div class="overflow-y-auto height-100 width-100 px-20">
|
||||
<ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
|
||||
|
||||
<div *ngIf="taskList.length >= 0">
|
||||
<ion-list part="divo">
|
||||
<div
|
||||
class="expediente ion-no-padding ion-no-margin cursor-pointer"
|
||||
*ngFor = "let task of taskList; let i = index"
|
||||
(click)="viewTaskDetail(task)"
|
||||
>
|
||||
<!-- [routerLink]="['/home/gabinete-digital/expediente',task.SerialNumber]" -->
|
||||
<div class="item width-100">
|
||||
<div class="exp-top-detail">
|
||||
<div class="subject">
|
||||
<ion-label>{{ task.Folio }}</ion-label>
|
||||
</div>
|
||||
<div class="exp-icon">
|
||||
<ion-icon src="assets/images/icons-expediente-attachment.svg"></ion-icon>
|
||||
<label *ngIf="task.DocumentsQty != 0">{{task.DocumentsQty}}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-bottom-detail">
|
||||
<div class="exp-remetente">
|
||||
<ion-label>{{task.Senders}}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="exp-middle-detail">
|
||||
<div class="exp-workflow">
|
||||
<span class="label">{{task.activityInstanceName}}</span>
|
||||
</div>
|
||||
<div class="exp-date">
|
||||
<ion-label>{{ task.CreateDate | date: 'dd-MM-yyyy HH:mm' }}</ion-label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
<div
|
||||
*ngIf="!skeletonLoader && taskList.length == 0"
|
||||
class="empty-list d-flex height-100 align-center justify-content-center"
|
||||
>
|
||||
<span>Lista vazia</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="skeletonLoader && taskList.length == 0">
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="end">
|
||||
<ion-skeleton-text animated></ion-skeleton-text>
|
||||
</ion-thumbnail>
|
||||
<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>
|
||||
<p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="end">
|
||||
<ion-skeleton-text animated></ion-skeleton-text>
|
||||
</ion-thumbnail>
|
||||
<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>
|
||||
<p><ion-skeleton-text animated style="width: 60%"></ion-skeleton-text></p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,124 @@
|
||||
|
||||
/* New CSS */
|
||||
.expediente{
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07);
|
||||
border:1px solid #e9e9e9 !important;
|
||||
background-color: var(--white);
|
||||
margin-bottom: 10px !important;
|
||||
padding: 15px;
|
||||
}
|
||||
.exp-list-item{
|
||||
//width: 368px;
|
||||
overflow: auto;
|
||||
/* border-bottom: 1px solid gray; */
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.exp-top-detail{
|
||||
width: 100%;
|
||||
float: left;
|
||||
font-family: Roboto;
|
||||
font-size: 12pt;
|
||||
font-weight: 700;
|
||||
color: #0d89d1;
|
||||
padding-left: 3px;
|
||||
|
||||
.subject{
|
||||
width: 84%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.exp-icon{
|
||||
width: fit-content;
|
||||
float: right;
|
||||
/* font-size: 13px; */
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
|
||||
ion-icon{
|
||||
font-size: 12pt;
|
||||
color: #42b9fe;
|
||||
float: left;
|
||||
}
|
||||
label{
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
.exp-middle-detail, .exp-bottom-detail{
|
||||
margin-bottom: 5px;
|
||||
|
||||
}
|
||||
.exp-middle-detail{
|
||||
font-size: 12pt;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.exp-workflow{
|
||||
float: left;
|
||||
margin: 0 !important;
|
||||
|
||||
.label{
|
||||
border-radius: 15px;
|
||||
background: #ffb703;
|
||||
/* font-size: 12px; */
|
||||
float: right;
|
||||
padding: 2.5px 13.5px 2.5px 13.5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.exp-date{
|
||||
width: auto;
|
||||
font-family: Roboto;
|
||||
font-size: 10pt;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
line-height: normal;
|
||||
letter-spacing: normal;
|
||||
color: #797979;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.exp-bottom-detail{
|
||||
font-size: 8pt;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding-left: 3px;
|
||||
|
||||
.exp-remetente{
|
||||
//width: 200px;
|
||||
font-family: Roboto;
|
||||
/* font-size: 13px; */
|
||||
font-weight: normal;
|
||||
color: #000000;
|
||||
float: left;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
}
|
||||
.div-top-header{
|
||||
width: 400px;
|
||||
margin: 6px auto;
|
||||
background-color: #0782c9;
|
||||
overflow: auto;
|
||||
}
|
||||
.div-search{
|
||||
font-size: 45px;
|
||||
float: left;
|
||||
margin: 0 0 0 10px
|
||||
}
|
||||
.div-logo{
|
||||
background: transparent;
|
||||
width: 150px;
|
||||
margin: 2.5px 0 2.5px 71px;
|
||||
float: left;
|
||||
}
|
||||
.div-logo img{
|
||||
width: 100%;
|
||||
}
|
||||
.div-profile{
|
||||
font-size: 45px;
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { TaskListPage } from './task-list.page';
|
||||
|
||||
describe('TaskListPage', () => {
|
||||
let component: TaskListPage;
|
||||
let fixture: ComponentFixture<TaskListPage>;
|
||||
|
||||
beforeEach(waitForAsync(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ TaskListPage ],
|
||||
imports: [IonicModule.forRoot()]
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TaskListPage);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
}));
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { customTaskList, tasksList } from 'src/app/models/dailyworktask.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-task-list',
|
||||
templateUrl: './task-list.page.html',
|
||||
styleUrls: ['./task-list.page.scss'],
|
||||
})
|
||||
export class TaskListPage implements OnInit {
|
||||
|
||||
@Input() taskList: customTaskList[] = [];
|
||||
@Input() skeletonLoader: boolean = false
|
||||
@Output() goToTaskDetail = new EventEmitter<customTaskList>();
|
||||
|
||||
constructor() {
|
||||
console.log('taskList', this.taskList)
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
|
||||
viewTaskDetail(task: customTaskList) {
|
||||
this.goToTaskDetail.emit(task);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user