@tuki-io/tuki-widgets 0.0.133 → 0.0.134

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

@@ -0,0 +1,52 @@
+<div class="info-holder">
+  <!-- <div class="content-box"> -->
+    <div class="info-holder__device-image">
+      <i class="icon device-image" [ngClass]="getImageClass(device?.model)"></i>
+    </div>
+    <div class="info-holder__device-information">
+      <div class="info-holder__device-name">{{ device && device.model ? device.model : 'No device type available' }}</div>
+      <div class="info-holder__device-breadcrumbs">
+        <div class="is-active" *ngIf="device?.activationState; else notActive">
+          <span class="icon-device-status icon-device-status-active"></span>Active
+        </div>
+        <i style="transform: translateX(-10px);" class="icon info-icon rem-1"></i>
+        <div class="icon-text-wrapper">
+          <div class="icon-separator"></div>
+          <div class="phones">Phones</div>
+        </div>
+        <div class="icon-text-wrapper">
+          <div class="icon-separator"></div>
+          <div class="position">Device platform:</div>
+          <i class="icon cisco-icon rem-1"></i>
+        </div>
+      </div>
+    </div>
+    <div class="actions-wrapper">
+      <div class="action-btn-wrapper">
+            <button><span>Actions</span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="14" viewBox="0 0 32 32" style="vertical-align:middle;"><path d="M28.708 9.293a1 1 0 0 0-1.415 0L16 20.586 4.707 9.293a1 1 0 0 0-1.414 1.414l12 12a1 1 0 0 0 1.414 0l12-12a1 1 0 0 0 0-1.414" fill="currentColor"/></svg></button>
+      </div>
+      <div class="back-button-block" (click)="onClickBack()">
+        <div style="gap: 0.6rem; display: flex; align-items: center;">
+          <div class="icon-round-wrapper">
+            <i class="icon people-regular rem-1_25"></i>
+          </div>
+          <div class="lines-block">
+            <span>{{firstName}}</span>
+            <span>{{lastName}}</span>
+          </div>
+        </div>
+        <i class="icon arrow-right-icon rem-1"></i>
+      </div>
+    </div>
+  <!-- </div> -->
+
+</div>
+
+<ng-template #notActive>
+    <div class="is-active">
+        <svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M4 8.5C6.20914 8.5 8 6.70914 8 4.5C8 2.29086 6.20914 0.5 4 0.5C1.79086 0.5 0 2.29086 0 4.5C0 6.70914 1.79086 8.5 4 8.5Z" fill="grey"/>
+        </svg>
+        <div>Not active</div>
+    </div>
+</ng-template>

package/projects/tuki/widgets/user-device-manage/src/device-info/device-info.component.scss

@@ -0,0 +1,219 @@
+// $base-font-size: 16px;
+
+// @function rem($px) {
+//   @return ($px / $base-font-size) * 1rem;
+// }
+
+.info-holder {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  font-family: "Inter", sans-serif;
+  height: 102px;
+  // width: 100%;
+  background: white;
+  // margin: 0 0 30px 0;
+  // padding: 0 4.375rem 0;
+  padding: 0 1.75rem 0;
+  font-family: poppins, sans-serif;
+
+  &__device-image {
+    img {
+      width: 40px;
+      border-radius: 120px;
+      margin: 20px 0 0 0;
+    }
+  }
+
+  &__device-information {
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  &__device-name {
+    font-size: 20px;
+    font-weight: 600;
+  }
+
+  &__device-breadcrumbs {
+    display: flex;
+    gap: 18px;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.7);
+    align-items: center;
+  }
+
+  .is-active {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .icon-text-wrapper {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    .icon-separator {
+      border-radius: 50%;
+      flex-shrink: 0;
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.75);
+      inline-size: .25rem;
+      block-size: .25rem;
+      margin-inline-end: .25rem;
+    }
+  }
+
+  .info-holder__device-image {
+    margin-bottom: 1.3rem;
+    width: 40px;
+    height: 40px;
+
+    // .icon-people-regular {
+    //   background-image: url('../assets/icons/people-regular.svg');
+    //   background-repeat: no-repeat;
+    //   background-position: center;
+    //   height: 40px;
+    //   width: 40px;
+    //   display: block;
+    //   background-size: contain;
+    // }
+  }
+
+  .actions-wrapper {
+    display: flex;
+    align-items: center;
+    gap: .75rem;
+    // flex: 1;
+
+    .actions-buttons-block {
+      border-right: .0625rem solid #00000033;
+      height: 2rem;
+    }
+
+    .back-button-block {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.6rem;
+      // flex: 1;
+      cursor: pointer;
+      width: 20rem;
+
+      .icon-round-wrapper {
+        width: 2rem;
+        height: 2rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #ededed;
+        border-radius: 50rem;
+      }
+
+      .lines-block {
+        display: flex;
+        gap: .5rem;
+        color: #0353a8;
+        font-size: .875rem;
+      }
+    }
+  }
+}
+.icon-device-status {
+  width: .5rem;
+  height: .5rem;
+  border-radius: 50%;
+  background-color: #707070;
+}
+.icon-device-status.icon-device-status-active  {
+  background-color: #1d805f;
+  display:inline-block;
+}
+
+.device-image {
+  // background-image: url('../assets/icons/cisco_8851.png');
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.icon {
+  background-repeat: no-repeat;
+  background-position: center;
+  display: inline-block;
+  background-size: contain;
+
+  &.cisco_9861 {
+      background-image: url('../assets/icons/cisco_9861.png');
+  }
+
+  &.cisco_8851 {
+      background-image: url('../assets/icons/cisco_8851.png');
+  }
+
+  &.cisco_8841 {
+      background-image: url('../assets/icons/cisco_8841.png');
+  }
+
+  &.cisco_7841 {
+      background-image: url('../assets/icons/cisco_7841.png');
+  }
+}
+
+.info-icon {
+  background-image: url('../assets/icons/info-circle-regular.svg');
+}
+
+.cisco-icon {
+  background-image: url('../assets/icons/cisco.svg');
+}
+
+.people-regular {
+  background-image: url('../assets/icons/people-regular.svg');
+}
+
+.arrow-right-icon {
+  background-image: url('../assets/icons/arrow-right-regular.svg');
+}
+
+.rem-1 {
+  width: 1rem;
+  height: 1rem;
+}
+
+.rem-1_5 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.rem-1_25 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.action-btn-wrapper {
+  margin-right: 4rem;
+  button {
+    background-color: #000000f2;
+    color: #fffffff2;
+    position: relative;
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden !important;
+    padding: 8px .75rem;
+    border: 1px solid transparent;
+    border-radius: 6.25rem;
+    font-weight: 500;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    transition: all .1s cubic-bezier(.25, .1, .25, 1);
+    inline-size: min-content;
+    max-inline-size: 100%;
+  }
+}

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

@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+const POPULAR_DEVICES = ['8851', '8841', '7841'];
+const DEFAULT_SCREEN = 'cisco_8851';
+
+@Component({
+  selector: 'app-device-info',
+  templateUrl: './device-info.component.html',
+  styleUrls: ['./device-info.component.scss']
+})
+export class DeviceInfoComponent {
+  @Input()
+  device: any = null;
+  @Input() 
+  firstName?: string;
+  @Input() 
+  lastName?: string;
+  @Input()
+  active!: boolean;
+  @Input()
+  email!: string;
+  @Input()
+  position!: string;
+  @Output() onclickBack = new EventEmitter<void>();
+
+  getImageClass(deviceType: string) {
+    const numbers = deviceType && deviceType.match(/\d+/g);
+    if(numbers && POPULAR_DEVICES.includes(numbers[0])) {
+      return `cisco_${numbers[0]}`;
+    }
+    else return DEFAULT_SCREEN;
+  }
+
+  onClickBack() {
+    this.onclickBack.emit();
+  }
+}

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

@@ -0,0 +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" *ngIf="device.lineAssociations?.length">
+        <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="custom-toggle 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>

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

@@ -0,0 +1,131 @@
+.info-holder {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  font-family: "Inter", sans-serif;
+  height: 102px;
+  width: 100%;
+  background: white;
+  margin: 0 0 30px 0;
+
+  &__user-image {
+    img {
+      width: 40px;
+      border-radius: 120px;
+      margin: 20px 0 0 0;
+    }
+  }
+
+  &__user-information {
+    padding: 10px;
+    margin: 10px;
+    gap: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__user-name {
+    font-size: 20px;
+    font-weight: 500;
+  }
+
+  &__user-breadcrumbs {
+    display: flex;
+    gap: 8px;
+    font-weight: 400;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.7);
+    align-items: center;
+  }
+
+  .icon-separator {
+    height: 5px;
+    width: 5px;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+  }
+
+  .is-active {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+.icon-user-status {
+  width: .5rem;
+  height: .5rem;
+  border-radius: 50%;
+  background-color: #707070;
+  margin: 0 5px 0 0;
+}
+.icon-user-status.icon-user-status-active  {
+  background-color: #1d805f;
+  display:inline-block;
+}
+// Devices list
+
+.webex-list {
+  padding: 2.5rem;
+}
+
+.webex-list-header {
+  display: flex;
+  align-items: center;
+
+  padding: 1rem;
+}
+
+.webex-list-header__hr {
+  width: 100%;
+
+  font-size: 12px;
+}
+
+// Device Row --------------
+
+.device-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  border-bottom: 1px solid #b0b0b0;
+  padding: 0.8rem;
+  z-index: 10;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  /*&:hover {
+    background-color: #ededed;
+  }*/
+}
+
+.device-item__td {
+  width: 100%;
+}
+
+.device-item__actions-menu {
+  position: absolute;
+  margin: 0 1rem;
+  right: 0;
+}
+
+.device-item__more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+
+  color: #b0b0b0;
+
+  border-radius: 50%;
+  padding: 0.5rem;
+
+  transition: background-color 0.3s ease-in-out;
+
+  /*&:hover {
+    background-color: #ffffff;
+  }*/
+}

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

@@ -0,0 +1,25 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Device } from '../classes/device';
+
+@Component({
+  selector: 'app-device-list',
+  templateUrl: './device-list.component.html',
+  styleUrls: ['./device-list.component.scss']
+})
+export class DeviceListComponent {
+  @Input() devices!: any;
+  @Output()
+  onDeviceSelect = new EventEmitter<Device>();
+
+  constructor() {
+    console.log('devices list');
+
+  }
+
+
+  selectDevice(device: Device): void {
+    this.onDeviceSelect.emit(device);
+  }
+
+
+}