@chat21/chat21-ionic 3.0.60-rc2 → 3.0.60-rc6

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

@@ -36,12 +36,16 @@
           </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()">
+        <!-- button="true"  (click)="openUnsevedConversationIframe()" -->
+        <ion-item  *ngIf="supportMode && displayNewConvsItem" class="ion-no-padding open-iframe-item">
           <div tabindex="0"></div>
-          <app-project-item (projectIdEvent)="getLastProjectId($event)"></app-project-item>
+          <!-- <ion-note class="pinned-project">
+            {{ 'PINNED_PROJECT' | translate }}
+          </ion-note> -->
+     
+          <app-project-item style="width: 100%;" 
+          (openUnsevedConvsEvent)="openUnsevedConversationIframe($event)"  
+          (projectIdEvent)="getLastProjectId($event)"></app-project-item>
         </ion-item>
 
       <span
@@ -102,6 +106,8 @@
           <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>

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

@@ -297,6 +297,17 @@ ion-list {
 .open-iframe-item {
   padding-left: 0px !important ;
   padding-right: 0px !important;
-  height: 55px !important;
+  // height: 55px !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  --background-hover: #ffffff;
+  cursor:default !important;
+}
+
+.pinned-project {
+
+  color: #3880ff;
+  position: absolute;
+  right: 8px;
+  top: 2px;
+  // font-size: 12px !important;
 }

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

@@ -72,6 +72,8 @@ export class ConversationListPage implements OnInit {
   subscription: Subscription;
 
   public UNASSIGNED_CONVS_URL: any;
+  public PROJECTS_FOR_PANEL_URL: any;
+  public IFRAME_URL: any;
   public hasClickedOpenUnservedConvIframe: boolean = false;
   public lastProjectId: string;
   public isOnline: boolean = true;
@@ -239,24 +241,40 @@ export class ConversationListPage implements OnInit {
     this.lastProjectId = projectid;
   }
 
-  openUnsevedConversationIframe() {
+  openUnsevedConversationIframe(event) {
+    console.log('[CONVS-LIST-PAGE] openUnsevedConversationIframe ', event)
     this.hasClickedOpenUnservedConvIframe = true
     this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME', this.hasClickedOpenUnservedConvIframe);
     const DASHBOARD_BASE_URL = this.appConfigProvider.getConfig().dashboardUrl;
+    // http://localhost:4204/#/projects-for-panel
+    this.PROJECTS_FOR_PANEL_URL = DASHBOARD_BASE_URL + '#/projects-for-panel';
     this.UNASSIGNED_CONVS_URL = DASHBOARD_BASE_URL + '#/project/' + this.lastProjectId + '/unserved-request-for-panel';
+
+    if (event === 'pinbtn') {
+      this.IFRAME_URL = this.PROJECTS_FOR_PANEL_URL
+    } else {
+      this.IFRAME_URL = this.UNASSIGNED_CONVS_URL
+    }
+
     this.logger.log('[CONVS-LIST-PAGE] - HAS CLIKED OPEN UNSERVED REQUEST IFRAME > UNASSIGNED CONVS URL', this.UNASSIGNED_CONVS_URL);
-    this.openUnassignedConversations(this.UNASSIGNED_CONVS_URL)
+    this.openUnassignedConversations(this.IFRAME_URL, event)
   }
 
   // ---------------------------------------------------------
   // Opens the Unassigned Conversations iframe
   // ---------------------------------------------------------
-  openUnassignedConversations(UNASSIGNED_CONVS_URL) {
-
+  openUnassignedConversations(IFRAME_URL: string, event) {
     if (checkPlatformIsMobile()) {
-      presentModal(this.modalController, UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+      presentModal(this.modalController, UnassignedConversationsPage, {
+        iframe_URL: IFRAME_URL,
+        callerBtn: event
+      });
     } else {
-      this.navService.push(UnassignedConversationsPage, { unassigned_convs_url: UNASSIGNED_CONVS_URL });
+      this.navService.push(UnassignedConversationsPage, {
+        iframe_URL: IFRAME_URL,
+        callerBtn: event
+
+      });
     }
   }
 

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

@@ -1,6 +1,11 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title>{{translationMap?.get('NewConversations') }}</ion-title>
+    <ion-title *ngIf="callerBtn !== 'pinbtn'">
+      {{translationMap?.get('NewConversations') }}
+    </ion-title>
+    <ion-title *ngIf="callerBtn === 'pinbtn'">
+      {{translationMap?.get('PIN_A_PROJECT') }}
+    </ion-title>
     <ion-buttons slot="end">
       <ion-button ion-button fill="clear" (click)="onClose()">
         <ion-icon slot="icon-only" name="close"></ion-icon>
@@ -9,14 +14,14 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content overflow-scroll="true" id="iframe-ion-content" 
-[ngClass]="{'ion-content-black-background' : isProjectsForPanel === true}">
+<ion-content overflow-scroll="true" id="iframe-ion-content"
+  [ngClass]="{'ion-content-black-background' : isProjectsForPanel === true}">
   <!-- <iframe  id="i_frame"  style="width:100%; height:99%" frameBorder="0" allowfullscreen [src]="unassigned_convs_url_sanitized"></iframe> -->
-  <!-- <div class="stretchspinner-unassigned-convs">
-    <div class="rect1"></div>
-    <div class="rect2"></div>
-    <div class="rect3"></div>
-    <div class="rect4"></div>
-    <div class="rect5"></div>
-  </div> -->
-</ion-content>
+  <div class="loader-spinner-wpr">
+    <div id="loader" class="loader">
+      <svg class="circular" viewBox="25 25 50 50">
+        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
+      </svg>
+    </div>
+  </div>
+</ion-content>

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

@@ -1,79 +1,173 @@
 .ion-content-black-background {
---background: #2d323e	
+  --background: #2d323e;
 }
 
 // -------------------------------------------------
 // stretch spinner https://tobiasahlin.com/spinkit/
 // -------------------------------------------------
 .stretchspinner-unassigned-convs {
-    margin: 100px auto;
-    width: 50px;
-    height: 40px;
-    text-align: center;
-    font-size: 10px;
-    position: absolute;
-    margin: auto;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
+  // margin: 100px auto;
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.stretchspinner-unassigned-convs > div {
+  background-color: #3ea9f5;
+  height: 100%;
+  width: 6px;
+  display: inline-block;
+
+  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.stretchspinner-unassigned-convs .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.stretchspinner-unassigned-convs .rect3 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+.stretchspinner-unassigned-convs .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.stretchspinner-unassigned-convs .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+  0%,
+  40%,
+  100% {
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    -webkit-transform: scaleY(1);
+  }
+}
+
+@keyframes sk-stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+    -webkit-transform: scaleY(1);
+  }
+}
+
+// -------------------------------------------------
+// Loader as in dashboard
+// -------------------------------------------------
+.loader {
+  margin: 0 auto;
+  width: 60px;
+  position: absolute;
+  display: block;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  // @include transform-translate-y(-50%);
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  text-align: center;
+  top: 50%;
+
+  &:before {
+    content: "";
+    display: block;
+    padding-top: 100%;
   }
-  
-  .stretchspinner-unassigned-convs  > div {
-    background-color: #3ea9f5;
-    height: 100%;
-    width: 6px;
-    display: inline-block;
-  
-    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
-    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.circular {
+  animation: rotate 2s linear infinite;
+  height: 100%;
+  transform-origin: center center;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.path {
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  animation: dash 1.5s ease-in-out infinite, color 2s ease-in-out infinite;
+  stroke-linecap: round;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
   }
-  
-  .stretchspinner-unassigned-convs .rect2 {
-    -webkit-animation-delay: -1.1s;
-    animation-delay: -1.1s;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
   }
-  
-  .stretchspinner-unassigned-convs .rect3 {
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
   }
-  
-  .stretchspinner-unassigned-convs .rect4 {
-    -webkit-animation-delay: -0.9s;
-    animation-delay: -0.9s;
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
   }
-  
-  .stretchspinner-unassigned-convs .rect5 {
-    -webkit-animation-delay: -0.8s;
-    animation-delay: -0.8s;
+}
+
+@keyframes color {
+  100%,
+  0% {
+    stroke: #3ea9f5;
   }
-  
-  @-webkit-keyframes sk-stretchdelay {
-    0%,
-    40%,
-    100% {
-      -webkit-transform: scaleY(0.4);
-    }
-    20% {
-      -webkit-transform: scaleY(1);
-    }
+  50% {
+    stroke: #ff5722;
   }
-  
-  @keyframes sk-stretchdelay {
-    0%,
-    40%,
-    100% {
-      transform: scaleY(0.4);
-      -webkit-transform: scaleY(0.4);
-    }
-    20% {
-      transform: scaleY(1);
-      -webkit-transform: scaleY(1);
-    }
+  100% {
+    stroke: #3ea9f5;
   }
-  
+}
+
+// -------------------------------------
+// Loader spinner wpr
+// -------------------------------------
+.loader-spinner-wpr {
+  text-align: center;
+  // font-size: 10px;
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: #fff;
+}
 
-  .hide-stretchspinner {
-         display: none;
-  }
+.hide-stretchspinner {
+  display: none;
+}

package/src/app/pages/unassigned-conversations/unassigned-conversations.page.ts

@@ -14,8 +14,12 @@ import { CustomTranslateService } from 'src/chat21-core/providers/custom-transla
 })
 export class UnassignedConversationsPage implements OnInit {
 
-  @Input() unassigned_convs_url: any;
-  unassigned_convs_url_sanitized: any;
+  @Input() iframe_URL: any;
+  @Input() callerBtn: string;
+  // @Input() prjctsxpanel_url: any;
+  // @Input() unassigned_convs_url: any;
+
+  iframe_url_sanitized: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   // has_loaded: boolean;
   ion_content: any;
@@ -32,7 +36,11 @@ export class UnassignedConversationsPage implements OnInit {
   ) { }
 
   ngOnInit() {
-    const keys = ['UnassignedConversations', 'NewConversations'];
+    const keys = [
+      'UnassignedConversations',
+      'NewConversations',
+      'PIN_A_PROJECT'
+    ];
     this.translationMap = this.translateService.translateLanguage(keys);
     this.buildIFRAME();
     this.listenToPostMsg();
@@ -47,14 +55,16 @@ export class UnassignedConversationsPage implements OnInit {
   }
 
   buildIFRAME() {
-    this.logger.log('[UNASSIGNED-CONVS-PAGE] - UNASSIGNED CONVS URL (ngOnInit)', this.unassigned_convs_url);
-    this.unassigned_convs_url_sanitized = this.sanitizer.sanitize(SecurityContext.URL, this.unassigned_convs_url)
-    this.logger.log('[UNASSIGNED-CONVS-PAGE] - UNASSIGNED CONVS URL SANITIZED (ngOnInit)', this.unassigned_convs_url_sanitized);
+    this.logger.log('[UNASSIGNED-CONVS-PAGE] - iframe_URL (ngOnInit)', this.iframe_URL);
+    this.logger.log('[UNASSIGNED-CONVS-PAGE] - callerBtn (ngOnInit)', this.callerBtn);
+
+    this.iframe_url_sanitized = this.sanitizer.sanitize(SecurityContext.URL, this.iframe_URL)
+    this.logger.log('[UNASSIGNED-CONVS-PAGE] - UNASSIGNED CONVS URL SANITIZED (ngOnInit)', this.iframe_url_sanitized);
     // this.has_loaded = false
 
     this.ion_content = document.getElementById("iframe-ion-content");
     this.iframe = document.createElement("iframe");
-    this.iframe.src = this.unassigned_convs_url_sanitized;
+    this.iframe.src = this.iframe_url_sanitized;
     this.iframe.width = "100%";
     this.iframe.height = "99%";
     this.iframe.id = "unassigned-convs-iframe"
@@ -63,23 +73,35 @@ export class UnassignedConversationsPage implements OnInit {
     this.iframe.style.background = "white";
     this.ion_content.appendChild(this.iframe);
 
-    //  this.getIframeHaLoaded()
+    this.getIframeHaLoaded()
+
   }
 
   getIframeHaLoaded() {
     var self = this;
-    var iframe = document.getElementById('unassigned-convs-iframe') as HTMLIFrameElement;;
-    this.logger.log('[APP-STORE-INSTALL] GET iframe ', iframe)
-    if (iframe) {
-      iframe.addEventListener("load", function () {
-        self.logger.log("[APP-STORE-INSTALL] GET - Finish");
-        let spinnerElem = <HTMLElement>document.querySelector('.stretchspinner-unassigned-convs')
+    var iframeWin = document.getElementById('unassigned-convs-iframe') as HTMLIFrameElement;;
+    this.logger.log('[UNASSIGNED-CONVS-PAGE] GET iframe ', iframeWin)
+    if (iframeWin) {
+      iframeWin.addEventListener("load", function () {
+        self.logger.log("[UNASSIGNED-CONVS-PAGE] GET - Finish");
+
+        const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
+          input !== null && input.tagName === 'IFRAME';
+
+        if (isIFrame(iframeWin) && iframeWin.contentWindow) {
+          const msg = { action: "hidewidget", calledBy: 'unassigned-convs' }
+          iframeWin.contentWindow.postMessage(msg, '*');
+        }
+
+
+        let spinnerElem = <HTMLElement>document.querySelector('.loader-spinner-wpr')
 
         self.logger.log('[APP-STORE-INSTALL] GET iframeDoc readyState spinnerElem', spinnerElem)
         spinnerElem.classList.add("hide-stretchspinner")
 
       });
     }
+
   }
 
   listenToPostMsg() {
@@ -94,18 +116,31 @@ export class UnassignedConversationsPage implements OnInit {
           this.isProjectsForPanel = false;
         }
       }
+
+      if (event.data === 'hasChangedProject') {
+        this.closemodal()
+      }
     });
   }
 
+  public async closemodal() {
+    // const modal = await this.modalController.getTop();
+    // modal.dismiss({
+    //   confirmed: true
+    // });
+    // await this.modalController.dismiss({ confirmed: true });
+    this.onClose()
+
+  }
+
 
   async onClose() {
     this.logger.log('[UNASSIGNED-CONVS-PAGE] - onClose MODAL')
     this.logger.log('[UNASSIGNED-CONVS-PAGE] - onClose MODAL isModalOpened ', await this.modalController.getTop())
     const isModalOpened = await this.modalController.getTop();
-
+    this.logger.log('[UNASSIGNED-CONVS-PAGE] - onClose MODAL isModalOpened ', isModalOpened)
     if (isModalOpened) {
       this.modalController.dismiss({
-
         confirmed: true
       });
     } else {

package/src/app/shared/shared.module.ts

@@ -40,11 +40,11 @@ import { OptionHeaderComponent } from '../components/conversation-detail/option-
 import { MessageAttachmentComponent } from '../chatlib/conversation-detail/message/message-attachment/message-attachment.component';
 import { ImageViewerComponent } from '../components/image-viewer/image-viewer.component';
 import { ProjectItemComponent } from '../components/project-item/project-item.component';
-import { MessageTextAreaComponent } from '../components/conversation-detail/message-text-area/message-text-area.component';
+// import { MessageTextAreaComponent } from '../components/conversation-detail/message-text-area/message-text-area.component';
 
 @NgModule({
   declarations: [
-    MessageTextAreaComponent,
+    // MessageTextAreaComponent,
     AvatarProfileComponent,
     DdpHeaderComponent,
     UserPresenceComponent,
@@ -81,7 +81,7 @@ import { MessageTextAreaComponent } from '../components/conversation-detail/mess
     OptionHeaderComponent
   ],
   exports: [
-    MessageTextAreaComponent,
+    // MessageTextAreaComponent,
     AutofocusDirective,
     AvatarProfileComponent,
     DdpHeaderComponent,

package/src/assets/i18n/en.json

@@ -169,12 +169,12 @@
   "Email must be a valid email": "Email must be a valid email.",
   "Password is required": "Password is required.",
   "Password must be at least 6 characters long": "Password must be at least 6 characters long.",
-  "UPLOAD_FILE_ERROR":"An unexpected error occurred while uploading the file",
-  "DROP_IMAGE_HERE_TO_SEND_IT":"Drop image here to send it",
+  "UPLOAD_FILE_ERROR": "An unexpected error occurred while uploading the file",
+  "DROP_IMAGE_HERE_TO_SEND_IT": "Drop image here to send it",
   "ONLY_IMAGE_FILES_ARE_ALLOWED_TO_PASTE": "Only image files and text are allowed to be pasted",
   "FAILED_TO_UPLOAD_THE_FORMAT_IS_NOT_SUPPORTED": "Failed to upload: the format is not supported",
   "SENT_AN_IMAGE": "sent an image",
-  "SENT_AN_ATTACHMENT":"sent an attachment",
+  "SENT_AN_ATTACHMENT": "sent an attachment",
   "NO_INFORMATION_AVAILABLE": "No information available",
   "CONTACT_ID": "Contact ID",
   "USER_ID": "User ID",
@@ -183,11 +183,23 @@
   "Available": "Available",
   "Unavailable": "Unavailable",
   "Busy": "Busy",
-  "YouAreAboutToJoinThisChat":"You are about to join this chat",
+  "YouAreAboutToJoinThisChat": "You are about to join this chat",
   "Cancel": "Cancel",
-  "AreYouSure":"Are you sure?",
-  "UnassignedConversations":"Unassigned Conversations",
+  "AreYouSure": "Are you sure?",
+  "UnassignedConversations": "Unassigned Conversations",
   "NewConversations": "New conversations",
   "UPLOAD": "Upload",
-  "CANNED_RESPONSES":"Canned responses"
+  "CANNED_RESPONSES": "Canned responses",
+  "NO_CANNED_RESPONSES": "No canned responses",
+  "THERE_ARE_NO_CANNED_RESPONSES_AVAILABLE": "There are no canned responses available",
+  "TO_CREATE_THEM_GO_TO_THE_PROJECT": "To create them go to the project (you can click on the name of the project available in the right sidebar) and under the menu item 'Settings' in the Dashboard sidebar click on 'Canned responses' and then on the 'Create response' button",
+  "YES_CANNED_RESPONSES": "View the canned responses by clicking on the ⚡️ button or by typing a / in the text area, you can also filter the list by typing after the /",
+  "VIEW_ALL_CONVERSATIONS": "View all conversations",
+  "CONVERSATIONS_IN_QUEUE": "conversations in queue",
+  "PIN_A_PROJECT": "Pin a Project",
+  "PINNED_PROJECT": "Pinned project",
+  "CHANGE_PINNED_PROJECT": "Change pinned project",
+  "CHANGE_TO_AVAILABLE_UNAVAILABLE": "change to available/unavailable",
+  "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE": "change to your status to available",
+  "CHANGE_TO_YOUR_STATUS_TO_UNAVAILABLE": "change to your status to unavailable"
 }