@chat21/chat21-ionic 2.0.13 → 3.0.5-9.2

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.ts

@@ -0,0 +1,133 @@
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ImageRepoService } from 'src/chat21-core/providers/abstract/image-repo.service';
+
+// Logger
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { setConversationAvatar, setChannelType } from 'src/chat21-core/utils/utils';
+import { Platform } from '@ionic/angular';
+@Component({
+  selector: 'app-header-conversation-detail',
+  templateUrl: './header-conversation-detail.component.html',
+  styleUrls: ['./header-conversation-detail.component.scss'],
+})
+export class HeaderConversationDetailComponent implements OnInit, OnChanges {
+  @Input() conversationAvatar: any;
+  @Input() idLoggedUser: string;
+  @Input() isOpenInfoConversation: boolean;
+  @Input() isMobile: boolean;
+  @Input() translationMap: Map<string, string>;
+  @Output() eventOpenCloseInfoConversation = new EventEmitter<boolean>();
+  conversationWithFullname: string
+  openInfoConversation = true;
+  openInfoMessage = true;
+  DIRECT = 'direct';
+
+  isDirect = false;
+  isTyping = false;
+  borderColor = '#ffffff';
+  fontColor = '#949494';
+  membersConversation = ['SYSTEM'];
+  fullNameConv: string;
+  idConv: string;
+  conversation_with_fullname: string;
+  platformName: string;
+
+  private logger: LoggerService = LoggerInstance.getInstance();
+
+  /**
+   * Constructor
+   * @param imageRepoService 
+   */
+  constructor(
+    public imageRepoService: ImageRepoService,
+    private route: ActivatedRoute,
+    public platform: Platform,
+    private router: Router
+  ) {
+    this.route.paramMap.subscribe(params => {
+
+
+      // this.conversationWithFullname = params.get('FullNameConv');
+      this.logger.log('[CONVS-DETAIL][HEADER] -> params: ', params);
+      this.fullNameConv = params.get('FullNameConv')
+      this.logger.log('[CONVS-DETAIL][HEADER] -> params > conversation_with_fullname: ', this.fullNameConv);
+      this.idConv = params.get('IDConv');
+      this.logger.log('[CONVS-DETAIL][HEADER] -> params > conversation_with: ', this.idConv);
+    });
+  }
+
+  // ----------------------------------------------------
+  // @ Lifehooks
+  // ----------------------------------------------------
+  ngOnInit() {
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - idLoggedUser', this.idLoggedUser);
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnInit) - conversationAvatar', this.conversationAvatar);
+    this.conversation_with_fullname = this.conversationAvatar.conversation_with_fullname
+
+    this.initialize();
+  }
+
+  ngOnChanges() {
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) -  conversationAvatar', this.conversationAvatar);
+    if (this.conversationAvatar) {
+      this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+    } else {
+      const channelType = setChannelType(this.idConv);
+      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED channelType ', channelType);
+      this.conversationAvatar = setConversationAvatar(
+        this.idConv,
+        this.fullNameConv,
+        channelType,
+      );
+      if (this.conversationAvatar) {
+        this.conversationAvatar.imageurl = this.imageRepoService.getImagePhotoUrl(this.conversationAvatar.uid)
+      }
+      this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - conversationAvatar usecase UNDEFINED conversationAvatar', this.conversationAvatar);
+    }
+
+    this.logger.log('[CONVS-DETAIL][HEADER] - (ngOnChanges) - isOpenInfoConversation', this.isOpenInfoConversation);
+    this.openInfoConversation = this.isOpenInfoConversation;
+  }
+
+
+  // ----------------------------------------------------
+  // @ Initialize (called in ngOnInit)
+  // ----------------------------------------------------
+  initialize() {
+    this.getPlatformName()
+    if (this.conversationAvatar && this.conversationAvatar.channelType === this.DIRECT) {
+      this.isDirect = true;
+    } else if (this.idLoggedUser) {
+      this.membersConversation.push(this.idLoggedUser);
+    }
+  }
+
+  getPlatformName() {
+    this.logger.log('getPlatformName this.platform', this.platform) 
+    if (this.platform.is('ios')) {
+      this.platformName = 'ios'
+      this.logger.log('getPlatformName platformName', this.platformName) 
+    } else if (this.platform.is('android')){
+      this.platformName = 'android'
+      this.logger.log('getPlatformName platformName', this.platformName) 
+    }
+
+  }
+
+  onOpenCloseInfoConversation() {
+    this.openInfoMessage = false;
+    this.openInfoConversation = !this.openInfoConversation;
+    this.logger.log('[CONVS-DETAIL][HEADER] - onOpenCloseInfoConversation - openInfoConversation ', this.openInfoConversation);
+    this.eventOpenCloseInfoConversation.emit(this.openInfoConversation);
+  }
+
+  /** */
+  pushPage(event) { }
+
+  goBackToConversationList() {
+    this.router.navigateByUrl('/conversations-list');
+  }
+
+}

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -0,0 +1,64 @@
+<ion-grid>
+  <ion-row id="message-text-area">
+
+    <ion-col col-auto>
+
+      <div class="buttons-left">
+    
+        <!-- <ion-button class="attach-button" ion-button fill="clear" style="display: none;">
+          <input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput" />
+          <label for="fileInput" icon-only ion-button>
+            <ion-icon slot="icon-only" name="attach"></ion-icon>
+          </label>
+        </ion-button> -->
+
+        <ion-button ion-button fill="clear" class="upload-image-btn">
+          
+          <ion-icon slot="icon-only" lazy="true" name="attach-outline" style="font-size: 30px;transform: rotate(42deg);"></ion-icon>
+          <!-- <ion-label slot="end">Upload Image</ion-label> -->
+          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, .pdf,.zip"> -->
+          <!-- https://stackoverflow.com/questions/11832930/html-input-file-accept-attribute-file-type-csv?rq=1 -->
+          <!-- <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input" accept="image/*, audio/* ,video/*, text/html, text/plain, .csv, .pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document, .scss, .css, .json"> -->
+          <input #fileInput type="file" (change)="onFileSelected($event)" capture="camera" id="file-input"
+            [accept]="fileUploadAccept">
+
+        </ion-button>
+      </div>
+
+
+      <div class="text-message">
+        <!-- [value]=""  -->
+        <!-- placeholder="{{ 'LABEL_ENTER_MSG' | translate }}" -->
+        <!-- (ionBlur)="txtfocus(0)" -->
+        <!-- autofocus="true" -->
+        <!-- autoFocus="true" // directive -->
+
+        <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1" 
+          [placeholder]="TEXAREA_PLACEHOLDER"
+          autosize="false" 
+          auto-grow="true" 
+          autofocus="true"
+          [value]=""
+          [(ngModel)]="messageString" 
+          (ionChange)="ionChange($event);"
+          (keydown.enter)="onKeydown($event, messageString)"
+          (paste)="onPaste($event)">
+        </ion-textarea>
+        <!-- (ionInput)="onChange($event);" -->
+      </div>
+
+      <div class="buttons-right">
+        <!-- [disabled]="conversationEnabled === false" -->
+        <ion-button [disabled]="conversationEnabled === false"  class="send-button right active" ion-button fill="clear"
+          (click)="sendMessage(messageString)">
+          <ion-icon [ngClass]="{'send-msg-disabled': conversationEnabled === false,'send-msg-activated': conversationEnabled === true }" slot="icon-only" name="send"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-col>
+
+
+
+
+  </ion-row>
+
+</ion-grid>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.scss

@@ -0,0 +1,124 @@
+#message-text-area {
+    min-height: 40px;
+    max-height: 200px;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    .buttons-left {
+        position: absolute;
+        left: 0;
+        bottom: -3px;
+        width: 30px;
+        height: 100%;
+        .attach-button {
+            font-size: 24px;
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            margin: auto 0;
+            --padding-top: 0;
+            --padding-bottom: 0;
+            --padding-start: 0;
+            --padding-end: 0;
+        }
+    }
+    .buttons-right {
+        position: absolute;
+        bottom: 3px;
+        right: 0;
+        width: 30px;
+        height: 100%;
+        .send-button {
+            font-size: 12px;
+            position: absolute;
+            bottom: 0px;
+            left: 0px;
+            margin: 2px 0;
+            --padding-top: 0;
+            --padding-bottom: 0;
+            --padding-start: 0;
+            --padding-end: 0;
+        }
+    }
+    .text-message {
+        position: relative;
+        margin: 0 35px;
+        width: calc(100% - 70px);
+        ion-textarea {
+            // border-radius: 4px;
+            border-radius: 20px; // NK edited
+            padding: 0;
+            margin: 0;
+            height: auto;
+            overflow: auto;
+            // min-height: 30px;
+            min-height: 37px; // NK edited
+            max-height: 184px;
+            background-color: rgba(0, 0, 0, 0.05);
+            // --padding-top: 5px; // NK edited
+            --padding-top: 8px;
+            --padding-bottom: 5px;
+            --padding-end: 5px;
+            // --padding-start: 5px; // NK edited
+            --padding-start: 10px;
+            line-height: 1.34;
+            font-size: 15px;
+        }
+    }
+}
+
+#fileInput {
+    position: absolute;
+    opacity: 0;
+}
+
+#file-input {
+    // width: 0.1px;
+    // height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    // z-index: -1;
+}
+
+.upload-image-btn {
+    // margin-bottom: 0px;
+    // margin-top: 5px;
+    // margin-left: 0px;
+    // margin-right: 0px;
+    // --border-radius: 50%;
+    // --padding-end: 6px;
+    // --padding-start: 6px;
+    // --padding-top: 0px;
+    // --padding-bottom: 0px;
+    // height: 30px !important;
+    --padding-bottom: 0px;
+    --padding-top: 0px;
+    --border-radius: 50%;
+    --padding-end: 1px;
+    --padding-start: 1px;
+
+    height: 33px !important;
+}
+
+.upload-image-btn .button-native {
+    border-radius: 50%;
+}
+
+.send-msg-activated {
+    color: #3880ff !important;
+}
+
+.send-msg-disabled {
+    cursor: default;
+    opacity: 0.8;
+    pointer-events: none;
+}
+
+//   input[placeholder] { text-overflow: ellipsis; }
+// ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+// input:-moz-placeholder { text-overflow: ellipsis; }
+
+// #ion-textarea > div > textarea[placeholder]{ text-overflow: ellipsis; }
+// #ion-textarea > div > textarea:-moz-placeholder  { text-overflow: ellipsis; }
+// ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.spec.ts

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