Add New publication component

src/app/pages/publications/publications.module.ts

@@ -9,6 +9,7 @@ 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';
+import { NewPublicationPage } from 'src/app/shared/publication/new-publication/new-publication.page';
 
 
 @NgModule({
@@ -21,7 +22,8 @@ import { ViewPublicationsPage } from 'src/app/shared/publication/view-publicatio
   ],
   declarations: [
     PublicationsPage,
-    ViewPublicationsPage
+    ViewPublicationsPage,
+    NewPublicationPage
   ]
 })
 export class PublicationsPageModule {}

src/app/pages/publications/publications.page.html

@@ -62,16 +62,26 @@
     </div>
 
     <!-- Right -->
-    <div class="d-none d-md-flex flex-grow-1 flex-column max-width-60">
+    <div class="d-none d-md-flex flex-grow-1 flex-column max-width-60"
-      <!-- <app-view-publications></app-view-publications>   -->
+      style="border-left: 1px solid #d8d8d8;">
      
+      <!-- View Publication -->
       <app-view-publications 
         *ngIf="desktopComponent.showViewPublication"
         [folderId]="folderId"
         class="height-100 d-flex flex-column overflow-hidden"
+        (addNewPublication)="addNewPublication($event)"
       >
       </app-view-publications>
 
+      <app-new-publication *ngIf="desktopComponent.showAddNewPublication"
+        class="height-100 d-flex flex-column overflow-hidden background-white"
+        [folderId]="folderId"
+        [publicationType]="publicationType"
+        (closeDesktopComponent)="closeDesktopComponent"
+      >
+      </app-new-publication>
+
     </div>
 
   </div>

src/app/pages/publications/publications.page.ts

@@ -34,9 +34,11 @@ export class PublicationsPage implements OnInit {
 
   desktopComponent: any = {
     showViewPublication: false,
+    showAddNewPublication: false
   }
 
   folderId: string;
+  publicationType: any;
 
   constructor(
     private router: Router, 
@@ -96,6 +98,9 @@ export class PublicationsPage implements OnInit {
   }
 
   async AddPublicationFolder(item:any) {
+    
+    this.closeDesktopComponent();
+    
     const modal = await this.modalController.create({
       component: NewActionPage,
       componentProps:{
@@ -137,6 +142,7 @@ export class PublicationsPage implements OnInit {
     }
  
 
+    this.closeDesktopComponent();
 
     // OpenModal
     if( window.innerWidth <= 1024){
@@ -164,4 +170,26 @@ export class PublicationsPage implements OnInit {
 
   }
 
+  async addNewPublication({publicationType, folderId}){
+
+    this.closeDesktopComponent();
+
+    // propr to add new publication
+    this.publicationType = publicationType;
+    this.folderId = folderId;
+    
+    this.desktopComponent.showAddNewPublication = true;
+  }
+
+  async closeDesktopComponent (){
+
+    this.desktopComponent.showViewPublication = false;
+    this.desktopComponent.showAddNewPublication = false;
+
+    this.desktopComponent = {
+      showViewPublication: false,
+      showAddNewPublication: false
+    }
+  }
+
 }

src/app/shared/publication/new-publication/new-publication-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NewPublicationPage } from './new-publication.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NewPublicationPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NewPublicationPageRoutingModule {}

src/app/shared/publication/new-publication/new-publication.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 { NewPublicationPageRoutingModule } from './new-publication-routing.module';
+
+import { NewPublicationPage } from './new-publication.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    NewPublicationPageRoutingModule
+  ],
+  declarations: [NewPublicationPage]
+})
+export class NewPublicationPageModule {}

src/app/shared/publication/new-publication/new-publication.page.html

@@ -0,0 +1,86 @@
+<ion-header class="ion-no-border background-white px-20 pt-25">
+  <div class="title-content">
+    <div class="div-title">
+      <ion-label class="title">{{publicationTitle}}</ion-label>
+    </div>
+  </div>
+</ion-header>
+
+<ion-content>
+<div class="content-container">
+
+  <div  *ngIf="publicationType!='1'" class="ion-item-container">
+    <ion-input [(ngModel)]="pub.Title" name="title" ngDefaultControl placeholder="Título" ></ion-input>
+  </div>
+
+  <div *ngIf="publicationType!='1'" class="container-div">
+    <div class="ion-item-class-2 d-flex">
+      <div class="ion-icon-class">
+        <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+      </div>
+      <div class="ion-textarea-class flex-grow-1">
+        <ion-textarea [(ngModel)]="pub.Message" name="description" ngDefaultControl rows="12" cols="20" placeholder="Corpo de texto..."></ion-textarea>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="capturedImage != ''" class="ion-item-container-no-border">
+    <ion-label class="attached-title">Fotografia Anexada</ion-label>
+    <ion-item lines="none">
+      <ion-thumbnail slot="start">
+        <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="'data:image/png;base64,'+capturedImage"></ion-img>
+      </ion-thumbnail>
+    <!--  <ion-thumbnail *ngIf="!publication" slot="start">
+        <ion-img [(ngModel)]="publication.imageUrl" [src]="guestPicture"></ion-img>
+      </ion-thumbnail> -->
+      <ion-label>
+        <p>{{capturedImageTitle}}</p>
+        <p hidden>size</p>
+      </ion-label>
+      <ion-icon (click)="clear()" name="close"></ion-icon>
+    </ion-item>
+    
+    <!-- <ion-thumbnail>
+      <ion-img src="{{imgUrl}}"></ion-img>
+    </ion-thumbnail> -->
+  </div>
+
+  <div class="ion-item-container-no-border">
+    <ion-label (click)="takePicture()">
+      <div class="attach-icon">
+        <ion-icon src="assets/images/icons-add-photo.svg"></ion-icon>
+      </div>
+      <div class="attach-document">
+        <ion-label>Tirar Fotografia</ion-label>
+      </div>
+      </ion-label>
+  </div>
+
+  <div class="ion-item-container-no-border">
+    <ion-label (click)="getPicture()">
+      <div class="attach-icon">
+        <ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
+      </div>
+      <div class="attach-document">
+        <ion-label>Anexar Fotografia</ion-label>
+      </div> 
+    </ion-label>
+  </div>
+</div>
+
+</ion-content>
+
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar">
+    <ion-buttons slot="start">
+      <ion-button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <ion-button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>

src/app/shared/publication/new-publication/new-publication.page.scss

@@ -0,0 +1,134 @@
+
+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%;
+  padding: 25px 20px 0 20px;
+  overflow: auto;
+}
+.title-content{
+  width: 360px;
+  overflow: auto;
+  padding: 0 !important;
+}
+.div-title{
+  width: 270px;
+/* padding: 0!important; */
+float: left;
+margin: 2.5px 0 0 5px;
+}
+.title{
+font-size: 25px;
+}
+  .container-div{
+    margin-bottom: 15px;
+    overflow: auto;
+  }
+  .ion-item-container{
+    margin: 15px auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 10px;
+  }
+  .ion-item-container-no-border{
+    width: 100%;
+    margin: 0px auto;
+    padding: 0 !important;
+    overflow: auto;
+  }
+  .ion-item-class-2{
+    margin: 0px auto;
+  }
+  .ion-icon-class{
+    width: 45px;
+    height: 45px;
+    float: left;
+    padding: 10px;
+    font-size: 25px;
+  }
+  .ion-textarea-class{
+    height: auto;
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    padding-left: 5px;
+    padding-right: 10px;
+    float: left;
+  }
+  .ion-input-class-no-height{
+    border: 1px solid #ebebeb;
+    border-radius: 5px;
+    overflow: auto;
+  }
+
+  .attach-document{
+    font-size: 15px;
+    color: #0d89d1;
+    margin: 5px 5px 20px 10px;
+    padding: 5px;
+    float: left;
+  }
+  .attach-icon{
+    width: 37px;
+    font-size: 35px;
+    float: left;
+  }
+  .attached-title{
+  font-family: Roboto;
+  font-size: 15px;
+  font-weight: bold;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  color: #000;
+  }

src/app/shared/publication/new-publication/new-publication.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { NewPublicationPage } from './new-publication.page';
+
+describe('NewPublicationPage', () => {
+  let component: NewPublicationPage;
+  let fixture: ComponentFixture<NewPublicationPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewPublicationPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(NewPublicationPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/publication/new-publication/new-publication.page.ts

@@ -0,0 +1,209 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { AlertController, ModalController, NavParams } from '@ionic/angular';
+
+/* import {Plugins, CameraResultType, CameraSource} from '@capacitor/core'; */
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { PublicationsService } from 'src/app/services/publications.service';
+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; */
+
+//Cordova
+import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { ViewPublicationsPage } from '../view-publications/view-publications.page';
+import { LoadingService } from 'src/app/services/loading.service';
+
+@Component({
+  selector: 'app-new-publication',
+  templateUrl: './new-publication.page.html',
+  styleUrls: ['./new-publication.page.scss'],
+})
+export class NewPublicationPage implements OnInit {
+  showLoader: boolean;
+  publication: Publication;
+  pub: Publication = new Publication();
+  image: Image = new Image();
+
+  publicationTitle:string;
+  imgUrl:any;
+
+  Defaultimage:any = '';
+
+
+  photo: SafeResourceUrl;
+
+  @Input() publicationType: string;
+  @Input() folderId: string;
+  @Output() closeDesktopComponent =  new EventEmitter<any>();
+  
+  
+  guestPicture:any;
+
+  capturedImage:any;
+  capturedImageTitle:any;
+
+
+  constructor(
+    private modalController: ModalController,
+    public photoService: PhotoService,
+    private publications: PublicationsService,
+    private camera: Camera,
+    ) {
+      this.publicationTitle = 'Nova Publicação';
+    }
+
+  ngOnInit() {
+    this.setTitle();
+    this.clear();
+    this.takePicture();
+  }
+  takePicture(){
+    const options: CameraOptions = {
+      quality: 90,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE,
+      targetWidth: 720,
+      targetHeight: 720,
+    }
+
+    this.camera.getPicture(options).then((imageData) => {
+     // imageData is either a base64 encoded string or a file URI
+     // If it's base64 (DATA_URL):
+     let base64Image = 'data:image/jpeg;base64,' + imageData;
+     this.capturedImage = imageData;
+     this.capturedImageTitle = new Date().getTime() + '.jpeg';
+    }, (err) => {
+     console.log(err);
+    });
+  }
+
+  getPicture(){
+    const options: CameraOptions = {
+      quality: 90,
+      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
+      destinationType: this.camera.DestinationType.DATA_URL,
+      encodingType: this.camera.EncodingType.JPEG,
+      mediaType: this.camera.MediaType.PICTURE,
+      targetWidth: 720,
+      targetHeight: 720,
+    }
+    this.camera.getPicture(options).then((imageData) => {
+      // imageData is either a base64 encoded string or a file URI
+      // If it's base64 (DATA_URL):
+      let base64Image = 'data:image/jpeg;base64,' + imageData;
+      this.capturedImage = imageData;
+      this.capturedImageTitle = new Date().getTime() + '.jpeg';
+     }, (err) => {
+      console.log(err);
+     });
+  }
+
+  async save(){
+    if(this.publicationType == '3'){
+       
+      if(this.capturedImage != ''){
+        this.publication = {
+          DateIndex: this.publication.DateIndex,
+          DocumentId:this.publication.DocumentId,
+          ProcessId:this.publication.ProcessId,
+          Title: this.pub.Title,
+          Message: this.pub.Message,
+          DatePublication: this.publication.DatePublication,
+          OriginalFileName: this.capturedImageTitle,
+          FileBase64: this.capturedImage,
+          FileExtension: 'jpeg',
+        }
+        console.log('Edit change image');
+        console.log(this.publication);
+        this.publications.UpdatePublication(this.publication.ProcessId, this.publication);
+        this.close();
+      }
+      else{
+        this.publication = {
+          DateIndex: this.publication.DateIndex,
+          DocumentId:this.publication.DocumentId,
+          ProcessId:this.publication.ProcessId,
+          Title: this.pub.Title,
+          Message: this.pub.Message,
+          DatePublication: this.publication.DatePublication,
+          OriginalFileName: this.publication.OriginalFileName,
+          FileBase64: this.publication.FileBase64,
+          FileExtension: 'jpeg',
+        }
+        console.log('Edit - keep image');
+        console.log(this.publication);
+        this.publications.UpdatePublication(this.publication.ProcessId, this.publication);
+        this.close();
+      }
+    }
+    else{
+      
+      this.publication = {
+        DateIndex: new Date(),
+        DocumentId:null,
+        ProcessId:this.folderId,
+        Title: this.pub.Title,
+        Message: this.pub.Message,
+        DatePublication: new Date(),
+        OriginalFileName: this.capturedImageTitle,
+        FileBase64: this.capturedImage,
+        FileExtension: 'jpeg',
+      }
+      
+      console.log(this.publication);
+      this.publications.CreatePublication(this.folderId, this.publication);
+
+      this.closeDesktopComponent.emit();
+    }
+  }
+
+
+  close(){
+    this.closeDesktopComponent.emit();
+  }
+  clear(){
+    this.capturedImage = '';
+  }
+  setTitle(){
+    if(this.publicationType == '1'){
+      this.publicationTitle = 'Nova Publicação Rápida';
+    }
+    else if(this.publicationType == '2'){
+      this.publicationTitle = 'Nova Publicação';
+    }
+    else if(this.publicationType == '3'){
+      this.publicationTitle = 'Editar Publicação';
+    }
+  }
+
+  /* async openGallery() {
+    const modal = await this.modalController.create({
+      component: GalleryPage,
+      componentProps:{
+      },
+      cssClass: 'new-publication',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
+  } */
+
+   /* async takePicture(){
+    const image = await Plugins.Camera.getPhoto({
+      quality: 100,
+      allowEditing: false,
+      resultType: CameraResultType.DataUrl,
+      source: CameraSource.Camera
+    });
+    console.log(image);
+    
+    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
+  } */
+
+}

src/app/shared/publication/view-publications/view-publications.page.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, Output } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { ModalController, NavParams } from '@ionic/angular';
+import { ModalController } 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';
@@ -20,6 +20,7 @@ export class ViewPublicationsPage implements OnInit {
   item: PublicationFolder;
 
   @Input() folderId: string;
+  @Output() addNewPublication =  new EventEmitter<any>();
   
 
   constructor(
@@ -96,19 +97,28 @@ export class ViewPublicationsPage implements OnInit {
   }
 
   async AddPublication(publicationType:any, folderId:string) {
-    const modal = await this.modalController.create({
+
-      component: NewPublicationPage,
+    if( window.innerWidth <= 1024) {
-      componentProps:{
+      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);
+      });
+    } else {
+      this.addNewPublication.emit({
         publicationType: publicationType,
-        folderId: folderId,
+        folderId: folderId
-      },
+      })
-      cssClass: 'new-publication',
+    }
-      backdropDismiss: false
+
-    });
-    await modal.present();
-    modal.onDidDismiss().then(()=>{
-      this.doRefresh(event);
-    });
   }
 
   async viewPublicationDetail(publicationId:string) {