@tuki-io/tuki-widgets 0.0.65 → 0.0.67

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

@@ -1,194 +1,194 @@
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { FormControl, FormGroup, Validators } from '@angular/forms';
-import { SimplifiedUser } from '../classes/simplified-user';
-import { LineAssociation } from '../classes/line-association';
-import { LineAssociationInterface } from '../classes/line-association-interface';
-import { MatDialog } from '@angular/material/dialog';
-import { RecordingOptions } from '../classes/device';
-import { Subscription } from 'rxjs';
-import { RECORDING_MEDIA_SOURCE, STATIC_OPTIONS } from '../app.constants';
-import { UserService } from '../services/user.service';
-import { APIService } from '../services/api.service';
-import { SiteSettingsService } from '../services/site-settings.service';
-import { LineService } from '../services/line.service';
-import { DeviceService } from '../services/device.service';
-import { ValidationService } from '../services/validation.service';
-import { UtilsService } from '../services/utils.service';
-
-@Component({
-  selector: 'app-device-associated-line',
-  templateUrl: './device-associated-line.component.html',
-  styleUrls: ['./device-associated-line.component.scss'],
-})
-export class DeviceAssociatedLineComponent implements OnInit, OnDestroy {
-  @Input() lineIndex!: number;
-  @Input() deviceIndex!: number;
-  @Input() deviceName!: string;
-  @Input() siteId!: number;
-  @Output() updatedLineAssociationEvent = new EventEmitter();
-  @Output() onChange = new EventEmitter<string>();
-  dataPending!: boolean;
-  recordingOptions = RecordingOptions;
-  recordingMediaSources: string[] = RECORDING_MEDIA_SOURCE;
-  staticOptions = STATIC_OPTIONS;
-  monitorCssList: any;
-  filteredMonitorCssList: any;
-  subscriptions: Array<Subscription>
-
-  get form(): FormGroup {
-    return this.userService?.user?.devices[this.deviceIndex] && this.userService?.user?.devices[this.deviceIndex].lineAssociations[this.lineIndex].form;
-  }
-
-  get lineAssociation(): LineAssociation | LineAssociationInterface {
-    return this.userService?.user?.devices[this.deviceIndex].lineAssociations[this.lineIndex];
-  }
-
-  get originLineAssociation(): LineAssociation | LineAssociationInterface {
-    return this.userService?.originUser?.devices[this.deviceIndex].lineAssociations[this.lineIndex];
-  }
-
-  get user(): SimplifiedUser {
-    return this.userService.user;
-  }
-
-
-  constructor(
-    public userService: UserService,
-    private apiService: APIService,
-    private siteSettingsService: SiteSettingsService,
-    private lineService: LineService,
-    private deviceService: DeviceService,
-    private dialog: MatDialog,
-    private validationService: ValidationService
-  ) {
-    this.subscriptions = [];
-  }
-
-  ngOnInit(): void {
-    this.getData();
-    this.lineService.onSaveLineAssociationEvent
-      .subscribe(() => {
-        this.updateLine(this.lineAssociation);
-      })
-  }
-
-  ngOnDestroy() {
-    if (this.subscriptions?.length) {
-      this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
-    }
-  }
-
-  onChangeField(token: string): void {
-    if (!token) {
-      return;
-    }
-    (this.userService.user.devices[this.deviceIndex].lineAssociations[this.lineIndex] as any)[token] = this.form?.get(token)?.value;
-    this.setHasChangesToLine();
-    this.onChange.emit();
-
-  }
-
-  onAutocomplete(token: string) {
-    const value = this.form?.get(token)?.value;
-    this.filteredMonitorCssList = UtilsService.filterOptions(this.monitorCssList, value);
-  }
-
-  recordingOptionChanged(token: string): void {
-    const value = this.form.get(token)?.value;
-    this.onChangeField(token);
-
-    if (value === RecordingOptions.auto_enabled || value === RecordingOptions.selective_enabled) {
-      if (!this.form?.get('recordingProfile')?.touched) {
-        this.form.get('recordingProfile')?.markAsTouched();
-      }
-      this.form.get('recordingProfile')?.enable();
-      this.form.get('recordingMediaSource')?.enable();
-    } else {
-      this.form.get('recordingProfile')?.disable();
-      this.form.get('recordingProfile')?.setValue('');
-      this.onChangeField('recordingProfile');
-
-      /* if (!this.authService.hasRole('SUPER_USER')) {
-         recordingMediaSource.disable();
-         recordingMediaSource.setValue(this.recordingMediaSources[0]);
-         this.changeField('recordingMediaSource');
-       }*/
-    }
-  }
-
-  getRule(): string {
-    // @ts-ignore
-    if (this.form.get('e164Mask')?.errors && this.form.get('e164Mask')?.errors['e164MaskRule']) {
-      // @ts-ignore
-      return this.form.get('e164Mask')?.errors['e164MaskRule']['rule']
-    }
-    return '';
-
-  }
-
-  toggleEditMode() {
-    this.userService.user.toggleEditMode();
-  }
-
-  isSavingDisabled(): boolean {
-    return !this.userService.hasUnsavedChanges() || this.userService.hasExistedUserId;
-  }
-
-  onChangeExtension(value: string): void {
-    if (this.lineAssociation && this.lineAssociation.directoryNumber) {
-      this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
-    }
-  }
-
-  onLineRemove(): void {
-
-  }
-
-  private getData() {
-    this.dataPending = true;
-    const subscription = this.siteSettingsService.getMonitorCss(this.siteId)
-      .subscribe((res: any) => {
-        this.monitorCssList = res?.length ? res.slice() : [];
-        this.filteredMonitorCssList = res?.length ? res.slice() : [];
-      });
-
-    this.subscriptions.push(subscription);
-  }
-
-  private updateLine(line: LineAssociation | LineAssociationInterface): void {
-    const body = this.lineService.getLineAssociationBody(this.originLineAssociation, this.lineAssociation);
-    console.log('update line', body);
-    this.deviceService.dataPending = true;
-    this.deviceService.putDeviceFields(this.siteId, this.deviceName, this.userService.user.token, body)
-      .subscribe(() => {
-        this.userService.persistUserCache()
-          .subscribe(() => {
-            this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
-              .subscribe(() => {
-                this.updatedLineAssociationEvent.emit();
-                this.deviceService.dataPending = false;
-              }, () => this.deviceService.dataPending = false);
-          }, () => this.deviceService.dataPending = true)
-      }, () => this.deviceService.dataPending = true)
-  }
-
-  private deleteLine(line: LineAssociation): void {
-    this.lineService.deleteLine(this.siteId, line.linePkid, this.userService.user.token)
-      .subscribe(() => {
-        this.userService.persistUserCache()
-          .subscribe(() => {
-            this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
-              .subscribe(() => {
-                this.updatedLineAssociationEvent.emit();
-              });
-          })
-      })
-  }
-
-  private setHasChangesToLine(): void {
-    if (this.lineAssociation) {
-      this.userService.user.devices[this.deviceIndex].lineAssociations[this.lineIndex].hasChanges = !this.lineAssociation.fullEqual(this.originLineAssociation);
-      this.userService.user.devices[this.deviceIndex].lineAssociationsHasChanges = !this.lineAssociation.fullEqual(this.originLineAssociation);
-    }
-  }
-}
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { SimplifiedUser } from '../classes/simplified-user';
+import { LineAssociation } from '../classes/line-association';
+import { LineAssociationInterface } from '../classes/line-association-interface';
+import { MatDialog } from '@angular/material/dialog';
+import { RecordingOptions } from '../classes/device';
+import { Subscription } from 'rxjs';
+import { RECORDING_MEDIA_SOURCE, STATIC_OPTIONS } from '../app.constants';
+import { UserService } from '../services/user.service';
+import { APIService } from '../services/api.service';
+import { SiteSettingsService } from '../services/site-settings.service';
+import { LineService } from '../services/line.service';
+import { DeviceService } from '../services/device.service';
+import { ValidationService } from '../services/validation.service';
+import { UtilsService } from '../services/utils.service';
+
+@Component({
+  selector: 'app-device-associated-line',
+  templateUrl: './device-associated-line.component.html',
+  styleUrls: ['./device-associated-line.component.scss'],
+})
+export class DeviceAssociatedLineComponent implements OnInit, OnDestroy {
+  @Input() lineIndex!: number;
+  @Input() deviceIndex!: number;
+  @Input() deviceName!: string;
+  @Input() siteId!: number;
+  @Output() updatedLineAssociationEvent = new EventEmitter();
+  @Output() onChange = new EventEmitter<string>();
+  dataPending!: boolean;
+  recordingOptions = RecordingOptions;
+  recordingMediaSources: string[] = RECORDING_MEDIA_SOURCE;
+  staticOptions = STATIC_OPTIONS;
+  monitorCssList: any;
+  filteredMonitorCssList: any;
+  subscriptions: Array<Subscription>
+
+  get form(): FormGroup {
+    return this.userService?.user?.devices[this.deviceIndex] && this.userService?.user?.devices[this.deviceIndex].lineAssociations[this.lineIndex].form;
+  }
+
+  get lineAssociation(): LineAssociation | LineAssociationInterface {
+    return this.userService?.user?.devices[this.deviceIndex].lineAssociations[this.lineIndex];
+  }
+
+  get originLineAssociation(): LineAssociation | LineAssociationInterface {
+    return this.userService?.originUser?.devices[this.deviceIndex].lineAssociations[this.lineIndex];
+  }
+
+  get user(): SimplifiedUser {
+    return this.userService.user;
+  }
+
+
+  constructor(
+    public userService: UserService,
+    private apiService: APIService,
+    private siteSettingsService: SiteSettingsService,
+    private lineService: LineService,
+    private deviceService: DeviceService,
+    private dialog: MatDialog,
+    private validationService: ValidationService
+  ) {
+    this.subscriptions = [];
+  }
+
+  ngOnInit(): void {
+    this.getData();
+    this.lineService.onSaveLineAssociationEvent
+      .subscribe(() => {
+        this.updateLine(this.lineAssociation);
+      })
+  }
+
+  ngOnDestroy() {
+    if (this.subscriptions?.length) {
+      this.subscriptions.forEach((subscription: Subscription) => subscription.unsubscribe());
+    }
+  }
+
+  onChangeField(token: string): void {
+    if (!token) {
+      return;
+    }
+    (this.userService.user.devices[this.deviceIndex].lineAssociations[this.lineIndex] as any)[token] = this.form?.get(token)?.value;
+    this.setHasChangesToLine();
+    this.onChange.emit();
+
+  }
+
+  onAutocomplete(token: string) {
+    const value = this.form?.get(token)?.value;
+    this.filteredMonitorCssList = UtilsService.filterOptions(this.monitorCssList, value);
+  }
+
+  recordingOptionChanged(token: string): void {
+    const value = this.form.get(token)?.value;
+    this.onChangeField(token);
+
+    if (value === RecordingOptions.auto_enabled || value === RecordingOptions.selective_enabled) {
+      if (!this.form?.get('recordingProfile')?.touched) {
+        this.form.get('recordingProfile')?.markAsTouched();
+      }
+      this.form.get('recordingProfile')?.enable();
+      this.form.get('recordingMediaSource')?.enable();
+    } else {
+      this.form.get('recordingProfile')?.disable();
+      this.form.get('recordingProfile')?.setValue('');
+      this.onChangeField('recordingProfile');
+
+      /* if (!this.authService.hasRole('SUPER_USER')) {
+         recordingMediaSource.disable();
+         recordingMediaSource.setValue(this.recordingMediaSources[0]);
+         this.changeField('recordingMediaSource');
+       }*/
+    }
+  }
+
+  getRule(): string {
+    // @ts-ignore
+    if (this.form.get('e164Mask')?.errors && this.form.get('e164Mask')?.errors['e164MaskRule']) {
+      // @ts-ignore
+      return this.form.get('e164Mask')?.errors['e164MaskRule']['rule']
+    }
+    return '';
+
+  }
+
+  toggleEditMode() {
+    this.userService.user.toggleEditMode();
+  }
+
+  isSavingDisabled(): boolean {
+    return !this.userService.hasUnsavedChanges() || this.userService.hasExistedUserId;
+  }
+
+  onChangeExtension(value: string): void {
+    if (this.lineAssociation && this.lineAssociation.directoryNumber) {
+      this.userService.user.devices[0].lineAssociations[0].directoryNumber.directoryNumber = value;
+    }
+  }
+
+  onLineRemove(): void {
+
+  }
+
+  private getData() {
+    this.dataPending = true;
+    const subscription = this.siteSettingsService.getMonitorCss(this.siteId)
+      .subscribe((res: any) => {
+        this.monitorCssList = res?.length ? res.slice() : [];
+        this.filteredMonitorCssList = res?.length ? res.slice() : [];
+      });
+
+    this.subscriptions.push(subscription);
+  }
+
+  private updateLine(line: LineAssociation | LineAssociationInterface): void {
+    const body = this.lineService.getLineAssociationBody(this.originLineAssociation, this.lineAssociation);
+    console.log('update line', body);
+    this.deviceService.dataPending = true;
+    this.deviceService.putDeviceFields(this.siteId, this.deviceName, this.userService.user.token, body)
+      .subscribe(() => {
+        this.userService.persistUserCache()
+          .subscribe(() => {
+            this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
+              .subscribe(() => {
+                this.updatedLineAssociationEvent.emit();
+                this.deviceService.dataPending = false;
+              }, () => this.deviceService.dataPending = false);
+          }, () => this.deviceService.dataPending = true)
+      }, () => this.deviceService.dataPending = true)
+  }
+
+  private deleteLine(line: LineAssociation): void {
+    this.lineService.deleteLine(this.siteId, line.linePkid, this.userService.user.token)
+      .subscribe(() => {
+        this.userService.persistUserCache()
+          .subscribe(() => {
+            this.userService.fetchUserToken(this.siteId, this.userService.user.userid, this.validationService)
+              .subscribe(() => {
+                this.updatedLineAssociationEvent.emit();
+              });
+          })
+      })
+  }
+
+  private setHasChangesToLine(): void {
+    if (this.lineAssociation) {
+      this.userService.user.devices[this.deviceIndex].lineAssociations[this.lineIndex].hasChanges = !this.lineAssociation.fullEqual(this.originLineAssociation);
+      this.userService.user.devices[this.deviceIndex].lineAssociationsHasChanges = !this.lineAssociation.fullEqual(this.originLineAssociation);
+    }
+  }
+}

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

@@ -1,27 +1,27 @@
-<div class="webex-list device-list-container">
-  <div class="webex-list-header">
-    <div class="webex-list-header__hr">Name</div>
-    <div class="webex-list-header__hr">Type</div>
-    <div class="webex-list-header__hr">Line</div>
-    <div class="webex-list-header__hr">Device description</div>
-    <div class="webex-list-header__hr">Plar service</div>
-  </div>
-  <ng-container *ngFor="let device of devices">
-    <div class="device-item" (click)="selectDevice(device)">
-      <div class="device-item__td">{{ device.name }}</div>
-      <div class="device-item__td">{{ device.deviceType }}</div>
-      <div class="device-item__td">
-        <span class="device-associated-line" *ngFor="let line of device.lineAssociations">{{line.directoryNumber?.directoryNumber}} | </span>
-      </div>
-      <div class="device-item__td">{{ device.description }}</div>
-      <div class="device-item__td">
-        <mat-slide-toggle class="device-slide-toggle" [disabled]="true" [checked]="device.plarService"></mat-slide-toggle>
-      </div>
-      <div class="device-item__actions-menu" style="text-align: right;">
-        <div class="device-item__more">
-<!--          <mat-icon>more_vert</mat-icon>-->
-        </div>
-      </div>
-    </div>
-  </ng-container>
-</div>
+<div class="webex-list device-list-container">
+  <div class="webex-list-header">
+    <div class="webex-list-header__hr">Name</div>
+    <div class="webex-list-header__hr">Type</div>
+    <div class="webex-list-header__hr">Line</div>
+    <div class="webex-list-header__hr">Device description</div>
+    <div class="webex-list-header__hr">Plar service</div>
+  </div>
+  <ng-container *ngFor="let device of devices">
+    <div class="device-item" (click)="selectDevice(device)">
+      <div class="device-item__td">{{ device.name }}</div>
+      <div class="device-item__td">{{ device.deviceType }}</div>
+      <div class="device-item__td">
+        <span class="device-associated-line" *ngFor="let line of device.lineAssociations">{{line.directoryNumber?.directoryNumber}} | </span>
+      </div>
+      <div class="device-item__td">{{ device.description }}</div>
+      <div class="device-item__td">
+        <mat-slide-toggle class="device-slide-toggle" [disabled]="true" [checked]="device.plarService"></mat-slide-toggle>
+      </div>
+      <div class="device-item__actions-menu" style="text-align: right;">
+        <div class="device-item__more">
+<!--          <mat-icon>more_vert</mat-icon>-->
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</div>