Add profile modal

src/app/pages/agenda/agenda.page.html

@@ -249,7 +249,7 @@
   </div>
 </div>
 </ion-header>
-<ion-content class="timeline">
+<ion-content id="timeline-conteiner" class="timeline">
 
   <!-- Progress bar -->
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">

src/app/pages/agenda/agenda.page.ts

@@ -263,10 +263,13 @@ export class AgendaPage implements OnInit {
     // auto scroll timeline
     setTimeout(() => {
       const timelineMarker = document.querySelector('.cal-current-time-marker');
-      const timelineContainer = document.querySelectorAll('ion-content')[2];
+
+      const timelineContainer = document.querySelector('ion-content#timeline-conteiner');
+
       const shadowRoot = timelineContainer.shadowRoot;
 
       const scrollContainer = shadowRoot.querySelector('main');
+
       try {
         scrollContainer.scroll({
           top: timelineMarker['offsetTop'] - ((scrollContainer.offsetHeight/2) - 60),

src/app/pages/events/events.page.ts

@@ -65,9 +65,9 @@ export class EventsPage implements OnInit {
     private storageService:StorageService,
     public activatedRoute: ActivatedRoute,
     private alertController: AlertService,
-    private modalController: ModalController,
     private authService: AuthService,
-    private processes:ProcessesService) {
+    private processes:ProcessesService,
+    private modalController:ModalController) {
       this.prEventList = null;
 
       // list

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

@@ -106,7 +106,7 @@ export class PublicationsPage implements OnInit {
   async viewPublications(folderId: string) {
     console.log('FOLDER', folderId)
 
-   /*  const enterAnimation = (baseEl: any) => {
+    const enterAnimation = (baseEl: any) => {
       const backdropAnimation = this.animationController.create()
         .addElement(baseEl.querySelector('ion-backdrop')!)
         .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
@@ -128,14 +128,13 @@ export class PublicationsPage implements OnInit {
     const leaveAnimation = (baseEl: any) => {
       return enterAnimation(baseEl).direction('reverse');
     }
- */
  
 
     /* let item =  this.publicationFolderList; */
     const modal = await this.modalController.create({
       component: ViewPublicationsPage,
-      /* enterAnimation,
+      enterAnimation,
-      leaveAnimation, */
+      leaveAnimation,
       componentProps:{
         folderId:folderId,
       },

src/app/pages/search/search.page.ts

@@ -1,20 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { ProcessesService } from 'src/app/services/processes.service';
 import { SearchService } from "../../services/search.service";
 import { SearchCategory } from "src/app/models/search-category";
 import { SearchDocument } from "src/app/models/search-document";
 import { formatDate } from '@angular/common';
-import { CloudData, CloudOptions } from 'angular-tag-cloud-module';
 import { SenderPage } from 'src/app/pages/search/sender/sender.page';
 import { OrganicEntityPage } from 'src/app/pages/search/organic-entity/organic-entity.page';
-import  WordCloud from 'src/plugin/wordcloud2.js'
+import  WordCloud from 'src/plugin/wordcloud2.js';
-import { TopSearch } from 'src/app/models/top-search';
-import { EventListPage } from '../gabinete-digital/event-list/event-list.page';
 import { ViewEventPage } from 'src/app/pages/agenda/view-event/view-event.page';
-import { ViewPublicationsPage } from 'src/app/pages/publications/view-publications/view-publications.page';
-
-import { NgModel } from '@angular/forms';
 import { PublicationDetailPage } from '../publications/view-publications/publication-detail/publication-detail.page';
 @Component({
   selector: 'app-search',

src/app/services/auth.service.ts

@@ -23,13 +23,23 @@ export class AuthService {
     private router:Router
     ) { 
       this.headers = new HttpHeaders();
-    }
 
+      //if(!environment.production){
+        if (localStorage.getItem("user") != null) {
+          this.ValidatedUser = JSON.parse(localStorage.getItem('user'));
+        }
+      //}
+
+    }
     public ValidatedUser:User;
 
     async login(user: User): Promise<boolean> {
       user.BasicAuthKey = 'Basic ' + btoa(user.username + '@' + user.domainName + ':' + user.password); //conversão em base64 das credenciais inseridas
 
+      //if(!environment.production){
+        localStorage.setItem('user', JSON.stringify(user) );
+      //}
+
       const options = { headers: {'Authorization': user.BasicAuthKey }};
       this.headers = this.headers.set('Authorization',user.BasicAuthKey);
       this.opts = {

src/app/shared/headers/header-no-search/header-no-search.page.html

@@ -14,7 +14,7 @@
         </div>
       </ion-col>
       <ion-col>
-        <div class="div-profile">
+        <div (click)="openSearch()" class="div-profile">
           <ion-icon src='assets/images/icons-profile.svg'></ion-icon>
         </div>
       </ion-col>

src/app/shared/headers/header-no-search/header-no-search.page.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { AnimationController, ModalController } from '@ionic/angular';
 import { SearchPage } from 'src/app/pages/search/search.page';
 import { MenuController } from '@ionic/angular';
-
+import { ProfileComponent } from './profile/profile.component';
 @Component({
   selector: 'app-header-no-search',
   templateUrl: './header-no-search.page.html',
@@ -11,15 +11,43 @@ import { MenuController } from '@ionic/angular';
 export class HeaderNoSearchPage implements OnInit {
 
   constructor(private modalController: ModalController,
-    private menu: MenuController) { }
+    private menu: MenuController,
+    private animationController: AnimationController,) { }
 
   ngOnInit() {
   }
 
   async openSearch() {
+
+    const enterAnimation = (baseEl: any) => {
+      const backdropAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('ion-backdrop')!)
+        .fromTo('opacity', '0.01', 'var(--backdrop-opacity)');
+
+      const wrapperAnimation = this.animationController.create()
+        .addElement(baseEl.querySelector('.modal-wrapper')!)
+        .keyframes([
+          { offset: 0, opacity: '1', right: '-100%' },
+          { offset: 1, opacity: '1', right: '0px' }
+        ]);
+
+      return this.animationController.create()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl: any) => {
+      return enterAnimation(baseEl).direction('reverse');
+    }
+ 
+
     const modal = await this.modalController.create({
-      component: SearchPage,
+      enterAnimation,
-      cssClass: 'group-messages',
+      leaveAnimation,
+      component: ProfileComponent,
+      cssClass: 'model profile-modal',
       componentProps: {
       }
     });

src/app/shared/headers/header-no-search/profile/profile.component.html

@@ -0,0 +1,68 @@
+
+
+<ion-content class=" bg-blue">
+    <div class="profile-content">
+
+        <div class="d-flex justify-end" (click)="close()">
+            <ion-icon class="icon" src="assets/images/icons-search-close.svg"></ion-icon>
+        </div>
+    
+    
+        <div class="go-back d-flex align-center" (click)="close()">
+            <ion-icon class="icon" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon> <div>Perfil</div>
+        </div>
+    
+        <div >
+            <div class="d-flex align-center">       
+                
+                <ion-icon  class="profile-pic"  name="add-circle-outline"></ion-icon>
+       
+            </div>
+        </div>
+    
+        <div class="profile-info">
+            <div class="label-text">Dados Perfil</div>
+            <div class="user-role">Ministro e Director do Gabinete do Presidente da Rep.</div>
+            <div class="email">email@exemple.ao</div>
+        </div>
+
+
+        <div class="login-preference">
+            <div class="preference">Preferência Login</div>
+
+            <ion-row>
+                <ion-col class="align-center d-flex">
+                    <ion-checkbox class="checkBox"></ion-checkbox>
+                    Impressão Digital
+                </ion-col>
+                <ion-col class="align-center d-flex">
+                    <ion-checkbox class="checkBox"></ion-checkbox>
+                    PIN 
+                </ion-col>
+            </ion-row>
+
+        </div>
+
+
+    </div>
+
+</ion-content>
+
+
+
+<ion-footer class=" footer-container ion-no-border bg-blue">
+    <div class="d-flex justify-space-between">
+        <ion-buttons slot="start" (click)="close()">
+            <ion-button class="btn-cancel" fill="clear" color="#061b52" >
+              <ion-label>Cancelar</ion-label>
+            </ion-button>
+          </ion-buttons>
+          <ion-buttons slot="end" (click)="close()">
+            <ion-button class="btn-ok" fill="clear" color="#fff" >
+              <ion-label>Gravar</ion-label>
+            </ion-button>
+          </ion-buttons>
+    
+    </div>
+
+  </ion-footer>

src/app/shared/headers/header-no-search/profile/profile.component.scss

@@ -0,0 +1,60 @@
+.profile-content{
+    padding: 20px 20px;
+}
+
+.icon{
+    font-size: 35px;
+}
+
+.go-back{
+    font-family: Roboto;
+    font-size: 25px;
+    .icon{
+        margin-right: 7px;
+    }
+}
+
+.profile-pic{
+    width: 200px;
+    height: 200px;
+    border-radius: 20px;
+    margin: 0px auto;
+}
+
+.profile-info{
+    .label-text{
+        font-size: 15px;
+        font-weight: bold;
+        color: white;
+        margin-bottom: 10px;
+    }
+    
+    .user-role{
+        background-color: white;
+        border-radius: 5px;
+        padding: 12px;
+        font-family: Roboto;
+        font-size: 13px;
+        color: black;
+        text-align: center;
+    }
+    
+    .email {
+        margin-top: 15px;
+    }
+    
+}
+
+.login-preference{
+    margin-top: 44px;
+
+    .preference{
+        font-family: Roboto;
+        font-size: 15px;
+        margin-bottom: 20px;
+        font-weight: bold;
+    }
+    .checkBox{
+        margin-right: 10px;
+    }
+}

src/app/shared/headers/header-no-search/profile/profile.component.spec.ts

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

src/app/shared/headers/header-no-search/profile/profile.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss'],
+})
+export class ProfileComponent implements OnInit {
+
+  constructor(private modalController:ModalController) { }
+
+  ngOnInit() {}
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+}

src/global.scss

@@ -278,3 +278,19 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
         height: 100%;
     }
 }
+
+
+.profile-modal{
+    .modal-wrapper{
+        position: absolute;
+        top: -40px;
+        right: 0px;
+        height: 100%;
+        width: 400px;
+    }
+}
+
+
+.footer-container{
+    padding: 10px 20px;
+}