Add view event desktop

src/app/shared/chat/group-messages/group-messages.page.ts

@@ -38,6 +38,8 @@ export class GroupMessagesPage implements OnInit {
     this.isGroupCreated = true;
     this.room = this.navParams.get('room');
     this.roomName = this.room.name.split('-').join(' ');
+
+    console.log('!_!')
   }
 
   ngOnInit() {

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"
+      *ngFor="let publication of publicationList"
+      (click)="viewPublicationDetail(publication.DocumentId)">
+        <div *ngIf="publication.FileBase64.length > 30" class="post-img">
+          <img src="{{publication.FileBase64}}" alt="image">
+        </div>
+        <div *ngIf="publication.FileBase64.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>{{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,172 @@
+: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%;
+    overflow: auto;
+    margin: 0 auto;
+    border-radius: 0px;
+    padding: 0!important;
+  }
+  .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-content{
+    margin: 0 auto;
+    margin-bottom: 35px;
+  }
+  .post-title-time{
+    width: 100%;
+    overflow: auto;
+    margin-top: 10px;
+  }
+  .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);
+    });
+  }
+
+}