@chat21/chat21-ionic 3.0.61-rc8 → 3.0.61

package/src/app/pages/create-requester/create-requester.page.html

@@ -0,0 +1,67 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title> {{'CreateNewRequester' | translate}} </ion-title>
+    <ion-buttons slot="end">
+      <ion-button ion-button fill="clear" (click)="closeModalAddNewRequester()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+
+
+
+  <form [formGroup]="validations_form" (ngSubmit)="onSubmit(validations_form.value)">
+    <ion-grid>
+      <ion-row>
+        <ion-col size="12">
+
+          <ion-item>
+            <ion-label position="floating" color="primary">{{'Name' | translate}} *</ion-label>
+            <ion-input type="text" formControlName="name"></ion-input>
+          </ion-item>
+          <div class="validation-errors">
+            <ng-container *ngFor="let validation of validation_messages.name">
+              <div class="error-message"
+                *ngIf="validations_form.get('name').hasError(validation.type) && (validations_form.get('name').dirty || validations_form.get('name').touched)">
+                <ion-icon name="information-circle-outline"></ion-icon>
+                <span class="validation-message"> {{ validation.message }} </span>
+              </div>
+            </ng-container>
+          </div>
+        </ion-col>
+
+
+        <ion-col size="12">
+          <ion-item>
+            <ion-label position="floating" color="primary">Email</ion-label>
+            <ion-input type="text" formControlName="email"></ion-input>
+          </ion-item>
+          <div class="validation-errors">
+            <ng-container *ngFor="let validation of validation_messages.email">
+              <div class="error-message"
+                *ngIf="validations_form.get('email').hasError(validation.type) && (validations_form.get('email').dirty || validations_form.get('email').touched)">
+                <ion-icon name="information-circle-outline"></ion-icon>
+                <span class="validation-message"> {{ validation.message }} </span>
+
+              </div>
+            </ng-container>
+          </div>
+        </ion-col>
+        <!-- expand="block" -->
+        <ion-col size="12" style="text-align: center;">
+          <ion-button color="primary" class="submit-btn" type="submit" [disabled]="!validations_form.valid" style="min-width:253px">
+            <ion-icon *ngIf="showSpinnerCreateRequester === false" style="font-size: 1.9em;" slot="start" name="add-circle-outline"></ion-icon>
+            <ion-spinner *ngIf="showSpinnerCreateRequester === true" style="color: #fff; margin: 0px 0.3em 0px -0.3em;" name="bubbles" duration="2" ></ion-spinner>
+            {{'CreateNewRequester' | translate}}</ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </form>
+
+
+
+
+</ion-content>

package/src/app/pages/create-requester/create-requester.page.scss

@@ -0,0 +1,30 @@
+ion-content {
+    .validation-errors {
+        height: 20px;
+        margin-bottom: 16px;
+    }
+
+    .error-message {
+        // color: red;
+        // font-size: 14px;
+        // margin-left: 10px;
+        // margin-top: 10px;
+        ion-icon {
+            color: red;
+            font-size: 16px;
+            margin-left: 15px;
+            margin-right: 3px;
+            position: relative;
+            top: 3px;
+        }
+        .validation-message {
+            color: red;
+            font-size: 14px;
+            margin-top: 1px;
+        }
+    }
+
+    .submit-btn {
+        margin: 48px 12px 12px;
+    }
+}

package/src/app/pages/create-requester/create-requester.page.spec.ts

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

package/src/app/pages/create-requester/create-requester.page.ts

@@ -0,0 +1,138 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Validators, FormBuilder, FormGroup, FormControl} from '@angular/forms';
+import { ModalController } from '@ionic/angular'
+import { TranslateService } from '@ngx-translate/core';
+import { TiledeskService } from 'src/app/services/tiledesk/tiledesk.service';
+import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk-auth.service';
+import { LoggerService } from 'src/chat21-core/providers/abstract/logger.service';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+@Component({
+  selector: 'app-create-requester',
+  templateUrl: './create-requester.page.html',
+  styleUrls: ['./create-requester.page.scss'],
+})
+export class CreateRequesterPage implements OnInit {
+  public new_user_name: string;
+  public new_user_email : string;
+
+  validations_form: FormGroup;
+  @Input() projectUserAndLeadsArray: any
+ 
+  prjctID: string;
+  tiledeskToken: string;
+  showSpinnerCreateRequester: boolean = false; 
+  requester_id: string;
+  logger: LoggerService = LoggerInstance.getInstance();
+  
+  constructor(
+    public modalController: ModalController,
+    private formBuilder: FormBuilder,
+    public tiledeskService: TiledeskService,
+    public tiledeskAuthService: TiledeskAuthService,
+    private translate: TranslateService,
+  ) {   }
+
+  ngOnInit() {
+    this.logger.log('[CREATE-REQUESTER] projectUserAndLeadsArray ', this.projectUserAndLeadsArray)
+    const stored_project = localStorage.getItem('last_project')
+    const storedPrjctObjct = JSON.parse(stored_project)
+    this.logger.log('[CREATE-REQUESTER] storedPrjctObjct ', storedPrjctObjct)
+    if (storedPrjctObjct) {
+      this.prjctID = storedPrjctObjct.id_project.id
+      this.logger.log('[CREATE-REQUESTER] this.prjctID ', this.prjctID)
+    }
+    this.tiledeskToken = this.tiledeskAuthService.getTiledeskToken()
+    this.logger.log('[CREATE-REQUESTER] tiledeskToken ', this.tiledeskToken)
+
+    this.buildForm()
+
+  }
+
+  buildForm() {
+    this.validations_form = this.formBuilder.group({
+
+      name: new FormControl('', Validators.required),
+     
+      email: new FormControl('', Validators.compose([
+        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
+      ])),
+     
+    });
+  }
+
+  validation_messages = {
+    'name': [
+      { type: 'required', message: this.translate.instant('NameIsRequired') }
+    ],
+   
+    'email': [
+      { type: 'pattern', message: this.translate.instant('EnterValidEmail') }
+    ],
+  };
+
+  onSubmit(values){
+    this.logger.log('[CREATE-REQUESTER] ON SUBMIT VALUSES' , values);
+    this.new_user_name = values.name
+    this.new_user_email = values.email
+    this.createProjectUserAndThenNewLead(this.new_user_name,  this.new_user_email)
+  }
+
+  createProjectUserAndThenNewLead(new_user_name, new_user_email) {
+    this.showSpinnerCreateRequester = true; 
+    this.logger.log('[CREATE-REQUESTER] - CREATE-NEW-USER name ', new_user_name);
+    this.logger.log('[CREATE-REQUESTER] - CREATE-NEW-USER email ', new_user_email);
+
+
+    this.tiledeskService.createNewProjectUserToGetNewLeadID(this.prjctID, this.tiledeskToken).subscribe(res => {
+      this.logger.log('[CREATE-REQUESTER] - CREATE-NEW-USER - CREATE-PROJECT-USER ', res);
+      this.logger.log('[CREATE-REQUESTER] - CREATE-NEW-USER - CREATE-PROJECT-USER UUID ', res.uuid_user);
+      if (res) {
+        if (res.uuid_user) {
+          let new_lead_id = res.uuid_user
+          this.createNewContact(new_lead_id, new_user_name, new_user_email, this.prjctID, this.tiledeskToken)
+        }
+      }
+    }, error => {
+      this.showSpinnerCreateRequester = false; 
+      this.logger.error('[CREATE-REQUESTER] - CREATE-NEW-USER - CREATE-PROJECT-USER - ERROR: ', error);
+    }, () => {
+
+      this.logger.log('[CREATE-REQUESTER] - CREATE-NEW-USER - CREATE-PROJECT-USER - COMPLETE');
+    });
+  }
+
+
+  createNewContact(lead_id: string, lead_name: string, lead_email: string, projecId: string, tiledeskToken: string) {
+    this.tiledeskService.createNewLead(lead_id, lead_name, lead_email, projecId, tiledeskToken ).subscribe(lead => {
+      this.logger.log('[CREATE-REQUESTER] - CREATE-NEW-USER - CREATE-NEW-LEAD -  RES ', lead);
+      this.projectUserAndLeadsArray.push({ id: lead.lead_id, name: lead.fullname, role: 'lead', email: lead_email, requestertype: 'lead', requester_id: lead._id});
+      this.requester_id = lead._id
+      // this.projectUserAndLeadsArray.push({ id: lead.lead_id, name: lead.fullname + ' (lead)' });
+      // this.projectUserAndLeadsArray = this.projectUserAndLeadsArray.slice(0);
+      this.logger.log('[CREATE-REQUESTER]- CREATE-NEW-USER - projectUserAndLeadsArray AFTERT NEW LEAD CREATION  : ', this.projectUserAndLeadsArray);
+    }, error => {
+      this.showSpinnerCreateRequester = false; 
+      this.logger.error('[CREATE-REQUESTER]- CREATE-NEW-USER - CREATE-NEW-LEAD - ERROR: ', error);
+    }, () => {
+      
+      this.closeModalAddNewRequester( this.projectUserAndLeadsArray, lead_id, this.requester_id)
+      // -------------------------------------------------
+      // When is cmpleted the creation of the new reqester
+      // -------------------------------------------------
+      // this.displayCreateNewUserModal = 'none'
+      // this.displayInternalRequestModal = 'block'
+
+      // Auto select the new lead crerated in the select Requester
+      // this.selectedRequester = lead_id
+      this.logger.log('[WS-REQUESTS-LIST] - CREATE-NEW-USER - CREATE-NEW-LEAD * COMPLETE *');
+    });
+  }
+
+  async closeModalAddNewRequester( projectUserAndLeadsArray?: any, lead_id?: string, requester_id?: string) {
+    this.logger.log('[CREATE-REQUESTER]', this.modalController)
+    this.logger.log( '[CREATE-REQUESTER] .getTop()',this.modalController.getTop())
+    await this.modalController.getTop()
+    this.modalController.dismiss({updatedProjectUserAndLeadsArray: projectUserAndLeadsArray, selectedRequester: lead_id, requester_type: 'lead', requester_id: requester_id })
+  }
+
+}

package/src/app/pages/create-ticket/create-ticket-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CreateTicketPage } from './create-ticket.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CreateTicketPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CreateTicketPageRoutingModule {}

package/src/app/pages/create-ticket/create-ticket.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { CreateTicketPageRoutingModule } from './create-ticket-routing.module';
+import { CreateTicketPage } from './create-ticket.page';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import { createTranslateLoader } from '../../../chat21-core/utils/utils';
+import { HttpClient } from '@angular/common/http';
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CreateTicketPageRoutingModule,
+    NgSelectModule,
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      }
+    })
+  ],
+  declarations: [CreateTicketPage]
+})
+export class CreateTicketPageModule {}

package/src/app/pages/create-ticket/create-ticket.page.html

@@ -0,0 +1,171 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{'CreateTicket' | translate}}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button ion-button fill="clear" (click)="closeModalCreateTicketModal()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content >
+
+  <ion-grid class="ion-grid-custom-padding" [ngClass]="{'center-content': ticketCreationCompleted === true }">
+    <ion-row *ngIf="ticketCreationCompleted === false">
+      <ion-col size="12">
+        <!-- // with custom search {{'SelectRequester' | translate}}-->
+        <!-- {{ projectUserAndLeadsArray | json}} -->
+        <ion-label class="custom-create-ticket-label">{{'Requester' | translate }}</ion-label>
+        <ion-label [ngClass]="{'open-requester-details-disable': !selectedRequester}" class="custom-create-ticket-label-to-left"
+        (click)="openRequesterDetails()"> 
+          {{'ViewRequesterDetails' | translate }}
+          <span class="material-icons" style="color: #0f62ff; vertical-align: middle;font-size: 16px;"> 
+            open_in_new 
+          </span>
+        </ion-label>
+        <ng-select class="create-ticket-custom-select" name="users_and_leads" [items]="projectUserAndLeadsArray"
+          bindLabel="name" bindValue="id" [(ngModel)]="selectedRequester" [virtualScroll]="true"
+          [searchFn]="customSearchFn" (change)="selectRequester($event)" placeholder="{{'SelectRequester' | translate}}"
+          [loading]=loadingRequesters loadingText='Loading...'>
+
+          <ng-template ng-label-tmp let-item="item">
+            <!-- ---------------------------------------- -->
+            <!-- Usecase Firebase -->
+            <!-- ---------------------------------------- -->
+            <img *ngIf="item.requestertype === 'agent' && UPLOAD_ENGINE_IS_FIREBASE" height="24" width="24"
+              style="border-radius:50%; object-fit: cover; vertical-align: middle;"
+              src="https://firebasestorage.googleapis.com/v0/b/{{storageBucket}}/o/profiles%2F{{item.id}}%2Fphoto.jpg?alt=media"
+              alt="" onerror="this.src='assets/images/default-avatar-x-select.png'">
+
+            <!-- ---------------------------------------- -->
+            <!-- Usecase Native -->
+            <!-- ---------------------------------------- -->
+            <img *ngIf="item.requestertype === 'agent' && !UPLOAD_ENGINE_IS_FIREBASE" height="24" width="24"
+              style="border-radius:50%;object-fit: cover;vertical-align: middle;"
+              src="{{baseUrl}}images?path=uploads%2Fusers%2F{{item.id}}%2Fimages%2Fthumbnails_200_200-photo.jpg" alt=""
+              onerror="this.src='assets/images/default-avatar-x-select.png'">
+
+            <img *ngIf="item.requestertype === 'lead'" height="24" width="24"
+              style="border-radius:50%;object-fit: cover;vertical-align: middle;"
+              src="assets/images/default-avatar-x-select.png" alt="">
+            <span style="font-weight: 400;">
+              {{ item.name }}
+            </span>
+            <span class="requester-role-or-type">
+              ({{item.role}})
+            </span>
+
+          </ng-template>
+          <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
+            <!-- ---------------------------------------- -->
+            <!-- Usecase Firebase -->
+            <!-- ---------------------------------------- -->
+            <img *ngIf="item.requestertype === 'agent' && UPLOAD_ENGINE_IS_FIREBASE" height="24" width="24"
+              style="border-radius:50%;object-fit: cover;vertical-align: middle;"
+              src="https://firebasestorage.googleapis.com/v0/b/{{storageBucket}}/o/profiles%2F{{item.id}}%2Fphoto.jpg?alt=media"
+              alt="" onerror="this.src='assets/images/default-avatar-x-select.png'">
+
+            <!-- ---------------------------------------- -->
+            <!-- Usecase Native -->
+            <!-- ---------------------------------------- -->
+            <img *ngIf="item.requestertype === 'agent' && !UPLOAD_ENGINE_IS_FIREBASE" height="24" width="24"
+              style="border-radius:50%;object-fit: cover;vertical-align: middle;"
+              src="{{baseUrl}}images?path=uploads%2Fusers%2F{{item.id}}%2Fimages%2Fthumbnails_200_200-photo.jpg" alt=""
+              onerror="this.src='assets/images/default-avatar-x-select.png'">
+
+            <img *ngIf="item.requestertype === 'lead'" height="24" width="24"
+              style="border-radius:50%; object-fit: cover;vertical-align: middle;"
+              src="assets/images/default-avatar-x-select.png" alt="">
+            <span style="font-weight: 400;">
+              {{ item.name }}
+            </span>
+            <span class="requester-role-or-type">
+              ({{item.role}})
+            </span>
+            <br />
+            <small style="font-weight:400;font-size: 13px; margin-left: 28px; position: relative;top: -3px;">
+              {{ item.email }}
+            </small>
+          </ng-template>
+
+          <ng-template ng-footer-tmp>
+            <div style="cursor:pointer" (click)="presentModalAddNewRequester()">
+              <span class="material-icons" style="vertical-align: middle; color:#0f62ff"> add </span>
+              <span style="color:#0f62ff">
+                {{'AddRequester' | translate}}
+              </span>
+            </div>
+          </ng-template>
+
+        </ng-select>
+      </ion-col>
+
+      <ion-col size="12">
+          <ion-label class="custom-create-ticket-label" position="stacked">{{ 'Subject' | translate }} *</ion-label>
+          <ion-input [(ngModel)]="ticket_subject" type="text" class="custom-ion-input"></ion-input>
+      </ion-col>
+
+      <ion-col size="12">
+        <ion-label class="custom-create-ticket-label">{{ 'SelectAssignee' | translate }}</ion-label>
+        <ng-select class="create-ticket-custom-select" name="assignee" [(ngModel)]="assignee_id" [searchable]="true" [clearable]="false"
+        placeholder="{{ 'SelectAssignee' | translate }}" (change)="selectedAssignee()" [loading]=loadingAssignee
+        loadingText='Loading...'>
+          <ng-option *ngFor="let assignee of projectUserBotsAndDeptsArray" [value]="assignee.id">
+            {{assignee.name}}
+          </ng-option>
+        </ng-select>
+      </ion-col>
+
+      <ion-col size="12">
+        <ion-label class="custom-create-ticket-label">{{ 'Priority' | translate }}</ion-label>
+        <ng-select class="create-ticket-custom-select" [items]="priority" bindLabel="name" bindValue="name" [clearable]="false" [hideSelected]="true"
+          [(ngModel)]="selectedPriority" (change)="onChangeSelectedPriority(selectedPriority)">
+          <ng-template ng-label-tmp let-item="item">
+            <img style="width: 15px;height: 15px; vertical-align: middle;" height="15" width="15" [src]="item.avatar" />
+            {{item.name | translate}}
+          </ng-template>
+          <ng-template ng-option-tmp let-item="item" let-index="index">
+            <img style="width: 15px;height: 15px;vertical-align: middle;" height="15" width="15" [src]="item.avatar" />
+            {{item.name | translate }}
+          </ng-template>
+        </ng-select>
+
+      </ion-col>
+
+      <ion-col size="12">
+        <ion-label class="custom-create-ticket-label">{{ 'Message' | translate }} *</ion-label>
+        <ion-textarea [(ngModel)]="ticket_message" type="text" class="custom-ion-textarea" rows="2"  placeholder=""></ion-textarea>
+      </ion-col>
+      <!-- expand="block"  -->
+      <ion-col size="12" style="text-align: center;">
+        
+        <!-- <ion-icon *ngIf="showSpinnerCreateTicket === false" style="font-size: 1.9em;" slot="start" name="checkmark-outline"></ion-icon> -->
+        <ion-button style="min-width: 153px;" color="primary" class="submit-btn" type="submit" (click)="createTicket()" [disabled]="ticket_subject === undefined || ticket_message  === undefined || ticket_subject?.length === 0 || ticket_message?.length === 0">
+          <ion-icon *ngIf="showSpinnerCreateTicket === false" style="font-size: 1.9em;" slot="start" name="add-circle-outline"></ion-icon>
+          <ion-spinner *ngIf="showSpinnerCreateTicket === true" style="color: #fff; margin: 0px 0.3em 0px -0.3em;" name="bubbles" duration="2" ></ion-spinner>
+          {{'CreateTicket' | translate}}
+        </ion-button>
+      </ion-col>
+
+    </ion-row>
+    <!-- class="ion-align-items-center"  -->
+    <ion-row  style="text-align: center;" *ngIf="ticketCreationCompleted === true">
+      <ion-col size="12">
+        <ion-icon style="font-size: 3em;"  color="success" name="checkmark-outline"></ion-icon>
+      </ion-col>
+      <ion-col size="12">
+        <label> {{'TicketSuccessfullyCreated' | translate }}</label>
+      </ion-col>
+      <ion-col size="12" class="ion-padding-vertical">
+        <ion-button  color="success" class="submit-btn" type="submit" (click)="closeModalCreateTicketModal()">
+          {{'Continue' | translate }}
+        </ion-button>
+      </ion-col>
+
+    </ion-row>
+
+  </ion-grid>
+
+</ion-content>
+

package/src/app/pages/create-ticket/create-ticket.page.scss

@@ -0,0 +1,52 @@
+.requester-role-or-type {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+.custom-ion-input {
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    height: 36px;
+    color: #333;
+    background-color: #fff;
+    margin-top: 5px;
+}
+
+.custom-ion-textarea {
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    color: #333;
+    background-color: #fff;
+    margin-top: 5px !important;
+}
+
+.custom-create-ticket-label {
+    font-size: 14px;
+    color: #7695a5;
+    font-weight: 500;
+}
+
+.custom-create-ticket-label-to-left {
+    font-size: 14px;
+    color: #0f62ff;
+    font-weight: 500;
+    float: right;
+    cursor: pointer;
+}
+
+.open-requester-details-disable {
+    // cursor: not-allowed;
+    // opacity: 0.5;
+    display: none;
+}
+.ion-grid-custom-padding {
+    padding: 5px 25px;
+    height: 100%;
+}
+
+.center-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/src/app/pages/create-ticket/create-ticket.page.spec.ts

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