Added styles to Expediente Module

src/app/pages/gabinete-digital/expediente-modal/expediente-modal.page.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import { LoadingService } from 'src/app/services/loading.service';
 
 @Component({
   selector: 'app-expediente-modal',
@@ -17,9 +18,10 @@ export class ExpedienteModalPage implements OnInit {
 
   modalReady = false;
 
-  constructor(private modalCtrl: ModalController) { }
+  constructor(private modalCtrl: ModalController, private loadingService: LoadingService) { }
 
   ngOnInit() {
+    this.loading();
   }
 
   ngAfterViewInit(): void {
@@ -43,4 +45,7 @@ export class ExpedienteModalPage implements OnInit {
   close(){
     this.modalCtrl.dismiss();
   }
+  loading(){
+    this.loadingService.simpleLoading("A carregar...");
+  }
 }

src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.html

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/expediente"></ion-back-button>
     </ion-buttons>
-    <ion-title>Expediente</ion-title>
+    <ion-title>Detalhes do Documento</ion-title>
   </ion-toolbar>
 </ion-header>
 
@@ -11,26 +11,20 @@
   <ion-item-group>
     <ion-item>
       <ion-label position="stacked">Assunto</ion-label>
-      <ion-input >{{ task.Folio }}</ion-input>
+      <ion-input disabled="true">{{ task.Folio }}</ion-input>
     </ion-item>
     <ion-item>
       <ion-label position="stacked">Remetentes</ion-label>
-      <ion-list>
+      <ion-input disabled="true">{{ task.Senders }}</ion-input>
-        <ion-item>
-          <ion-input>{{ task.Senders }}</ion-input>
-        </ion-item>
-      </ion-list>
     </ion-item>
     <ion-item>
       <ion-label position="stacked">Data</ion-label>
-      <ion-input value=''>{{ task.CreateDate }}</ion-input>
+      <ion-input disabled="true" value=''>{{ task.CreateDate }}</ion-input>
     </ion-item>
-    <ion-list>
+    <ion-button  (click)="viewDocument()" shape="round" expand="outline">
-      <ion-item (click)="viewDocument()">
+      <ion-icon name="attach" slot="start"></ion-icon>
-        <ion-icon name="attach" slot="start"></ion-icon>
+      Ver documento
-        <ion-label>Ver documento</ion-label>
+    </ion-button>
-      </ion-item>
-    </ion-list>
   </ion-item-group>
 </ion-content>
 

src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.scss

@@ -1,14 +1,8 @@
-.event-detail-buttons{
+ion-item-group{
+    margin: 15px;
+}
+ion-button{
+    display: block;
     width: 80%;
-    margin: 10px auto;
+    margin: 15px auto;
-}
-.event-detail-buttons ion-button{
-    width: 40%;
-}
-.ion-button-left{
-    float: left;
-    background: none;
-}
-.ion-button-right{
-    float: right;
 }

src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts

@@ -4,6 +4,7 @@ import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 import { DailyWorkTask } from '../../../../models/dailyworktask.model';
 import { ActivatedRoute } from '@angular/router';
 import { formatDate } from '@angular/common';
+import { LoadingService } from 'src/app/services/loading.service';
 
 @Component({
   selector: 'app-expediente-detail',
@@ -12,13 +13,17 @@ import { formatDate } from '@angular/common';
 })
 export class ExpedienteDetailPage implements OnInit {
 
-  constructor(private activateRoute: ActivatedRoute,private processes:ProcessesService,private iab: InAppBrowser) { }
+  constructor(private activateRoute: ActivatedRoute,
+    private processes:ProcessesService,
+    private iab: InAppBrowser,
+    private loadingService: LoadingService) { }
 
   task = new DailyWorkTask();
 
   serialnumber:string;
 
   ngOnInit() {
+    this.loading();
     this.activateRoute.paramMap.subscribe(paramMap => {
       if (!paramMap.has('SerialNumber')){
         return;
@@ -46,4 +51,7 @@ export class ExpedienteDetailPage implements OnInit {
     const browser = this.iab.create(this.task.DocumentURL);
     browser.show();
   }
+  loading(){
+    this.loadingService.simpleLoading("A carregar...");
+  }
 }

src/app/pages/gabinete-digital/expediente/expediente.page.html

@@ -5,9 +5,6 @@
     </ion-buttons>
     <ion-title>Gabinete Digital</ion-title>
   </ion-toolbar>
-</ion-header>
-
-<ion-content>
   <ion-toolbar>
     <ion-segment [(ngModel)]="segment">
       <ion-segment-button value="expediente">
@@ -18,19 +15,29 @@
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
+      <ion-refresher-content
+        pullingIcon="chevron-down-circle-outline"
+        pullingText="deslize para actualizar"
+        refreshingSpinner="circles"
+        refreshingText="A actualizar...">
+      </ion-refresher-content>
+    </ion-refresher>
+  
   <div [ngSwitch]="segment">
     <ion-list *ngSwitchCase="'expediente'">
       <ion-item-group>
         <ion-item-sliding>
-          <ion-item lines="none" 
+          <ion-item lines="none" *ngFor = "let task of taskslist" >
-          *ngFor = "let task of taskslist">
             <div class="div-content-expediente">
               <ion-item lines="none"  [routerLink]="['/home/gabinete-digital/1',task.SerialNumber]">
-                <ion-icon slot="end" name="document-outline">
+                <ion-icon slot="end" name="document-outline"></ion-icon>
-                </ion-icon>
                  <h3>{{ task.Folio }}</h3>
               </ion-item>
-              <p><span class="span-left">{{ task.Senders }}</span><span class="span-right">{{ task.CreateDate }}</span></p>
+              <p><span class="span-left">{{ task.Senders }}</span><span class="span-right">{{ task.CreateDate | date: 'dd-MM-yy' }}</span></p>
             </div>
           </ion-item>
         </ion-item-sliding>
@@ -52,10 +59,10 @@
       </ion-item-group>
     </ion-list>
   </div>
-  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+  <!-- <ion-fab vertical="bottom" horizontal="end" slot="fixed">
     <ion-fab-button>
       <ion-icon name="create" (click)="openExpedienteModal()"></ion-icon>
     </ion-fab-button>
-  </ion-fab>
+  </ion-fab> -->
 </ion-content>
 

src/app/pages/gabinete-digital/expediente/expediente.page.scss

@@ -13,22 +13,28 @@
     margin: 0;
   }
 //DIV
+ion-item{
+  --background: none;
+}
 .div-content-expediente{
   width: 100%;
   float: left;
   border-left: 3px solid #dae3f3;
-  padding: 0 0 0 5px;
+  padding:5px 5px 15px 5px;
+  margin: 10px 0 10px 0;
+  background:  #dae3f3;
+  border-radius: 20px;
 }
 .div-content-pendentes{
   width: 100%;
   float: left;
   border-left: 3px solid #d9d9d9;
-  padding: 0 0 0 5px;
+  padding: 5px;
 }
   .div-content-expediente h3, .div-content-pendentes h3{
     margin: 0;
     padding: 0;
-    font-size: 16pt;
+    font-size: 14pt;
     width: 100%;
   }
   .div-icon{
@@ -51,13 +57,13 @@
   .span-left{
       /* border: 1px solid red; */
       float: left;
-      font-size: 10px;
+      font-size: 12px;
       padding-left: 18px;
   }
   .span-right{
     /* border: 1px solid blue; */
     text-align: right;
     float: right;
-    font-size: 10px;
+    font-size: 12px;
     padding-right: 18px;
 }

src/app/pages/gabinete-digital/expediente/expediente.page.ts

@@ -7,6 +7,7 @@ import { CalendarComponent } from 'ionic2-calendar';
 import { DailyWorkTask } from '../../../models/dailyworktask.model';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { formatDate } from '@angular/common';
+import { LoadingService } from 'src/app/services/loading.service';
 
 @Component({
   selector: 'app-expediente',
@@ -21,11 +22,15 @@ export class ExpedientePage implements OnInit {
 
   taskslist:DailyWorkTask[];
 
-  constructor(private router: Router,private modalCtrl: ModalController, private processes:ProcessesService ) { }
+  constructor(
+    private router: Router,private modalCtrl: ModalController, 
+    private processes:ProcessesService, 
+    private loadingService:LoadingService) { }
 
   ngOnInit() {
     //Inicializar segment
     this.segment = "expediente";
+    this.loading();
     this.LoadList();
   }
 
@@ -58,5 +63,16 @@ export class ExpedientePage implements OnInit {
     });
   }
 
+  loading(){
+    this.loadingService.simpleLoading("A carregar...");
+  }
+  doRefresh(event) {
+    this.LoadList();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
+
 }
   

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

@@ -3,9 +3,9 @@
       text-align: center;
   }
 
-
 ion-card{
   background-color: #d4d5ca;
+  border-radius: 20px;
 }
 ion-item{
   --ion-background-color:#dae3f3;

src/app/services/loading.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoadingService } from './loading.service';
+
+describe('LoadingService', () => {
+  let service: LoadingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoadingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/loading.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { LoadingController } from '@ionic/angular';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoadingService {
+
+  constructor(public loadingController: LoadingController) { }
+
+  async simpleLoading(message:string) {
+    const loading = await this.loadingController.create({
+      cssClass: 'my-custom-class',
+      message:message,
+      duration: 2000
+    });
+    await loading.present();
+
+    const { role, data } = await loading.onDidDismiss();
+    console.log('Loading dismissed!');
+  }
+
+  async customizedLoading() {
+    const loading = await this.loadingController.create({
+      cssClass: 'my-custom-class',
+      spinner: null,
+      duration: 5000,
+      message: 'Click the backdrop to dismiss early...',
+      translucent: true,
+      backdropDismiss: true
+    });
+    await loading.present();
+
+    const { role, data } = await loading.onDidDismiss();
+    console.log('Loading dismissed with role:', role);
+  }
+
+}