Merge branch 'feature/calendar' into feature/chat

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

@@ -13,9 +13,9 @@
     <div class="d-flex height-100">
 
       <!--  -->
-      <div class="d-flex aside-wrapper flex-column pt-25 justify-center max-width-md-40 width-40">
+      <div class="d-flex aside-wrapper flex-column pt-25 justify-center width-md-40 ">
         <p class="text-center mt-0 aside-title px-20">Gabinete Digital</p>
-        <div class="aside overflow-y-auto d-flex flex-wrap justify-center width-100">
+        <div class="aside overflow-y-auto d-flex d-md-block  flex-wrap justify-center width-100 px-20">
           <div class="exp-card d-flex flex-column justify-center" (click)="openEventsToApproveList('MDGPR')">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-agenda.svg"></ion-icon>
@@ -23,7 +23,7 @@
             <p class="text-center exp-card-title ">Eventos para Aprovação</p>
             <p class="text-center exp-card-content">{{count_ev_md+count_ev_pr}} <span class="title1">Documentos</span></p>
           </div>
-          <div class="exp-card d-flex flex-column justify-center width-md-100" (click)="openExpedientList()">
+          <div class="exp-card d-flex flex-column justify-center" (click)="openExpedientList()">
             <div class="d-flex justify-center">
               <ion-icon  src="assets/images/icons-correspondencia.svg"></ion-icon>
             </div>

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

@@ -82,7 +82,6 @@ ion-content{
   }
 }
 .title-content{
-  width: 360px;
   height: auto;
   margin: 0 auto;
   overflow: hidden;
@@ -162,9 +161,6 @@ ion-content{
         text-align: left;
       }
     }
-    .aside{
-      width: 340px;
-    }
     .aside-content{
       display: flex !important;
       background-color: white;
@@ -174,7 +170,7 @@ ion-content{
   .exp-card{
     margin: 5px auto;
     flex-direction: row !important;
-    width: 300px;
+    width: 100%;
     padding-right: 11px;
     padding-bottom: 5px;
     padding-top: 5px;

src/app/pages/publications/publication-detail/publication-detail-routing.module.ts

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

src/app/pages/publications/publication-detail/publication-detail.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 { PublicationDetailPageRoutingModule } from './publication-detail-routing.module';
+
+import { PublicationDetailPage } from './publication-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PublicationDetailPageRoutingModule
+  ],
+  declarations: [PublicationDetailPage]
+})
+export class PublicationDetailPageModule {}

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

@@ -0,0 +1,84 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar class="ion-no-border bg-blue">
+    <div class="div-top-header">
+    <div class="div-search">
+      <ion-icon src='assets/images/icons-search.svg'></ion-icon>
+    </div>
+    <div class="div-logo">
+      <img src='assets/images/logo-no-bg.png' alt='logo'>
+    </div>
+    <div class="div-profile">
+      <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
+    </div>
+  </div>
+</ion-toolbar>
+
+</ion-header>
+<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 (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+      </div>
+      <div class="div-title">
+        <ion-label class="title"> {{publication.Title}}</ion-label>
+        <p class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</p>
+      </div>
+    </div>
+    <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="post-item">
+      <div *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
+      </div>
+      <div *ngIf="publication.FileBase64.length < 30" class="post-img">
+        <img src="/assets/icon/icon-no-image.svg" alt="image">
+      </div>
+      <div class="post-description">
+        <p>{{publication.Message}}</p>
+      </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">
+    <ion-buttons slot="start">
+      <ion-button class="btn-delete" fill="clear" color="#ffe0e0" (click)="deletePost()">
+        <ion-label>Eliminar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="editPost('3')">
+        <ion-label>Editar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+

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

@@ -0,0 +1,99 @@
+:host{
+    background: #0782c9;
+  }
+  ion-content{
+    --background: transparent;
+    transform: translate3d(0, 5px, 0);
+    --border-radius: 30px;
+  }
+  ion-footer{
+      background: #fff;
+  }
+  ion-toolbar{
+    /* --background:#0782c9; */
+    border-width: 0 !important;
+  }
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 140px;
+    margin: 5px 0 0px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .content-top{
+    width: 344px;
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
+    padding: 25px 0px 0 0px;
+    overflow: auto;
+  }
+  .title-content{
+    width: 360px;
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+  .back-icon{
+    width: auto;
+    float: left;
+    font-size: 35px;
+    overflow: auto;
+  }
+  .div-title{
+      width: 270px;
+    /* padding: 0!important; */
+    float: left;
+    margin: 2.5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  .post-img{
+    width: 100%;
+    height: 400px;
+    margin: 0 auto;
+    border-radius: 0px!important;
+    overflow: hidden;
+}
+.post-img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.post-description{
+  width: 360px;
+  margin: 0 auto;
+  margin-bottom: 35px;
+}

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

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

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

@@ -0,0 +1,115 @@
+import { Component, OnInit } from '@angular/core';
+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';
+
+
+@Component({
+  selector: 'app-publication-detail',
+  templateUrl: './publication-detail.page.html',
+  styleUrls: ['./publication-detail.page.scss'],
+})
+export class PublicationDetailPage implements OnInit {
+  showLoader: boolean;
+  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 = {
+        DateIndex: null,
+        DocumentId: '',
+        ProcessId:'',
+        Title:'',
+        Message: '',
+        /* image: null, */
+        DatePublication: null,
+        FileBase64: '',
+        OriginalFileName: '',
+        FileExtension: '',
+      };
+    }
+
+  ngOnInit() {
+    /* console.log(this.publication.FileBase64); */
+    this.getPublicationDetail();
+  }
+  doRefresh(event) {
+    this.getPublicationDetail();
+
+    setTimeout(() => {
+      event.target.complete();
+    }, 2000);
+  }
+
+  getPublicationDetail(){
+    this.showLoader = true;
+    console.log(this.publicationId);
+    /* console.log(this.folderId); */
+    this.publications.GetPublicationById(this.publicationId).subscribe(res=>{
+      console.log(res);
+      /* this.publication = res; */
+      this.publication = {
+        DateIndex: res.DateIndex,
+        DocumentId: res.DocumentId,
+        ProcessId:res.ProcessId,
+        Title:res.Title,
+        Message: res.Message,
+        DatePublication: res.DatePublication,
+        FileBase64: "data:image/jpg;base64," + res.FileBase64,
+        OriginalFileName: res.OriginalFileName,
+        FileExtension: 'jpeg',
+      }
+      this.showLoader = false;
+    });
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  deletePost(){
+    this.publications.DeletePublication(this.folderId, this.publicationId).then(res =>{
+      console.log(res);
+      
+    });
+    this.close();
+  }
+
+  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
+    });
+    await modal.present();
+    modal.onDidDismiss().then(()=>{
+      setTimeout(() => {
+        this.getPublicationDetail();
+    }, 5000);
+    });
+  }
+
+  openPreview(imageUrl:string){
+    this.modalController.create({
+      component: ImageModalPage,
+      componentProps: {
+        imageUrl:imageUrl,
+      }
+    }).then(modal => modal.present());
+  }
+
+}

src/app/pages/publications/publications.module.ts

@@ -8,6 +8,8 @@ import { PublicationsPageRoutingModule } from './publications-routing.module';
 
 import { PublicationsPage } from './publications.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { ViewPublicationsPage } from 'src/app/shared/publication/view-publications/view-publications.page';
+
 
 @NgModule({
   imports: [
@@ -17,6 +19,9 @@ import { SharedModule } from 'src/app/shared/shared.module';
     SharedModule,
     PublicationsPageRoutingModule
   ],
-  declarations: [PublicationsPage]
+  declarations: [
+    PublicationsPage,
+    ViewPublicationsPage
+  ]
 })
 export class PublicationsPageModule {}

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

@@ -10,11 +10,12 @@
   </ion-refresher>
 
   <!-- Main container -->
-  <div class="d-flex  height-100">
+  <div class="d-flex  height-100 background-white overflow-hidden border-t-radius ">
+    <!-- Left -->
     <div class="d-flex flex-grow-1 flex-column aside max-width-md-40">
       <!-- Header -->
-      <ion-toolbar class="bg-blue">
+      <ion-toolbar >
-        <div class="main-header">
+        <div class="main-header pt-25">
           <div class="title-content">
             <div class="div-title">
               <ion-label class="title">Ações Presidenciais</ion-label>
@@ -60,22 +61,17 @@
       </div>  
     </div>
 
-    <div class="d-none d-md-flex flex-grow-1 flex-column">
+    <!-- Right -->
-      <!-- Header -->
+    <div class="d-none d-md-flex flex-grow-1 flex-column max-width-60">
-      <ion-toolbar class="bg-blue">
+      <!-- <app-view-publications></app-view-publications>   -->
-        <div class="main-header">
+
-          <div class="title-content">
+      <app-view-publications 
-            <div class="div-title">
+        *ngIf="desktopComponent.showViewPublication"
-              <ion-label class="title">Header</ion-label>
+        [folderId]="folderId"
-            </div>
+        class="height-100 d-flex flex-column overflow-hidden"
-          </div>
+      >
-        </div>
+      </app-view-publications>
-      </ion-toolbar>
+
-      <!-- Content -->
-  
-      <div class="main-content overflow-auto-y">
-        123
-      </div>  
     </div>
 
   </div>

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

@@ -31,6 +31,13 @@ export class PublicationsPage implements OnInit {
   months: string[];
   days:string[];
 
+
+  desktopComponent: any = {
+    showViewPublication: false,
+  }
+
+  folderId: string;
+
   constructor(
     private router: Router, 
     private modalController: ModalController,
@@ -130,19 +137,31 @@ export class PublicationsPage implements OnInit {
     }
  
 
-    /* let item =  this.publicationFolderList; */
+
-    const modal = await this.modalController.create({
+    // OpenModal
-      component: ViewPublicationsPage,
+    if( window.innerWidth <= 1024){
-      enterAnimation,
+      /* let item =  this.publicationFolderList; */
-      leaveAnimation,
+      const modal = await this.modalController.create({
-      componentProps:{
+        component: ViewPublicationsPage,
-        folderId:folderId,
+        enterAnimation,
-      },
+        leaveAnimation,
-      cssClass: 'new-action',
+        componentProps:{
-      backdropDismiss: false
+          folderId:folderId,
-    });
+        },
-    await modal.present();
+        cssClass: 'new-action',
-    modal.onDidDismiss();
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+
+    } else {
+      // open angular component
+      this.folderId = folderId
+      this.desktopComponent.showViewPublication = true;
+      
+    }
+
+
   }
 
 }

src/app/shared/publication/view-publications/view-publications-routing.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ViewPublicationsPage } from './view-publications.page';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewPublicationsPageRoutingModule {}

src/app/shared/publication/view-publications/view-publications.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 { ViewPublicationsPageRoutingModule } from './view-publications-routing.module';
+
+import { ViewPublicationsPage } from 'src/app/pages/publications/view-publications/view-publications.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ViewPublicationsPageRoutingModule
+  ],
+  declarations: [ViewPublicationsPage]
+})
+export class ViewPublicationsPageModule {}

src/app/shared/publication/view-publications/view-publications.page.html

@@ -0,0 +1,86 @@
+
+
+<ion-header class="ion-no-border">
+  <div class="main-header">
+    <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">{{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',item.ProcessId)" slot="end" src='assets/images/icons-add-photo.svg'></ion-icon> -->
+        <ion-icon (click)="AddPublication('2',item.ProcessId)" slot="end" src='assets/images/icons-add.svg'></ion-icon>
+      </div>
+    </div>
+  </div>
+</ion-header>
+
+<ion-content>
+  <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="main-container px-20">
+    <ion-list>
+      <!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
+      <div class="post-item d-md-flex mb-10"
+      *ngFor="let publication of publicationList"
+      (click)="viewPublicationDetail(publication.DocumentId)">
+        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img max-width-md-50">
+          <img src="{{publication.FileBase64}}" alt="image">
+        </div>
+        <div *ngIf="publication.FileBase64.length < 30" class="mb-10 post-img">
+          <img src="/assets/icon/icon-no-image.svg" alt="image">
+        </div>
+        <div class="post-content px-20  width-md-50">
+          <div class="post-title-time">
+            <div class="post-title">
+              <ion-label>{{publication.Title}}</ion-label>
+            </div>
+            <div class="post-data">{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}</div>
+          </div>
+          <div class="post-description">
+            <p>{{publication.Message}}</p>
+          </div>
+        </div>
+      </div>
+      <div *ngIf="!publicationList" class="post-item">
+        <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 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>
+    </ion-list>
+  </div>    
+</ion-content>

src/app/shared/publication/view-publications/view-publications.page.scss

@@ -0,0 +1,169 @@
+:host{
+    background: transparent;
+    padding: 0!important;
+  }
+  ion-content{
+    --background: transparent;
+    transform: translate3d(0, 5px, 0);
+    --border-radius: 30px;
+  }
+  ion-toolbar{
+    --border-width: 0 !important;
+    --border-style: none;
+    --padding-top: 0px !important;
+    --padding-start: 0px !important;
+    --padding-right: 0px !important;
+    --padding-end: 0px !important;
+
+  }
+
+  .div-top-header{
+    width: 400px;
+    margin: 0 auto;
+    background-color: #0782c9;
+    overflow: auto;
+    padding-top: 15px;
+    border: 0!important;
+  }
+  .div-search{
+    font-size: 45px;
+    float: left;
+    margin: 0 0 0 10px
+  }
+  .div-logo{
+    background: transparent;
+    width: 140px;
+    margin: 5px 0 0px 71px;
+    float: left;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .div-profile{
+    font-size: 45px;
+    float: right;
+    margin-right: 10px;
+  }
+  .main-header{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background-color: #fff;
+    overflow:hidden;
+    padding: 25px 20px 0px 20px;
+    color:#000;
+    
+  }
+  .main-content{
+    width: 100%; /* 400px */
+    height: 100%;
+    font-family: Roboto;
+    margin: 0 auto;
+    background-color: #fff;
+    overflow:auto;
+    padding: 15px 20px 0 20px;
+  }
+  .content-top{
+    background: #f3f2f2;
+    height: 20px;
+    margin: 0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    transform: translate3d(0, 1px, 0);
+}
+  .content-container{
+    width: 100%;
+    margin:0 auto;
+    border-top-left-radius: 25px;
+    border-top-right-radius: 25px;
+    background: #ffffff;
+    height: 100%;
+    box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6);
+    padding: 25px 0px 0 0px;
+    overflow: auto;
+  }
+  .title-content{
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+
+  .back-icon{
+    width: 37px;
+    float: left;
+    font-size: 35px;
+    overflow: auto;
+    
+  }
+  .div-title{
+    /* padding: 0!important; */
+    float: left;
+    margin: 2.5px 0 0 5px;
+  }
+  .title{
+    font-size: 25px;
+  }
+  
+  .actions-icon{
+    width: 92px;
+    float: right;
+    overflow: auto;
+  }
+  .actions-icon ion-icon{
+      margin-left: 10px;
+      font-size: 35px;
+      float: right;
+  }
+  .item-content-date{
+    color: #797979;
+    font-size: 13px;
+  }
+  .item-content-detail{
+    color: #000000;
+    font-size: 13px;
+  }
+  .post-item{
+    width: 100%;
+
+    border-radius: 0px;
+    padding: 0!important;
+  }
+  .post-img{
+      width: 100%;
+      height: 400px;
+
+      border-radius: 0px!important;
+      overflow: hidden;
+  }
+  .post-img img{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+  }
+  .post-content{
+    margin: 0 auto;
+    margin-bottom: 35px;
+  }
+  .post-title-time{
+    width: 100%;
+    overflow: auto;
+  }
+  .post-title{
+      width: 60%;
+      float: left;
+      font-size: 15px;
+      color: #0d89d1;
+  }
+.post-data{
+    width: 40%;
+    float: left;
+    font-size: 13px;
+    color: #797979;
+    text-align: right;
+}
+  .post-description{
+    font-size: 13px;
+    color: #000;
+  }

src/app/shared/publication/view-publications/view-publications.page.spec.ts

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

src/app/shared/publication/view-publications/view-publications.page.ts

@@ -0,0 +1,129 @@
+import { Component, OnInit, Input, Output } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { LoadingService } from 'src/app/services/loading.service';
+import { PublicationsService } from 'src/app/services/publications.service';
+import { PublicationDetailPage } from 'src/app/pages/publications/publication-detail/publication-detail.page';
+import { NewPublicationPage } from 'src/app/pages/publications/new-publication/new-publication.page';
+
+@Component({
+  selector: 'app-view-publications',
+  templateUrl: './view-publications.page.html',
+  styleUrls: ['./view-publications.page.scss'],
+})
+export class ViewPublicationsPage implements OnInit {
+  showLoader: boolean;
+  loading: any;
+
+  publicationList: Publication[];
+  item: PublicationFolder;
+
+  @Input() folderId: string;
+  
+
+  constructor(
+    private loadingController: LoadingService,
+    private modalController: ModalController,
+    private publications: PublicationsService,
+    ) { 
+      this.item = new PublicationFolder();
+
+    }
+
+  ngOnInit() {
+    console.log(this.folderId);
+    
+    this.getPublications();
+    this.getPublicationDetail();
+  }
+
+  ngOnChanges(changes: any): void {
+    console.log(this.folderId)
+
+    this.getPublications();
+    this.getPublicationDetail();
+  }
+
+  doRefresh(event) {
+    this.getPublications();
+
+    setTimeout(() => {
+      this.getPublications();
+      this.getPublicationDetail();
+      event.target.complete();
+    }, 3000);
+  }
+  close(){
+    this.modalController.dismiss();
+  }
+  getPublicationDetail(){
+    this.publications.GetPublicationFolderById(this.folderId).subscribe(res=>{
+      console.log(res);
+      this.item = res;
+    });
+  }
+  getPublications(){
+    this.showLoader = true;
+    
+    this.publications.GetPublications(this.folderId).subscribe(res=>{
+      this.publicationList = new Array();
+      console.log(res);
+      res.forEach(element => {
+        let itemImage = {
+          title: 'Title',
+          url: "data:image/jpg;base64," + element.FileBase64,
+          format: 'png'
+        }
+        let item: Publication = {
+          "DateIndex": element.DateIndex,
+          "DocumentId":element.DocumentId,
+          "ProcessId":element.ProcessId,
+          "Title":element.Title,
+          "Message": element.Message,
+          "DatePublication": element.DatePublication,
+          /* image:itemImage, */
+          "FileBase64": "data:image/jpg;base64," + element.FileBase64,
+          "OriginalFileName": '',
+          "FileExtension": '',
+        }
+        this.publicationList.push(item);
+      });
+      console.log(this.publicationList);
+      this.showLoader = false;
+    });
+    
+  }
+
+  async AddPublication(publicationType:any, folderId:string) {
+    const modal = await this.modalController.create({
+      component: NewPublicationPage,
+      componentProps:{
+        publicationType: publicationType,
+        folderId: folderId,
+      },
+      cssClass: 'new-publication',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss().then(()=>{
+      this.doRefresh(event);
+    });
+  }
+
+  async viewPublicationDetail(publicationId:string) {
+    const modal = await this.modalController.create({
+      component: PublicationDetailPage,
+      componentProps:{
+        publicationId: publicationId,
+      },
+      cssClass: 'publication-detail',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss().then(()=>{
+      this.doRefresh(event);
+    });
+  }
+
+}

src/global.scss

@@ -353,7 +353,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 @media only screen and (min-width: 1024px) {
   .gabinete-digital-mobile-modal-to-Desktop{
     top: 75px;
-    left: 340px;
+    left: 40%;
 
     .modal-wrapper{
       transform: none !important;