issue 923

src/app/pages/publications/edit-action/edit-action.module.ts

@@ -4,6 +4,22 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  NgxMatDatetimePickerModule,
+  NgxMatNativeDateModule,
+  NgxMatTimepickerModule
+} from '@angular-material-components/datetime-picker';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
+import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+
 import { EditActionPageRoutingModule } from './edit-action-routing.module';
 
 import { EditActionPage } from './edit-action.page';
@@ -13,7 +29,19 @@ import { EditActionPage } from './edit-action.page';
     CommonModule,
     FormsModule,
     IonicModule,
-    EditActionPageRoutingModule
+    EditActionPageRoutingModule,
+    // Angular material
+    MatDatepickerModule,
+    MatInputModule,
+    MatNativeDateModule,
+    NgxMatDatetimePickerModule,
+    NgxMatTimepickerModule,
+    NgxMatNativeDateModule,
+    NgxMatMomentModule,
+    MatSelectModule,
+    MatButtonModule,
+    ReactiveFormsModule,
+    MatDialogModule,
   ],
   declarations: [EditActionPage]
 })

src/app/pages/publications/edit-action/edit-action.page.html

@@ -1,9 +1,134 @@
-<ion-header>
+<ion-header class="ion-no-border pt-20 px-20">
-  <ion-toolbar>
+  <div class="title-content d-flex align-center justify-space-between ">
-    <ion-title>edit-action</ion-title>
+    <div class="div-title">
-  </ion-toolbar>
+      <ion-label class="title">Editar acção presidencial</ion-label>
+    </div>
+    <!-- <div class="actionType">
+      <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">
+        <ion-segment-button value="Viagem">
+          <ion-label>Viagem</ion-label>
+        </ion-segment-button>
+        <ion-segment-button value="Evento">
+          <ion-label>Evento</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+    </div> -->
+    
+  </div>
 </ion-header>
 
 <ion-content>
+  <div class="content-container">
+
+    <div class="ion-item-container">
+      <ion-input [(ngModel)]="folder.Description" placeholder="Assunto" ></ion-input>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex ">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class flex-grow-1">
+          <ion-datetime
+            class="d-block d-md-none"
+            [(ngModel)]="folder.DateBegin"
+            placeholder="Início"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2025"
+            class="d-block d-md-none">
+          </ion-datetime>
+
+
+          <mat-form-field class="width-100 date-hour-picker d-none  d-md-block">
+            <input matInput [ngxMatDatetimePicker]="picker1" 
+              placeholder="Choose a date*" 
+              [formControl]="dateControlEnd"
+              [min]="minDate"
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #picker1 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+
+        </div>
+      </div>
+    </div>
+
+    <div class="container-div">
+      <div class="ion-item-class-2 d-flex">
+        <div class="ion-icon-class">
+          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+        </div>
+        <div class="ion-input-class d-flex flex-grow-1">
+          <ion-datetime 
+            class="flex-grow-1 d-block d-md-none"
+            [(ngModel)]="folder.DateEnd"
+            placeholder="Fim"
+            displayFormat="D MMM YYYY H:mm"
+            minuteValues="0,15,30,45"
+            monthShortNames="Jan, Fev, Mar, Abr, Mai, Jun, Jul, Aug, Sep, Out, Nov, Dez"
+            min="2018" 
+            max="2022">
+          </ion-datetime>
+
+          <mat-form-field class="width-100 date-hour-picker d-none d-md-block">
+            <input matInput [ngxMatDatetimePicker]="picker1" 
+              placeholder="Choose a date*" 
+              [formControl]="dateControlEnd"
+              [min]="minDate"
+              [disabled]="disabled"
+            >
+            <mat-datepicker-toggle id="new-inicio" matSuffix [for]="picker1"></mat-datepicker-toggle>
+            <ngx-mat-datetime-picker #picker1 
+              [showSpinners]="showSpinners" 
+              [showSeconds]="showSeconds"
+              [stepHour]="stepHour" [stepMinute]="stepMinute" 
+              [stepSecond]="stepSecond"
+              [touchUi]="touchUi">
+            </ngx-mat-datetime-picker>
+          </mat-form-field>
+        </div>
+      </div>
+    </div>
+
+    <div 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)]="folder.Detail" rows="12" cols="20" placeholder="Descrição da acção..."></ion-textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  
 
 </ion-content>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar width-100 justify-space-between d-flex px-20">
+    <ion-buttons slot="start">
+      <button class="btn-cancel" fill="clear" color="#061b52" (click)="close()">
+        <ion-label>Cancelar</ion-label>
+      </button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+      </button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+

src/app/pages/publications/edit-action/edit-action.page.scss

@@ -0,0 +1,127 @@
+:host{
+    background: #fff;
+  }
+  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{
+    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{
+    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{
+    margin: 0px auto;
+    overflow: auto;
+    padding: 0 !important;
+  }
+  .div-title{
+    width: fit-content;
+    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-input-class{
+      height: auto;
+      border: 1px solid #ebebeb;
+      border-radius: 5px;
+      padding-left: 5px;
+      padding-right: 10px;
+      float: left;
+    }
+    .ion-textarea-class{
+      width: 315px;
+      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;
+    }
+    .actionType{
+     float: right;
+      overflow: auto;
+      border-radius: 30px;
+    }
+    .ion-segment{
+      --background: #0782c9;
+    }

src/app/pages/publications/edit-action/edit-action.page.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ModalController, NavParams } from '@ionic/angular';
+import * as moment from 'moment';
+import { PublicationFolder } from 'src/app/models/publicationfolder';
+import { PublicationsService } from 'src/app/services/publications.service';
+import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
   selector: 'app-edit-action',
@@ -7,9 +13,99 @@ import { Component, OnInit } from '@angular/core';
 })
 export class EditActionPage implements OnInit {
 
-  constructor() { }
+  Form: FormGroup;
+  validateFrom = false
 
-  ngOnInit() {
+  public date: any;
+  public disabled = false;
+  public showSpinners = true;
+  public showSeconds = false;
+  public touchUi = false;
+  public enableMeridian = false;
+  public minDate: any;
+  public maxDate: any;
+  public stepHour = 1;
+  public stepMinute = 5;
+  public stepSecond = 5;
+  public dateControlStart = new FormControl(moment("DD MM YYYY hh"));
+  public dateControlEnd = new FormControl(moment("DD MM YYYY hh"));
+  
+  folder: PublicationFolder;
+  folderId: string;
+  @Output() closeDesktopComponent= new EventEmitter<any>();
+  @Output() updateDesktopComponent= new EventEmitter<any>();
+
+  constructor(
+    private publicationsService: PublicationsService,
+    private toastService: ToastService,
+    private navParams: NavParams,
+    private modalController: ModalController,
+  ) { 
+    this.folder = new PublicationFolder();
+    this.folderId = this.navParams.get('folderId');
   }
 
+  ngOnInit() {
+    this.getPublicationDetail();
+  }
+
+  close() {
+    this.modalController.dismiss();
+  }
+
+  getPublicationDetail() {
+    this.publicationsService.GetPresidentialAction(this.folderId).subscribe( res => {
+      this.folder = res;
+      
+      this.dateControlStart = new FormControl(moment(new Date(this.folder.DateBegin)));
+      this.dateControlEnd = new FormControl(moment(new Date(this.folder.DateEnd)));
+
+    });
+  }
+
+  get dateValid() {
+    if (window.innerWidth <= 800) {
+      return this.folder.DateBegin < this.folder.DateEnd? ['ok']: []
+    } else {
+      return ['ok']
+    }
+  }
+
+  runValidation() {
+    this.validateFrom  = true
+  }
+
+  injectValidation() {
+
+    this.Form = new FormGroup({
+      Subject: new FormControl(this.folder.Description, [
+        Validators.required,
+        // Validators.minLength(4)
+      ]),
+      Date: new FormControl(this.dateValid, [
+        Validators.required
+      ]),
+    })
+  }
+
+  async save() {
+    let body = {
+      ProcessId: this.folderId,
+      Description: this.folder.Description,
+      Detail: this.folder.Detail,
+      DateBegin: this.folder.DateBegin,
+      DateEnd: this.folder.DateEnd,
+      ActionType: this.folder.ActionType,
+    }
+    console.log(body);
+    
+    try {
+      await this.publicationsService.UpdatePresidentialAction(body).toPromise()
+      this.close();
+      this.updateDesktopComponent.emit();
+      this.toastService.successMessage('Acção presidencial atualizada')
+    } catch (error) {
+      this.toastService.badRequest('Não foi possivel atualizar a acção presidencial')
+    }
+  }
 }

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

@@ -51,11 +51,11 @@
                 </div>
             </ion-item>
             <ion-item-options class="members-options" side="end">
-              <!-- <ion-item-option (click)="editAction(viagem.ProcessId)"> 
+              <ion-item-option class="edit-option" (click)="editAction(viagem.ProcessId)"> 
                 <button class="btn-no-color">
                   <ion-icon class="edit" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
                 </button> 
-              </ion-item-option> -->
+              </ion-item-option>
               <ion-item-option (click)="deleteAction(viagem.ProcessId)"> 
                 <button class="btn-no-color">
                   <ion-icon class="delete"  name="trash-sharp"></ion-icon>
@@ -96,7 +96,16 @@
             </div>
           </ion-item>
           <ion-item-options class="members-options" side="end">
-            <ion-item-option color="danger"><ion-icon name="delete"></ion-icon> Apagar</ion-item-option>
+            <ion-item-option class="edit-option" (click)="editAction(evento.ProcessId)"> 
+              <button class="btn-no-color">
+                <ion-icon class="edit" slot="end" src="assets/images/icons-edit.svg" ></ion-icon>
+              </button> 
+            </ion-item-option>
+            <ion-item-option (click)="deleteAction(evento.ProcessId)"> 
+              <button class="btn-no-color">
+                <ion-icon class="delete"  name="trash-sharp"></ion-icon>
+              </button> 
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
         <!-- <div class="item width-100 d-flex"

src/app/pages/publications/publications.page.scss

@@ -170,12 +170,26 @@ ion-toolbar{
     align-content: center;
   }
 
+  .edit-option{
+    display: flex;
+    background: #e0e9ee;
+    align-items: center;
+    align-content: center;
+  }
+
+  .edit{
+    padding: 7px;
+    font-size: 35px;
+    color:#061b52;
+    border-radius: 20px;
+    margin: 8px;
+  }
   .delete{
     padding: 7px;
     font-size: 21px;
     color:#d30a0a;
     border-radius: 20px;
-    margin: 10px;
+    margin: 12px;
     border: 1px solid #d30a0a;
   }
   

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

@@ -138,14 +138,14 @@ export class PublicationsPage implements OnInit {
     });
   }
 
-  async editAction(id?: string){
+  async editAction(folderId?: string){
     const modal = await this.modalController.create({
       component: EditActionPage,
       componentProps:{
-        item: id,
+        folderId: folderId,
       },
       cssClass: 'new-action modal modal-desktop',
-      backdropDismiss: false
+      backdropDismiss: true
     });
     await modal.present();
     modal.onDidDismiss().then(()=>{

src/app/shared/publication/edit-action/edit-action.page.html

@@ -1,7 +1,7 @@
 <ion-header class="ion-no-border pt-20 px-20">
   <div class="title-content d-flex align-center justify-space-between ">
     <div class="div-title">
-      <ion-label class="title">123 Editar acção presidencial</ion-label>
+      <ion-label class="title">Editar acção presidencial</ion-label>
     </div>
     <!-- <div class="actionType">
       <ion-segment [(ngModel)]="segment" (ionChange)="segmentChanged($event)">