Add view event desktop

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

@@ -63,21 +63,15 @@
 
     <!-- Right -->
     <div class="d-none d-md-flex flex-grow-1 flex-column">
-      <!-- Header -->
-      <ion-toolbar>
-        <div class="main-header">
-          <div class="title-content">
-            <div class="div-title">
-              <ion-label class="title">Header</ion-label>
-            </div>
-          </div>
-        </div>
-      </ion-toolbar>
-      <!-- Content -->
-  
-      <div class="main-content overflow-auto-y">
-        123
-      </div>  
+      <!-- <app-view-publications></app-view-publications>   -->
+
+      <app-view-publications 
+        *ngIf="desktopComponent.showViewPublication"
+        [folderId]="folderId"
+        class="height-100 d-flex flex-column overflow-hidden"
+      >
+      </app-view-publications>
+
     </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({
-      component: ViewPublicationsPage,
-      enterAnimation,
-      leaveAnimation,
-      componentProps:{
-        folderId:folderId,
-      },
-      cssClass: 'new-action',
-      backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss();
+
+    // OpenModal
+    if( window.innerWidth <= 1024){
+      /* let item =  this.publicationFolderList; */
+      const modal = await this.modalController.create({
+        component: ViewPublicationsPage,
+        enterAnimation,
+        leaveAnimation,
+        componentProps:{
+          folderId:folderId,
+        },
+        cssClass: 'new-action',
+        backdropDismiss: false
+      });
+      await modal.present();
+      modal.onDidDismiss();
+
+    } else {
+      // open angular component
+      this.folderId = folderId
+      this.desktopComponent.showViewPublication = true;
+      
+    }
+
+
   }
 
 }