@tuki-io/tuki-widgets 0.0.0

package/projects/tuki/widgets/user-manage/src/styles/form.scss

@@ -0,0 +1,231 @@
+@import "variables";
+
+.mat-form-field {
+  padding: 0 0 5px 0;
+  width: 93%;
+}
+.mat-form-field.mat-form-field-disabled {
+  border-bottom: none;
+}
+.mat-error {
+  color: $error-color;
+  margin: 13px 0 0 0;
+}
+.select-box {
+  border-radius: 30px;
+  background: #F3F6F6;
+  border: 1px solid #E2E9EF;
+  height: 35px;
+  position: relative;
+
+  select {
+    border: none !important;
+    background: transparent;
+    height: 100%;
+    width: 92%;
+    margin: auto;
+    display: block;
+  }
+
+}
+
+option:focus, option:focus-visible {
+  border: none !important;
+  outline: none !important;
+}
+option {
+  height: 30px;
+  cursor: pointer;
+  color: $webex-pagination-txt;
+}
+option:hover {
+  background: $webex-pagination-hover-bg !important;
+}
+.mat-select {
+  height: 100%;
+  line-height: 35px;
+}
+.info-holder, .input-holder {
+  display: grid;
+  grid-template-columns: 30% 70%;
+  align-items: baseline;
+
+  &__name{
+    font-weight: 500;
+    font-size: 14px;
+  }
+  &__inputs{
+    & .input-holder{
+      display: grid;
+      grid-template-columns: 30% 70%;
+      align-items: baseline;
+      &__name{
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+  }
+}
+.mat-form-field-wrapper {
+  height: 30px !important;
+}
+.mat-form-field-flex{
+  height: 30px !important;
+}
+
+.mat-form-field-appearance-outline .mat-form-field-outline{
+  height: 35px !important;
+}
+
+.mat-form-field-outline .mat-form-field-outline-thick{
+  height: 35px !important;
+}
+
+.mat-select{
+  line-height: 20px !important;
+}
+.mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 14px 12px 10px;
+  border-top: 0;
+  max-width: 300px;
+}
+
+.mat-tab-group{
+  font-family: "Inter", sans-serif;
+}
+
+.mat-tab-label{
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  height: auto !important;
+  min-width: auto !important;
+  padding: 0 !important;
+}
+
+.mat-ink-bar{
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  height: 3px !important;
+}
+.mat-form-field-wrapper{
+  padding-bottom: 0;
+}
+
+.mat-form-field{
+  padding: 0;
+  max-width: 300px;
+}
+
+.mat-divider{
+  margin: 12px 0;
+}
+
+/*
+
+.input-holder {
+  background: #EDEDED;
+  padding: 32px 60px;
+}
+
+.form-hold {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
+  padding: 14px 12px 10px;
+  border-top: 0;
+  max-width: 300px;
+}
+
+::ng-deep .mat-tab-group{
+  font-family: "Inter", sans-serif;
+}
+
+::ng-deep .mat-tab-label{
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  height: auto !important;
+  min-width: auto !important;
+  padding: 0 !important;
+}
+
+::ng-deep .mat-ink-bar{
+  background-color: rgba(0, 0, 0, 0.9) !important;
+  height: 3px !important;
+}
+.form-holder{
+  background: white;
+  display: grid;
+  grid-template-columns: 30% 70%;
+  border-radius: 8px;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
+  padding: 24px;
+  &__name{
+    font-weight: 500;
+    font-size: 16px;
+  }
+  &__inputs{
+    & .input-holder{
+      display: grid;
+      grid-template-columns: 30% 70%;
+      align-items: baseline;
+      &__name{
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+::ng-deep .mat-form-field-wrapper{
+  padding-bottom: 0;
+}
+
+::ng-deep .mat-form-field{
+  padding: 0;
+  max-width: 300px;
+}
+
+.mat-divider{
+  margin: 12px 0;
+}
+
+.user-details-box {
+  background: white;
+  display: grid;
+  grid-template-columns: 30% 70%;
+  border-radius: 8px;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
+  padding: 24px;
+  &__name{
+    font-weight: 500;
+    font-size: 16px;
+  }
+  &__inputs{
+    & .input-holder{
+      display: grid;
+      grid-template-columns: 30% 70%;
+      align-items: baseline;
+      &__name{
+        font-weight: 400;
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+::ng-deep .mat-form-field-wrapper{
+  padding-bottom: 0;
+}
+
+::ng-deep .mat-form-field{
+  padding: 0;
+  max-width: 300px;
+}
+
+.mat-divider{
+  margin: 12px 0;
+}
+*/

package/projects/tuki/widgets/user-manage/src/styles/icons.scss

@@ -0,0 +1,32 @@
+.fa:hover {
+  color: #0d56aa!important;
+}
+.mat-icon-button {
+  background: transparent;
+}
+.icon-webex-box {
+  width: 2rem;
+  height: 2rem;
+  font-size: .7rem;
+  line-height: 1rem;
+  display: inline-block;
+  background: $webex-icon-bg;
+  border-radius: 2rem;
+  line-height: 40px;
+  text-align: center;
+}
+.icon-webex {
+  filter: invert(12%) sepia(14%) saturate(4%) hue-rotate(354deg) brightness(103%) contrast(90%);
+  background-repeat: no-repeat;
+  background-position: center;
+  display: inline-block;
+  height: 1rem;
+  width: 1rem;
+}
+.icon-webex-user {
+  background-image: url('../assets/icons/icon_user.svg');
+}
+.icon-user-status {
+  display: inline-block;
+
+}

package/projects/tuki/widgets/user-manage/src/styles/styles.scss

@@ -0,0 +1,110 @@
+@import '../../node_modules/font-awesome/scss/font-awesome';
+@import 'variables';
+@import 'icons';
+@import 'form';
+@import "tables";
+
+*{
+  margin: 0;
+}
+
+body {
+  background: $webex-body-bg;
+}
+body, th, td {
+  font-family: $main-font;
+  font-size: 14px;
+}
+th {
+  color: rgba(0,0,0,.54);
+  text-align: left;
+}
+td {
+  box-sizing: border-box;
+  padding: 10px 5px 10px 0;
+}
+.content-box {
+  margin: auto;
+  position: relative;
+  width: 70%;
+
+  table {
+    width: 100%
+  }
+}
+.edit-icon-td {
+  width: 50px;
+  position: relative;
+
+  button {
+    position: absolute;
+    top: 4px;
+  }
+}
+.mat-progress-spinner circle, .mat-spinner circle {
+  stroke: #009fdb!important;
+}
+.data-loader {
+  position: absolute;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+}
+.flex-box {
+  display: flex;
+  justify-content: flex-start;
+}
+.mat-paginator {
+  background: transparent !important;
+}
+.mat-paginator-container {
+  min-height: 30px !important;
+}
+.mat-paginator-range-label {
+  margin: 0 10px 0 24px !important;
+  font-size: 15px !important;
+}
+.user-info-box {
+  background: white;
+  display: grid;
+  grid-template-columns: 30% 70%;
+  border-radius: 8px;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
+  padding: 24px;
+  font-weight: 400;
+  font-size: 14px;
+
+  h3 {
+    display: block;
+    font-weight: 500;
+    font-size: 16px;
+  }
+}
+.mat-divider{
+  margin: 12px 0 !important;
+}
+.info-boxes-container {
+  padding: 24px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.header-box {
+  height: 60px;
+  width: 100%;
+  line-height: 60px;
+  background: white;
+  border-bottom: 1px solid #dedddd;
+
+  .header-back-block {
+    float: left;
+  }
+  .header-button-block {
+    float: right;
+  }
+}
+@media screen and (max-width: 1600px) {
+  .content-box {
+    width: 95%;
+  }
+}
+

package/projects/tuki/widgets/user-manage/src/styles/tables.scss

@@ -0,0 +1,30 @@
+@import 'variables';
+
+.webex-table {
+  width: 100%;
+  margin: auto;
+
+  tr {
+    border-bottom: 1px solid $webex-tr-border;
+  }
+  th {
+    background: $webex-table-th-bg;
+    color: $webex-table-th-txt;
+    font-size: $webex-table-th-size;
+  }
+  td {
+    background: $webex-table-td-bg;
+    color: $webex-table-td-txt;
+    font-size: $webex-table-td-size;
+  }
+  tr:hover td {
+    background: $webex-tr-hover-bg;
+    cursor: pointer;
+  }
+  th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
+    border-bottom: 1px solid $webex-tr-border;
+  }
+  tr.mat-header-row {
+    height: 37px;
+  }
+}

package/projects/tuki/widgets/user-manage/src/user-details/notification.service.ts

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { Notification } from './classes/notification';
+import { Subject } from 'rxjs';
+const SUCCESS_TIME = 5000;
+const INACTIVE_SESSION_MESSAGE = 'Your session was lost due to inactivity. Please login again';
+const INACTIVE_SESSION = 'SESSION_INACTIVE';
+
+@Injectable()
+export class NotificationService {
+
+  public listChange = new Subject();
+
+  private max = 0;
+  private list: Notification[] = [];
+
+  constructor(
+  ) {
+  }
+
+  error(message: string, ttl?: number): void {
+    this.notify('error', message, ttl);
+  }
+
+  success(message: string, ttl?: number): void {
+    this.notify('success', message, (!ttl) ? SUCCESS_TIME : ttl);
+  }
+
+  warning(message: string, ttl?: number): void {
+    this.notify('warning', message, ttl);
+  }
+
+  info(message: string, ttl?: number): void {
+    this.notify('info', message, ttl);
+  }
+  private notify(type: string, message: string, ttl?: number): void {
+    const found = this.list.find((n: Notification) => n.message === message);
+    if (found) {
+      this.remove(found);
+    }
+    const notification = new Notification({
+      id: ++this.max,
+      type, message, ttl
+    });
+    if (notification.ttl > 0) {
+      notification.timerId = setTimeout(() => this.remove(notification, true), notification.ttl);
+    }
+    this.list.push(notification);
+    this.listChange.next(this.list);
+  }
+
+  remove(notification: Notification, auto?: boolean): void {
+    if (!auto && notification.timerId) {
+      // clear timeout in case of manual remove
+      clearInterval(notification.timerId);
+    }
+    this.list = this.list.filter(n => n.id !== notification.id);
+    this.listChange.next(this.list);
+  }
+
+  private removeInactiveSessionError(): void {
+    if (!this.list || !this.list.length) {
+      return;
+    }
+    this.list = this.list.filter(n => n.message !== INACTIVE_SESSION_MESSAGE && n.message !== INACTIVE_SESSION);
+    this.listChange.next(this.list);
+  }
+
+}

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

@@ -0,0 +1,32 @@
+<div class="info-holder">
+  <div class="content-box flex-box">
+    <div class="info-holder__user-image">
+      <img src="../../../assets/a24749b225874bb3e3a4cb5d2f42e82c.png" alt="" class="avatar">
+    </div>
+    <div class="info-holder__user-information">
+      <div class="info-holder__user-name">{{name}}</div>
+      <div class="info-holder__user-breadcrumbs">
+        <div class="is-active" *ngIf="false; else notActive">
+          <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="#1D805F"/>
+          </svg>
+          <div>Active</div>
+        </div>
+        <div class="icon-separator"></div>
+        <div class="email">{{email}}</div>
+        <div class="icon-separator"></div>
+        <div class="position">{{position}}</div>
+      </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-manage/src/user-info/user-info.component.scss

@@ -0,0 +1,53 @@
+.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;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-user-info',
+  templateUrl: './user-info.component.html',
+  styleUrls: ['./user-info.component.scss']
+})
+export class UserInfoComponent {
+  @Input()
+  name!: string;
+  @Input()
+  active!: boolean;
+  @Input()
+  email!: string;
+  @Input()
+  position!: string;
+
+
+}