change publication like instagram and add time zone to agenda

src/app/shared/agenda/view-event/view-event.page.html

@@ -76,7 +76,7 @@
       </div>
       <div class="content-details">
         <ion-label>
-          <p>{{customDate}}</p>
+          <p>{{customDate}}, {{ TimeZoneString }}</p>
           <p *ngIf="toDateString(loadedEvent.StartDate) == toDateString(loadedEvent.EndDate)">das
             {{loadedEvent.StartDate | date: 'HH:mm'}} às {{loadedEvent.EndDate | date: 'HH:mm'}}</p>
           <p *ngIf="toDateString(loadedEvent.StartDate) != toDateString(loadedEvent.EndDate)">{{loadedEvent.StartDate |

src/app/shared/agenda/view-event/view-event.page.ts

@@ -114,12 +114,18 @@ export class ViewEventPage implements OnInit {
     })
   }
 
+  TimeZoneString = ''
+
+  setTimeZone() {
+    this.TimeZoneString = this.loadedEvent.TimeZone.split(')')[1]
+  }
   loadEvent() {
 
     if(this.sesseionStora.user.Profile == 'MDGPR' || this.sesseionStora.user.Profile == 'PR') {
       this.eventsService.getEvent(this.eventId).subscribe(res => {
         
         this.loadedEvent = res;
+        this.setTimeZone()
 
         this.today = new Date(res.StartDate);
         this.customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);
@@ -142,6 +148,7 @@ export class ViewEventPage implements OnInit {
           div.innerHTML = res.Body.Text
           res.Body.Text = div.innerText
           this.loadedEvent = res;
+          this.setTimeZone()
 
           this.today = new Date(res.StartDate);
           this.customDate = this.days[this.today.getDay()]+ ", "  + this.today.getDate() +" de "  + ( this.months[this.today.getMonth()]);

src/app/shared/publication/view-publications/publication-card/publication-card-routing.module.ts

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

src/app/shared/publication/view-publications/publication-card/publication-card.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { PublicationCardPageRoutingModule } from './publication-card-routing.module';
+
+import { PublicationCardPage } from './publication-card.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PublicationCardPageRoutingModule
+  ],
+  declarations: [PublicationCardPage],
+  exports: [PublicationCardPage]
+})
+export class PublicationCardPageModule {}

src/app/shared/publication/view-publications/publication-card/publication-card.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>publicationCard</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

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

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-publication-card',
+  templateUrl: './publication-card.page.html',
+  styleUrls: ['./publication-card.page.scss'],
+})
+export class PublicationCardPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/publication/view-publications/show-more/show-more-routing.module.ts

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

src/app/shared/publication/view-publications/show-more/show-more.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ShowMorePageRoutingModule } from './show-more-routing.module';
+
+import { ShowMorePage } from './show-more.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ShowMorePageRoutingModule
+  ],
+  declarations: [ShowMorePage],
+  exports: [ShowMorePage]
+})
+export class ShowMorePageModule {}

src/app/shared/publication/view-publications/show-more/show-more.page.html

@@ -0,0 +1,9 @@
+<div>
+  <pre #text class="text ma-0 add-ellipsis white-space-nowrap" *ngIf="showShortText">{{shortText}}</pre>
+  <pre class="text ma-0" *ngIf="!showShortText">{{text}}</pre>
+  <div class="cursor-pointer" *ngIf="showMoreButton" (click)="showShortText=false;showMoreButton=false">
+    <span>...</span>
+    <span>Mais</span>
+  </div>
+
+</div>

src/app/shared/publication/view-publications/show-more/show-more.page.spec.ts

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

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

@@ -0,0 +1,55 @@
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'app-show-more',
+  templateUrl: './show-more.page.html',
+  styleUrls: ['./show-more.page.scss'],
+})
+export class ShowMorePage implements OnInit {
+
+  @ViewChild('text') HTMLElement: any;
+  @Input() text = ''
+  shortText = ''
+  showShortText = true
+  showMoreButton = false
+
+  constructor() { }
+
+  ngOnInit() {
+    this.run()
+  }
+
+  run() {
+    let split = this.text.split(/\r?\n|\r|\n/g)
+    let text = split[0]
+    this.shortText = text.slice(0, 100)
+
+    if(split.length >= 2) {
+      this.showShortText = true
+      this.showMoreButton = true
+      return
+    }
+
+    setTimeout(()=> {
+      if (this.isEllipsisActive(this.HTMLElement.nativeElement)) {
+        this.showShortText = true
+        this.showMoreButton = true
+      } else {
+        this.showShortText = false
+      }
+    }, 500)
+  }
+
+
+  isEllipsisActive(element) {
+    if (element.clientWidth < element.scrollWidth) {
+        var style = element.currentStyle || window.getComputedStyle(element);
+        console.log('add ellopsiss')
+        return style.textOverflow === 'ellipsis'
+    }
+    return false;
+  }
+
+  ngOnChanges(changes: any): void {}
+
+}

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

@@ -7,7 +7,8 @@ import { IonicModule } from '@ionic/angular';
 import { ViewPublicationsPageRoutingModule } from './view-publications-routing.module';
 import { ViewPublicationsPage } from './view-publications.page';
 import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image';
-
+import { PublicationCardPageModule  } from './publication-card/publication-card.module'
+import { ShowMorePageModule } from './show-more/show-more.module';
 export class LazyLoadImageHooks extends IntersectionObserverHooks {
 setup(attributes: Attributes) {
   attributes.offset = 10;
@@ -23,7 +24,10 @@ setup(attributes: Attributes) {
     FormsModule,
     IonicModule,
     ViewPublicationsPageRoutingModule,
-    LazyLoadImageModule
+    LazyLoadImageModule,
+    // page
+    ShowMorePageModule,
+    PublicationCardPageModule
   ],
   exports: [ViewPublicationsPage],
   declarations: [ViewPublicationsPage],

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

@@ -37,10 +37,9 @@
   <div class="main-container px-20" *ngIf="publicationFolderService.FolderDetails[folderId]">
     <p class="item-content-detail">{{publicationFolderService.FolderDetails[folderId].Detail}}</p>
 
-    <ion-card *ngFor="let publication of publicationFolderService.publicationList[folderId] let i = index"
-    (click)="viewPublicationDetail(publication.DocumentId, publication.ProcessId)">
+    <ion-card *ngFor="let publication of publicationFolderService.publicationList[folderId] let i = index">
       <ion-card-content>
-        <div  class="post-img">
+        <div  class="post-img cursor-pointer" (click)="viewPublicationDetail(publication.DocumentId, publication.ProcessId)">
           <img [lazyLoad]="publication.FileBase64">
         </div>
         <div class="post-content">
@@ -51,38 +50,13 @@
             <div class="post-data">{{publication.DatePublication | date: 'dd-MM-yyyy  HH:mm'}}</div>
           </div>
           <div class="post-description">
-            <pre class="text">{{publication.Message}}</pre>
+            <app-show-more
+              [text]=publication.Message
+            ></app-show-more>
           </div>
         </div>
       </ion-card-content>
-      </ion-card>
-    <!-- <ion-list>
-      <div class="post-item  d-md-block mb-10 cursor-pointer"
-        *ngFor="let publication of publicationFolderService.publicationList"
-        (click)="viewPublicationDetail(publication.DocumentId)">
-        <div *ngIf="publication.FileBase64.length > 30" class="mb-10 post-img width-md-100">
-          <img src="{{publication.FileBase64}}" alt="image">
-        </div>
-        <div *ngIf="publication.FileBase64.length < 30" class="mb-10 post-img">
-          <img src="/assets/icon/icon-no-image.svg" alt="image">
-        </div>
-        <div class="post-content px-20 width-md-100 ">
-          <div class="post-title-time">
-            <div class="post-title">
-              <ion-label>{{publication.Title}}</ion-label>
-            </div>
-            <div class="post-data">{{publication.DatePublication | date: 'dd-MM-yyyy  HH:mm'}}</div>
-          </div>
-          <div class="post-description">
-            <p>{{publication.Message}}</p>
-          </div>
-        </div>
-
-      </div>
-      <div class="center height-100" *ngIf="!publicationFolderService.publicationList">
-        <p>{{error}}</p>
-      </div>
-    </ion-list> -->
+    </ion-card>
   </div>
   <!-- fab placed to the bottom end -->
   <ion-fab *ngIf="p.userPermission([p.permissionList.Actions.create]) && publicationFolderService.FolderDetails[folderId]" vertical="bottom" horizontal="end">

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

@@ -135,12 +135,23 @@
   }
   .post-img{
     width: 100%;
-    height: 56.25vh !important;
-    border-radius: 0px!important;
+    height: 100%;
+
+    max-height: 500px;
+    max-width: 468px;
+
+    min-height: 350px;
+    min-width: 468px;
+
+    margin: 5px auto;
+
+    border-radius: 0px !important;
     overflow: hidden;
     background-color: white;
     display: flex;
     justify-content: center;
+    align-items: center;
+    background: black;
 
   }
   .post-img img{
@@ -191,4 +202,11 @@ ion-fab-button:hover{
 
 
 
+ion-card{
+  width: fit-content;
+  max-width: calc(468px + 16px + 16px);
+  margin: 0px auto;
+  margin-top: 10px;
+  margin-bottom: 20px;
 
+}

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

@@ -125,10 +125,10 @@ export class ViewPublicationsPage implements OnInit {
 
     this.showLoader = true;
     const folderId = this.folderId
-    
+
     try {
       const publicationIds = await this.publications.GetPublicationsList(folderId).toPromise();
-      
+
       this.createPublicationList(folderId)
       let loadLater = []
       for (let publicationId of publicationIds) {
@@ -147,17 +147,17 @@ export class ViewPublicationsPage implements OnInit {
 
 
       for(let localPublication of this.publicationFolderService.publicationList[folderId]) {
-        
+
         const apiPublication = publicationIds.includes(localPublication.DocumentId)
         if(!apiPublication) {
           this.publicationFolderService.deletePost(folderId, localPublication.DocumentId)
         }
       }
-  
+
       this.showLoader = false;
-      
+
       this.storage.set(folderId, this.publicationFolderService.publicationList[folderId]);
-      
+
       this.oldpublicationIds = publicationIds
     } catch(error) {
       this.showLoader = false;
@@ -166,10 +166,8 @@ export class ViewPublicationsPage implements OnInit {
   }
 
   _deletePublication = (folderId, publicationId) => {
-    
+
     this.publicationFolderService.publicationList[folderId] = this.publicationFolderService.publicationList[folderId].filter( e => e.DocumentId != publicationId)
-    
-    console.log('this.publicationFolderService.publicationList[folderId]', this.publicationFolderService.publicationList[folderId].length)
 
   }
 
@@ -186,7 +184,7 @@ export class ViewPublicationsPage implements OnInit {
   async loadPublication(publicationId, folderId) {
     let Publication = await this.publications.GetPublicationById(publicationId).toPromise();
     let publicationDetails: Publication = this.publicationPipe.itemList(Publication)
-  
+
     const findIndex = this.publicationFindIndex(publicationId, folderId)
     const found = this.publicationIsPresent(publicationId, folderId)
     if(!found) {
@@ -194,7 +192,7 @@ export class ViewPublicationsPage implements OnInit {
     } else {
       this.publicationFolderService.publicationList[folderId][findIndex] = publicationDetails
     }
-    
+
   }
 
   getFromDB() {
@@ -242,7 +240,7 @@ export class ViewPublicationsPage implements OnInit {
         cssClass: 'new-action modal modal-desktop',
         backdropDismiss: true
       });
-  
+
       modal.onDidDismiss().then(() => {
         // Do nothing
       });