vc-create-dashboard 3.0.82 → 3.0.84

package/src/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.less

@@ -0,0 +1,381 @@
+@import url("https://cdn.v-comply.com/design-system/css/mixin/mixin.css");
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+::ng-deep .configure-widgets {
+  width: 100vw;
+  height: 100vh;
+  background: #fff;
+
+  @media screen and (max-width: 1280px) {
+    width: 100vw;
+    margin-left: 0;
+  }
+
+  &-head {
+    height: 2.75rem;
+    background: #fbfbfb;
+    border-bottom: 1px solid #f1f1f1;
+  }
+
+  &-back {
+    border: none;
+    outline: none;
+    background: transparent;
+
+    i {
+      margin-right: 6px;
+    }
+  }
+
+  &-body {
+    padding: 2rem;
+    position: relative;
+    height: calc(100vh - 2.75rem);
+
+    app-no-data {
+      .no-data-wrapper {
+        height: calc(100vh - 13.875rem) !important;
+      }
+    }
+
+    .floating-option {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: #fff;
+      padding: 16px 12px;
+      z-index: 3;
+      box-shadow: 0 -6px 12px #1e5dd31a;
+
+      app-cs-checkbox {
+        display: flex;
+
+        label {
+          span.value {
+            color: #161b2f !important;
+            font-size: 11px !important;
+            line-height: 16px !important;
+            margin-left: 8px !important;
+            white-space: nowrap;
+          }
+        }
+
+        & + app-cs-checkbox {
+          margin-left: 20px;
+        }
+      }
+    }
+  }
+
+  &-tab {
+    ul {
+      padding: 0;
+      margin: 0 0 8px;
+      display: flex;
+      border-bottom: 1px solid #dbdbdb;
+
+      li {
+        list-style: none;
+        display: flex;
+        width: auto;
+        padding: 0;
+
+        button {
+          color: #747576;
+          display: inline-block;
+          font-size: 11px;
+          line-height: 16px;
+          font-weight: 600;
+          text-transform: uppercase;
+          border: none;
+          outline: none;
+          background: transparent;
+          padding: 0 0 8px;
+          position: relative;
+          margin: 0;
+
+          span {
+            display: inline-block;
+            margin-left: 8px;
+            color: #74757680;
+          }
+        }
+
+        & + li {
+          padding-left: 28px;
+        }
+
+        &.active {
+          button {
+            color: #1e5dd3;
+
+            span {
+              color: #1e5dd3;
+            }
+
+            &:after {
+              content: "";
+              right: 0;
+              bottom: 0;
+              left: 0;
+              height: 2px;
+              border-radius: 2px;
+              position: absolute;
+              background-color: #1e5dd3;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-search {
+    position: relative;
+    margin-bottom: 24px;
+
+    i {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      color: #dbdbdb;
+    }
+
+    input {
+      border: 1px solid #dbdbdb;
+      border-radius: 4px;
+      height: 44px;
+      padding: 10px 180px 10px 40px;
+      width: 100%;
+      font-size: 14px;
+      color: #747576;
+      outline: none;
+
+      &:focus {
+        border-color: #1e5dd3;
+        box-shadow: 0 0 5px #1e5dd345;
+      }
+    }
+  }
+
+  &-list {
+    margin: 0 -1rem 0.5rem;
+    height: calc(100vh - 15.5rem);
+    overflow: hidden;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+  }
+
+  &-item {
+    width: 50%;
+    padding: 0 16px;
+    margin-bottom: 32px;
+
+    .block {
+      background: #f8f8f8;
+      border-radius: 4px;
+      padding-left: 44px;
+      padding-right: 44px;
+      padding-top: 16px;
+      padding-bottom: 4px;
+      cursor: pointer;
+      position: relative;
+      display: block;
+
+      .check-icon {
+        position: absolute;
+        top: 8px;
+        left: 0;
+        height: 36px;
+        width: 36px;
+        border-radius: 0 4px 4px 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #34aa44;
+        opacity: 0;
+        pointer-events: none;
+
+        .check {
+          display: none;
+          width: 27px;
+          height: 27px;
+          background: transparent;
+          border-radius: 50%;
+          stroke-width: 4;
+          stroke: #ffffff;
+          stroke-miterlimit: 10;
+          box-shadow: inset 0px 0px 0px #ffffff;
+          animation: fillCheck 0.4s ease-in-out 0.4s forwards,
+            scale 0.3s ease-in-out 0.9s both;
+          margin-top: 0;
+
+          &-circle {
+            stroke-dasharray: 166;
+            stroke-dashoffset: 166;
+            stroke-width: 4;
+            stroke-miterlimit: 10;
+            stroke: #ffffff;
+            fill: none;
+            animation: strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+          }
+
+          &-check {
+            transform-origin: 50% 50%;
+            stroke-dasharray: 48;
+            stroke-dashoffset: 48;
+            animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s
+              forwards;
+          }
+        }
+      }
+
+      input[type="checkbox"] {
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        z-index: 1;
+        cursor: pointer;
+
+        &:checked {
+          & + .check-icon {
+            opacity: 1;
+
+            .check {
+              display: block;
+            }
+          }
+
+          & ~ .configure-widgets-item-body .image-wrapper {
+            opacity: 0.5;
+          }
+
+          & ~ .configure-widgets-item-head {
+            button.add {
+              display: none;
+            }
+
+            button.remove {
+              display: flex;
+            }
+          }
+        }
+      }
+    }
+
+    &-head {
+      padding: 0 0 16px 0;
+      position: relative;
+    }
+
+    &-title {
+      margin: 0 0 12px;
+      font-size: 14px;
+      line-height: 20px;
+      text-transform: uppercase;
+      color: #161b2f;
+      max-width: calc(100% - 72px);
+      font-weight: 500;
+    }
+
+    &-description {
+      font-size: 12px;
+      line-height: 20px;
+      color: #747576;
+      margin: 0;
+      font-weight: 400;
+      height: 60px;
+    }
+
+    &-button {
+      width: 72px;
+      height: 28px;
+      cursor: pointer;
+      display: flex;
+      position: absolute;
+      top: 0;
+      right: -24px;
+      font-size: 11px;
+      font-weight: 500;
+      border: none;
+      outline: none;
+      justify-content: center;
+      align-items: center;
+      border-radius: 2px;
+      text-transform: uppercase;
+      padding: 0;
+      margin: 0;
+
+      &.add {
+        color: #ffffff;
+        background: #1e5dd3;
+      }
+
+      &.remove {
+        background: #ffffff;
+        border: 1px solid #f1f1f1;
+        color: #c7381b;
+        display: none;
+      }
+    }
+
+    &-body {
+      overflow: hidden;
+      height: 220px;
+      border: 1px solid #f1f1f1;
+      border-bottom: none;
+      border-radius: 2px 2px 0 0;
+      box-shadow: 0 -4px 8px #161b2f10;
+
+      .image-wrapper {
+        box-shadow: 0px -6px 12px #0000001a;
+        border-radius: 2px;
+        overflow: hidden;
+        background: #ffffff;
+      }
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+
+@keyframes strokeCheck {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes fillCheck {
+  100% {
+    box-shadow: inset 0px 0px 0px 2px #ffffff;
+  }
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.7;
+}

package/src/lib/create-dashboard-container/configure-widgets/configure-widgets/configure-widgets.component.spec.ts

@@ -0,0 +1,48 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConfigureWidgetsComponent } from './configure-widgets.component';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ConfigureWidgetsService } from '../../services/configure-widgets.service';
+import { FloatingBarModule } from '../../../ui-kit/floating-bar/floating-bar.module';
+import { FormgroupModule } from '../../../ui-kit/formgroup/formgroup.module';
+import { DialogRef } from '../../../ui-kit/dialog/dialog-ref';
+import { SearchPipe } from '../../pipes/search.pipe';
+import { of } from 'rxjs';
+import { AuthService } from 'src/app/services/auth.service';
+
+
+describe('ConfigureWidgetsComponent', () => {
+  let component: ConfigureWidgetsComponent;
+  let fixture: ComponentFixture<ConfigureWidgetsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfigureWidgetsComponent, SearchPipe ],
+      imports: [
+        HttpClientTestingModule, 
+        HttpClientModule, 
+        CommonModule,
+        FloatingBarModule,
+        FormgroupModule,
+        FormsModule,
+      ],
+      providers:[DialogRef, ConfigureWidgetsService, {provide: AuthService, useValue: {isLoggedIn: () => of(true), getUserList: of(), getInfo: () => of(), _ID: () => of(), getUserInformation: () => of()}}],
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigureWidgetsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+
+
+});