add new features

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.module.ts

@@ -8,6 +8,7 @@ import { ExpedientesPrPageRoutingModule } from './expedientes-pr-routing.module'
 
 import { ExpedientesPrPage } from './expedientes-pr.page';
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
+import { TaskListPageModule } from 'src/app/shared/gabinete-digital/generic/task-list/task-list.module'
 
 
 import { MatInputModule } from '@angular/material/input';
@@ -23,6 +24,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { TaskListHeaderPageModule } from 'src/app/shared/gabinete-digital/generic/task-list-header/task-list-header.module';
 
 @NgModule({
   imports: [
@@ -31,7 +33,9 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
     IonicModule,
     ExpedientesPrPageRoutingModule,
     BtnModalDismissPageModule,
-        //
+    TaskListPageModule,
+    TaskListHeaderPageModule,
+    //
     MatInputModule,
     MatNativeDateModule,
     NgxMatDatetimePickerModule,

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.html

@@ -1,142 +1,33 @@
-<ion-header class="ion-no-border">
-  <!-- <app-header > </app-header> -->
-</ion-header>
 
 <ion-header class="ion-no-border header-2">
+  <app-task-list-header
+    [goBackButton] = true
+    [headerName] = "headerName"
+    [ordinance] = ordinance
+    [loading] = skeletonLoader
+    [loaderTop] = true
+    (reorderList) = reorderList($event)
+    (changeFilterName) = changeFilterName($event)
+    (goBack) = goBack()
+  ></app-task-list-header>
 
-  <app-btn-modal-dismiss (click)="goBack()" ></app-btn-modal-dismiss>
-
-  <div class="title">
-    <div class="thetitle"><ion-label >Expediente</ion-label></div>
-    <div class="theicon btn-refresh d-flex align-center">
-
-      <div class="d-flex" (click)="reorderList('old')" *ngIf="ordinance == 'recent' ">
-
-        <ion-icon  class="mr-10"  src="assets/images/theme/gov/crescente.svg" ></ion-icon>
-      </div>
-
-      <div class="d-flex" (click)="reorderList('recent')" *ngIf="ordinance != 'recent' ">
-        <ion-icon  class="mr-10"  src="assets/images/theme/gov/decrescente.svg" ></ion-icon>
-      </div>
-
-      <mat-form-field class="task-filter-input" appearance="none"   color="ion-color-secondary"  placeholder="Selecione agenda">
-        <mat-select [(value)]="filterName">
-
-          <mat-option value="Para hoje" >
-            Para hoje
-          </mat-option>
-
-          <mat-option value="Novos" >
-            Novos
-          </mat-option>
-
-          <mat-option value="Lidos" >
-            Lidos
-          </mat-option>
-
-          <mat-option value="Não lidos" >
-            Não lidos
-          </mat-option>
-
-          <mat-option value="OverdueTasks">
-            Em atraso
-          </mat-option>
-
-          <mat-option value="Todos" >
-            Todos
-          </mat-option>
-
-        </mat-select>
-      </mat-form-field>
-      <button class="btn-no-color" (click)="refreshing()">
-        <ion-icon slot="end" class="title-icon font-awesome" name="reload-circle"></ion-icon>
-      </button>
-    </div>
-  </div>
 </ion-header>
 <ion-content>
 
-  <div class="main-content width-100 overflow-y-auto height-100">
+  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
+    <ion-refresher-content>
+    </ion-refresher-content>
+  </ion-refresher>
 
-    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
-      <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
-      <ion-refresher-content>
-      </ion-refresher-content>
-    </ion-refresher>
-
-    <div class="width-100" >
-      <ion-progress-bar type="indeterminate" *ngIf="skeletonLoader"></ion-progress-bar>
-      <ion-list>
-        <div
-          class=" ion-no-padding ion-no-margin cursor-pointer"
-          *ngFor = "let task of expedienteGdStore.list"
-          (click)="goToExpediente(task.SerialNumber)"
-        >
-          <div class="item width-100 expediente" *ngIf="TaskService.filter(task, filterName)">
-            <div class="exp-top-detail">
-              <div class="subject d-flex align-center">
-                <ion-label [class.gb-seen]="TaskService.seen(task)">{{ task.Subject }}</ion-label>
-                <span class="dead-line ml-10" *ngIf="TaskService.deadlineIsToday(task.Deadline)">Para hoje</span>
-                <span class="new-task ml-10" *ngIf="TaskService.lessThen24Hours(task.TaskReceiveDate)">Nova</span>
-              </div>
-              <div class="exp-icon">
-                <ion-icon *ngIf="ThemeService.currentTheme == 'default' "src="assets/images/icons-expediente-attachment.svg"></ion-icon>
-                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/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 && expedienteGdStore.list.length == 0 && expedienteGdStore.list.length == 0"
-      class="empty-list d-flex height-100 align-center justify-content-center"
-    >
-      <span>Lista vazia</span>
-    </div>
-
-    <!-- Skeleton loader -->
-    <div *ngIf="skeletonLoader && expedienteGdStore.list.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>
+  <app-task-list
+    [taskList] = list
+    [skeletonLoader] = skeletonLoader
+    (viewTaskDetail)="goToExpediente($event)"
+    [filterName]="filterName"
+  >
+  
+  </app-task-list>
 
 </ion-content>
 

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.scss

@@ -7,9 +7,10 @@
 .header-2 {
     border-top-right-radius: 24px;
     border-top-left-radius: 24px;
+    background-color: white;
 }
 
-ion-content, .header-2, .main-content{
+ion-content, .main-content{
     padding: 30px 20px 0 20px !important;
     background-color: white;
 }

src/app/pages/gabinete-digital/expedientes-pr/expedientes-pr.page.ts

@@ -41,7 +41,8 @@ export class ExpedientesPrPage implements OnInit {
   searchSubject = ''
   list = []
   ordinance: string =  'old'
-
+  headerName = "Expediente"
+  
   constructor(
     private processes:ProcessesService,
     private modalController: ModalController,
@@ -85,6 +86,11 @@ export class ExpedientesPrPage implements OnInit {
     this.dynamicSearch();
   }
 
+
+  changeFilterName(filterName) {
+    this.filterName = filterName
+  }
+
   async dynamicSearch() {
 
     if(this.showSearch && this.searchSubject) {
@@ -136,9 +142,9 @@ export class ExpedientesPrPage implements OnInit {
     }, 2000);
   }
 
-  goToExpediente(serialNumber:any){
+  goToExpediente({SerialNumber}){
     //this.router.navigate(['/home/gabinete-digital/expedientes-pr',serialNumber,'gabinete-digital']);
-    this.router.navigate(['/home/gabinete-digital/expediente', serialNumber, 'gabinete-digital']);
+    this.router.navigate(['/home/gabinete-digital/expediente', SerialNumber, 'gabinete-digital']);
   }
 
   async viewExpedientDetail(serialNumber:any) {
@@ -159,13 +165,7 @@ export class ExpedientesPrPage implements OnInit {
   }
 
   goBack() {
-    // let navigationExtras: NavigationExtras = {
-    //   queryParams: {
-    //     "expedientes-pr": true,
-    //   }
-    // };
-    // this.router.navigate(['/home/gabinete-digital'], navigationExtras);
-
+    
     this.RouteService.goBack();
 
   }