From 1d6fee7c5b5c243bc66472ad2c77d2dcc375d93d Mon Sep 17 00:00:00 2001
From: "tiago.kayaya" <tiago.kayaya@equilibrium.co.ao>
Date: Thu, 1 Apr 2021 15:06:05 +0100
Subject: [PATCH] add edit event modal for desktop

---
 src/app/home/home-routing.module.ts           |   6 +-
 .../agenda/edit-event/edit-event.page.html    | 400 +++++++++---------
 .../agenda/edit-event/edit-event.page.scss    |  42 +-
 .../agenda/edit-event/edit-event.page.ts      |   2 +-
 .../agenda/view-event/view-event.page.html    |   2 +-
 .../agenda/view-event/view-event.page.ts      |  14 +-
 src/app/pages/events/events.page.ts           |  20 -
 7 files changed, 228 insertions(+), 258 deletions(-)

diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts
index 5c80c4160..5226aa346 100644
--- a/src/app/home/home-routing.module.ts
+++ b/src/app/home/home-routing.module.ts
@@ -71,7 +71,11 @@ const routes: Routes = [
           {
             path: 'eventId/:caller',
             loadChildren: () => import('../pages/agenda/view-event/view-event.module').then( m => m.ViewEventPageModule)
-          }
+          },
+          {
+            path: 'edit-event',
+            loadChildren: () => import('../pages/agenda/edit-event/edit-event.module').then( m => m.EditEventPageModule)
+          },
         ]
       },
       {
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.html b/src/app/pages/agenda/edit-event/edit-event.page.html
index 539a05db3..673b2c65c 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.html
+++ b/src/app/pages/agenda/edit-event/edit-event.page.html
@@ -1,225 +1,217 @@
-<ion-header  class="ion-no-border">
-  <ion-toolbar class="header-toolbar">
-    <div class="main-header">
-      <div class="title-content">
-        <div class="middle">
-          <ion-label class="title">2Editar Evento</ion-label>
+<ion-content class="height-100">
+  <div class="main-content d-flex height-100">
+    <div class="content d-flex flex-column width-100">
+      <div class="main-header">
+        <div class="title-content">
+          <div class="middle">
+            <ion-label class="title">Editar Evento</ion-label>
+          </div>
+        </div>
+      </div>
+      <div class="ion-item-container width-100">
+        <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
+      </div>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
+          </div>
+        </div>
+        <!-- Error messages -->
+        <!-- <span class="error ion-padding" >
+          Campo obrigatório
+        </span> -->
+    
+      </div>
+    
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select disabled  placeholder="Selecione agenda"
+            selectedText="{{postEvent.CalendarName}}" 
+            [(ngModel)]="postEvent.CalendarName" 
+            interface="action-sheet" Cancel-text="Cancelar" 
+            required>
+              <ion-select-option value="Oficial">Oficial</ion-select-option>
+              <ion-select-option value="Pessoal">Pessoal</ion-select-option>
+            </ion-select>
+          </div>
         </div>
       </div>
-    </div>
-  </ion-toolbar>
-</ion-header>
 
-<ion-content>
-  <div class="main-content">
-    <div class="ion-item-container">
-      <ion-input  placeholder="Assunto" [(ngModel)]="postEvent.Subject"></ion-input>
-    </div>
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-location.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Localização" [(ngModel)]="postEvent.Location"></ion-input>
-        </div>
-      </div>
-      <!-- Error messages -->
-      <!-- <span class="error ion-padding" >
-        Campo obrigatório
-      </span> -->
-  
-    </div>
-  
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select disabled  placeholder="Selecione agenda"
-          selectedText="{{postEvent.CalendarName}}" 
-          [(ngModel)]="postEvent.CalendarName" 
-          interface="action-sheet" Cancel-text="Cancelar" 
-          required>
-            <ion-select-option value="Oficial">Oficial</ion-select-option>
-            <ion-select-option value="Pessoal">Pessoal</ion-select-option>
-          </ion-select>
-        </div>
-      </div>
-    </div>
-
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select  placeholder="Selecione tipo" 
-          [(ngModel)]="postEvent.Categories[0]"
-          selectedText="{{postEvent.Categories[0]}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="Reunião">Reunião</ion-select-option>
-            <ion-select-option value="Viagem">Viagem</ion-select-option>
-            <ion-select-option value="Conferência">Conferência</ion-select-option>
-            <ion-select-option value="Encontro">Encontro</ion-select-option>
-          </ion-select>
-        </div>
-      </div>
-    </div>
-  
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-datetime 
-            placeholder="Início"
-            [(ngModel)]="postEvent.StartDate"
-            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>
-          <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-datetime 
-            placeholder="Fim"
-            [(ngModel)]="postEvent.EndDate"
-            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>
-          <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-select placeholder="Selecione repetição" 
-          [(ngModel)]="postEvent.IsRecurring"
-          selectedText="{{isRecurring}}" 
-          interface="action-sheet" 
-          Cancel-text="Cancelar" required>
-            <ion-select-option value="false">Não se repete</ion-select-option>
-            <ion-select-option value="true">Repete</ion-select-option>
-          </ion-select>
-        </div>
-      </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
-        </div>
-        <div (click)="openAttendees()" class="ion-input-class-no-height">
-          <div class="list-people">
-            <ion-item lines="none">
-              <ion-list>
-                <ion-label class="list-people-title">Ver ou editar participantes</ion-label>
-                <ion-label hidden >Text</ion-label>
-              </ion-list>
-            </ion-item>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
           </div>
-          <div class="add-people">
-            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          <div class="ion-input-class">
+            <ion-select  placeholder="Selecione tipo" 
+            [(ngModel)]="postEvent.Categories[0]"
+            selectedText="{{postEvent.Categories[0]}}" 
+            interface="action-sheet" 
+            Cancel-text="Cancelar" required>
+              <ion-select-option value="Reunião">Reunião</ion-select-option>
+              <ion-select-option value="Viagem">Viagem</ion-select-option>
+              <ion-select-option value="Conferência">Conferência</ion-select-option>
+              <ion-select-option value="Encontro">Encontro</ion-select-option>
+            </ion-select>
           </div>
         </div>
       </div>
-    </div>
     
-    <div hidden class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class-no-height">
-          <div class="list-people">
-            <ion-item lines="none">
-              <ion-list>
-                <ion-label class="list-people-title">Com conhecimento</ion-label>
-                <ion-label hidden >Text</ion-label>
-              </ion-list>
-            </ion-item>
+      <div class="container-div width-100">
+        <div class="ion-item-class-2 width-100">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
           </div>
-          <div class="add-people">
-            <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+          <div class="ion-input-class width-100">
+            <ion-datetime 
+              placeholder="Início"
+              [(ngModel)]="postEvent.StartDate"
+              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>
+            <!-- <ion-input placeholder="Data início" [(ngModel)]="postData.StartDate"></ion-input> -->
           </div>
         </div>
       </div>
-    </div>
-    
-    <div class="container-div">
-      <div class="ion-item-class-2">
-        <div class="ion-icon-class">
-          <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
-        </div>
-        <div class="ion-input-class">
-          <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-calendar.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-datetime 
+              placeholder="Fim"
+              [(ngModel)]="postEvent.EndDate"
+              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>
+            <!-- <ion-input placeholder="Data fim" [(ngModel)]="postData.EndDate"></ion-input> -->
+          </div>
         </div>
       </div>
-    </div>
-    
-    <div hidden class="ion-item-container-no-border">
-      <ion-label>
-        <div class="attach-icon">
-          <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-refresh.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-select placeholder="Selecione repetição" 
+            [(ngModel)]="postEvent.IsRecurring"
+            selectedText="{{isRecurring}}" 
+            interface="action-sheet" 
+            Cancel-text="Cancelar" required>
+              <ion-select-option value="false">Não se repete</ion-select-option>
+              <ion-select-option value="true">Repete</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </div>
+      
+      <div class="width-100">
+        <div class="container-div width-50">
+          <div class="ion-item-class-2">
+            <div class="ion-icon-class">
+              <ion-icon slot="start" src="assets/images/icons-person.svg"></ion-icon>
+            </div>
+            <div (click)="openAttendees()" class="ion-input-class-no-height">
+              <div class="list-people">
+                <ion-item lines="none">
+                  <ion-list>
+                    <ion-label class="list-people-title">Adicionar Destinatários</ion-label>
+                    <ion-label hidden >Text</ion-label>
+                  </ion-list>
+                </ion-item>
+              </div>
+              <div class="add-people">
+                <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="container-div width-50">
+          <div class="ion-item-class-2">
+            <div class="ion-icon-class">
+              <ion-icon slot="start" src="assets/images/icons-people-cc.svg"></ion-icon>
+            </div>
+            <div (click)="openAttendees()" class="ion-input-class-no-height">
+              <div class="list-people">
+                <ion-item lines="none">
+                  <ion-list>
+                    <ion-label class="list-people-title">Adicionar CC</ion-label>
+                    <ion-label hidden >Text</ion-label>
+                  </ion-list>
+                </ion-item>
+              </div>
+              <div class="add-people">
+                <ion-icon slot="start" src="assets/images/icons-arrow-forward.svg"></ion-icon>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="attach-document">
-          <ion-label>Anexar Documentos</ion-label>
-        </div> 
-      </ion-label>
     </div>
-    
-    <div hidden>
-      <ion-item>
-        <ion-label>Documentos Anexados</ion-label>
-      </ion-item>
-      <ion-list>
-        <ion-item>
+      
+      <div class="container-div width-100">
+        <div class="ion-item-class-2">
+          <div class="ion-icon-class">
+            <ion-icon slot="start" src="assets/images/icons-description.svg"></ion-icon>
+          </div>
+          <div class="ion-input-class">
+            <ion-input placeholder="Detalhes" [(ngModel)]="postEvent.Body.Text"></ion-input>
+          </div>
+        </div>
+      </div>
+      
+      <div hidden class="ion-item-container-no-border">
         <ion-label>
-          <h4 class="attach-title-item">Text</h4>
-          <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+          <div class="attach-icon">
+            <ion-icon src="assets/images/icons-attach-doc.svg"></ion-icon>
+          </div>
+          <div class="attach-document">
+            <ion-label>Anexar Documentos</ion-label>
+          </div> 
         </ion-label>
-      </ion-item>
-      </ion-list>
-    </div> 
+      </div>
+      
+      <div hidden>
+        <ion-item>
+          <ion-label>Documentos Anexados</ion-label>
+        </ion-item>
+        <ion-list>
+          <ion-item>
+          <ion-label>
+            <h4 class="attach-title-item">Text</h4>
+            <p><span class="span-left">Text</span><span class="span-right"> Text </span></p>
+          </ion-label>
+        </ion-item>
+        </ion-list>
+      </div>
+    </div>
+    <div class="aside-right flex-column height-100">
+      
+    </div>
   </div>    
 </ion-content>
-<ion-footer class="ion-no-border">
-  <ion-toolbar class="btn-div">
-    <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-title></ion-title>
-    <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>
+  <div class="buttons">
+    <button class="btn-cancel" shape="round" (click)="close()">Cancelar</button>
+    <button class="btn-ok" shape="round" (click)="save()">Gravar</button>
+  </div>
 </ion-footer>
\ No newline at end of file
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.scss b/src/app/pages/agenda/edit-event/edit-event.page.scss
index 1515a515b..9659a0bfa 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.scss
+++ b/src/app/pages/agenda/edit-event/edit-event.page.scss
@@ -1,24 +1,18 @@
-ion-content{
-    --background:transparent;
-}
-.header-toolbar{
-   --background:transparent;
-   --opacity: 1;
+
+.content{
+  padding: 30px 20px 0 20px !important;
+  margin: 0;
+  float: left;
+  border-left: 1px solid #d8d8d8 !important;
 }
   .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: 30px 20px 0px 20px;
     color:#000;
     transform: translate3d(0, 1px, 0);
     
     .title-content{
-      width: 360px;
       margin: 0px auto;
       overflow: auto;
       padding: 0 !important;
@@ -26,8 +20,6 @@ ion-content{
        .middle{
         padding: 0!important;
         float: left;
-        width: 221px;
-        margin: 2.5px 0 0 5px;
       }
     }
 
@@ -36,17 +28,7 @@ ion-content{
     }
 
   }
-  .main-content{
-    width: 100%; /* 400px */
-    height: 100%;
-    font-family: Roboto;
-    margin: 0 auto;
-    background-color: #fff;
-    overflow:auto;
-    padding: 15px 20px 0 20px;
-
     .ion-item-container{
-        width: 360px;
         margin: 15px auto;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -60,10 +42,10 @@ ion-content{
       }
       .container-div{
         margin-bottom: 15px;
+        float: left;
         overflow: auto;
       }
       .ion-item-class-2{
-        width: 360px;
         margin: 0px auto;
       }
       .ion-icon-class{
@@ -78,7 +60,7 @@ ion-content{
         margin-left: 0;
       }
       .ion-input-class{
-        width: 315px;
+        width: calc(100% - 45px);
         height: 45px;
         border: 1px solid #ebebeb;
         border-radius: 5px;
@@ -92,7 +74,7 @@ ion-content{
         overflow: auto;
       }
       .list-people{
-        width: 256px;
+        //width: 256px;
         float: left;
       
       }
@@ -174,4 +156,10 @@ ion-content{
         color:red;
       }
 
+  
+  .buttons{
+    display: flex;
+    justify-content: space-between;
+    padding: 20px;
+    overflow: auto;
   }
\ No newline at end of file
diff --git a/src/app/pages/agenda/edit-event/edit-event.page.ts b/src/app/pages/agenda/edit-event/edit-event.page.ts
index 95cd60663..0a3bb35e6 100644
--- a/src/app/pages/agenda/edit-event/edit-event.page.ts
+++ b/src/app/pages/agenda/edit-event/edit-event.page.ts
@@ -51,7 +51,7 @@ export class EditEventPage implements OnInit {
 
     window.onresize = (event) => {
       // if not mobile remove all component
-      if( window.innerWidth >= 1024){
+      if( window.innerWidth >= 800){
         this.modalController.dismiss();
       }
     };
diff --git a/src/app/pages/agenda/view-event/view-event.page.html b/src/app/pages/agenda/view-event/view-event.page.html
index fcb3dc779..93d0e392b 100644
--- a/src/app/pages/agenda/view-event/view-event.page.html
+++ b/src/app/pages/agenda/view-event/view-event.page.html
@@ -79,7 +79,7 @@
     </div>
     <div class="aside-right flex-column height-100">
       <div class="buttons">
-        <button full class="btn-ok" shape="round" >Editar</button>
+        <button (click)="editEvent()" full class="btn-ok" shape="round" >Editar</button>
         <div class="solid"></div>
         <button full class="btn-delete" shape="round" >Eliminar</button>
       </div>
diff --git a/src/app/pages/agenda/view-event/view-event.page.ts b/src/app/pages/agenda/view-event/view-event.page.ts
index f5117e0f8..ed5b2dc28 100644
--- a/src/app/pages/agenda/view-event/view-event.page.ts
+++ b/src/app/pages/agenda/view-event/view-event.page.ts
@@ -103,8 +103,13 @@ export class ViewEventPage implements OnInit {
   }
 
   async editEvent() {
-    /* this.close(); */
-    console.log(this.profile);
+
+    let classs;
+    if( window.innerWidth <= 800){
+      classs = 'modal'
+    } else  {
+      classs = 'modal modal-desktop showAsideOptions'
+    }
     
     const modal = await this.modalController.create({
       component: EditEventPage,
@@ -112,8 +117,7 @@ export class ViewEventPage implements OnInit {
         event: this.loadedEvent,
         profile: this.profile,
       },
-      cssClass: 'modal',
-      backdropDismiss: false
+      cssClass: classs,
     });
     await modal.present();
     modal.onDidDismiss().then((res) => {
@@ -128,6 +132,8 @@ export class ViewEventPage implements OnInit {
       }
     });
   }
+
+
   viewDocument(){
     const url: string = this.loadedAttachments.DocumentURL.replace("webTRIX.Viewer","webTRIX.Viewer.Branch1");
     const browser = this.iab.create(url,"_blank");
diff --git a/src/app/pages/events/events.page.ts b/src/app/pages/events/events.page.ts
index 3ec7cb0a9..3b8fb1834 100644
--- a/src/app/pages/events/events.page.ts
+++ b/src/app/pages/events/events.page.ts
@@ -344,26 +344,6 @@ export class EventsPage implements OnInit {
     modal.onDidDismiss();
   }
 
-  async openEditEventModal(){
-    let classs;
-    if( window.innerWidth <= 800){
-      classs = 'modal'
-    } else  {
-      classs = 'modal modal-desktop'
-    }
-    const modal = await this.modalController.create({
-      component: EditEventPage,
-      componentProps:{
-        profile: this.profile,
-      },
-      cssClass: classs,
-    });
-    await modal.present();
-    modal.onDidDismiss();
-  }
-
-  
-
   
 }