@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

package/src/app/pages/conversations-list/conversations-list-routing.module.ts

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

package/src/app/pages/conversations-list/conversations-list.module.ts

@@ -0,0 +1,43 @@
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { TranslateLoader, TranslateModule, TranslatePipe } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import { createTranslateLoader } from '../../../chat21-core/utils/utils';
+
+import { ConversationListPageRoutingModule } from './conversations-list-routing.module';
+import { ConversationListPage } from './conversations-list.page';
+// import { ConversationDetailPage } from '../conversation-detail/conversation-detail.page';
+// import {LoginModalModule} from '../../modals/authentication/login/login.module';
+
+// import { DdpHeaderComponent } from '../../components/ddp-header/ddp-header.component';
+import { ContactsDirectoryPageModule } from '../contacts-directory/contacts-directory.module';
+import { ProfileInfoPageModule } from '../profile-info/profile-info.module';
+// import { ConversationDetailPageModule } from '../conversation-detail/conversation-detail.module';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ConversationListPageRoutingModule,
+    // ConversationDetailPageModule,
+    ContactsDirectoryPageModule,
+    ProfileInfoPageModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    }),
+    SharedModule
+  ],
+  // entryComponents: [DdpHeaderComponent],
+  declarations: [ConversationListPage]
+})
+export class ConversationListPageModule { }

package/src/app/pages/conversations-list/conversations-list.page.html

@@ -0,0 +1,112 @@
+<ion-header no-border class="ion-no-border">
+  <app-ddp-header *ngIf="conversationType ==='active'" [numberOpenConv]="numberOpenConv" [supportMode]="supportMode"
+    (openContactsDirectory)=openContactsDirectory($event) (openProfileInfo)=openProfileInfo($event)>
+  </app-ddp-header>
+
+  <app-option-header *ngIf="conversationType !=='active'" [headerTitle]=headerTitle
+    (onBackButton)=onBackButtonFN($event)>
+  </app-option-header>
+</ion-header>
+
+<ion-content #ioncontentconvlist class="list-avatar-page" appScrollbarTheme>
+
+  <div id="scrollbar2">
+    <ion-list>
+
+                   <!-- -------------------------------------------------------------------------- -->
+        <!-- New   <ion-spinner class="spinner-middle" style="margin-left: 19px;"></ion-spinner> -->
+        <!-- -------------------------------------------------------------------------- -->
+        <ion-item *ngIf="isOnline === false" style="padding-left:0px!important ;padding-right:0px!important" button="true" lines="none" class="ion-no-padding waiting-for-connection">
+          <div tabindex="0"></div>
+          <ion-avatar item-start>
+            <div class="sk-fading-circle">
+              <div class="sk-circle1 sk-circle"></div>
+              <div class="sk-circle2 sk-circle"></div>
+              <div class="sk-circle3 sk-circle"></div>
+              <div class="sk-circle4 sk-circle"></div>
+              <div class="sk-circle5 sk-circle"></div>
+              <div class="sk-circle6 sk-circle"></div>
+              <div class="sk-circle7 sk-circle"></div>
+              <div class="sk-circle8 sk-circle"></div>
+              <div class="sk-circle9 sk-circle"></div>
+              <div class="sk-circle10 sk-circle"></div>
+              <div class="sk-circle11 sk-circle"></div>
+              <div class="sk-circle12 sk-circle"></div>
+            </div>
+          </ion-avatar>
+          <ion-label part="message-text" class="waiting-for-network-msg"> Waiting for network</ion-label>
+        </ion-item>
+
+        <ion-item  *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item"
+        button="true"
+          (click)="openUnsevedConversationIframe()">
+          <div tabindex="0"></div>
+          <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+        </ion-item>
+
+      <span
+        *ngIf="(conversations.length > 0 && conversationType ==='active') || (archivedConversations.length > 0  && conversationType ==='archived');then contentConversations else contentMessageWelcome">
+        here is ignored
+      </span>
+
+ 
+
+      <ng-template #contentConversations>
+        <!-- ---------------------------------- -->
+        <!-- ACTIVE CONVERSATION LIST -->
+        <!-- ---------------------------------- -->
+        <ion-list-conversations *ngIf="conversationType ==='active'" [uidConvSelected]="uidConvSelected"
+          [listConversations]="conversations" [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
+          (onConversationLoaded)="onConversationLoaded($event)" (onCloseConversation)="onCloseConversation($event)">
+        </ion-list-conversations>
+
+        <!-- ---------------------------------- -->
+        <!-- ARCHIVED CONVERSATION LIST -->
+        <!-- ---------------------------------- -->
+        <ion-list-conversations *ngIf="conversationType ==='archived'" [listConversations]="archivedConversations"
+          [stylesMap]="stylesMap" [translationMap]="translationMapConversation"
+          (onConversationSelected)=onConversationSelected($event) (onImageLoaded)="onImageLoaded($event)"
+          (onConversationLoaded)="onConversationLoaded($event)">
+        </ion-list-conversations>
+      </ng-template>
+
+      <ng-template #contentMessageWelcome>
+        <div [class.active]="loadingIsActive" class="chat21-spinner" id="chat21-spinner">
+          <!-- <div class="chat21-bounce1"></div>
+          <div class="chat21-bounce2"></div>
+          <div class="chat21-bounce3"></div> -->
+          <!-- <span>loading ...</span>  -->
+          <!-- --------------------------------------------- -->
+          <!-- skeleton loading -->
+          <!-- --------------------------------------------- -->
+          <ion-list *ngIf="loadingIsActive">
+            <ion-item lines="none" *ngFor="let fake of generateFake(10)">
+              <ion-avatar slot="start" style="margin-left: 0 !important;">
+                <ion-skeleton-text animated></ion-skeleton-text>
+              </ion-avatar>
+              <ion-label>
+                <h3 style="height: 21px;">
+                  <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+                </h3>
+                <p style="height: 15px;">
+                  <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+                </p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+
+        <div id="no-convs-wpr"
+          *ngIf="(!loadingIsActive && conversations.length === 0) || (!loadingIsActive && archivedConversations.length === 0) ">
+          <ion-item id="no-convs" class="ion-text-center" lines="none">
+            <ion-label class="ion-text-wrap" color="medium">
+              {{ 'LABEL_MSG_PUSH_START_CHAT' | translate }}
+            </ion-label>
+          </ion-item>
+        </div>
+
+      </ng-template>
+    </ion-list>
+  </div>
+</ion-content>

package/src/app/pages/conversations-list/conversations-list.page.scss

@@ -0,0 +1,302 @@
+ion-header {
+  border-bottom-style: solid;
+  border-color: var(--light-gray);
+  border-bottom-width: thin;
+}
+
+ion-list {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 40px;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  ion-item {
+    cursor: pointer;
+    height: 64px;
+    position: relative;
+    display: flex;
+    text-decoration: none;
+    padding-left: 8px;
+    padding-right: 8px;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    .selected {
+      border-radius: 10px;
+      padding-left: 8px;
+      padding-right: 8px;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    ion-avatar {
+      position: relative;
+      padding: 0;
+      margin: 0 12px 0 8px;
+      height: 50px;
+      width: 50px;
+      min-width: 50px;
+      min-height: 50px;
+      line-height: 50px;
+      .avatar-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        text-align: center;
+        font-size: 20px;
+        color: #ffffff;
+        font-weight: 500;
+      }
+      .avatar-profile {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        background-size: cover;
+        background-position: top center;
+        border-radius: 50%;
+        border-color: #c3c3c3;
+        border-style: solid;
+        border-width: 0px;
+      }
+    }
+    ion-label {
+      flex: 1 1 0px;
+      justify-content: center;
+      min-width: 0;
+      padding: 0;
+      font-family: Helvetica, Helvetica, Arial, sans-serif;
+      line-height: 1.28;
+      text-rendering: optimizeLegibility;
+      .conversation_with {
+        color: rgba(0, 0, 0, 1);
+        font-size: 15px;
+        font-weight: 400;
+        line-height: 1.4;
+      }
+      .conversation_message {
+        p {
+          color: rgba(153, 153, 153, 1);
+          font-size: 13px;
+          font-weight: 400;
+          height: 18px;
+          &.not-read {
+            font-weight: bold;
+          }
+        }
+      }
+    }
+    ion-note {
+      position: absolute;
+      right: 8px;
+      top: 4px;
+      font-size: 10px;
+    }
+    ion-buttons {
+      margin: 0;
+      ion-button {
+        padding: 0;
+        margin: 0;
+        height: 24px;
+        width: 24px;
+        font-size: 10px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        color: rgba(153, 153, 153, 1);
+        background-color: transparent;
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+      }
+    }
+
+    .notification_point {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #0b5c89;
+      position: absolute;
+      right: 6px;
+      bottom: 8px;
+    }
+  }
+}
+
+.waiting-for-connection {
+  --background: #fdd764;
+  --min-height: 70px;
+}
+
+// -------------------------------
+// Spinner
+// -------------------------------
+.sk-fading-circle {
+  // margin: 100px auto;
+  width: 25px;
+  height: 25px;
+  position: relative;
+  margin-left: 10px;
+  margin-top: 13px;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+#no-convs-wpr {
+  margin: 100px auto;
+}
+
+.open-iframe-item {
+  padding-left: 0px !important ;
+  padding-right: 0px !important;
+  height: 55px !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}

package/src/app/pages/conversations-list/conversations-list.page.spec.ts

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