Improve home publication

2026-04-18 20:47:54 +00:00 · 2021-03-15 16:47:16 +01:00
parent 6c0c7173e8
commit 309e81d26c
14 changed files with 396 additions and 37 deletions
@@ -1,16 +1,12 @@
-: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{
@@ -55,7 +51,6 @@
    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;
  }
@@ -10,6 +10,7 @@ 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';
 import { NewPublicationPage } from 'src/app/shared/publication/new-publication/new-publication.page';
+import { PublicationDetailPage } from 'src/app/shared/publication/publication-detail/publication-detail.page';


@NgModule({
@@ -23,7 +24,8 @@ import { NewPublicationPage } from 'src/app/shared/publication/new-publication/n
  declarations: [
    PublicationsPage,
    ViewPublicationsPage,
-    NewPublicationPage
+    NewPublicationPage,
+    PublicationDetailPage
  ]
 })
 export class PublicationsPageModule {}
@@ -44,10 +44,9 @@
            </ion-label>
          </div>
        </div>
-        <div class="item"
-        
-        *ngFor="let evento of publicationsEventFolderList"
-        (click)="viewPublications(evento)">
+        <div class="item width-100"
+          *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>
@@ -71,6 +70,7 @@
        [folderId]="folderId"
        class="height-100 d-flex flex-column overflow-hidden"
        (addNewPublication)="addNewPublication($event)"
+        (openPublicationDetails)="openPublicationDetails($event)"
      >
      </app-view-publications>

@@ -78,10 +78,16 @@
        class="height-100 d-flex flex-column overflow-hidden background-white"
        [folderId]="folderId"
        [publicationType]="publicationType"
-        (closeDesktopComponent)="closeDesktopComponent"
+        (closeDesktopComponent)="closeDesktopComponent($event)"
      >
      </app-new-publication>

+      <app-publication-detail-shared
+        *ngIf="desktopComponent.showPublicationDetail"
+        class="height-100 d-flex flex-column overflow-hidden background-white"
+        [publicationId]="publicationId"
+      ></app-publication-detail-shared>
+
    </div>

  </div>
@@ -91,7 +91,6 @@ ion-toolbar{
    padding: 15px 20px 0 20px;
  }
  .item{
-    width: 360px;
    padding: 0 0px 0 0px;
    overflow: auto;
    margin: 0px auto;
@@ -34,11 +34,13 @@ export class PublicationsPage implements OnInit {

  desktopComponent: any = {
    showViewPublication: false,
-    showAddNewPublication: false
+    showAddNewPublication: false,
+    showPublicationDetail: false
  }

  folderId: string;
  publicationType: any;
+  publicationId: string;

  constructor(
    private router: Router, 
@@ -181,14 +183,21 @@ export class PublicationsPage implements OnInit {
    this.desktopComponent.showAddNewPublication = true;
  }

-  async closeDesktopComponent (){
+  async openPublicationDetails(publicationId: string){
+    
+    this.publicationId = publicationId;
+    
+    this.closeDesktopComponent();
+    this.desktopComponent.showPublicationDetail = true;

-    this.desktopComponent.showViewPublication = false;
-    this.desktopComponent.showAddNewPublication = false;
+  }
+
+  async closeDesktopComponent (xx?: any){

    this.desktopComponent = {
      showViewPublication: false,
-      showAddNewPublication: false
+      showAddNewPublication: false,
+      showPublicationDetail: false
    }
  }

@@ -8,7 +8,6 @@ import { Publication } from 'src/app/models/publication';
 import { Image } from 'src/app/models/image';
 import { ThrowStmt } from '@angular/compiler';
 import { PhotoService } from 'src/app/services/photo.service';
-import { AlertService } from 'src/app/services/alert.service';
 //Capacitor
 /* const { Camera } = Plugins; */

@@ -165,7 +164,7 @@ export class NewPublicationPage implements OnInit {


  close(){
-    this.closeDesktopComponent.emit();
+    this.closeDesktopComponent.emit('!???____!!');
  }
  clear(){
    this.capturedImage = '';
@@ -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 {}
@@ -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 {}
@@ -0,0 +1,73 @@
+<!-- <ion-header class="ion-no-border">
+
+
+</ion-header> -->
+
+<ion-content>
+
+  <div class="content-container">
+    <div *ngIf="publication.Title != ''">
+    <div class="title-content d-flex pl-20">
+      <div class="back-icon d-md-none" >
+        <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 px-20">
+      <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>
+
@@ -0,0 +1,91 @@
+
+  ion-content{
+    --background: transparent;
+    --border-radius: 30px;
+  }
+  ion-footer{
+      background: #fff;
+  }
+  ion-toolbar{
+    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%;
+    padding: 25px 0px 0 0px;
+    overflow: auto;
+  }
+  .title-content{
+    overflow: auto;
+  }
+  .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;
+}
@@ -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();
+  });
+});
@@ -0,0 +1,114 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+import { Publication } from 'src/app/models/publication';
+import { ImageModalPage } from 'src/app/pages/publications/gallery/image-modal/image-modal.page';
+import { NewPublicationPage } from 'src/app/pages/publications/new-publication/new-publication.page';
+import { PublicationsService } from 'src/app/services/publications.service';
+
+@Component({
+  selector: 'app-publication-detail-shared',
+  templateUrl: './publication-detail.page.html',
+  styleUrls: ['./publication-detail.page.scss'],
+})
+export class PublicationDetailPage implements OnInit {
+  showLoader: boolean;
+  folderId: string;
+  publication: Publication;
+
+  @Input() publicationId: string;
+
+  constructor(
+    private modalController: ModalController,
+    private publications:PublicationsService,
+    ) {
+      
+      /* 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());
+  }
+
+}
@@ -28,16 +28,16 @@
  <div class="main-container px-20">
    <ion-list>
      <!-- [routerLink]="['/home/publications/view-publications/publication-detail', publication.publicationId]" -->
-      <div class="post-item d-lg-flex d-md-block mb-10"
+      <div class="post-item  d-md-block mb-10"
        *ngFor="let publication of publicationList"
        (click)="viewPublicationDetail(publication.DocumentId)">
-        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100 width-lg-50">
+        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100">
          <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-100 width-lg-50">
+        <div class="post-content px-20 width-md-100 ">
          <div class="post-title-time">
            <div class="post-title">
              <ion-label>{{publication.Title}}</ion-label>
@@ -21,7 +21,7 @@ export class ViewPublicationsPage implements OnInit {

  @Input() folderId: string;
  @Output() addNewPublication =  new EventEmitter<any>();
-  
+  @Output() openPublicationDetails= new EventEmitter<any>();

  constructor(
    private loadingController: LoadingService,
@@ -30,7 +30,7 @@ export class ViewPublicationsPage implements OnInit {
    ) { 
      this.item = new PublicationFolder();

-    }
+  }

  ngOnInit() {
    console.log(this.folderId);
@@ -121,19 +121,29 @@ export class ViewPublicationsPage implements OnInit {

  }

+  
  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);
-    });
+
+    console.log(publicationId);
+
+    if( window.innerWidth <= 1024) {
+      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);
+      });
+    } else {
+      // open publication details
+      this.openPublicationDetails.emit(publicationId);
+    }
+
  }

 }