tango-app-ui-shared 3.7.3-dev6-copilot → 3.7.3-dev6-demo7

package/src/lib/modules/notification/conformation/conformation.component.html

@@ -0,0 +1,25 @@
+<div class="card group-delete py-0">
+    <div class="card-body py-0 d-flex flex-start flex-column p-9 ">
+        <div class="my-5">
+            <div class="symbol symbol-75px symbol-circle">
+                <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/>
+                    <rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/>
+                    <path d="M27.9988 24V28M27.9988 32H28.0088M26.2888 18.86L17.8188 33C17.6442 33.3024 17.5518 33.6453 17.5508 33.9945C17.5498 34.3437 17.6403 34.6871 17.8132 34.9905C17.9862 35.2939 18.2355 35.5467 18.5365 35.7238C18.8375 35.9009 19.1796 35.9961 19.5288 36H36.4688C36.818 35.9961 37.1601 35.9009 37.4611 35.7238C37.7621 35.5467 38.0114 35.2939 38.1844 34.9905C38.3573 34.6871 38.4478 34.3437 38.4468 33.9945C38.4458 33.6453 38.3534 33.3024 38.1788 33L29.7088 18.86C29.5305 18.5661 29.2795 18.3231 28.98 18.1544C28.6805 17.9858 28.3425 17.8972 27.9988 17.8972C27.6551 17.8972 27.3171 17.9858 27.0176 18.1544C26.7181 18.3231 26.4671 18.5661 26.2888 18.86Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>  
+            </div>
+        </div>
+        <a class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer">Are you sure?</a>
+        <span  class="sub-title fw-normal mt-2">Do you want to cancel the download?</span>
+        <!-- <span *ngIf="status ==='rejected'"  class="sub-title fw-normal mt-2">Do you want to reject the brand <b>{{clientName}}</b>?</span> -->
+        <div class="mt-5 w-100">
+         
+                <div role="group" class="d-flex mt-3 mb-15">
+                    <button class="btn btn-outline w-100 me-3" (click)="cancel()">Cancel</button>
+                    <button  id="alert-toast" class="btn btn-primary w-100 ms-3" (click)="onSubmit()">Confirm</button>
+                </div>
+           
+        </div>
+
+    </div>
+</div>

package/src/lib/modules/notification/conformation/conformation.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConformationComponent } from './conformation.component';
+
+describe('ConformationComponent', () => {
+  let component: ConformationComponent;
+  let fixture: ComponentFixture<ConformationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ConformationComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ConformationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/modules/notification/conformation/conformation.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+@Component({
+  selector: 'lib-conformation',
+  templateUrl: './conformation.component.html',
+  styleUrl: './conformation.component.scss'
+})
+export class ConformationComponent {
+
+  constructor (private activeModal: NgbActiveModal,){
+
+  }
+  
+
+  cancel(){
+    this.activeModal.close('close');
+  }
+
+  onSubmit(){
+    this.activeModal.close('submit');
+  }
+
+}

package/src/lib/modules/notification/notification/notification.component.html

@@ -0,0 +1,209 @@
+<div class="row buttonsec mb-10">
+    <button [ngClass]="showalert?'':'submenu'" class=" col-lg-6 btn bg-light-primary text-primary"
+        (click)="chooseManager('alert')">Alerts Manager</button>
+    <button [ngClass]="showdownload?'':'submenu'" class="col-lg-6 btn bg-light-primary text-primary"
+        (click)="chooseManager('download')">Download Manager</button>
+</div>
+<div  *ngIf="showalert" class="card topbar">
+    <div class="card-header">
+        <h3 class="card-title align-items-start flex-column">
+            <span class="card-label mb-2">Alerts Manager</span>
+        </h3>
+    </div>
+    <div class="card-body">
+        <div class="d-flex flex-column flex-xl-row p-7 ">
+            <div class="flex-lg-row-fluid  mb-20 mb-xl-0">
+                <div class="mb-0">
+                    <div>
+                        <ng-container *ngIf="loading">
+                            <div class="row loader  d-flex justify-content-center align-items-center">
+                                <div class="shimmer">
+                                    <div class="wrapper">
+                                        <div class="stroke animate title"></div>
+                                        <div class="stroke animate link"></div>
+                                        <div class="stroke animate description"></div>
+                                    </div>
+                                </div>
+                                <div class="shimmer">
+                                    <div class="wrapper">
+                                        <div class="stroke animate title"></div>
+                                        <div class="stroke animate link"></div>
+                                        <div class="stroke animate description"></div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </ng-container>
+                        <ng-container *ngIf="noData && !loading">
+                            <div class="row">
+                                <div class="col-lg-12 mb-3">
+                                    <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                                        <img class="img-src w-25" src="./assets/tango/Icons/noNotification.svg" alt="">
+                                        <span class="notificationAlign mt-10">No New Notification</span>
+                                        <span class="noNotification mt-2">Any new notification will be shown
+                                            here.</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-container>
+                        <div class="row w-100" *ngIf="notification?.length && !loading">
+                            <div class="col-lg-6" *ngFor="let item of notification;let i=index">
+                                <div class="mb-8 border-value w-100">
+                                            <div class="flex-grow-1 me-2">
+                                                <div class="row mt-4">
+                                                    <div class="col-lg-11">
+                                                        <div class="symbol symbol-50px mx-4">
+                                                            <span class="mt-2">
+                                                                <svg width="40" height="40" viewBox="0 0 40 40"
+                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                                    <rect width="40" height="40" rx="20"
+                                                                        fill="#DAF1FF" />
+                                                                    <g clip-path="url(#clip0_12108_56367)">
+                                                                        <path
+                                                                            d="M19.9993 23.3333V20M19.9993 16.6666H20.0077M28.3327 20C28.3327 24.6023 24.6017 28.3333 19.9993 28.3333C15.397 28.3333 11.666 24.6023 11.666 20C11.666 15.3976 15.397 11.6666 19.9993 11.6666C24.6017 11.6666 28.3327 15.3976 28.3327 20Z"
+                                                                            stroke="#00A3FF" stroke-width="1.66667"
+                                                                            stroke-linecap="round"
+                                                                            stroke-linejoin="round" />
+                                                                    </g>
+                                                                    <defs>
+                                                                        <clipPath id="clip0_12108_56367">
+                                                                            <rect width="20" height="20" fill="white"
+                                                                                transform="translate(10 10)" />
+                                                                        </clipPath>
+                                                                    </defs>
+                                                                </svg>
+                                                            </span>
+                                                            <span class="alert-title mx-4">{{ item._source.title }}<span
+                                                                    class="alertdot m-2">•</span><span
+                                                                    class="alertdot">{{
+                                                                    item._source.date | customDateFormat }} Today</span>
+                                                            </span>
+                                                            <div class="alt-desc d-block ms-17">{{
+                                                                item._source.description
+                                                                }}</div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="col-lg-1">
+                                                        <span (click)="updateNotification(item,'')"
+                                                            class="btn btn-sm btn-icon btn-active-color-primary">
+                                                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
+                                                                xmlns="http://www.w3.org/2000/svg">
+                                                                <path d="M15 5L5 15M5 5L15 15" stroke="#667085"
+                                                                    stroke-width="1.67" stroke-linecap="round"
+                                                                    stroke-linejoin="round" />
+                                                            </svg>
+                                                        </span>
+
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="ms-20 mt-2">
+                                                <ng-container *ngFor="let cta of item._source.alertCta">
+                                                    <button *ngIf="!['remind','cancel'].includes(cta.redirectionUrl)"
+                                                        (click)="updateNotification(item,cta)"
+                                                        class="btn btn-sm btn-primary">{{ cta.buttonName }}</button>
+                                                    <span *ngIf="['remind','cancel'].includes(cta.redirectionUrl)"
+                                                        (click)="updateNotification(item,cta)"
+                                                        class="text-primary mx-6 remindlatertext cursor-pointer">{{
+                                                        cta.buttonName }}</span>
+                                                </ng-container>
+
+                                            </div>
+                                        <!-- </div> -->
+                                    <!-- </div> -->
+                                </div>
+                            </div>
+
+                        </div>
+                        <div *ngIf="notification?.length && !loading" class="my-3">
+                            <lib-pagination [itemsPerPage]="limit" [currentPage]="offset" [totalItems]="total"
+                                [paginationSizes]="paginationSizes" [pageSize]="paginationSize()"
+                                (pageChange)="onPageChange($event)"
+                                (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="card topbar" *ngIf="showdownload">
+    <div class="card-header">
+      <h3 class="card-title align-items-start flex-column">
+        <span class="card-label mb-2">Download Manager</span>
+      </h3>
+    </div>
+    <div class="card-body">
+        <ng-container *ngIf="downloadloading">
+            <div class="row loader  d-flex justify-content-center align-items-center">
+                <div class="shimmer">
+                    <div class="wrapper">
+                        <div class="stroke animate title"></div>
+                        <div class="stroke animate link"></div>
+                        <div class="stroke animate description"></div>
+                    </div>
+                </div>
+                <div class="shimmer">
+                    <div class="wrapper">
+                        <div class="stroke animate title"></div>
+                        <div class="stroke animate link"></div>
+                        <div class="stroke animate description"></div>
+                    </div>
+                </div>
+
+            </div>
+        </ng-container>
+        <ng-container *ngIf="downloadnoData && !downloadloading">
+            <div class="row">
+                <div class="col-lg-12 mb-3">
+                    <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                        <img class="img-src w-25" src="./assets/tango/Icons/Nodata1.svg" alt="">
+                        <span class="notificationAlign mt-10">No data found</span>
+                        <span class="noNotification mt-2">There is no result for Download Manager.
+                            </span>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+        <div class="row" *ngIf="downloads?.length && !downloadloading">
+            <div *ngFor="let record of downloads" class="col-md-5 card border px-5 py-5 mt-5" style="margin-left: 70px;">
+              <div class="d-flex justify-content-between" *ngIf="downloads?.length">
+                <div class="d-flex">
+                  <img class="downloadimage" src="./assets/tango/Icons/Trax_Folder_Icon.svg" alt="Folder Icon">
+                  <div class="mx-5">
+                  <!--.{{record?.type ? record.type : 'zip' }} -->
+                    <span class="foldername">{{ record.name }}</span><br>
+                    <span class="downloadstatus" *ngIf="record.status === 'completed'">
+                        Initiated Time: {{ record.downloadedTime }} | {{ record.downloadedDate }}
+                    </span>
+                    <span class="downloadstatus" *ngIf="record.status === 'inprogress'">Processing...</span>
+                    <span class="text-primary text-decoration-underline cursor-pointer ms-10" *ngIf="record.status === 'inprogress'" (click)="cancelDownload(record._id)"  >Cancel</span>
+                  </div>
+                </div>
+                <button *ngIf="record.status === 'completed' && record.url && record.url.trim() !== ''" class="btn btn-primary download" (click)="downloadFile(record)">
+                  Download
+                </button>
+                <button *ngIf="record.status === 'completed' && (!record.url || record.url.trim() === '')"  class="btn btn-outline  nofilefound">
+                    No File Found
+                  </button>
+                <div *ngIf="record.status === 'inprogress'">
+                  <img class="loader" src="./assets/tango/Icons/Trax-Loader GIF.gif" alt="Loading">
+                </div>
+              </div>
+            </div>
+          </div>
+          <div *ngIf="downloads?.length && !downloadloading" class="my-3">
+            <lib-pagination 
+              [itemsPerPage]="limit" 
+              [currentPage]="offset" 
+              [totalItems]="total"
+              [paginationSizes]="paginationSizes" 
+              [pageSize]="paginationSize()"
+              (pageChange)="onPageChange($event)"
+              (pageSizeChange)="onPageSizeChange($event)">
+            </lib-pagination>
+          </div>
+    </div>
+  </div>

package/src/lib/modules/notification/notification/notification.component.scss

@@ -0,0 +1,211 @@
+.border-value {
+    // padding: 10px !important;
+    border-radius: 12px !important;
+    border: 1.095px solid var(--Gray-200, #EAECF0) !important;
+    background: var(--White, #FFF) !important;
+    height: 155px;
+}
+
+.buttonsec {
+    border-radius: 8px;
+    margin: 0px;
+    // border: 1px solid var(--gray-100, #F2F4F7);
+    background: var(--gray-50, white);
+    width: 100%;
+    height: fit-content;
+    padding: 5px;
+}
+
+.submenu {
+    background: var(--gray-50, white) !important;
+    color: var(--gray-500, #667085) !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    outline: none !important;
+}
+
+.text-primary {
+    color: var(--primary-700, #009BF3) !important;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.alert-title {
+    color: var(--Gray-900, #101828);
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    /* 155.556% */
+}
+
+.alt-desc {
+    color: var(--Gray-500, #667085) !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    line-height: 20px;
+}
+
+.alertdot {
+    color: var(--Gray-500, #667085);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    /* 150% */
+}
+
+.remindlatertext {
+    color: var(--Primary-700, #009BF3);
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    /* 150% */
+    text-decoration-line: underline;
+    text-transform: capitalize;
+}
+
+.notificationAlign {
+    color: var(--Gray-900, #101828);
+    text-align: center;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.noNotification {
+    color: var(--Gray-500, #667085);
+    text-align: center;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+}
+
+.loader {
+    .title {
+        width: 65%;
+    }
+
+    .link {
+        width: 85%;
+    }
+
+    .description {
+        width: 95%;
+    }
+
+    .shimmer {
+        padding: 15px;
+        width: 95%;
+        height: 120px;
+        margin: 10px auto;
+        background: #ffffff;
+    }
+
+    .shimmer .image-card {
+        height: 90px;
+        width: 90px;
+        float: right;
+        border-radius: 8px;
+    }
+
+    .stroke {
+        height: 15px;
+        background: #777;
+        margin-top: 20px;
+    }
+
+    .wrapper {
+        width: 0px;
+        animation: fullView 0.5s forwards linear;
+    }
+
+    @keyframes fullView {
+        100% {
+            width: 100%;
+        }
+    }
+
+    .animate {
+        animation: shimmer 3s;
+        animation-iteration-count: infinite;
+        background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+        background-size: 1000px 100%;
+    }
+
+    @keyframes shimmer {
+        from {
+            background-position: -1000px 0;
+        }
+
+        to {
+            background-position: 1000px 0;
+        }
+    }
+}
+
+.downloadimage {
+    width: 56px;
+    height: 56px;
+}
+
+.foldername {
+    color: var(--gray-700, #344054);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+.downloadstatus {
+    color: var(--gray-500, #667085);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+.download {
+    border-radius: 8px;
+    border: 1px solid var(--primary-600, #00A3FF);
+    background: var(--primary-600, #00A3FF);
+
+    /* Shadow/xs */
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    // display: flex;
+    padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    height: 45px;
+    color: var(--White, #FFF);
+    font-family: 'Inter';
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    text-transform: capitalize;
+}
+
+.nofilefound {
+    color: var(--Gray-500, #667085);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    text-transform: capitalize;
+    border-radius: 8px;
+}
+.btn-outline{
+    border: 1px solid var(--Gray-200, #EAECF0);
+    background: var(--White, #FFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    display: flex;
+    // padding: 10px 18px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+}

package/src/lib/modules/notification/notification/notification.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [NotificationComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});