@chat21/chat21-ionic 3.0.76-rc.1 → 3.0.76-rc.3

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,10 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # chat21-ionic ver 3.0
 
+### 3.0.76-rc.3
+- bug-fixed: image-preview when agent click on image, don't fit the screen size
+- added: network-connection component to manage no connections
+- removed: no connection item in conversation-list page
+
+### 3.0.76-rc.2
+- added: canned component to manage canned responses
+- bug-fixed: if more than oe '/' is present in message-text-area and a canned is selected, replace canned text on the last '/' character in the message string
+- bug-fixed: close canned component if user click again on canned-icon-button
+
 ### 3.0.76-rc.1
 - changed: senderFullName in list conversation for guest users with guest#uuid[0..5]
 - added: multi-language to MEMBER_LEFT_GROUP and LEAD_UPDATED info messages

package/package.json

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

package/src/app/app.component.html

@@ -3,6 +3,8 @@
 
     <app-image-viewer></app-image-viewer>
 
+    <app-network-offline></app-network-offline>
+
     <div class="sidebar" [ngClass]="{'hide-sidebar': IS_ONLINE === false || IS_ON_MOBILE_DEVICE === true || SUPPORT_MODE === false}">
       <app-sidebar></app-sidebar>
     </div>

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.html

@@ -1,4 +1,4 @@
-<div class="c21-body" (click)="hideMenuOption()">
+<div class="c21-body" (click)="hideOutsideElements()">
 
   <div class="c21-body-container">
   

package/src/app/chatlib/conversation-detail/conversation-content/conversation-content.component.ts

@@ -256,7 +256,21 @@ export class ConversationContentComponent implements OnInit {
     return false;
   }
 
-  hideMenuOption() {
+  isSameSender(senderId, index):boolean{
+    if(senderId && this.messages[index - 1] && (senderId === this.messages[index - 1].sender)){
+      return true;
+    }
+    return false;
+  }
+
+  isFirstMessage(senderId, index):boolean{
+    if(senderId && index == 0 && this.messages[index] && (this.messages[index] !== senderId)){
+      return true;
+    }
+    return false;
+  }
+
+  hideOutsideElements() {
     this.onMenuOptionShow.emit(false)
   }
 

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.html

@@ -102,7 +102,7 @@
     </div>
 
     <!-- message RECIPIENT:: -->
-    <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType)"
+    <div role="messaggio" *ngIf="messageType(MESSAGE_TYPE_OTHERS, message) && isChannelTypeGroup(channelType) && !isSameSender(message?.sender, i)"
       class="message_sender_fullname">
       {{message.sender_fullname}}
     </div>

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.scss

@@ -245,15 +245,22 @@ ion-item {
     // left: -26px;
 }
 
-:host .base_receive .msg_receive ::ng-deep div > div > ion-button {
+:host .base_receive .msg_receive ::ng-deep div > div > div > ion-button.canned {
     display: none;
     position: absolute;
     top: -3px;
     right: -31px;
 }
 
+:host .base_receive .msg_receive ::ng-deep div > div > div >ion-button.emoji {
+    display: none;
+    position: absolute;
+    top: -3px;
+    right: -51px;
+}
+
 // :host .base_receive .msg_receive:hover ::ng-deep div > div > ion-button {
-:host .base_receive:hover .msg_receive ::ng-deep div > div > ion-button {
+:host .base_receive:hover .msg_receive ::ng-deep div > div > div > ion-button {
     display: block;
     // position: absolute;
     // top: -11px;

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -61,12 +61,19 @@
       </chat-html>
 
       <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg-as-canned-response" ion-button fill="clear"
+        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
           (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
           [options]="tooltipOptions" placement="bottom">
           <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
         </ion-button>
       </ng-container>
+      <!-- <ng-container *ngIf="supportMode">
+        <ion-button shape="round" size="small" class="btn-add-msg emoji" ion-button fill="clear"
+          (click)="presentEmojiiModal()" tooltip="{{addAsCannedResponseTooltipText}}"
+          [options]="tooltipOptions" placement="bottom">
+          <ion-icon slot="icon-only" name="happy-outline" style="font-size: 1em;"> </ion-icon>
+        </ion-button>
+      </ng-container> -->
     </div>
   </div>
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.scss

@@ -48,13 +48,15 @@
 
 }
 // > .button-native
-.btn-add-msg-as-canned-response {
-    // padding-left: 5px ;
-    // padding-right: 5px ;
+.btn-add-msg {
     border-radius: 50%;
     --padding-end: 7px;
     --padding-start: 7px;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
+
+    ion-icon{
+        font-size: 1.2em;
+    }
 }
 
 

package/src/app/components/canned-response/canned-response.component.html

@@ -0,0 +1,26 @@
+<div id="canned">
+  <ion-list class="canned-list" *ngIf="tagsCannedFilter.length > 0">
+    <ion-item button="true" [ngClass]="{'is_active_item': i == arrowkeyLocation}" lines="none"
+      class="canned-item no-ripple border" id="{{'canned-item_'+ i }}"
+      *ngFor="let canned of tagsCannedFilter; let i = index;"
+      (click)="onClickCannedFN(canned, $event)">
+      <div class="cannedContent">
+        <ion-input [(ngModel)]="canned.title" class="title" id="{{'titleCanned_'+canned._id}}" [disabled]="canned.disabled"></ion-input>
+        <ion-input [(ngModel)]="canned.text" *ngIf="canned.text" class="text" [disabled]="canned.disabled"></ion-input>
+      </div>
+      <ion-icon class="canned-item-icon"  name="checkmark-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && !canned.disabled" (click)="onConfirmEditCanned(canned, $event)"></ion-icon>
+      <ion-icon class="canned-item-icon"  name="pencil-sharp" slot=end *ngIf="canned.createdBy === loggedUser.uid && canned.disabled" (click)="onEditCanned(canned, $event)"></ion-icon>
+      <ion-icon class="canned-item-icon"  name="trash-bin-outline" slot=end *ngIf="canned.createdBy === loggedUser.uid" (click)="onDeleteCanned(canned, $event)"></ion-icon>
+    </ion-item>
+    <ion-item  class="canned-item add-canned-response-wpr" button="true" lines="none" (click)="onClickAddCannedResponseFN()">
+      <ion-icon class="add-canned-response-icon"  name="flash-outline"></ion-icon>
+      <span class="add-canned-response-add-icon">+</span>
+     <label class="add-canned-response-label" >{{translationMap?.get('AddNewCannedResponse')}}</label> 
+    </ion-item>
+  </ion-list>
+  <!-- <ion-list class="canned-list" *ngIf="tagsCannedFilter.length === 0 && HIDE_CANNED_RESPONSES === false">
+    <ion-item button="true" >
+      There are no canned responses available
+    </ion-item>
+  </ion-list> -->
+</div>

package/src/app/components/canned-response/canned-response.component.scss

@@ -0,0 +1,141 @@
+.canned-item.add-canned-response-wpr:hover > span {
+    color: #1877f2;
+}
+
+.canned-item.add-canned-response-wpr:hover > ion-icon {
+    color: #1877f2;
+}
+
+.canned-item.add-canned-response-wpr:hover > label {
+    color: #1877f2;
+}
+
+.is_active_item {
+    // background-color: #eaf1fd!important;
+    --background: #eaf1fd !important;
+}
+
+
+
+.header {
+    display: flex;
+    flex-direction: row;
+    -webkit-box-pack: start;
+    justify-content: flex-end;
+    -webkit-box-align: center;
+    align-items: center;
+    border-bottom: 1px solid rgb(239, 242, 246);
+    padding: 0px 10px;
+    background: white;
+    width: 100%;
+    box-shadow: rgb(0, 27, 71, .24) 0px 8px 20px;
+    .canned-response-icon-header{
+        color: #3880ff !important;
+        font-size: 1.4em;
+        margin: 8px 5px;
+    }
+    
+}
+    
+.add-canned-response-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    font-size: 18px;
+}
+.add-canned-response-label {
+    color: #b3bfd0;
+    cursor: pointer;
+}
+.add-canned-response-add-icon {
+    color: #b3bfd0;
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    left: -6px;
+}   
+
+.canned-list {
+    // position: absolute;
+    // bottom: 0;
+    background-color: white !important;
+    width: 100%;
+    max-height: 310px;
+    overflow-y: auto;
+    // padding: 10px 0;
+    // margin: 0;
+    margin-bottom: 1px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #080f1a;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // list-style: none;
+    z-index: 999999;
+
+    .cannedContent{
+        width: 100%;
+    }
+
+    ion-input {
+        --padding-bottom: 0px;
+        --padding-top: 0px;
+        &.text{
+            font-style: italic;
+        }
+        &.title {
+            font-weight: 500;
+        }
+    }
+    .native-input[disabled] {
+        opacity: 10 !important;
+    }
+    ion-icon {
+        zoom: 0.7;
+    }
+    .no-ripple {
+        --ripple-color: transparent;
+        --background-activated: transparent;
+    }
+
+    .border{
+        border-bottom: 1px dashed rgb(211, 219, 229) !important;
+        margin: 0px 4px
+    }
+
+
+}
+
+.canned-item {
+    -webkit-tap-highlight-color: transparent;
+    font-family: Lato, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    list-style: none;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    // margin: 0 10px;
+    position: relative;
+    outline: none;
+    color: #434a54;
+    // padding: 10px;
+    padding: 5px;
+    width: auto;
+    cursor: pointer;
+    // .item-inner{
+    //     border: none!important;
+    // }
+}
+
+ion-item {
+    --background-hover: #1877f2 !important;
+    
+    .nocannedTitle {
+        color: #f44336;
+    }
+    .no-canned-available-text {
+        color: #1877f2 !important;
+    }
+    .no-canned-available-text:hover {
+        text-decoration: underline;
+    }
+}

package/src/app/components/canned-response/canned-response.component.spec.ts

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