@chat21/chat21-ionic 3.0.58 → 3.0.59-rc4

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

@@ -21,8 +21,6 @@
             --padding-start: 0;
             --padding-end: 0;
         }
-
-        
     }
     .buttons-right {
         position: absolute;
@@ -56,7 +54,7 @@
             // min-height: 30px;
             min-height: 37px; // NK edited
             max-height: 184px;
-            background-color: rgba(0, 0, 0, .05);
+            background-color: rgba(0, 0, 0, 0.05);
             // --padding-top: 5px; // NK edited
             --padding-top: 8px;
             --padding-bottom: 5px;
@@ -69,21 +67,21 @@
     }
 }
 
-#fileInput{
+#fileInput {
     position: absolute;
     opacity: 0;
-  }
-  
-  #file-input {
+}
+
+#file-input {
     // width: 0.1px;
     // height: 0.1px;
     opacity: 0;
     overflow: hidden;
     position: absolute;
     // z-index: -1;
-  }
+}
 
-  .upload-image-btn {
+.upload-image-btn {
     // margin-bottom: 0px;
     // margin-top: 5px;
     // margin-left: 0px;
@@ -99,21 +97,28 @@
     --border-radius: 50%;
     --padding-end: 1px;
     --padding-start: 1px;
-  
+
     height: 33px !important;
-  }
+}
 
-  .upload-image-btn .button-native {
-      border-radius: 50%;
-  } 
+.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+ */
+// ::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */

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

@@ -43,6 +43,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   @Input() loggedUser: UserModel;
   @Input() conversationWith: string;
   @Input() tagsCannedFilter: any = [];
+
   @Input() events: Observable<void>;
   @Input() fileUploadAccept: string
   @Input() isOpenInfoConversation: boolean;
@@ -102,6 +103,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
 
   ngOnChanges() {
+
     if (this.translationMap) {
       this.LONG_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG')
       this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
@@ -110,6 +112,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
     this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges tagsCannedFilter ", this.tagsCannedFilter);
+    this.logger.log('[CONVS-DETAIL] - returnChangeTextArea ngOnChanges in [MSG-TEXT-AREA]  this.tagsCannedFilter.length ', this.tagsCannedFilter.length)
+
     // use case drop
     if (this.dropEvent) {
       this.presentModal(this.dropEvent)
@@ -136,11 +140,11 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
 
           const elTextAreaWrapper = elTextArea.children[0]
           // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elTextAreaWrapper", elTextAreaWrapper);
-          
+
           if (elTextAreaWrapper.children.length === 1) {
             const elNativeTearea = elTextAreaWrapper.children[0]
             // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngAfterViewInit elNativeTearea", elNativeTearea);
-             elNativeTearea.setAttribute("style", "height: 37px !important; ");
+            elNativeTearea.setAttribute("style", "height: 37px !important; ");
           }
         }
 
@@ -481,7 +485,10 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   // if the message is not empty it is passed  to the control method
   // ------------------------------------------------------------------------
   onKeydown(e: any, text: string) {
+    this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - onKeydown in MSG-TEXT-AREA event", e)
+    this.logger.log("[CONVS-DETAIL] - returnChangeTextArea - onKeydown in MSG-TEXT-AREA text", text)
     e.preventDefault(); // Prevent press enter from creating new line 
+    // console.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea * event: ", e);
 
     this.countClicks++;
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - countClicks: ', this.countClicks);
@@ -489,9 +496,18 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - event target: ', e.target);
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - event target textContent: ', e.target.textContent);
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter: ', this.tagsCannedFilter);
+
     // this.logger.error("[CONVS-DETAIL][MSG-TEXT-AREA] pressedOnKeyboard e.keyCode ", e.keyCode);
+    // this.events.subscribe((cannedmessage) => {
+
+    //   console.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea * cannedmessage: ", cannedmessage);
+    //   });
+
+    // user and time are the same arguments passed in `events.publish(user, time)`
+
 
-    const message = e.target.textContent.trim();
+
+    let message = e.target.textContent.trim();
     this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - event target textContent (message): ', message);
     // e.inputType === 'insertLineBreak' && 
     if (e.inputType === 'insertLineBreak' && message === '') {
@@ -501,13 +517,37 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     } else {
       var pos = text.lastIndexOf("/");
       this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - POSITION OF '/': ", pos);
+      this.logger.log("[CONVS-DETAIL] returnChangeTextArea onKeydown in msg-texarea  POSITION OF '/': ", pos);
+      this.logger.log("[CONVS-DETAIL] returnChangeTextArea onKeydown in msg-texarea  this.tagsCannedFilter.length': ", this.tagsCannedFilter.length);
       if (!text.includes("/")) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 1 message: ', message);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea  SEND MESSAGE 1 message: ", message);
         this.messageString = '';
         this.sendMessage(text);
         this.countClicks = 0
-      } else if (text.includes("/") && pos >= 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
+      } else if (text.includes("/") && pos === 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 2: ', this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 message: ", message);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message value: ', message.value);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 text: ', text);
+      
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.tagsCannedFilter.length: ", this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
+        this.messageString = '';
+
+        this.sendMessage(text);
+        this.countClicks = 0
+      } else if (text.includes("/") && pos > 0 && this.countClicks > 1 && this.tagsCannedFilter.length > 0 && text.substr(-1) !== '/' ) {
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
+        // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message value: ', message.value);
+        this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 text: ', text);
+
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.tagsCannedFilter.length: ", this.tagsCannedFilter.length);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
+        this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown in msg-texarea SEND MESSAGE 2 this.countClicks: ", this.countClicks);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 2 message: ', message);
         this.messageString = '';
 
@@ -516,6 +556,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       } else if (text.includes("/") && this.tagsCannedFilter.length === 0) {
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - tagsCannedFilter.length 3: ', this.tagsCannedFilter.length);
         this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] onKeydown - SEND MESSAGE 3 message: ', message);
+        this.logger.log("[CONVS-DETAIL] replaceTagInMessage onKeydown in msg-texarea SEND MESSAGE 3 message: ", message);
         this.messageString = '';
 
         this.sendMessage(text);
@@ -586,7 +627,7 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     if (event.key === 'Enter' && event.altKey || event.key === 'Enter' && event.ctrlKey || event.key === 'Enter' && event.metaKey) {
 
 
-     
+
       this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] HAS PRESSED COMBO KEYS this.messageString', this.messageString);
 
       if (this.messageString !== undefined && this.messageString.trim() !== '') {

package/src/app/components/image-viewer/image-viewer.component.html

@@ -0,0 +1,23 @@
+<div id="image-viewer-modal" class="modal">
+
+  <!-- The Close Button -->
+  <span class="close" (click)="closeImageViewerModal()">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
+    </svg>
+  </span>
+  <span class="download-image" (click)="downloadImage()">
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path
+        d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />
+    </svg>
+  </span>
+  <!-- Modal Content (The Image) [src]="metadata.src"-->
+  <img class="modal-content" id="image-viewer-img">
+
+  <!-- Modal Caption (Image Text) -->
+  <div id="caption"></div>
+</div>

package/src/app/components/image-viewer/image-viewer.component.scss

@@ -0,0 +1,107 @@
+// --- MODAL PREVIEW IMAGE
+.modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1050; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
+  }
+  
+  /* Modal Content (Image) */
+  .modal-content {
+    margin: auto;
+    display: block;
+    // width: 80%;
+    // max-width: 700px;
+    padding: 0px 5px;
+  }
+  
+  /* Caption of Modal Image (Image Text) - Same Width as the Image */
+  #caption {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 700px;
+    text-align: center;
+    color: #ccc;
+    padding: 10px 0;
+    height: 150px;
+  }
+  
+  /* Add Animation - Zoom in the Modal */
+  .modal-content, #caption {
+    animation-name: zoom;
+    // animation-duration: 0.6s;
+  }
+  
+  @keyframes zoom {
+    from {transform:scale(0)}
+    to {transform:scale(1)}
+  }
+  
+  /* The Close Button */
+  .close {
+    position: absolute;
+    top: 15px;
+    right: 35px;
+    // color: #f1f1f1;
+    // font-size: 40px;
+    // font-weight: bold;
+    transition: 0.3s;
+    border-radius: 50px;
+    padding:7px 8.5px
+  }
+
+  .close svg {
+    background-color: transparent;
+    fill: rgba(255,255,255,.5);
+  }
+
+  .close:hover,
+  .close:focus {
+    // color: #bbb;
+    background-color: rgba(255,255,255,.3);
+    text-decoration: none;
+    cursor: pointer;
+    svg {
+        fill: rgba(255,255,255);
+    }
+  }
+
+  .download-image {
+    position: absolute;
+    top: 15px;
+    right: 78px;
+    transition: 0.3s;
+    border-radius: 50px;
+    padding:7px 8.5px
+  }
+
+  .download-image svg {
+    background-color: transparent;
+    fill: rgba(255,255,255,.5);
+  }
+
+  .download-image:hover,
+  .download-image:focus {
+   
+    background-color: rgba(255,255,255,.3);
+    text-decoration: none;
+    cursor: pointer;
+    svg {
+        fill: rgba(255,255,255);
+    }
+  }
+  
+  /* 100% Image Width on Smaller Screens */
+  @media only screen and (max-width: 700px){
+    .modal-content {
+    //   width: 100%;
+    }
+  }

package/src/app/components/image-viewer/image-viewer.component.spec.ts

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

package/src/app/components/image-viewer/image-viewer.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-image-viewer',
+  templateUrl: './image-viewer.component.html',
+  styleUrls: ['./image-viewer.component.scss'],
+})
+export class ImageViewerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {}
+
+  closeImageViewerModal() {
+    // console.log('HAS CLICKED CLOSE MODAL')
+    var modal = document.getElementById("image-viewer-modal");
+    // var span = document.getElementsByClassName("close")[0]; 
+    modal.style.display = "none";
+  }
+
+  downloadImage()  {
+    var modalImg = <HTMLImageElement>document.getElementById("image-viewer-img")
+    // console.log('HAS CLICKED CLOSE DWNLD IMG modalImg ', modalImg)
+    var modalImgURL = modalImg.src;
+    // console.log('HAS CLICKED CLOSE DWNLD IMG modalImgURL ', modalImgURL)
+    var captionText = document.getElementById("caption").innerHTML;
+    // console.log('HAS CLICKED CLOSE DWNLD IMG captionText ', captionText)
+
+    const a: any = document.createElement('a');
+    a.href = modalImgURL;
+    a.download = captionText;
+    document.body.appendChild(a);
+    a.style = 'display: none';
+    a.click();
+    a.remove();
+  }
+
+}

package/src/app/components/project-item/project-item.component.html

@@ -0,0 +1,102 @@
+<div class="main-content main-content-project-for-panel">
+  <div class="container-fluid container-project-for-panel">
+
+    <div class="left-sidebar">
+
+      <!-- <loading-spinner *ngIf="showSpinner"></loading-spinner> -->
+      <!-- *ngIf="!showSpinner" -->
+      <div class="left-sidebar-project" style="margin-right: -10px;">
+
+        <!-- *ngFor="let project of projects; let i = index" -->
+        <div style="cursor:pointer">
+          <!-- (click)='goToUnservedRequests(project?.id_project?._id, project?.id_project?.name, project?.id_project?.profile?.name, project?.id_project?.trialExpired, project?.id_project?.trialDaysLeft, project?.id_project?.status)' -->
+          <div class="small-projects-sidebar">
+            <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
+              <div class="flex-child-left">
+                <!-- padding:6px; background: rgb(31,107,192); -->
+                <div class="unassigned-notifications-icon-wpr">
+                  <svg viewBox="0 0 28 28" alt="" class="a8c37x1j ms05siws hwsy1cff b7h9ocf4 fzdkajry" height="40"
+                    width="40"
+                    style="vertical-align: middle;border-radius: 50%;">
+                    <style type="text/css">
+                      .notifications-icons {
+                        fill: #050505;
+                      }
+                    </style>
+                    <path class="notifications-icons"
+                      d="M7.847 23.488C9.207 23.488 11.443 23.363 14.467 22.806 13.944 24.228 12.581 25.247 10.98 25.247 9.649 25.247 8.483 24.542 7.825 23.488L7.847 23.488ZM24.923 15.73C25.17 17.002 24.278 18.127 22.27 19.076 21.17 19.595 18.724 20.583 14.684 21.369 11.568 21.974 9.285 22.113 7.848 22.113 7.421 22.113 7.068 22.101 6.79 22.085 4.574 21.958 3.324 21.248 3.077 19.976 2.702 18.049 3.295 17.305 4.278 16.073L4.537 15.748C5.2 14.907 5.459 14.081 5.035 11.902 4.086 7.022 6.284 3.687 11.064 2.753 15.846 1.83 19.134 4.096 20.083 8.977 20.506 11.156 21.056 11.824 21.986 12.355L21.986 12.356 22.348 12.561C23.72 13.335 24.548 13.802 24.923 15.73Z">
+                    </path>
+                  </svg>
+                </div>
+                <div class="unassigned-notifications-badge">
+                  <!-- || currentUserRequestCount > 0  -->
+                  <!-- <span *ngIf="unservedRequestCount > 0 "> -->
+                    <!-- + currentUserRequestCount -->
+                    <span class="notification-count">{{ unservedRequestCount }}</span>
+                  <!-- </span> -->
+                
+                </div>
+
+              </div>
+
+              
+              <div class="flex-child-right" *ngIf="!window_width_is_60">
+                <div class="project-name-project-for-panel">
+                  {{ project?.id_project?.name }}
+                </div>
+
+                <!-- <div class="status--text"
+                  (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)"
+                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+                  <span *ngIf="project?.ws_projct_user_available === true">
+                    Online
+                  </span>
+                  <span *ngIf="project?.ws_projct_user_available === false">
+                    Offline
+                  </span>
+                  <span class="status--icon-project-for-panel"
+                    [ngStyle]="{ 'background-color':(project?.ws_projct_user_available)?'#4caf50':'#f44336' }">
+                  </span>
+                  <span class="status--icon-project-for-panel busy--icon"
+                    *ngIf="project?.ws_projct_user_isBusy === true">
+                  </span>
+                </div> -->
+                <div class="availabily-and-busy-wpr">
+                  <div class="onoffswitch"
+                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
+                      tabindex="0" [checked]="project?.ws_projct_user_available">
+                    <label class="onoffswitch-label" for="myonoffswitch"></label>
+                  </div>
+
+                  <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
+                    [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}"
+                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+                    {{translationMap.get('Available') }}
+                  </span>
+                  <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
+                    [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}"
+                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+                    {{translationMap.get('Unavailable')}}
+                  </span>
+                  <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true">
+                    <span class="material-icons project-item--isBusy-icon">
+                      access_time
+                    </span>
+                  </div>
+                  <span *ngIf="project?.ws_projct_user_isBusy === true" class="project-item--isBusy-busy-text text-pulse-animation">
+                    {{translationMap.get('Busy')}}
+                  </span>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>