diff --git a/src/app/pages/publications/publication-detail/publication-detail-routing.module.ts b/src/app/pages/publications/publication-detail/publication-detail-routing.module.ts new file mode 100644 index 000000000..d1ed32f55 --- /dev/null +++ b/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 {} diff --git a/src/app/pages/publications/publication-detail/publication-detail.module.ts b/src/app/pages/publications/publication-detail/publication-detail.module.ts new file mode 100644 index 000000000..116453af2 --- /dev/null +++ b/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 {} diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.html b/src/app/pages/publications/publication-detail/publication-detail.page.html new file mode 100644 index 000000000..0d08d53cd --- /dev/null +++ b/src/app/pages/publications/publication-detail/publication-detail.page.html @@ -0,0 +1,84 @@ + + +
+
+ +
+ +
+ +
+
+ + + + +
+
+
+
+
+ +
+
+ {{publication.Title}} +

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

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

{{publication.Message}}

+
+
+
+
+
+
+ +
+
+ +

+
+
+
+
+ image +
+
+

+

+
+
+ +
+
+ + + + + + Eliminar + + + + + Editar + + + + + diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.scss b/src/app/pages/publications/publication-detail/publication-detail.page.scss new file mode 100644 index 000000000..8de88c1b0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts b/src/app/pages/publications/publication-detail/publication-detail.page.spec.ts new file mode 100644 index 000000000..8a3f20488 --- /dev/null +++ b/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; + + 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/pages/publications/publication-detail/publication-detail.page.ts b/src/app/pages/publications/publication-detail/publication-detail.page.ts new file mode 100644 index 000000000..52aace972 --- /dev/null +++ b/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()); + } + +} diff --git a/src/app/pages/publications/publications.module.ts b/src/app/pages/publications/publications.module.ts index 65ba82f1c..f703cefa2 100644 --- a/src/app/pages/publications/publications.module.ts +++ b/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 {} diff --git a/src/app/pages/publications/publications.page.html b/src/app/pages/publications/publications.page.html index be42954e2..f4216bb4e 100644 --- a/src/app/pages/publications/publications.page.html +++ b/src/app/pages/publications/publications.page.html @@ -63,21 +63,15 @@
- - -
-
-
- Header -
-
-
- - - -
- 123 -
+ + + + +
diff --git a/src/app/pages/publications/publications.page.ts b/src/app/pages/publications/publications.page.ts index 1bb91d16c..afab58fdf 100644 --- a/src/app/pages/publications/publications.page.ts +++ b/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; + + } + + } } diff --git a/src/app/shared/chat/group-messages/group-messages.page.ts b/src/app/shared/chat/group-messages/group-messages.page.ts index 7c2a62965..3e3a7cbfe 100644 --- a/src/app/shared/chat/group-messages/group-messages.page.ts +++ b/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() { diff --git a/src/app/shared/publication/view-publications/view-publications-routing.module.ts b/src/app/shared/publication/view-publications/view-publications-routing.module.ts new file mode 100644 index 000000000..a9ac10c5e --- /dev/null +++ b/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 {} diff --git a/src/app/shared/publication/view-publications/view-publications.module.ts b/src/app/shared/publication/view-publications/view-publications.module.ts new file mode 100644 index 000000000..7792f5dea --- /dev/null +++ b/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 {} diff --git a/src/app/shared/publication/view-publications/view-publications.page.html b/src/app/shared/publication/view-publications/view-publications.page.html new file mode 100644 index 000000000..7e47adb7a --- /dev/null +++ b/src/app/shared/publication/view-publications/view-publications.page.html @@ -0,0 +1,86 @@ + + + +
+
+
+ +
+
+ {{item.Description}} +

{{item.Detail}}

+

{{item.DateBegin}}

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

{{publication.Message}}

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

+

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

+

+
+
+
+ +
+ diff --git a/src/app/shared/publication/view-publications/view-publications.page.scss b/src/app/shared/publication/view-publications/view-publications.page.scss new file mode 100644 index 000000000..225a9fa80 --- /dev/null +++ b/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; + + } \ No newline at end of file diff --git a/src/app/shared/publication/view-publications/view-publications.page.spec.ts b/src/app/shared/publication/view-publications/view-publications.page.spec.ts new file mode 100644 index 000000000..bcd718f84 --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/shared/publication/view-publications/view-publications.page.ts b/src/app/shared/publication/view-publications/view-publications.page.ts new file mode 100644 index 000000000..e0cea01f9 --- /dev/null +++ b/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); + }); + } + +}