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

package/src/lib/components/lib/custom-select/custom-select.component.ts

@@ -0,0 +1,151 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { TraxService } from '../../../services/trax.service';
+ 
+@Component({
+  selector: 'lib-single-select',
+  templateUrl: './custom-select.component.html',
+  styleUrl: './custom-select.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomsingleSelectComponent implements OnChanges, OnInit {
+ 
+  @HostListener('document:click', ['$event'])
+  onClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.dropdown')) {
+      this.showDropdown = false;
+    }
+  }
+ 
+  @Input() items: any
+  @Input() searchField: string
+  @Input() multi: boolean
+  @Input() idField: string
+  @Input() selectedValues: any = []
+  @Input() disabled: boolean | undefined
+  @Input() label: string
+ 
+  @Output() selected = new EventEmitter<any>()
+  filteredValues: any = []
+  showDropdown: boolean
+  searchValue: string
+  instanceId: any;
+ 
+ 
+  constructor(private cd: ChangeDetectorRef, private authService:TraxService) { }
+  ngOnInit(): void {
+    this.instanceId = crypto.randomUUID();
+    this.authService.dropDownTrigger.subscribe((e:any)=>{           
+      if(e !== this.instanceId){        
+        this.showDropdown = false
+        this.cd.detectChanges()
+      }
+    })
+  }
+ 
+  ngOnChanges(changes: SimpleChanges): void {
+ 
+    if (changes['items'] && this.items?.length) {
+      this.initializeItems();
+    }else if(this.items?.length  ===0){
+      this.filteredValues = []
+    }
+    if (changes['selectedValues'] && Array.isArray(changes['selectedValues']?.currentValue) && changes['selectedValues']?.currentValue?.length > 0 && changes['selectedValues']?.currentValue[0]) {            
+      this.updateSelectedValues();
+    }
+  }
+ 
+  initializeItems() {
+    this.filteredValues = this.items.map((item: any) => ({ ...item }));
+    this.updateSelectedValues()
+  }
+ 
+  updateSelectedValues() {    
+    this.selectedValues?.forEach((selectedItem: any) => {
+      const item = this.filteredValues?.find((filteredItem: any) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
+      if (item) {
+        item.isSelected = true;
+      }
+    });
+   
+  }
+ 
+  openDropdown(event: any) {
+    this.authService.dropDownTrigger.next(this.instanceId)
+    event.stopPropagation();
+    this.showDropdown = !this.showDropdown;
+  }
+ 
+  onInput(event: any) {
+    if (!event.target.value) {
+      this.filteredValues = [...this.items];
+    } else {
+      const searchTerm = event.target.value.toLowerCase();
+      this.filteredValues = this.items.filter((item: any) =>
+        item[this.searchField].toLowerCase().includes(searchTerm)
+      );
+    }
+    this.updateSelectedValues();
+    this.cd.detectChanges();
+  }
+ 
+  onSelect(event: any, item: any) {    
+    if (this.multi) {
+      if (event.currentTarget.checked) {
+        this.selectedValues.push(item );        
+      } else {
+        this.selectedValues = this.selectedValues.filter((elem: any) => elem[this.idField] !== item[this.idField]);
+      }
+    } else {
+      this.selectedValues = [{ ...item }];
+      this.filteredValues.forEach((element:any) => {
+        if(element[this.idField] !== item[this.idField]){
+          element.isSelected = false
+        }
+      });
+      this.showDropdown = false;
+    }
+ 
+    const valuesToEmit = this.selectedValues.map((value: any) => {
+      const selectedItem = { ...value };
+      delete selectedItem.isSelected;
+      return selectedItem;
+    });
+ 
+    this.cd.detectChanges();
+    this.emitSelectedValues(valuesToEmit);
+ 
+  }
+ 
+  onSelectAll(event: any) {
+    const selectAll = event.currentTarget.checked;
+    this.filteredValues.forEach((item: any) => item.isSelected = selectAll);
+ 
+    if (selectAll) {
+      this.selectedValues = [...this.filteredValues];
+    } else {
+      this.selectedValues = [];
+    }
+ 
+    const valuesToEmit = this.selectedValues.map((value: any) => {
+      const { isSelected, ...selectedItem } = value;
+      return selectedItem;
+    });
+ 
+    this.cd.detectChanges();
+    this.emitSelectedValues(valuesToEmit);
+  }
+ 
+ 
+  emitSelectedValues(values: any[]) {
+    if (this.multi) {
+      this.selected.emit(values);
+    } else {
+      this.selected.emit(values[0]);
+    }
+  }
+ 
+  checkIfAllSelected() {
+    return this.filteredValues.every((item: any) => item.isSelected);
+  }
+}

package/src/lib/components/manage-task/manage-task.component.html

@@ -0,0 +1,265 @@
+
+<div class="card">
+    <div class="col-md-12 mt-3">
+        <div style="padding: 0 1.25rem;" class="card-header border-0 pt-3 mb-5">
+            <h3 class="card-title align-items-start flex-column">
+                <span class="title-text mb-2">Task Info</span>
+                <!-- <span class="text-sub mb-2">Based on 06 Jan, 2022– 13 Jan, 2022</span> -->
+            </h3>
+            <div class="card-toolbar">
+                <div class="d-flex">
+                    <div class="d-flex align-items-center position-relative my-1">
+                        <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                                fill="none">
+                                <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1"
+                                    transform="rotate(45 17.0365 15.1223)" fill="currentColor"></rect>
+                                <path
+                                    d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
+                                    fill="currentColor"></path>
+                            </svg>
+                        </span>
+                        <input [formControl]="searchInput" type="text" class="form-control ps-14 me-2" autocomplete="off" placeholder="Search" />
+
+                        <a *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isAdd" [routerLink]="'/manage/trax/create-task'" type="button"
+                            class="btn btn-primary mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"><svg
+                                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                fill="none">
+                                <path d="M10.0013 4.16699V15.8337M4.16797 10.0003H15.8346" stroke="white"
+                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </svg><span class="ms-2">Create Task</span> </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div *ngIf="(taskTableApiState | async) === 'loading' || (taskTableApiState | async) === 'initial'" 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 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>
+        <div *ngIf="(taskTableApiState | async) === 'loaded' && !taskTableData?.length" class="col-lg-12 pb-5" >
+            <div class="card-body text-center">
+                <img src="./assets/tango/Icons/Nodata1.svg" alt="" class="startchecklist">
+                <div class="checklist_text fw-semibold mt-6 checkStart">Start by creating a task</div>
+                <div class="checklist_span mt-1 checklistHead">Any task created will live here.</div>
+            </div>
+            <div data-kt-subscription-table-toolbar="base" class="d-flex justify-content-center">
+                <a href="https://tangoeye.ai/" target="_blank" class="btn-outline btn-outline btn btn-light upload mx-3 px-16 checkStart"><span
+                        class="uploadtext">How To
+                        Create?</span></a>
+
+                <a  [routerLink]="'/manage/trax/create-task'" type="button" tabindex="0"
+                    class="btn btn-primary px-16 mx-2 ng-star-inserted checkStart" style="white-space: nowrap;" *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isAdd"><span
+                        class="svg-icon svg-icon-2"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                            viewBox="0 0 20 20" fill="none">
+                            <path d="M10.0001 4.16602V15.8327M4.16675 9.99935H15.8334" stroke="white" stroke-width="1.67"
+                                stroke-linecap="round" stroke-linejoin="round" />
+                        </svg></span><span class="create">Create New</span></a>
+            </div>
+        </div>
+        <div *ngIf="(taskTableApiState | async) === 'loaded' && taskTableData?.length" calss="card-body">
+            <div class="table-responsive">
+                <table class="w-100 table bottom-border text-nowrap">
+                    <thead>
+                        <tr>
+                            <th class="cursor-pointer">
+                                <span class="cursor-pointer" (click)="sortData('checkListName')">Task <svg
+                                        [ngClass]="sortColumName === 'checkListName' && sortDirection === 1 ? 'rotate' : ''"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'checkListName' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg></span>
+                            </th>
+                            <th class="cursor-pointer">
+                                <span class="cursor-pointer" (click)="sortData('createdByName')">Created By <svg
+                                        [ngClass]="sortColumName === 'createdByName' && sortDirection === 1 ? 'rotate' : ''"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'createdByName' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg></span>
+                            </th>
+                            <th class="cursor-pointer">
+                                <span class="cursor-pointer" (click)="sortData('priorityType')">Priority <svg
+                                        [ngClass]="sortColumName === 'priorityType' && sortDirection === 1 ? 'rotate' : ''"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'priorityType' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg></span>
+                            </th>
+                            <th class="cursor-pointer">
+                                <span class="cursor-pointer" (click)="sortData('storeCount')">Assigned To <svg
+                                        [ngClass]="sortColumName === 'storeCount' && sortDirection === 1 ? 'rotate' : ''"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'storeCount' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg></span>
+                            </th>
+                            <th class="cursor-pointer">
+                                <span class="cursor-pointer" (click)="sortData('scheduleEndTimeISO')">Due On <svg
+                                        [ngClass]="sortColumName === 'scheduleEndTimeISO' && sortDirection === 1 ? 'rotate' : ''"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'scheduleEndTimeISO' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg></span>
+                            </th>
+                            <th class="cursor-pointer">
+                                <span class="cursor-pointer" (click)="sortData('publish')">Status <svg
+                                        [ngClass]="sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'publish' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg></span>
+                            </th>
+                            <th *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit" class="cursor-pointer">
+                                <span class="cursor-pointer">Actions</span>
+                            </th>
+                            <th *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit" class="cursor-pointer">
+                                <span class="cursor-pointer" (click)="sortData('publish')">Publish <svg
+                                        [ngClass]="sortColumName === 'publish' && sortDirection === 1 ? 'rotate' : ''"
+                                        width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                        <path
+                                            d="M8.00016 3.33337V12.6667M8.00016 12.6667L12.6668 8.00004M8.00016 12.6667L3.3335 8.00004"
+                                            [attr.stroke]="sortColumName === 'publish' ? '#00A3FF' : '#667085'"
+                                            stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg></span>
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let data of taskTableData;let i=index">
+                            <!-- (click)="storeView(obj)" -->
+                            <td class="text-capitalize">
+                                <div class="symbol symbol-35px symbol-circle">
+                                    <span
+                                        class="symbol-label bg-light-primary text-primary me-2">{{data.checkListChar.toUpperCase()}}</span>
+                                </div>
+                                <span class="text-decoration-underline text-primary"
+                                    ><a
+                                        [routerLink]="['/manage/trax/dashboard/taskinfo']"
+                                        [queryParams]="{taskId: data._id }"
+                                        class="cursor-pointer"> {{data.checkListName}}</a></span>
+
+                            </td>
+                            <td>{{data.createdByName}}</td>
+                            <td>{{data.priorityType ? (data.priorityType  | titlecase) : '--'}}</td>
+                            <td>{{data.storeCount}}</td>
+                            <td>{{data?.scheduleEndTimeISO ? formatDueDate(data?.scheduleEndTimeISO) : '--'}}</td>
+                            <td><span class="badge"
+                                    [ngClass]="data.publish ? 'badge-light-success' : 'badge-light-primary'">{{(data.publish
+                                    ? 'Published' :'draft') | titlecase}}</span></td>
+                            <td>
+                                <span *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'" class="me-6"
+                                    [ngClass]="!data?.publish ? 'cursor-pointer' : ''"
+                                    >
+                                    <svg (click)="onAction('view', data)"  xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                        fill="none">
+                                        <path
+                                            d="M0.832031 9.99967C0.832031 9.99967 4.16536 3.33301 9.9987 3.33301C15.832 3.33301 19.1654 9.99967 19.1654 9.99967C19.1654 9.99967 15.832 16.6663 9.9987 16.6663C4.16536 16.6663 0.832031 9.99967 0.832031 9.99967Z"
+                                            [attr.stroke]="!data?.publish ? '#667085' : '#D0D5DD'"
+                                            stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+                                        <path
+                                            d="M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z"
+                                            [attr.stroke]="!data?.publish ? '#667085' : '#D0D5DD'"
+                                            stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+                                    </svg>
+                                </span>
+                                <span *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'" (click)="onAction('edit', data)" class="me-6"
+                                    [ngClass]="true ? 'cursor-pointer' : ''"
+                                    >
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                        fill="none">
+                                        <g clip-path="url(#clip0_2254_20261)">
+                                            <path
+                                                d="M9.9987 12.4997C11.3794 12.4997 12.4987 11.3804 12.4987 9.99967C12.4987 8.61896 11.3794 7.49967 9.9987 7.49967C8.61799 7.49967 7.4987 8.61896 7.4987 9.99967C7.4987 11.3804 8.61799 12.4997 9.9987 12.4997Z"
+                                                [attr.stroke]="true ? '#667085' : '#D0D5DD'"
+                                                stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+                                            <path
+                                                d="M16.1654 12.4997C16.0544 12.751 16.0213 13.0298 16.0704 13.3002C16.1194 13.5705 16.2482 13.8199 16.4404 14.0163L16.4904 14.0663C16.6453 14.2211 16.7683 14.4049 16.8521 14.6073C16.936 14.8096 16.9792 15.0265 16.9792 15.2455C16.9792 15.4645 16.936 15.6814 16.8521 15.8837C16.7683 16.0861 16.6453 16.2699 16.4904 16.4247C16.3356 16.5796 16.1518 16.7026 15.9494 16.7864C15.7471 16.8703 15.5302 16.9135 15.3112 16.9135C15.0922 16.9135 14.8753 16.8703 14.673 16.7864C14.4706 16.7026 14.2868 16.5796 14.132 16.4247L14.082 16.3747C13.8856 16.1826 13.6362 16.0537 13.3659 16.0047C13.0955 15.9557 12.8167 15.9887 12.5654 16.0997C12.3189 16.2053 12.1087 16.3807 11.9606 16.6043C11.8126 16.8279 11.7331 17.0899 11.732 17.358V17.4997C11.732 17.9417 11.5564 18.3656 11.2439 18.6782C10.9313 18.9907 10.5074 19.1663 10.0654 19.1663C9.62334 19.1663 9.19941 18.9907 8.88685 18.6782C8.57429 18.3656 8.3987 17.9417 8.3987 17.4997V17.4247C8.39225 17.1488 8.30296 16.8813 8.14246 16.6569C7.98195 16.4325 7.75764 16.2616 7.4987 16.1663C7.24735 16.0554 6.96854 16.0223 6.69821 16.0713C6.42788 16.1204 6.17843 16.2492 5.98203 16.4413L5.93203 16.4913C5.77724 16.6463 5.59343 16.7692 5.3911 16.8531C5.18877 16.937 4.97189 16.9802 4.75286 16.9802C4.53384 16.9802 4.31696 16.937 4.11463 16.8531C3.9123 16.7692 3.72849 16.6463 3.5737 16.4913C3.41874 16.3366 3.29581 16.1527 3.21193 15.9504C3.12806 15.7481 3.08489 15.5312 3.08489 15.3122C3.08489 15.0931 3.12806 14.8763 3.21193 14.6739C3.29581 14.4716 3.41874 14.2878 3.5737 14.133L3.6237 14.083C3.81581 13.8866 3.94469 13.6372 3.9937 13.3668C4.04272 13.0965 4.00963 12.8177 3.8987 12.5663C3.79306 12.3199 3.61766 12.1097 3.39409 11.9616C3.17051 11.8135 2.90852 11.7341 2.64036 11.733H2.4987C2.05667 11.733 1.63275 11.5574 1.32019 11.2449C1.00763 10.9323 0.832031 10.5084 0.832031 10.0663C0.832031 9.62431 1.00763 9.20039 1.32019 8.88783C1.63275 8.57527 2.05667 8.39967 2.4987 8.39967H2.5737C2.84953 8.39322 3.11703 8.30394 3.34145 8.14343C3.56586 7.98293 3.73679 7.75862 3.83203 7.49967C3.94296 7.24833 3.97605 6.96951 3.92703 6.69918C3.87802 6.42885 3.74914 6.17941 3.55703 5.98301L3.50703 5.93301C3.35207 5.77822 3.22914 5.5944 3.14526 5.39207C3.06139 5.18974 3.01822 4.97287 3.01822 4.75384C3.01822 4.53481 3.06139 4.31794 3.14526 4.11561C3.22914 3.91328 3.35207 3.72946 3.50703 3.57467C3.66182 3.41971 3.84563 3.29678 4.04796 3.21291C4.25029 3.12903 4.46717 3.08586 4.6862 3.08586C4.90522 3.08586 5.1221 3.12903 5.32443 3.21291C5.52676 3.29678 5.71058 3.41971 5.86536 3.57467L5.91536 3.62467C6.11176 3.81679 6.36121 3.94566 6.63154 3.99468C6.90187 4.04369 7.18068 4.0106 7.43203 3.89967H7.4987C7.74517 3.79404 7.95538 3.61864 8.10344 3.39506C8.2515 3.17149 8.33096 2.9095 8.33203 2.64134V2.49967C8.33203 2.05765 8.50763 1.63372 8.82019 1.32116C9.13275 1.0086 9.55667 0.833008 9.9987 0.833008C10.4407 0.833008 10.8646 1.0086 11.1772 1.32116C11.4898 1.63372 11.6654 2.05765 11.6654 2.49967V2.57467C11.6664 2.84283 11.7459 3.10482 11.894 3.3284C12.042 3.55197 12.2522 3.72737 12.4987 3.83301C12.75 3.94394 13.0289 3.97703 13.2992 3.92801C13.5695 3.879 13.819 3.75012 14.0154 3.55801L14.0654 3.50801C14.2202 3.35305 14.404 3.23012 14.6063 3.14624C14.8086 3.06237 15.0255 3.0192 15.2445 3.0192C15.4636 3.0192 15.6804 3.06237 15.8828 3.14624C16.0851 3.23012 16.2689 3.35305 16.4237 3.50801C16.5787 3.6628 16.7016 3.84661 16.7855 4.04894C16.8693 4.25127 16.9125 4.46815 16.9125 4.68717C16.9125 4.9062 16.8693 5.12308 16.7855 5.32541C16.7016 5.52774 16.5787 5.71155 16.4237 5.86634L16.3737 5.91634C16.1816 6.11274 16.0527 6.36219 16.0037 6.63252C15.9547 6.90285 15.9878 7.18166 16.0987 7.43301V7.49967C16.2043 7.74615 16.3797 7.95635 16.6033 8.10442C16.8269 8.25248 17.0889 8.33194 17.357 8.33301H17.4987C17.9407 8.33301 18.3646 8.5086 18.6772 8.82116C18.9898 9.13372 19.1654 9.55765 19.1654 9.99967C19.1654 10.4417 18.9898 10.8656 18.6772 11.1782C18.3646 11.4907 17.9407 11.6663 17.4987 11.6663H17.4237C17.1555 11.6674 16.8936 11.7469 16.67 11.8949C16.4464 12.043 16.271 12.2532 16.1654 12.4997Z"
+                                                [attr.stroke]="true ? '#667085' : '#D0D5DD'"
+                                                stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+                                        </g>
+                                        <defs>
+                                            <clipPath id="clip0_2254_20261">
+                                                <rect width="20" height="20" fill="white" />
+                                            </clipPath>
+                                        </defs>
+                                    </svg>
+                                </span>
+                                <span *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit&&data.checkListFrom!='gallery'" class="me-2" (click)="onAction('duplicate', data)" [ngClass]="true ? 'cursor-pointer' : ''" >
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                        <g clip-path="url(#clip0_2254_20265)">
+                                            <path
+                                                d="M4.16797 12.5003H3.33464C2.89261 12.5003 2.46868 12.3247 2.15612 12.0122C1.84356 11.6996 1.66797 11.2757 1.66797 10.8337V3.33366C1.66797 2.89163 1.84356 2.46771 2.15612 2.15515C2.46868 1.84259 2.89261 1.66699 3.33464 1.66699H10.8346C11.2767 1.66699 11.7006 1.84259 12.0131 2.15515C12.3257 2.46771 12.5013 2.89163 12.5013 3.33366V4.16699M9.16797 7.50033H16.668C17.5884 7.50033 18.3346 8.24652 18.3346 9.16699V16.667C18.3346 17.5875 17.5884 18.3337 16.668 18.3337H9.16797C8.24749 18.3337 7.5013 17.5875 7.5013 16.667V9.16699C7.5013 8.24652 8.24749 7.50033 9.16797 7.50033Z"
+                                                [attr.stroke]="true ? '#667085' : '#D0D5DD'" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
+                                        </g>
+                                        <defs>
+                                            <clipPath id="clip0_2254_20265">
+                                                <rect width="20" height="20" fill="white" />
+                                            </clipPath>
+                                        </defs>
+                                    </svg>
+                                </span>
+                                <span *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit" (click)="onAction('delete', data)" [ngClass]="!data?.publish  ? 'cursor-pointer' : ''">
+                                    <svg width="40" height="41" viewBox="0 0 40 41" fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <g clip-path="url(#clip0_3162_10414)">
+                                            <path
+                                                d="M12.5 15.0228H14.1667M14.1667 15.0228H27.5M14.1667 15.0228V26.6895C14.1667 27.1315 14.3423 27.5554 14.6548 27.868C14.9674 28.1805 15.3913 28.3561 15.8333 28.3561H24.1667C24.6087 28.3561 25.0326 28.1805 25.3452 27.868C25.6577 27.5554 25.8333 27.1315 25.8333 26.6895V15.0228H14.1667ZM16.6667 15.0228V13.3561C16.6667 12.9141 16.8423 12.4902 17.1548 12.1776C17.4674 11.865 17.8913 11.6895 18.3333 11.6895H21.6667C22.1087 11.6895 22.5326 11.865 22.8452 12.1776C23.1577 12.4902 23.3333 12.9141 23.3333 13.3561V15.0228M18.3333 19.1895V24.1895M21.6667 19.1895V24.1895"
+                                                [attr.stroke]="!data?.publish ? '#667085' :'#D0D5DD'" stroke-width="1.66667"
+                                                stroke-linecap="round" stroke-linejoin="round" />
+                                        </g>
+                                        <defs>
+                                            <clipPath id="clip0_3162_10414">
+                                                <rect width="20" height="20" fill="white"
+                                                    transform="translate(10 10.0234)" />
+                                            </clipPath>
+                                        </defs>
+                                    </svg>
+                                </span>
+                            </td>
+                            <td *ngIf="(gs.userAccess | async)?.TangoTrax_Task_isEdit" >
+                                <span class="form-check form-switch">
+                                    <input [checked]="data.publish" (change)="publish($event, data,i)" type="checkbox" role="switch" id="support"
+                                        class="form-check-input mt-3 cursor-pointer">
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <lib-pagination [itemsPerPage]="itemsPerPage" [currentPage]="currentPage" [totalItems]="totalItems"
+                [paginationSizes]="paginationSizes" [pageSize]="pageSize" (pageChange)="onPageChange($event)"
+                (pageSizeChange)="onPageSizeChange($event)"></lib-pagination>
+        </div>
+    </div>
+</div>

package/src/lib/components/manage-task/manage-task.component.scss

@@ -0,0 +1,69 @@
+.rotate {
+    rotate: 180deg;
+    transition: 1s;
+}
+
+.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;
+        }
+    }
+
+
+}

package/src/lib/components/manage-task/manage-task.component.spec.ts

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