diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.scss b/src/app/pages/publications/publication-detail/publication-detail.page.scss index 8de88c1b0..dd3f55ae5 100644 --- a/src/app/pages/publications/publication-detail/publication-detail.page.scss +++ b/src/app/pages/publications/publication-detail/publication-detail.page.scss @@ -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; } diff --git a/src/app/pages/publications/publications.module.ts b/src/app/pages/publications/publications.module.ts index 518e20e3c..457aa4759 100644 --- a/src/app/pages/publications/publications.module.ts +++ b/src/app/pages/publications/publications.module.ts @@ -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 {} diff --git a/src/app/pages/publications/publications.page.html b/src/app/pages/publications/publications.page.html index 2b29f27b9..62e73ad84 100644 --- a/src/app/pages/publications/publications.page.html +++ b/src/app/pages/publications/publications.page.html @@ -44,10 +44,9 @@ -
+
@@ -71,6 +70,7 @@ [folderId]="folderId" class="height-100 d-flex flex-column overflow-hidden" (addNewPublication)="addNewPublication($event)" + (openPublicationDetails)="openPublicationDetails($event)" > @@ -78,10 +78,16 @@ class="height-100 d-flex flex-column overflow-hidden background-white" [folderId]="folderId" [publicationType]="publicationType" - (closeDesktopComponent)="closeDesktopComponent" + (closeDesktopComponent)="closeDesktopComponent($event)" > + +
diff --git a/src/app/pages/publications/publications.page.scss b/src/app/pages/publications/publications.page.scss index c182e3f6d..df8c81eb7 100644 --- a/src/app/pages/publications/publications.page.scss +++ b/src/app/pages/publications/publications.page.scss @@ -91,7 +91,6 @@ ion-toolbar{ padding: 15px 20px 0 20px; } .item{ - width: 360px; padding: 0 0px 0 0px; overflow: auto; margin: 0px auto; diff --git a/src/app/pages/publications/publications.page.ts b/src/app/pages/publications/publications.page.ts index 0f5d3132f..131658f40 100644 --- a/src/app/pages/publications/publications.page.ts +++ b/src/app/pages/publications/publications.page.ts @@ -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 } } diff --git a/src/app/shared/publication/new-publication/new-publication.page.ts b/src/app/shared/publication/new-publication/new-publication.page.ts index 1b38527ea..4a4a784a8 100644 --- a/src/app/shared/publication/new-publication/new-publication.page.ts +++ b/src/app/shared/publication/new-publication/new-publication.page.ts @@ -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 = ''; diff --git a/src/app/shared/publication/publication-detail/publication-detail-routing.module.ts b/src/app/shared/publication/publication-detail/publication-detail-routing.module.ts new file mode 100644 index 000000000..d1ed32f55 --- /dev/null +++ b/src/app/shared/publication/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 {} diff --git a/src/app/shared/publication/publication-detail/publication-detail.module.ts b/src/app/shared/publication/publication-detail/publication-detail.module.ts new file mode 100644 index 000000000..116453af2 --- /dev/null +++ b/src/app/shared/publication/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 {} diff --git a/src/app/shared/publication/publication-detail/publication-detail.page.html b/src/app/shared/publication/publication-detail/publication-detail.page.html new file mode 100644 index 000000000..4fceaf3a8 --- /dev/null +++ b/src/app/shared/publication/publication-detail/publication-detail.page.html @@ -0,0 +1,73 @@ + + + + +
+
+
+
+ +
+
+ {{publication.Title}} +

{{publication.DatePublication | date: 'dd-MM-yy | h:mm'}}

+
+
+ + + + + +
+
+ image +
+
+ image +
+
+

{{publication.Message}}

+
+
+
+
+
+
+ +
+
+ +

+
+
+
+
+ image +
+
+

+

+
+
+ +
+
+ + + + + + Eliminar + + + + + Editar + + + + + diff --git a/src/app/shared/publication/publication-detail/publication-detail.page.scss b/src/app/shared/publication/publication-detail/publication-detail.page.scss new file mode 100644 index 000000000..06637624b --- /dev/null +++ b/src/app/shared/publication/publication-detail/publication-detail.page.scss @@ -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; +} \ No newline at end of file diff --git a/src/app/shared/publication/publication-detail/publication-detail.page.spec.ts b/src/app/shared/publication/publication-detail/publication-detail.page.spec.ts new file mode 100644 index 000000000..8a3f20488 --- /dev/null +++ b/src/app/shared/publication/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; + + 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(); + }); +}); diff --git a/src/app/shared/publication/publication-detail/publication-detail.page.ts b/src/app/shared/publication/publication-detail/publication-detail.page.ts new file mode 100644 index 000000000..9a4fe58e5 --- /dev/null +++ b/src/app/shared/publication/publication-detail/publication-detail.page.ts @@ -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()); + } + +} diff --git a/src/app/shared/publication/view-publications/view-publications.page.html b/src/app/shared/publication/view-publications/view-publications.page.html index 5935030a4..472bee2a4 100644 --- a/src/app/shared/publication/view-publications/view-publications.page.html +++ b/src/app/shared/publication/view-publications/view-publications.page.html @@ -28,16 +28,16 @@
-
-
+
image
image
-
+
{{publication.Title}} diff --git a/src/app/shared/publication/view-publications/view-publications.page.ts b/src/app/shared/publication/view-publications/view-publications.page.ts index 95f9dcdf7..07af58e30 100644 --- a/src/app/shared/publication/view-publications/view-publications.page.ts +++ b/src/app/shared/publication/view-publications/view-publications.page.ts @@ -21,7 +21,7 @@ export class ViewPublicationsPage implements OnInit { @Input() folderId: string; @Output() addNewPublication = new EventEmitter(); - + @Output() openPublicationDetails= new EventEmitter(); 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); + } + } }