@tuki-io/tuki-widgets 0.0.95 → 0.0.97

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/associated-line-row/associated-line-row.component.scss

@@ -0,0 +1,97 @@
+.line-item{
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    background-color: white;
+
+    border-radius: 0.5rem;
+    border: 1px solid #cfcfcf;
+
+    padding: 1rem;
+    margin: 1rem 0 0 0;
+
+    z-index: 10;
+}
+.line-informations, .line-actions {
+    display: inherit;
+    align-items: inherit;
+
+    gap: 0.5rem;
+    padding: 0 0.5rem;
+}
+.line-actions {
+    cursor: pointer;
+}
+.line-drag, .line-toggle-details, .line-delete {
+    display: inherit;
+    align-items: inherit;
+    justify-content: center;
+
+    font-size: 1rem;
+
+    color: rgb(150, 150, 150);
+
+    width: 36px;
+    height: 36px;
+
+    border-radius: 50%;
+
+    transition: all 0.25s ease-out;
+
+}
+.line-delete :hover {
+
+  color: red !important;
+}
+.line-drag {
+    cursor: grab
+}
+.line-label {
+    margin-right: 2.5rem;
+}
+.flex-box {
+  display: flex;
+  justify-content: flex-start;
+}
+.app-icon {
+  height: 20px;
+  width: 20px;
+  display: inline-block;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.app-icon {
+    transition: all 0.15s ease-out
+}
+
+.toggled {
+    transform: rotate(-90deg);
+}
+.line-dn-box {
+  line-height: 20px;
+}
+.icon-dragger-vertical {
+  background-image: url('../../assets/icons/dragger-vertical-icon.svg');
+  width: 1px;
+  margin: 0 10px 0 0;
+}
+
+.icon-delete {
+  background-image: url('../../assets/icons/delete_icon.svg');
+}
+
+.icon-arrow-right {
+  background-image: url('../../assets/icons/arrow-right.svg');
+}
+
+.icon-vertical-divider {
+  background-image: url('../../assets/icons/vartical_divider_icon.svg');
+  height: 20px;
+}
+.line-item:hover {
+  background-color: rgba(214, 214, 214, 0.5);
+}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/associated-line-row/associated-line-row.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { LineAssociation } from '../../classes/line-association';
+import { LineAssociationInterface } from '../../classes/line-association-interface';
+
+@Component({
+  selector: "app-associated-line-row",
+  templateUrl: "./associated-line-row.component.html",
+  styleUrls: ["./associated-line-row.component.scss"]
+})
+export class AssociatedLineRowComponent {
+  @Input() line!: LineAssociation | LineAssociationInterface;
+  @Input() toggled: boolean = false;
+
+  @Output() toggleAssociatedLine = new EventEmitter<string>();
+  @Output() removeAssociatedLine = new EventEmitter();
+
+  constructor() {
+  }
+
+  onToggleDetails(): void {
+    this.toggled = !this.toggled;
+    this.toggleAssociatedLine.emit(this.toggled ? this.line.displayLabel : '')
+  }
+
+  onLineRemove(): void {
+      this.removeAssociatedLine.emit();
+  }
+}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-details-box/device-associated-line-details-box.component.html

@@ -0,0 +1,6 @@
+<div class="line-details-block">
+    <div class="line-details-block__title">{{ title }}</div>
+    <div class="line-details-block__content">
+        <ng-content></ng-content>
+    </div>
+</div>

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-details-box/device-associated-line-details-box.component.scss

@@ -0,0 +1,20 @@
+.line-details-block {
+    display: flex;
+
+    padding: 1rem 1.5rem;
+}
+
+.line-details-block__title {
+    width: 150px;
+    max-width: 150px;
+    font-weight: 500;
+}
+
+.line-details-block__content {
+    display: flex;
+    flex-direction: column;
+    
+    width: 100%;
+
+    margin-left: 2.5rem;
+}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-details-box/device-associated-line-details-box.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "app-line-details-block",
+    templateUrl: "./device-associated-line-details-box.component.html",
+    styleUrls: ["./device-associated-line-details-box.component.scss"]
+})
+export class DeviceAssociatedLineDetailsBoxComponent {
+
+    @Input() title: string = '';
+
+    constructor() {}
+}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-extension/device-associated-line-extension.component.html

@@ -0,0 +1,6 @@
+<div *ngIf="this.availableNumbers?.length" class="user-calling-extension">
+  <mat-select [formControl]="formControl" (selectionChange)="this.onChangeField($event)" #page>
+    <mat-option *ngFor="let option of this.availableNumbers; let i = index;"[value]="option">{{option}}</mat-option>
+  </mat-select>
+  <mat-spinner *ngIf="this.dataPending" [diameter]="50"></mat-spinner>
+</div>

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-extension/device-associated-line-extension.component.scss

@@ -0,0 +1,4 @@
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line-extension/device-associated-line-extension.component.ts

@@ -0,0 +1,63 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { SimplifiedUser } from '../../classes/simplified-user';
+import { UserService } from '../../services/user.service';
+import { DnsService } from '../../services/dns.service';
+
+@Component({
+  selector: 'app-device-associated-line-extension',
+  templateUrl: './device-associated-line-extension.component.html',
+  styleUrls: ['./device-associated-line-extension.component.scss'],
+})
+export class DeviceAssociatedLineExtensionComponent implements OnInit {
+  @Input() formControl!: FormControl;
+  @Input() routePartition!: string;
+  @Input() directoryNumber!: string;
+  @Input() siteId!: number;
+  @Output() onChange = new EventEmitter<string>();
+  public dataPending!: boolean;
+
+  get user(): SimplifiedUser {
+    return this.userService.user;
+  }
+
+  get availableNumbers(): any {
+    // @ts-ignore
+    return this.routePartition && this.dnsService.availableNumbers ? this.dnsService.availableNumbers[this.routePartition] : null;
+  }
+
+
+  constructor(
+    public userService: UserService,
+    private dnsService: DnsService
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.getData();
+  }
+
+  public onChangeField(event: any): void {
+    // if (!token) {
+    //   return;
+    // }
+    // (this.userService.user as any)[token] = this.form?.get(token)?.value;
+    this.onChange.emit(event?.value);
+
+  }
+
+  private getData() {
+    if (!this.siteId || !this.routePartition) {
+      return;
+    }
+    this.dataPending = true;
+    this.dnsService.getNumberRange(String(this.siteId), this.routePartition)
+      .subscribe(() => {
+        if (this.availableNumbers) {
+          // @ts-ignore
+          this.dnsService.availableNumbers[this.routePartition].push(this.directoryNumber);
+        }
+        this.dataPending = false;
+      });
+  }
+}

package/projects/tuki/widgets/user-device-manage/src/device-associated-line/device-associated-line.component.html

@@ -0,0 +1,241 @@
+<div id="device-associated-line" *ngIf="lineAssociation && form" [formGroup]="form">
+  <ng-container class="line-details__container">
+      <app-line-details-block [title]="'Line setting on the device'">
+        <div class="form-group">
+          <label>Display Caller ID</label>
+          <mat-form-field appearance="outline">
+            <input matInput type="text" name="displayLabel" formControlName="displayLabel"
+                   (input)="onChangeField('displayLabel')">
+            <mat-error *ngIf="form.get('displayLabel')?.hasError('maxlength')">
+              <i class="fa fa-exclamation-triangle"></i>
+              This field can’t have more than 30 characters
+            </mat-error>
+            <mat-error *ngIf="form.get('displayLabel')?.hasError('pattern')">
+              <i class="fa fa-exclamation-triangle"></i>
+              Invalid symbols are used
+            </mat-error>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Text Label</label>
+          <mat-form-field appearance="outline">
+            <input formControlName="textLabel" name="textLabel"
+                   matInput (input)="onChangeField('textLabel')">
+            <mat-error *ngIf="form.get('textLabel')?.hasError('maxlength')">
+              <i class="fa fa-exclamation-triangle"></i>
+              This field can’t have more than 30 characters
+            </mat-error>
+            <mat-error *ngIf="form.get('textLabel')?.hasError('pattern')">
+              <i class="fa fa-exclamation-triangle"></i>
+              Invalid symbols are used
+            </mat-error>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>External Phone Number Mask</label>
+          <mat-form-field appearance="outline">
+            <input matInput type="text" name="e164Mask" formControlName="e164Mask"
+                   (input)="onChangeField('e164Mask')">
+            <mat-error *ngIf="form.get('e164Mask')?.hasError('e164MaskRule')">
+              <i class="fa fa-exclamation-triangle"></i>
+              e164Mask does not match the rule {{getRule()}}
+            </mat-error>
+          </mat-form-field>
+        </div>
+      </app-line-details-block>
+      <div class="form-group__separator_2px"></div>
+      <app-line-details-block [title]="'Multiple Call/Call Waiting Settings'">
+        <div class="form-group">
+          <label>Max Calls</label>
+          <mat-form-field appearance="outline">
+            <input matInput type="number" name="maxNumberOfCalls" formControlName="maxNumberOfCalls"
+                   (input)="onChangeField('maxNumberOfCalls')">
+            <mat-error *ngIf="form.get('maxNumberOfCalls')?.hasError('max')">
+              <i class="fa fa-exclamation-triangle"></i>
+              Value is too big
+            </mat-error>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Busy Trigger</label>
+          <mat-form-field appearance="outline">
+            <input matInput type="number" name="busyTrigger" formControlName="busyTrigger"
+                   (input)="onChangeField('busyTrigger')">
+            <mat-error *ngIf="form.get('busyTrigger')?.hasError('max')">
+              <i class="fa fa-exclamation-triangle"></i>
+              Value can't be bigger than Max Calls
+            </mat-error>
+          </mat-form-field>
+        </div>
+      </app-line-details-block>
+      <div class="form-group__separator_2px"></div>
+      <app-line-details-block [title]="'Call Recording'">
+        <div class="form-group">
+          <label>Recording Option</label>
+          <mat-form-field appearance="outline">
+            <mat-select
+              (selectionChange)="recordingOptionChanged('recordingOption')"
+              formControlName="recordingOption"
+              [id]="'associatedLineRecordingOptionField'">
+              <mat-option [value]=recordingOptions.disabled>Call Recording Disabled</mat-option>
+              <mat-option [value]=recordingOptions.auto_enabled>Automatic Call Recording Enabled</mat-option>
+              <mat-option [value]=recordingOptions.selective_enabled>Selective Call Recording Enabled</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Recording Media Source</label>
+          <mat-form-field appearance="outline">
+            <mat-select
+              (selectionChange)="onChangeField('recordingMediaSource')" formControlName="recordingMediaSource"
+              [id]="'associatedLineRecordingMediaSourceField'">
+              <mat-option *ngFor="let source of recordingMediaSources" [value]="source">{{source}}</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Recording Profile</label>
+          <app-lazy-loading-select
+            [siteId]="siteId"
+            [controlName]="'recordingProfile'"
+            [form]="form"
+            (changeField)="onChangeField('recordingProfile')"
+            [optionsToken]="'recordingProfile'"></app-lazy-loading-select>
+        </div>
+      </app-line-details-block>
+      <div class="form-group__separator_2px"></div>
+      <app-line-details-block [title]="'Additional line settings on the device'">
+        <div class="form-group">
+          <label>Visual Message Waiting Indicator Policy</label>
+          <mat-form-field appearance="outline">
+            <mat-select
+              formControlName="visualMWI"
+              (selectionChange)="onChangeField('visualMWI')">
+              <mat-option
+                *ngFor="let option of staticOptions.VISUAL_MWI" [value]="option">
+                {{option}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Ring Setting (Phone Idle)</label>
+          <mat-form-field appearance="outline">
+            <mat-select
+              formControlName="ringSetting_idle"
+              (selectionChange)="onChangeField('ringSetting_idle')">
+              <mat-option *ngFor="let option of staticOptions.RING_SETTING_IDLE" [value]="option">
+                {{option}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Call Pickup Audio Alert Setting (Phone Idle)</label>
+          <mat-form-field appearance="outline">
+            <mat-select name="pickupAAS_idle"
+              formControlName="pickupAAS_idle"
+              (selectionChange)="onChangeField('pickupAAS_idle')">
+              <mat-option *ngFor="let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_IDLE" [value]="option">
+                {{option}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Monitoring Calling Search Space</label>
+          <mat-form-field appearance="outline">
+            <input
+              [matAutocomplete]="auto"
+              matInput
+              (input)="onAutocomplete('monitorCSS')"
+              formControlName="monitorCSS">
+            <mat-autocomplete
+              #auto="matAutocomplete"
+              (optionSelected)="onChangeField('monitorCSS')">
+              <mat-option  *ngFor="let option of filteredMonitorCssList" [value]="option" >
+                {{option}}
+              </mat-option>
+            </mat-autocomplete>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Audible Message Waiting Indicator Policy</label>
+          <mat-form-field appearance="outline">
+            <mat-select
+              formControlName="audibleMWI"
+              (selectionChange)="onChangeField('audibleMWI')">
+              <mat-option *ngFor="let option of staticOptions.DEFAULT_ON_OFF" [value]="option">
+                {{option}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Ring Setting (Phone Active)</label>
+          <mat-form-field appearance="outline">
+            <mat-select
+              formControlName="ringSetting_active"
+              (selectionChange)="onChangeField('ringSetting_active')">
+              <mat-option *ngFor="let option of staticOptions.RING_SETTING_ACTIVE" [value]="option">
+                {{option}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Call Pickup Audio Alert Setting (Phone Active)</label>
+          <mat-form-field appearance="outline">
+            <mat-select
+              formControlName="pickupAAS_active"
+              (selectionChange)="onChangeField('pickupAAS_active')">
+              <mat-option
+                *ngFor="let option of staticOptions.CALL_PICKUP_GROUP_AUDIO_SETTING_PHONE_ACTIVE"
+                [value]="option">
+                {{option}}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Log Missed Calls</label>
+          <mat-slide-toggle name="logMissedCalls" formControlName="logMissedCall"></mat-slide-toggle>
+        </div>
+      </app-line-details-block>
+      <div class="form-group__separator_2px"></div>
+      <app-line-details-block [title]="'Forwardred call information display'">
+        <div class="form-group">
+          <label>Caller Name</label>
+          <mat-slide-toggle name="callerName" formControlName="callerName" (change)="onChangeField('callerName')"></mat-slide-toggle>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Redirected Number</label>
+          <mat-slide-toggle name="redirectedNumber" formControlName="redirectedNumber" (change)="onChangeField('redirectedNumber')"></mat-slide-toggle>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Caller Number</label>
+          <mat-slide-toggle name="callerNumber" formControlName="callerNumber" (change)="onChangeField('callerNumber')"></mat-slide-toggle>
+        </div>
+        <div class="form-group__separator"></div>
+        <div class="form-group">
+          <label>Dialed Number</label>
+          <mat-slide-toggle name="dialedNumber" formControlName="dialedNumber" (change)="onChangeField('dialedNumber')"></mat-slide-toggle>
+        </div>
+      </app-line-details-block>
+  </ng-container>
+
+</div>