tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/checklistlayout/checklistlayout.component.html

@@ -0,0 +1,30 @@
+<div class="d-flex justify-content-between mb-4 mt-4" *ngIf="!currentRoute.split('/').includes('managechecklist')">
+    <div class="">
+        <h1 class=" my-0 checklistTitle">
+            Manage Your {{type === 'Checklist' ? 'Checklist' : 'Task'}}
+        </h1>
+        <div class="mt-1 checklistHead">You can create and manage your {{type === 'Checklist' ? 'checklist' : 'task'}} here</div>
+    </div>
+    <div class="nav-group nav-group-outline border-1 btn-group p-0">
+        <button (click)="type = 'Checklist'" class="btn btn-outline"
+        [ngClass]="{
+            'activePlanBtn': type === 'Checklist',
+            'inactivePlanBtn': type !== 'Checklist',
+        }"
+            [routerLink]="'/manage/trax/checklist'"
+           >
+           Checklist
+        </button>
+        <button (click)="type = 'Task'" class="btn btn-outline px-6 py-3"
+        [ngClass]="{
+            'activePlanBtn': type === 'Task',
+            'inactivePlanBtn': type !== 'Task',
+        }"
+            [routerLink]="'/manage/trax/checklist/managetask'"
+    
+           >
+           Task
+        </button>
+    </div>
+</div>
+<router-outlet></router-outlet>

package/src/lib/components/checklistlayout/checklistlayout.component.scss

@@ -0,0 +1,15 @@
+.nav-group-outline {
+    border-radius: 8px;
+    border: 1px solid var(--Primary-300, #6BCAFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+.nav-group .btn.activePlanBtn {
+    border-right: 1px solid var(--Primary-300, #6BCAFF);
+    background: var(--Primary-600, #00A3FF);
+    color: white;
+}
+.nav-group .btn.inactivePlanBtn {
+    background-color: white;
+    color: #333;
+    border: 1px solid #dcdcdc;
+}

package/src/lib/components/checklistlayout/checklistlayout.component.spec.ts

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

package/src/lib/components/checklistlayout/checklistlayout.component.ts

@@ -0,0 +1,47 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+@Component({
+  selector: 'lib-checklistlayout',
+  templateUrl: './checklistlayout.component.html',
+  styleUrl: './checklistlayout.component.scss'
+})
+export class ChecklistlayoutComponent implements OnInit, OnDestroy {
+
+  currentRoute:string
+  routerSub:Subscription
+
+  constructor(private router:Router){
+
+  }
+  ngOnDestroy(): void {
+    this.routerSub.unsubscribe()
+  }
+  ngOnInit(): void {
+    this.currentRoute = this.router.url.split('?')[0];
+    if(this.currentRoute === '/manage/trax/checklist'){
+      this.type = 'Checklist'
+    }
+    else if(this.currentRoute === '/manage/trax/checklist/managetask'){
+      this.type = 'Task'
+    }
+   this.routerSub =  this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.currentRoute = event.urlAfterRedirects.split('?')[0]
+        if(this.currentRoute === '/manage/trax/checklist'){
+          this.type = 'Checklist'
+        }
+        else if(this.currentRoute === '/manage/trax/checklist/managetask'){
+          this.type = 'Task'
+        }
+      }
+    });
+
+  }
+
+  type: 'Checklist' | 'Task' = 'Checklist'
+
+
+
+}

package/src/lib/components/chip-dropdown/chip-dropdown.component.html

@@ -0,0 +1,36 @@
+<div class=" position-relative" (clickOutside)="showDropdown = false;">
+    <div class="dropdown-close">
+        <div class="w-100">
+            <div class="outer-container d-flex align-items-center position-relative w-100">
+                <div class="input-container form-control">
+                    <ng-container *ngFor="let item of selectedData;let i=index">
+                        <span class="chip">
+                            <span class="bg-light-primary text-primary p-1 rounded-5 me-1">{{getInitials(item.name)}}</span>
+                            <span class="me-3">{{item.name}}</span>
+                            <span (click)="removeBadge(item,i)"><svg
+                                    xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                                    <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </svg>
+                            </span>
+                        </span>
+                    </ng-container>
+                    <input style="min-height: 44px;" type="text" class="form-control dropdown-input" [placeholder]="placeholder" [(ngModel)]="searchValue" (click)="toggleDropdown()" (input)="findValue()" id="searchInput">
+                </div>
+            </div>
+        </div>
+        <div class="px-4 pe-3 dropdown-menu custom-dropdown-menu w-90 mt-3" *ngIf="showDropdown">
+            <div [class]="data?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'">
+                @for( element of data; track element.value; let i = $index){
+                    <div class="dropdown-item form-check custom-dropdown-item" (click)="addBadge(element,i)">
+                        <label>{{element.name}}</label>
+                    </div>
+                }@empty() {
+                    <div>
+                        <label>No data found</label>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+</div>

package/src/lib/components/chip-dropdown/chip-dropdown.component.scss

@@ -0,0 +1,97 @@
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    z-index: 1000;
+    display: block;
+    box-sizing: border-box;
+}
+
+.dropdown-item {
+    padding: 8px 12px;
+}
+
+.dropdown-item:hover {
+    background-color: #f1f1f1;
+}
+
+.dropdown-item input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+.custom-dropdown-menu {
+    border-radius: 4px;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.custom-dropdown-item {
+    display: flex;
+    align-items: center;
+
+}
+
+.custom-dropdown-item input {
+    margin-left: 10px;
+}
+
+.btn-resize {
+    font-size: 13px !important;
+    height: 29px !important;
+    line-height: 11px !important;
+    padding: 3px !important;
+}
+
+.formSeach {
+    width: 95%
+}
+
+.storetext {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    text-transform: lowercase;
+}
+
+.outer-container {
+    position: relative;
+
+    .form-control {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .input-container {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        input {
+            all: unset;
+            flex: 1;
+            min-width: 50px;
+        }
+
+        .chip {
+            border-radius: 20px;
+            margin: 10px 0px 10px 10px;
+            padding: 3px 10px;
+            border-radius: 16px;
+            background: var(--Gray-100, #F2F4F7);
+            color: var(--Gray-700, #344054);
+            font-family: Inter;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px;
+        }
+
+        .chip:nth-child(1) {
+            margin-left: 0;
+        }
+
+    }
+}

package/src/lib/components/chip-dropdown/chip-dropdown.component.spec.ts

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

package/src/lib/components/chip-dropdown/chip-dropdown.component.ts

@@ -0,0 +1,125 @@
+import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { TraxService } from '../../services/trax.service';
+
+@Component({
+  selector: "lib-chip-dropdown",
+  templateUrl: "./chip-dropdown.component.html",
+  styleUrl: "./chip-dropdown.component.scss",
+})
+export class ChipDropdownComponent implements OnInit, OnChanges {
+  @Input() data: any;
+  @Input() selectedData: any = [];
+  @Input() placeholder: any = "";
+  @Output() selectedList: EventEmitter<string[]> = new EventEmitter<string[]>();
+  showDropdown: boolean = false;
+  dummyData: any;
+  instanceId: string;
+  searchValue: any = "";
+  oldPlaceholder:any = '';
+
+  constructor(
+    private traxService: TraxService,
+    private cd: ChangeDetectorRef,
+  ) {
+    this.instanceId = crypto.randomUUID();
+
+    this.traxService.dropdownCloseTrigger.subscribe((val) => {
+      if (val && this.instanceId !== val) {
+        this.showDropdown = false;
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    this.selectedData = this.selectedData
+      ? JSON.parse(JSON.stringify(this.selectedData))
+      : [];
+    this.oldPlaceholder = this.placeholder;
+    if (this.selectedData.length) {
+      this.placeholder = "";
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes["data"]) {
+      let selectedEmail = this.selectedData?.map((item: any) => item.value);
+      this.data = this.data?.filter(
+        (ele: any) => !selectedEmail?.includes(ele.value),
+      );
+      this.dummyData = this.data ? JSON.parse(JSON.stringify(this.data)) : [];
+    }
+  }
+
+  addBadge(data: any, index: any) {
+    this.placeholder = "";
+    this.selectedData.push({ name: data.name, value: data.value });
+    this.data.splice(index, 1);
+    if (this.searchValue.trim().length) {
+      this.searchValue = "";
+      let name = this.selectedData.map((item: any) => item.name);
+      this.data = this.dummyData?.filter(
+        (ele: any) => !name.includes(ele.name),
+      );
+      this.showDropdown = !this.showDropdown;
+    }
+    this.selectedList.emit(this.selectedData);
+  }
+
+  removeBadge(data: any, index: number) {
+    this.data.push(data);
+    this.selectedData.splice(index, 1);
+    if (!this.selectedData.length) {
+      this.placeholder = this.oldPlaceholder;
+    }
+    this.selectedList.emit(this.selectedData);
+  }
+
+  getInitials(name: string): string {
+    if (!name) return ""; // Handle empty case
+    const [firstName, lastName] = name.split(" ");
+    if (!lastName) {
+      const initials = (firstName?.[0] || "") + (firstName?.[1] || "");
+      return initials.toUpperCase();
+    } else {
+      const initials = (firstName?.[0] || "") + (lastName?.[0] || "");
+      return initials.toUpperCase();
+    }
+  }
+
+  debounceTimer: any = null;
+
+  findValue() {
+    let nameList = this.selectedData.map((ele: any) => ele.name.toLowerCase());
+    if (this.searchValue.trim()) {
+      this.showDropdown = true;
+    }
+
+    clearTimeout(this.debounceTimer);
+
+    this.debounceTimer = setTimeout(() => {
+      this.data = this.dummyData?.filter((ele: any) => {
+        return (
+          ele.name.toLowerCase().includes(this.searchValue.toLowerCase()) &&
+          !nameList.includes(ele.name.toLowerCase())
+        );
+      });
+      this.cd.detectChanges();
+    }, 1000);
+  }
+
+  toggleDropdown() {
+    this.showDropdown = !this.showDropdown;
+    this.traxService.dropdownCloseTrigger.next(this.instanceId);
+  }
+
+  @HostListener("document:click", ["$event"])
+  clickOutside(event: MouseEvent): void {
+    const clickedInside = (event.target as HTMLElement).closest(
+      ".dropdown-close",
+    );
+
+    if (!clickedInside) {
+      this.showDropdown = false;
+    }
+  }
+}