Improve

src/app/shared/gabinete-digital/generic/task-detailde/task-detailde-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { TaskDetaildePage } from './task-detailde.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: TaskDetaildePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class TaskDetaildePageRoutingModule {}

src/app/shared/gabinete-digital/generic/task-detailde/task-detailde.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { TaskDetaildePageRoutingModule } from './task-detailde-routing.module';
+
+import { TaskDetaildePage } from './task-detailde.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    TaskDetaildePageRoutingModule
+  ],
+  declarations: [TaskDetaildePage]
+})
+export class TaskDetaildePageModule {}

src/app/shared/gabinete-digital/generic/task-detailde/task-detailde.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>taskDetailde</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/shared/gabinete-digital/generic/task-detailde/task-detailde.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { TaskDetaildePage } from './task-detailde.page';
+
+describe('TaskDetaildePage', () => {
+  let component: TaskDetaildePage;
+  let fixture: ComponentFixture<TaskDetaildePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TaskDetaildePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TaskDetaildePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/gabinete-digital/generic/task-detailde/task-detailde.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-task-detailde',
+  templateUrl: './task-detailde.page.html',
+  styleUrls: ['./task-detailde.page.scss'],
+})
+export class TaskDetaildePage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/gabinete-digital/generic/task-details/task-details-routing.module.ts

@@ -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 {}

src/app/shared/gabinete-digital/generic/task-details/task-details.module.ts

@@ -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 {}

src/app/shared/gabinete-digital/generic/task-details/task-details.page.html

@@ -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>

src/app/shared/gabinete-digital/generic/task-details/task-details.page.scss

@@ -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%;
+  }
+}

src/app/shared/gabinete-digital/generic/task-details/task-details.page.spec.ts

@@ -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();
+  });
+});

src/app/shared/gabinete-digital/generic/task-details/task-details.page.ts

@@ -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() {
+  }
+
+}

src/app/shared/gabinete-digital/generic/task-list/task-list-routing.module.ts

@@ -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 {}

src/app/shared/gabinete-digital/generic/task-list/task-list.module.ts

@@ -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 {}

src/app/shared/gabinete-digital/generic/task-list/task-list.page.html

@@ -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>

src/app/shared/gabinete-digital/generic/task-list/task-list.page.scss

@@ -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;
+  }

src/app/shared/gabinete-digital/generic/task-list/task-list.page.spec.ts

@@ -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();
+  });
+});

src/app/shared/gabinete-digital/generic/task-list/task-list.page.ts

@@ -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);
+  }
+
+}