All GET methods for the module Publications have been integrated.

- Create new folder for publications have been integrated.
- Adicional touch to display the data in a more friendly way added.

src/app/app.module.ts

@@ -12,23 +12,31 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
-import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
-const config: SocketIoConfig = { url: 'http://localhost:3001', options: {} };
+
+import { File } from '@ionic-native/File/ngx';
+import { WebView } from '@ionic-native/ionic-webview/ngx';
+import { FilePath } from '@ionic-native/file-path/ngx';
+
+import { IonicStorageModule } from '@ionic/storage';
 
 @NgModule({
   declarations: [AppComponent],
   entryComponents: [],
   imports: [BrowserModule, 
-    IonicModule.forRoot(), 
+    IonicModule.forRoot(),
+    IonicStorageModule.forRoot(),
     AppRoutingModule, 
     HttpClientModule, 
-    SocketIoModule.forRoot(config)],
+    ],
   providers: [
     StatusBar,
     SplashScreen,
     HttpClientModule,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     InAppBrowser,
+    File,
+    WebView,
+    FilePath,
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/home/home-routing.module.ts

@@ -141,12 +141,18 @@ const routes: Routes = [
             path:'view-publications',
             children: [
               {
-                path:'',
+                path:':folderId',
                 loadChildren: ()=> import('../pages/publications/view-publications/view-publications.module').then(m => m.ViewPublicationsPageModule)
               },
               {
                 path:'publication-detail',
-                loadChildren: ()=> import('../pages/publications/view-publications/publication-detail/publication-detail.module').then(m => m.PublicationDetailPageModule)
+                children: [
+                  {
+                    path: ':id',
+                  loadChildren: ()=> import('../pages/publications/view-publications/publication-detail/publication-detail.module').then(m => m.PublicationDetailPageModule)
+                  },
+                ]
+                
               },
             ]  
           },

src/app/models/publication.ts

@@ -0,0 +1,8 @@
+export class Publication{
+    publicationId:string;
+    processId:string;
+    title: string;
+    description: string;
+    imageUrl:string;
+    date: Date;
+}

src/app/models/publicationfolder.ts

@@ -0,0 +1,7 @@
+export class PublicationFolder {
+  ProcessId: number;
+  Description: string;
+  Detail: string;
+  DateBegin: Date;
+  ActionType: string;
+}

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

@@ -38,6 +38,10 @@ export class GabineteDigitalPage implements OnInit {
     });
     console.log(this.eventService.getAllPrEvents.length);
  */
+this.processesbackend.GetActionsList().subscribe(res=>{
+  console.log(res);
+  
+});
   }
 
   LoadCounts() {

src/app/pages/publications/gallery/image-modal/image-modal.page.html

@@ -7,7 +7,7 @@
   <ion-slides>
     <ion-slide>
       <div class="swipper-zoom-container">
-        <img src="assets/images/1.jpg">
+        <img src="{{imageUrl}}">
       </div>
     </ion-slide>
   </ion-slides>

src/app/pages/publications/gallery/image-modal/image-modal.page.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { ModalController, NavParams } from '@ionic/angular';
 
 @Component({
   selector: 'app-image-modal',
@@ -7,8 +7,12 @@ import { ModalController } from '@ionic/angular';
   styleUrls: ['./image-modal.page.scss'],
 })
 export class ImageModalPage implements OnInit {
+  imageUrl:string;
 
-  constructor(private modalController: ModalController,) { }
+  constructor(private modalController: ModalController,
+    private navParams: NavParams) { 
+      this.imageUrl = this.navParams.get('imageUrl');
+    }
 
   ngOnInit() {
   }

src/app/pages/publications/new-action/new-action.page.html

@@ -21,10 +21,21 @@
       <div class="div-title">
         <ion-label class="title"> Nova Ação</ion-label>
       </div>
+      <div class="actionType">
+        <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+          <ion-segment-button value="Viagem">
+            <ion-label>Viagem</ion-label>
+          </ion-segment-button>
+          <ion-segment-button value="Evento">
+            <ion-label>Evento</ion-label>
+          </ion-segment-button>
+        </ion-segment>
+      </div>
+      
     </div>
 
   <div class="ion-item-container">
-    <ion-input placeholder="Assunto" ></ion-input>
+    <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
   </div>
 
   <div class="container-div">
@@ -34,6 +45,7 @@
       </div>
       <div class="ion-input-class">
         <ion-datetime 
+          [(ngModel)]="folder.DateBegin"
           placeholder="Fim"
           displayFormat="D MMM YYYY H:mm"
           minuteValues="0,15,30,45"
@@ -51,7 +63,7 @@
         <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
       </div>
       <div class="ion-textarea-class">
-        <ion-textarea rows="3" cols="20" placeholder="Descrição da ação..."></ion-textarea>
+        <ion-textarea [(ngModel)]="folder.Detail" rows="3" cols="20" placeholder="Descrição da ação..."></ion-textarea>
       </div>
     </div>
   </div>

src/app/pages/publications/new-action/new-action.page.scss

@@ -66,7 +66,7 @@ ion-toolbar{
   padding: 0 !important;
 }
 .div-title{
-  width: 270px;
+  width: 180px;
 /* padding: 0!important; */
 float: left;
 margin: 2.5px 0 0 5px;
@@ -102,6 +102,15 @@ font-size: 25px;
     padding: 10px;
     font-size: 25px;
   }
+  .ion-input-class{
+    width: 315px;
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
   .ion-textarea-class{
     width: 315px;
     height: auto;
@@ -115,4 +124,14 @@ font-size: 25px;
     border: 1px solid #ebebeb;
     border-radius: 5px;
     overflow: auto;
+  }
+  .actionType{
+    width: 170px;
+    padding: 10px;
+   float: right;
+    overflow: auto;
+    border-radius: 30px;
+  }
+  .ion-segment{
+    --background: #0782c9;
   }

src/app/pages/publications/new-action/new-action.page.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { PublicationsService } from 'src/app/services/publications.service';
 
 @Component({
   selector: 'app-new-action',
@@ -8,14 +10,36 @@ import { ModalController } from '@ionic/angular';
 })
 export class NewActionPage implements OnInit {
 
+  folder: PublicationFolder;
+  segment:string;
+
   constructor(
     private modalController: ModalController,
-  ) { }
+    private publication: PublicationsService
+  ) { 
+    this.folder = new PublicationFolder();
+  }
 
   ngOnInit() {
+    this.segment = "Viagem";
   }
+
+  segmentChanged(ev: any) {
+    console.log(ev.detail.value);
+  }
+
   save(){
-    console.log('Salvar...');
+    this.folder = {
+      ProcessId: null,
+      Description: this.folder.Description,
+      Detail: this.folder.Detail,
+      DateBegin: this.folder.DateBegin,
+      ActionType: this.segment,
+    }
+    console.log(this.folder);
+    
+    this.publication.CreatePublicationFolder(this.folder);
+    this.close();
   }
   close(){
     this.modalController.dismiss();

src/app/pages/publications/new-publication/new-publication.page.html

@@ -23,7 +23,7 @@
       </div>
     </div>
   <div  *ngIf="publicationType!='1'" class="ion-item-container">
-    <ion-input placeholder="Título" ></ion-input>
+    <ion-input [(ngModel)]="pub.title" placeholder="Título" ></ion-input>
   </div>
 
   <div *ngIf="publicationType!='1'" class="container-div">
@@ -32,10 +32,30 @@
         <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
       </div>
       <div class="ion-textarea-class">
-        <ion-textarea rows="6" cols="20" placeholder="Corpo de texto..."></ion-textarea>
+        <ion-textarea [(ngModel)]="pub.description" rows="6" cols="20" placeholder="Corpo de texto..."></ion-textarea>
       </div>
     </div>
   </div>
+  <div *ngIf="publication" class="ion-item-container-no-border">
+    <ion-label class="attached-title">Fotografia Anexada</ion-label>
+    <ion-item lines="none">
+      <ion-thumbnail slot="start">
+        <ion-img [(ngModel)]="pub.imageUrl" [src]="pub.imageUrl"></ion-img>
+      </ion-thumbnail>
+     <!--  <ion-thumbnail *ngIf="!publication" slot="start">
+        <ion-img [(ngModel)]="publication.imageUrl" [src]="guestPicture"></ion-img>
+      </ion-thumbnail> -->
+      <ion-label>
+        <p>Nome da foto</p>
+        <p>size</p>
+      </ion-label>
+      <ion-icon name="close"></ion-icon>
+    </ion-item>
+    
+    <!-- <ion-thumbnail>
+      <ion-img src="{{imgUrl}}"></ion-img>
+    </ion-thumbnail> -->
+  </div>
 
   <div class="ion-item-container-no-border">
     <ion-label>
@@ -43,13 +63,13 @@
         <ion-icon src="assets/images/icons-add-photo.svg"></ion-icon>
       </div>
       <div class="attach-document">
-        <ion-label>Tirar Fotografia</ion-label>
-      </div> 
-    </ion-label>
+        <ion-button (click)="takePicture()">Tirar Fotografia</ion-button>
+      </div>
+      </ion-label>
   </div>
 
   <div class="ion-item-container-no-border">
-    <ion-label (click)="openGallery()">
+    <ion-label (click)="getGallery()">
       <div class="attach-icon">
         <ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
       </div>

src/app/pages/publications/new-publication/new-publication.page.scss

@@ -128,4 +128,14 @@ font-size: 25px;
     width: 37px;
     font-size: 35px;
     float: left;
+  }
+  .attached-title{
+  font-family: Roboto;
+  font-size: 15px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #000;
   }

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -1,6 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController, NavParams } from '@ionic/angular';
 import { GalleryPage } from '../gallery/gallery.page';
+/* import { Camera } from '@ionic-native/camera/ngx'; */
+
+import {Plugins, CameraResultType, CameraSource} from '@capacitor/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { PublicationsService } from 'src/app/services/publications.service';
+import { Publication } from 'src/app/models/publication';
+/* import { Camera } from '@ionic-native/camera/ngx'; */
+
+/* const { Camera } = Plugins; */
 
 @Component({
   selector: 'app-new-publication',
@@ -8,11 +17,23 @@ import { GalleryPage } from '../gallery/gallery.page';
   styleUrls: ['./new-publication.page.scss'],
 })
 export class NewPublicationPage implements OnInit {
+  publication: Publication;
+  pub: Publication = new Publication();
+
   publicationType:string;
   publicationTitle:string;
+  imgUrl:any;
+
+  photo: SafeResourceUrl;
+
+  guestPicture:any;
+
   constructor(
     private modalController: ModalController,
     private navParams: NavParams,
+/*     private camera: Camera, */
+    private sanitizer: DomSanitizer,
+    private publications: PublicationsService,
     ) {
       this.publicationType = this.navParams.get('publicationType');
       this.publicationTitle = 'Nova Publicação';
@@ -20,10 +41,49 @@ export class NewPublicationPage implements OnInit {
 
   ngOnInit() {
     this.setTitle();
+   
   }
+
+
+  /* async takePictures() {
+    try {
+      const profilePicture = await Camera.getPhoto({
+        quality: 90,
+        allowEditing: false,
+        resultType: CameraResultType.Base64,
+      }).then(res =>{
+        console.log(res);
+        
+      });
+      console.log(profilePicture);
+      
+      this.guestPicture = "data:image/jpg;base64," + profilePicture.base64String;
+    } catch (error) {
+      console.error(error);
+    }
+  } */
+
+ 
+
   save(){
-    
+    if(this.publication.processId){
+      this.publication = {
+        publicationId:this.publication.publicationId,
+        processId:this.publication.processId,
+        title: this.publication.title,
+        description: this.publication.description,
+        imageUrl:this.publication.imageUrl,
+        date: this.publication.date,
+      }
+      console.log('Edit'); 
+    }
+    else{
+      console.log('Create');
+      
+    }
   }
+
+
   close(){
     this.modalController.dismiss();
   }
@@ -35,7 +95,10 @@ export class NewPublicationPage implements OnInit {
       this.publicationTitle = 'Nova Publicação'
     }
     else if(this.publicationType == '3'){
-      this.publicationTitle = 'Editar Publicação'
+      this.publicationTitle = 'Editar Publicação';
+      this.pub = this.navParams.get('publication');
+      
+
     }
   }
 
@@ -51,4 +114,38 @@ export class NewPublicationPage implements OnInit {
     modal.onDidDismiss();
   }
 
+   async takePicture(){
+    const image = await Plugins.Camera.getPhoto({
+      quality: 100,
+      allowEditing: false,
+      resultType: CameraResultType.DataUrl,
+      source: CameraSource.Camera
+    });
+
+    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
+  }
+  openCamera(){
+    /* this.camera.getPicture({
+      sourceType: this.camera.PictureSourceType.CAMERA,
+      destinationType: this.camera.DestinationType.FILE_URI,
+    }).then((res)=>{
+      this.imgUrl = res;
+    }).catch(e=>{
+      console.log(e);
+    });
+    console.log('camera'); */
+    
+  }
+
+  getGallery(){
+    /* this.camera.getPicture({
+      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
+      destinationType: this.camera.DestinationType.DATA_URL,
+    }).then((res)=>{
+      this.imgUrl = 'data:image/jpeg;base64,' + res;
+    }).catch(e=>{
+      console.log(e);
+    }); */
+  }
+
 }

src/app/pages/publications/publications.page.html

@@ -24,26 +24,33 @@
         <ion-icon (click)="AddPublicationFolder()" slot="end" src='assets/images/icons-add.svg'></ion-icon>
       </div>
     </div>
-    <div class="item" [routerLink]="['/home/publications/view-publications']">
+    <!-- [routerLink]="['/home/publications/view-publications', folder.ProcessId]" -->
+    <div class="item" 
+    *ngFor="let viagem of publicationsTravelFolderList"
+    
+    (click)="viewPublications(viagem)">
       <div class="item-icon">
         <ion-icon slot="end" src='assets/images/icons-plane-active.svg'></ion-icon>
       </div>
       <div class="item-content">
         <ion-label>
-          <p class="item-content-date">12 de Janeiro</p>
-          <p class="item-content-title">Viagem a Maputo</p>
-          <p class="item-content-detail">Investida de Filipe Nyusi</p>
+          <p class="item-content-date">{{viagem.DateBegin}}</p>
+          <p class="item-content-title">{{viagem.Description}}</p>
+          <p class="item-content-detail">{{viagem.Detail}}</p>
         </ion-label>
       </div>
     </div>
-    <div class="item">
+    <div class="item"
+    
+    *ngFor="let evento of publicationsEventFolderList"
+    (click)="viewPublications(evento)">
       <div class="item-icon2">
         <ion-icon slot="end" src='assets/images/icons-nav-actions.svg'></ion-icon>
       </div>
       <div class="item-content">
         <ion-label>
-          <p class="item-content-date">07 de Janeiro</p>
-          <p class="item-content-title">Decreto de Cadastro Social Único</p>
+          <p class="item-content-date">{{evento.DateBegin}}</p>
+          <p class="item-content-title">{{evento.Description}}</p>
         </ion-label>
       </div>
     </div>

src/app/pages/publications/publications.page.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { ProcessesService } from 'src/app/services/processes.service';
+import { PublicationsService } from 'src/app/services/publications.service';
 import { NewActionPage } from './new-action/new-action.page';
+import { ViewPublicationsPage } from './view-publications/view-publications.page';
 
 @Component({
   selector: 'app-publications',
@@ -9,9 +13,29 @@ import { NewActionPage } from './new-action/new-action.page';
 })
 export class PublicationsPage implements OnInit {
 
-  constructor(private modalController: ModalController,) { }
+  publicationFolderList: PublicationFolder[];
+  publicationsEventFolderList: PublicationFolder[];
+  publicationsTravelFolderList: PublicationFolder[];
+
+  constructor(
+    private modalController: ModalController,
+    private publications: PublicationsService,
+    ) { }
 
   ngOnInit() {
+    this.getActions();
+  }
+
+  getActions(){
+    this.publications.GetPublicationFolderList().subscribe(res=>{
+      this.publicationFolderList = res;
+      console.log(res);
+      
+      this.publicationsEventFolderList = res.filter(data => data.ActionType == "Evento");
+      this.publicationsTravelFolderList = res.filter(data => data.ActionType == "Viagem");
+      console.log(this.publicationsTravelFolderList);
+
+    });
   }
 
   async AddPublicationFolder(item:any) {
@@ -27,4 +51,18 @@ export class PublicationsPage implements OnInit {
     modal.onDidDismiss();
   }
 
+  async viewPublications(folder: PublicationFolder) {
+    let item =  this.publicationFolderList;
+    const modal = await this.modalController.create({
+      component: ViewPublicationsPage,
+      componentProps:{
+        item:folder,
+      },
+      cssClass: 'new-action',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
 }

src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html

@@ -17,24 +17,50 @@
 <ion-content>
   <div class="content-top"></div>
   <div class="content-container">
+    <div *ngIf="publication.title != ''">
     <div class="title-content">
       <div class="back-icon">
-        <ion-icon [routerLink]="['/home/publications/view-publications']" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
       </div>
       <div class="div-title">
-        <ion-label class="title"> Aterragem em Maputo</ion-label>
-        <p class="post-data">Há 1h atrás</p>
+        <ion-label class="title"> {{publication.title}}</ion-label>
+        <p class="post-data">{{publication.date}}</p>
       </div>
     </div>
     <div class="post-item">
-      <div class="post-img">
-        <img src='assets/images/1.jpg' alt='image' tappable (click)="openPreview()">
+      <div *ngIf="publication.imageUrl.length > 30" class="post-img">
+        <img src="{{publication.imageUrl}}" alt="image" tappable (click)="openPreview(publication.imageUrl)">
+      </div>
+      <div *ngIf="publication.imageUrl.length < 30" class="post-img">
+        <img src="/assets/icon/icon-no-image.svg" alt="image">
       </div>
       <div class="post-description">
-        <p>Presidente João Lourenço chega a Maputo para investidura de Filipe Nyusi como presidente de Moçambique</p>
+        <p>{{publication.description}}</p>
       </div>
     </div>
-  </div>    
+  </div>
+    <div *ngIf="publication.title == ''">
+      <div class="title-content">
+        <div class="back-icon">
+          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        </div>
+        <div class="div-title">
+          <ion-label class="title"><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></ion-label>
+          <p class="post-data"><ion-skeleton-text animated style="width: 20%;"></ion-skeleton-text></p>
+        </div>
+      </div>
+      <div class="post-item">
+        <div class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-description">
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+          <p><ion-skeleton-text animated></ion-skeleton-text></p>
+        </div>
+      </div>
+
+    </div>
+  </div>     
 </ion-content>
 <ion-footer>
   <ion-toolbar class="footer-toolbar">

src/app/pages/publications/view-publications/publication-detail/publication-detail.page.scss

@@ -79,4 +79,16 @@
   }
   .title{
     font-size: 25px;
-  }
+  }
+  .post-img{
+    width: 360px;
+    height: 200px;
+    margin: 0 auto;
+    border-radius: 0px!important;
+    overflow: hidden;
+}
+.post-img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

src/app/pages/publications/view-publications/publication-detail/publication-detail.page.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { ModalController, NavParams } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { PublicationsService } from 'src/app/services/publications.service';
 import { ImageModalPage } from '../../gallery/image-modal/image-modal.page';
 import { NewPublicationPage } from '../../new-publication/new-publication.page';
 
@@ -10,9 +12,48 @@ import { NewPublicationPage } from '../../new-publication/new-publication.page';
 })
 export class PublicationDetailPage implements OnInit {
 
-  constructor(private modalController: ModalController,) { }
+  publicationId: string;
+  folderId: string;
+  publication: Publication;
+
+  constructor(
+    private modalController: ModalController,
+    private navParams:NavParams,
+    private publications:PublicationsService,
+    ) { 
+      this.publicationId = this.navParams.get('publicationId');
+      this.folderId = this.navParams.get('folderIdId');
+      this.publication = {
+        publicationId: '',
+        processId:'',
+        title:'',
+        description: '',
+        imageUrl: '',
+        date: null,
+      };
+    }
 
   ngOnInit() {
+    console.log(this.publication.imageUrl);
+    
+    this.getPublicationDetail();
+  }
+
+  getPublicationDetail(){
+    this.publications.GetPublicationById(this.folderId,this.publicationId).subscribe(res=>{
+      this.publication = {
+        publicationId: res.DocumentId,
+        processId:res.ProcessId,
+        title:res.Title,
+        description: res.Message,
+        imageUrl: "data:image/jpg;base64," + res.FileBase64,
+        date: res.DatePublication,
+      }
+    })
+  }
+
+  close(){
+    this.modalController.dismiss();
   }
 
   deletePost(){
@@ -20,10 +61,13 @@ export class PublicationDetailPage implements OnInit {
   }
 
   async editPost(publicationType:any) {
+    console.log(this.publication);
+    
     const modal = await this.modalController.create({
       component: NewPublicationPage,
       componentProps:{
         publicationType: publicationType,
+        publication: this.publication,
       },
       cssClass: 'new-publication',
       backdropDismiss: false
@@ -32,10 +76,11 @@ export class PublicationDetailPage implements OnInit {
     modal.onDidDismiss();
   }
 
-  openPreview(){
+  openPreview(imageUrl:string){
     this.modalController.create({
       component: ImageModalPage,
       componentProps: {
+        imageUrl:imageUrl,
       }
     }).then(modal => modal.present());
   }

src/app/pages/publications/view-publications/view-publications.page.html

@@ -19,12 +19,12 @@
   <div class="content-container">
     <div class="title-content">
       <div class="back-icon">
-        <ion-icon [routerLink]="['/home/publications']" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+        <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
       </div>
       <div class="div-title">
-        <ion-label class="title">Viagem a Maputo</ion-label>
-        <p class="item-content-detail">Investida de Filipe Nyusi</p>
-        <p class="item-content-date">12 de Janeiro</p>
+        <ion-label class="title">{{item.Description}}</ion-label>
+        <p class="item-content-detail">{{item.Detail}}</p>
+        <p class="item-content-date">{{item.DateBegin}}</p>
       </div>
       <div class="actions-icon">
         <ion-icon (click)="AddPublication('1')" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon>
@@ -32,36 +32,57 @@
       </div>
     </div>
     <ion-list>
+      <!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
       <div class="post-item"
-      [routerLink]="['/home/publications/view-publications/publication-detail']">
-        <div class="post-img">
-          <img src='assets/images/1.jpg' alt='image'>
+      *ngFor="let publication of publicationList"
+      (click)="viewPublicationDetail(publication.processId,publication.publicationId)">
+        <div *ngIf="publication.imageUrl.length > 30" class="post-img">
+          <img src="{{publication.imageUrl}}" alt="image">
+        </div>
+        <div *ngIf="publication.imageUrl.length < 30" class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
         </div>
         <div class="post-content">
           <div class="post-title-time">
             <div class="post-title">
-              <ion-label>Ateragem em Maputo</ion-label>
+              <ion-label>{{publication.title}}</ion-label>
             </div>
-            <div class="post-data">1h</div>
+            <div class="post-data">{{publication.date}}</div>
           </div>
           <div class="post-description">
-            <p>Presidente João Lourenço chega a Maputo para investidura de Filipe Nyusi como presidente de Moçambique</p>
+            <p>{{publication.description}}</p>
           </div>
         </div>
       </div>
-      <div class="post-item">
+      <div *ngIf="!publicationList" class="post-item">
         <div class="post-img">
-          <img src='assets/images/2.jpg' alt='image'>
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
         </div>
         <div class="post-content">
           <div class="post-title-time">
             <div class="post-title">
-              <ion-label>Tomada de Posse</ion-label>
+              <ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
             </div>
-            <div class="post-data">1h</div>
+            <div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
           </div>
           <div class="post-description">
-            <p>Filipe Nyusi, que toma posse para um segundo mandato como presidente de Moçambique, foi releito a 15 de Outubro, com 73% do votos, uma maioria qualificada à Frente de Libertação de Moçambique (FRELIMO) na Assembleia da República</p>
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
+          </div>
+        </div>
+        <div class="post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-content">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label><ion-skeleton-text animated animated style="width: 60%;"></ion-skeleton-text></ion-label>
+            </div>
+            <div class="post-data"><ion-skeleton-text animated style="width: 25%; float: right;"></ion-skeleton-text></div>
+          </div>
+          <div class="post-description">
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
+            <p><ion-skeleton-text animated></ion-skeleton-text></p>
           </div>
         </div>
       </div>

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -101,14 +101,19 @@
     width: 360px;
     overflow: auto;
     margin: 0 auto;
+    border-radius: 0px;
   }
   .post-img{
-      width: 100%;
+      width: 360px;
+      height: 200px;
       margin: 0 auto;
+      border-radius: 0px!important;
+      overflow: hidden;
   }
   .post-img img{
       width: 100%;
       height: 100%;
+      object-fit: cover;
   }
   .post-content{
     width: 360px;

src/app/pages/publications/view-publications/view-publications.page.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { ModalController, NavParams } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { PublicationsService } from 'src/app/services/publications.service';
 import { NewPublicationPage } from '../new-publication/new-publication.page';
+import { PublicationDetailPage } from './publication-detail/publication-detail.page';
 
 @Component({
   selector: 'app-view-publications',
@@ -8,10 +12,43 @@ import { NewPublicationPage } from '../new-publication/new-publication.page';
   styleUrls: ['./view-publications.page.scss'],
 })
 export class ViewPublicationsPage implements OnInit {
+  publicationList: Publication[];
+  item: PublicationFolder;
 
-  constructor(private modalController: ModalController,) { }
+  constructor(
+    private modalController: ModalController,
+    private publications: PublicationsService,
+    private navParams: NavParams,
+    ) { 
+      this.item = this.navParams.get('item');
+     }
 
   ngOnInit() {
+    this.getPublications()
+    /* console.log(this.item); */
+  }
+  close(){
+    this.modalController.dismiss();
+  }
+  getPublications(){
+    /* console.log(this.item.ProcessId); */
+    
+    this.publications.GetPublications(this.item.ProcessId).subscribe(res=>{
+      this.publicationList = new Array();
+      console.log(res);
+      res.forEach(element => {
+        let item: Publication = {
+          "publicationId":element.DocumentId,
+          "processId":element.ProcessId,
+          "title":element.Title,
+          "description": element.Message,
+          "imageUrl": "data:image/jpg;base64," + element.FileBase64,
+          "date": element.DatePublication,
+        }
+        this.publicationList.push(item);
+      });
+      console.log(this.publicationList);
+    });
   }
 
   async AddPublication(publicationType:any) {
@@ -27,4 +64,18 @@ export class ViewPublicationsPage implements OnInit {
     modal.onDidDismiss();
   }
 
+  async viewPublicationDetail(processId:string, publicationId:string) {
+    const modal = await this.modalController.create({
+      component: PublicationDetailPage,
+      componentProps:{
+        publicationId: publicationId,
+        folderId: processId,
+      },
+      cssClass: 'publication-detail',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  }
+
 }

src/app/services/processes.service.ts

@@ -138,6 +138,17 @@ export class ProcessesService {
     });
   }
 
+
+  GetActionsList(){
+    const geturl = environment.apiURL + 'presidentialActions';
+    let options = { 
+      headers: this.headers, 
+    };
+    console.log(options);
+    
+    return this.http.get<any>(`${geturl}`, options);
+  }
+
   
 
 

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

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

src/app/services/publications.service.ts

@@ -0,0 +1,110 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { environment } from 'src/environments/environment';
+import { AuthService } from '../services/auth.service';
+import { User } from '../models/user.model';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PublicationsService {
+
+  authheader = {};
+  loggeduser: User;
+  headers: HttpHeaders;
+
+  constructor(private http: HttpClient, user: AuthService) { 
+    this.loggeduser = user.ValidatedUser;
+    this.headers = new HttpHeaders();
+    this.headers = this.headers.set('Authorization', this.loggeduser.BasicAuthKey);
+  }
+
+  GetPublicationFolderList(){
+    const geturl = environment.apiURL + 'presidentialActions';
+    let options = { 
+      headers: this.headers, 
+    };
+    return this.http.get<any>(`${geturl}`, options);
+  }
+
+  GetPublicationFolderById(id:any){
+    const geturl = environment.apiURL + 'presidentialActions';
+    let params = new HttpParams();
+
+    params = params.set("id", id);
+
+    let options = { 
+      headers: this.headers,
+      params: params
+    };
+    return this.http.get<any>(`${geturl}`, options);
+  }
+
+  CreatePublicationFolder(body:any){
+    const geturl = environment.apiURL + 'presidentialActions';
+    let options = { 
+      headers: this.headers,
+    };
+    return this.http.post<any>(`${geturl}`, body, options).toPromise().then(res =>{
+      console.log(res);
+    });
+  }
+
+  UpdatePublicationFolder(body:any){
+    const geturl = environment.apiURL + 'presidentialActions';
+    let options = { 
+      headers: this.headers,
+    };
+    return this.http.put<any>(`${geturl}`, body, options).toPromise().then(res =>{
+      console.log(res);
+    });
+  }
+
+  DeletePublicationFolderById(id:any){
+    const geturl = environment.apiURL + 'presidentialActions';
+    let params = new HttpParams();
+
+    params = params.set("id", id);
+
+    let options = { 
+      headers: this.headers,
+      params: params
+    };
+    return this.http.delete<any>(`${geturl}`, options);
+  }
+
+  GetPublications(id:any){
+    const geturl = environment.apiURL + 'presidentialActions/'+ id +'/posts';
+    let params = new HttpParams();
+
+    params = params.set("folderId", id);
+
+    let options = { 
+      headers: this.headers,
+      params: params
+    };
+    return this.http.get<any>(`${geturl}`, options);
+  }
+
+  GetPublicationById(folderId:any, publicationId:any){
+    const geturl = environment.apiURL + 'presidentialActions/'+ folderId +'/posts/'+ publicationId;
+    let params = new HttpParams();
+
+    params = params.set("folderId", folderId);
+    params = params.set("id", publicationId);
+
+
+    console.log(params);
+    
+
+    let options = { 
+      headers: this.headers,
+      params: params
+    };
+    return this.http.get<any>(`${geturl}`, options);
+  }
+
+}
+
+