@chat21/chat21-ionic 3.0.107-rc.5 → 3.0.107-rc.8

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # chat21-ionic ver 3.0
 
+### 3.0.107.rc.8
+- bug-fixed: form icon into conversation-list and header conversation-detail not change color 
+
+### 3.0.107.rc.7
+- bug-fixed: unassigned-convs not laoded custom external style via postMessage or event.subscribe methods
+- bug-fixed: delete all old css class style while uploading (via postMessge) a new class
+- bug-fixed: customStyle removed if refresh page or window.resize event is handled --> restore saved style from storage
+
+### 3.0.107.rc.6
+- bug-fixed: set is_new=false before archive an active conversation (not show not-read blu pointer and bold recipient fullname and last text)
+
 ### 3.0.107.rc.5
 - bug-fixed: user info is not updated in sidebar-user-detail with SSO
 
 ### 3.0.107.rc.4
 - bug-fixed: SSO, createCustomToken pass old token to authenticate chat engine module
 
-
 ### 3.0.107.rc.3
 - bug-fixed: update tiledek_token after signInWithCustomToken
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.0.107-rc.5",
+    "version": "3.0.107-rc.8",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -319,6 +319,8 @@ export class AppComponent implements OnInit {
     this.initializeApp('oninit');
     this.loadCustomScript(appconfig)
     this.listenToPostMsgs();
+
+    this.loadStyle(JSON.parse(this.appStorageService.getItem('style')))
   }
 
 
@@ -411,9 +413,11 @@ export class AppComponent implements OnInit {
   async loadStyle(data){
     console.log('[APP-COMPO] event: style ...', data)
     this.appStorageService.setItem('style', JSON.stringify(data))
-    if(!data.parameter){
+    if(!data || !data.parameter){
 
       /** remove class from chat-IFRAME */
+      let className = document.body.className.replace(new RegExp(/style-\S*/gm), '')
+      document.body.className = className
       document.body.classList.remove('light')
       document.body.classList.remove('dark')
       document.body.classList.remove('custom')
@@ -425,15 +429,34 @@ export class AppComponent implements OnInit {
       /** remove class from dashoard-IFRAME */
       var iframeWin = <HTMLIFrameElement>document.getElementById("iframeConsole")
       if(iframeWin){
+        let className = iframeWin.contentDocument.body.className.replace(new RegExp(/style-\S*/gm), '')
+        iframeWin.contentDocument.body.className = className
         iframeWin.contentDocument.body.classList.remove('light')
         iframeWin.contentDocument.body.classList.remove('dark')
         iframeWin.contentDocument.body.classList.remove('custom')
+        
         let link = iframeWin.contentDocument.getElementById('themeCustom');
         if(link){
           link.remove();
         }
       }
 
+      /** remove class from dashoard-IFRAME-unsassigned-convs */
+      var iframeWinUnassigned = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
+      if(iframeWinUnassigned){
+        let className = iframeWin.contentDocument.body.className.replace(new RegExp(/style-\S*/gm), '')
+        iframeWinUnassigned.contentDocument.body.className = className
+        iframeWinUnassigned.contentDocument.body.classList.remove('light')
+        iframeWinUnassigned.contentDocument.body.classList.remove('dark')
+        iframeWinUnassigned.contentDocument.body.classList.remove('custom')
+        
+        let link = iframeWinUnassigned.contentDocument.getElementById('themeCustom');
+        if(link){
+          link.remove();
+        }
+      }
+      
+
       /** remove style INFO from storage */
       this.appStorageService.removeItem('style')
 
@@ -447,14 +470,17 @@ export class AppComponent implements OnInit {
     link.rel = 'stylesheet';
     link.type = 'text/css';
     link.media='all';
-
     this.logger.log('[APP-COMP] create link element...', link)
     let head = document.getElementsByTagName('head')[0];
     head.appendChild(link);
+    
     /** add class to body element as theme type ('light', 'dark', 'custom') */
     document.body.classList.add(data.type) 
     
-    /** publish event to info-support-group component */
+    /** publish event to 
+     *  - info-support-group component 
+     *  - unassigned-conversations component
+    */
     this.events.publish('style', data)
 
     // var iframeWin = <HTMLIFrameElement>document.getElementById("iframeConsole")

package/src/app/components/conversation-info/info-support-group/info-support-group.component.ts

@@ -21,28 +21,28 @@ export class InfoSupportGroupComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.logger.log('InfoSupportGroupComponent - urlConversationSupportGroup: ', this.urlConversationSupportGroup);
-    this.events.subscribe('style', (data)=>this.loadStyle(data) )
+    this.logger.log('[InfoSupportGroupComponent] - urlConversationSupportGroup: ', this.urlConversationSupportGroup);
+    this.events.subscribe('style', (data)=>this.loadStyle(data))
   }
 
   ngOnDestroy() {
     // this.logger.log('ngOnDestroy ConversationDetailPage: ');
-    this.logger.log('InfoSupportGroupComponent - ngOnDestroy ');
+    this.logger.log('[InfoSupportGroupComponent] - ngOnDestroy ');
 
   }
 
   onLoad(iframe){
     let styleData = this.appStorageService.getItem('style')
-    console.log('styleeeeee', styleData)
+    console.log('[InfoSupportGroupComponent] styleeeeee', styleData)
     if(styleData && styleData !== 'undefined'){
       this.loadStyle(JSON.parse(styleData))
     }
   }
-
-
   async loadStyle(data){
     var iframeWin = <HTMLIFrameElement>document.getElementById("iframeConsole")
     if(!data.parameter){
+      let className = iframeWin.contentDocument.body.className.replace(new RegExp(/style-\S*/gm), '')
+      iframeWin.contentDocument.body.className = className
       iframeWin.contentWindow.document.body.classList.remove('light')
       iframeWin.contentWindow.document.body.classList.remove('dark')
       iframeWin.contentWindow.document.body.classList.remove('custom')

package/src/app/pages/conversation-detail/conversation-detail.page.ts

@@ -531,7 +531,6 @@ export class ConversationDetailPage implements OnInit, OnDestroy, AfterViewInit
     this.addEventsKeyboard()
     this.updateConversationBadge() // AGGIORNO STATO DELLA CONVERSAZIONE A 'LETTA' (is_new = false)
 
-
   }
 
   _getProjectIdByConversationWith(conversationWith: string) {

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

@@ -5,6 +5,8 @@ import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service
 import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
 import { DomSanitizer } from '@angular/platform-browser'
 import { CustomTranslateService } from 'src/chat21-core/providers/custom-translate.service';
+import { AppStorageService } from 'src/chat21-core/providers/abstract/app-storage.service';
+import { EventsService } from 'src/app/services/events-service';
 
 
 @Component({
@@ -34,6 +36,8 @@ export class UnassignedConversationsPage implements OnInit {
     private navService: NavProxyService,
     private sanitizer: DomSanitizer,
     private translateService: CustomTranslateService,
+    private appStorageService: AppStorageService,
+    private events : EventsService
   ) { }
 
   ngOnInit() {
@@ -46,6 +50,7 @@ export class UnassignedConversationsPage implements OnInit {
     this.buildIFRAME();
     this.listenToPostMsg();
     this.hideHotjarFeedbackBtn();
+    this.events.subscribe('style', (data)=>this.loadStyle(data))
   }
 
   ngOnDestroy(){
@@ -89,7 +94,8 @@ export class UnassignedConversationsPage implements OnInit {
     if (iframeWin) {
       iframeWin.addEventListener("load", function () {
         self.logger.log("[UNASSIGNED-CONVS-PAGE] GET - Finish");
-
+        self.onLoad(iframeWin)
+        
         const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
           input !== null && input.tagName === 'IFRAME';
 
@@ -98,17 +104,58 @@ export class UnassignedConversationsPage implements OnInit {
           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")
 
+
+
       });
     }
 
   }
 
+  onLoad(iframe){
+    let styleData = this.appStorageService.getItem('style')
+    console.log('[UNASSIGNED-CONVS-PAGE] styleeeeee', styleData)
+    if(styleData && styleData !== 'undefined'){
+      this.loadStyle(JSON.parse(styleData))
+    }
+  }
+  async loadStyle(data){
+    var iframeWin = <HTMLIFrameElement>document.getElementById("unassigned-convs-iframe")
+    if(!data.parameter){
+      let className = iframeWin.contentDocument.body.className.replace(new RegExp(/style-\S*/gm), '')
+      iframeWin.contentDocument.body.className = className
+      iframeWin.contentWindow.document.body.classList.remove('light')
+      iframeWin.contentWindow.document.body.classList.remove('dark')
+      iframeWin.contentWindow.document.body.classList.remove('custom')
+      let link = iframeWin.contentWindow.document.getElementById('themeCustom');
+      if(link){
+        link.remove();
+      }
+      return;
+    } 
+
+    // Create link
+    let link = iframeWin.contentWindow.document.createElement('link');
+    link.id= 'themeCustom'
+    link.href = data.parameter;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.media='all';
+    
+    console.log('linkkkk', link, iframeWin.contentWindow.document)
+    let head = iframeWin.contentWindow.document.getElementsByTagName('head')[0];
+    head.appendChild(link);
+    iframeWin.contentWindow.document.body.classList.add(data.type) //ADD class to body element as theme type ('light', 'dark', 'custom')
+    return;
+  }
+
+
   listenToPostMsg() {
     window.addEventListener("message", (event) => {
       // console.log("[UNASSIGNED-CONVS-PAGE] message event ", event);

package/src/assets/customStyle.css

@@ -8,11 +8,32 @@ body.light{
     --list-bkg-color: green;
 }
 
-body.dark{
+body.style-1{
     background-color: blue;
     --list-bkg-color: blue;
 }
 
 body.light .navbar{
     background-color: red;
+}
+
+body.light ion-button  .button-native {
+    background-color: red;
+}
+
+body.light ion-button {
+    background-color: red;
+}
+
+body.style-1 ion-button .button-native {
+    background-color: red;
+}
+
+/* body.dark :host(.button-native) {
+    border: 1px solid red;
+} */
+
+
+body.style-1 ion-col div.buttons-left {
+    background-color: blue;
 }

package/src/assets/images/channel_icons/form-logo_v2.svg

@@ -1,13 +1,8 @@
 <svg focusable="false"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 448 512" height="15"  width="15"
 	 style="enable-background:new 0 0 448 512;" xml:space="preserve">
-<path fill="#779bbb" d="M450,432V80c0-26.5-21.5-48-48-48H50C23.5,32,2,53.5,2,80v352c0,26.5,21.5,48,48,48h352
+<path fill="#000000" d="M450,432V80c0-26.5-21.5-48-48-48H50C23.5,32,2,53.5,2,80v352c0,26.5,21.5,48,48,48h352
 	C428.5,480,450,458.5,450,432z M114,192c-8.8,0-16-7.2-16-16v-32c0-8.8,7.2-16,16-16h226c8.8,0,16,7.2,16,16l1,32
 	c0,8.8-8.2,16-17,16H114z M114,288c-8.8,0-16-7.2-16-16v-32c0-8.8,7.2-16,16-16h155c8.8,0,16,7.2,16,16v32c0,8.8-7.2,16-16,16H114z
 	 M114,384c-8.8,0-16-7.2-16-16v-32c0-8.8,7.2-16,16-16h111c8.8,0,16,7.2,16,16v32c0,8.8-7.2,16-16,16H114z"/>
-<g>
-	<polygon fill="#779bbb" points="405.1,237.6 365,204.1 262.4,336.1 262.3,378.6 302.4,369.6 	"/>
-	<path fill="#779bbb" d="M427.8,197L398,172.1c-2.8-2.4-7-1.9-9.2,1L371.8,195l40.1,33.5l17.1-21.9C431.1,203.7,430.7,199.4,427.8,197z
-		"/>
-</g>
 </svg>

package/src/assets/test.html

@@ -12,7 +12,7 @@
 
   <div class="event-wrp" id="onThemeColor">
     <span class="badge">EVENT</span>
-    <label>themeColor </label>
+    <label>themeColor LIGHT</label>
     <label class="switch">
       <input type="checkbox" name="themeColor" onclick="onCLickThemeColor(this)">
       <span class="slider round"></span>
@@ -34,15 +34,16 @@
       // cssLink.type = "text/css"; 
       // console.log('framessss', frames['myIFrame'])
       // frames['myIFrame'].contentWindow.document.body.appendChild(cssLink);
-      let msg= { action: "style", type: 'light', parameter: 'http://localhost:8080/assets/customStyle.css'}
-      frames['myIFrame'].contentWindow.postMessage(msg, '*');
+
+      // let msg= { action: "style", type: 'light', parameter: 'http://localhost:8080/assets/customStyle.css'}
+      // frames['myIFrame'].contentWindow.postMessage(msg, '*');
     }
 
 
     function onCLickThemeColor(event){
       console.log('onCLickThemeColor: status-->',event.checked);
       if(event.checked){
-        let msg= { action: "style", type: 'light', parameter: 'http://localhost:8080/assets/customStyle.css'}
+        let msg= { action: "style", type: 'style-1', parameter: 'http://localhost:8080/assets/customStyle.css'}
         frames['myIFrame'].contentWindow.postMessage(msg, '*');
       }else{
         let msg= { action: "style", parameter: ''}

package/src/chat21-core/providers/firebase/firebase-conversations-handler.ts

@@ -272,6 +272,7 @@ export class FirebaseConversationsHandler extends ConversationsHandlerService {
     archiveConversation(conversationId: string) {
         const that = this
         this.setClosingConversation(conversationId, true);
+        this.setConversationRead(conversationId)
         const index = searchIndexInArrayForUid(this.conversations, conversationId);
         // if (index > -1) {
         //     this.conversations.splice(index, 1);

package/src/chat21-core/providers/mqtt/mqtt-conversations-handler.ts

@@ -374,7 +374,8 @@ export class MQTTConversationsHandler extends ConversationsHandlerService {
         this.isConversationClosingMap.delete(conversationId);
     }
 
-    archiveConversation(conversationId: string) { 
+    archiveConversation(conversationId: string) {
+        this.setConversationRead(conversationId)
         this.chat21Service.chatClient.archiveConversation(conversationId);
     }
 

package/src/chat21-core/providers/native/native-upload-service.ts

@@ -112,7 +112,7 @@ export class NativeUploadService extends UploadService {
 
         //USE IMAGE API
         const that = this;
-        const url = this.URL_TILEDESK_IMAGES + '/users' + '?path=' + path
+        const url = this.URL_TILEDESK_IMAGES + '/users' + '?path=' + path.split('path=')[1]
         return new Promise((resolve, reject) => {
             that.http.delete(url, requestOptions).subscribe(data => {
                 // const downloadURL = this.URL_TILEDESK_IMAGES + '?path=' + data['filename'];