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

package/src/lib/components/task-info/taskinfo-edit/taskinfo-edit.component.scss

@@ -0,0 +1,460 @@
+.tasktitle{
+    color: var(--Gray-500, #667085);
+font-size: 18px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 155.556% */
+}
+.tasksub{
+    color: var(--Gray-700, #344054);
+font-size: 16px;
+font-style: normal;
+font-weight: 500;
+line-height: 24px; /* 150% */
+}
+.storetext{
+    color: var(--Gray-900, #101828);
+font-size: 18px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 155.556% */
+}
+// .configtext{
+//     color: var(--Gray-700, #344054);
+// font-size: 14px;
+// font-style: normal;
+// font-weight: 500;
+// line-height: 20px; /* 142.857% */
+// }
+// .checklistturnoff {
+//     border-radius: 8px;
+//     border: 1px solid var(--gray-200, #EAECF0);
+//     background: var(--white, #FFF);
+//     display: flex;
+//     padding: 16px;
+//     align-items: flex-start;
+//     align-self: stretch;
+// }
+// .togglemain{
+//     color: var(--Gray-700, #344054);
+// font-size: 16px;
+// font-style: normal;
+// font-weight: 500;
+// line-height: 24px; /* 150% */
+// }
+// .togglesub{
+//     color: var(--Gray-500, #667085);
+//     font-size: 14px;
+//     font-style: normal;
+//     font-weight: 400;
+//     line-height: 20px; /* 142.857% */
+// }
+// .daterangepicker {
+//     display: block !important;
+//     top: 153.85px !important;
+//     left: 900px !important;
+//     right: 0px;
+// }
+// .form-control {
+//     color: var(--Gray-700, #344054) !important;
+//     font-size: 14px !important;
+//     font-weight: 600;   
+//     line-height: 20px; 
+//     text-transform: capitalize;
+// }
+// ::ng-deep .applyBtn {
+//     display: none !important;
+//   }
+// :host::ng-deep {
+//     .md-drppicker .btn {
+//         line-height: 10px !important;
+//     }
+//     .daterangepicker-input + .ngx-daterangepicker-material .applyBtn {
+//         display: none;
+//     }
+//     .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+//         top: 65px !important;
+//         left: -470px !important;
+//         height: 365px !important;
+//     }
+
+//         .md-drppicker .btn {
+//             border-radius: 8px !important;
+//             border: 1px solid var(--Primary-600, #00A3FF) !important;
+//             background: var(--Primary-600, #00A3FF) !important;
+//             box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+//             color: var(--White, #FFF) !important;
+//             font-size: 14px !important;
+//             font-weight: 600 !important;
+//             line-height: 20px;
+//             text-transform: capitalize;
+//         }
+
+//     .md-drppicker .ranges ul li button {
+//         padding: 12px 16px;
+//         width: 160px;
+//         color: var(--Gray-700, #344054);
+//         font-size: 14px;
+//         font-weight: 400;
+//         line-height: 20px;
+//         background: none;
+//         border: none;
+//         text-align: left;
+//         cursor: pointer;
+//     }
+//     .md-drppicker td.active,
+//     .md-drppicker td.active:hover {
+//         background-color: #029cf4 !important;
+//         border-radius: 20px !important;
+//         color: var(--White, #FFF) !important;
+//         text-align: center !important;
+//         font-size: 14px !important;
+//         font-weight: 500 !important;
+//         line-height: 20px;
+//     }
+
+//     .md-drppicker.ltr .ranges {
+//         float: left;
+//         margin-top: 10px !important;
+//     }
+
+//     .md-drppicker td.in-range {
+//         background: var(--Primary-50, #EAF8FF);
+//     }
+
+//     .md-drppicker .ranges ul li button.active {
+//         background: var(--Primary-50, #EAF8FF) !important;
+//         border-radius: 8px !important;
+//         color: var(--Primary-700, #009BF3);
+//         font-size: 14px !important;
+//         font-weight: 500 !important;
+//         line-height: 20px !important;
+//     }
+//     table th,
+//     table td {
+//         width: 40px !important;
+//         height: 40px !important;
+//         padding: 10px 8px !important;
+//     }
+
+//     .md-drppicker td.available.prev,
+//     .md-drppicker th.available.prev {
+//         background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+//         background-repeat: no-repeat !important;
+//         background-size: 0.5em !important;
+//         background-position: center !important;
+//     }
+
+//     .md-drppicker td.available.next,
+//     .md-drppicker th.available.next {
+//         background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+//         background-repeat: no-repeat !important;
+//         background-size: 0.5em !important;
+//         background-position: center !important;
+//     }
+
+//     table th {
+//         border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+//         background: transparent !important;
+//         color: var(--Gray-700, #344054) !important;
+//         text-align: center;
+//         font-size: 16px !important;
+//         font-weight: 500 !important;
+//         line-height: 24px;
+//     }
+
+//     .md-drppicker td.available.invalid-date {
+//         text-decoration: line-through;
+//         pointer-events: none;
+//         color: darkgray;
+//     }
+
+//     .md-drppicker td.available.today:not(.invalid-date) {
+//         text-decoration: unset;
+//         pointer-events: unset;
+//         color: unset;
+//     }
+    
+//         .md-drppicker .btn.btn-default {
+//             border-radius: 8px !important;
+//             border: 1px solid var(--Gray-300, #D0D5DD) !important;
+//             background: var(--White, #FFF) !important;
+//             box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+//             color: var(--Gray-700, #344054) !important;
+//             font-size: 14px !important;
+//             font-weight: 600 !important;
+//             line-height: 20px;
+//             text-transform: capitalize;
+//             margin-right:10px !important;
+//         }
+//         .md-drppicker td.available.invalid-date  {
+//             text-decoration: line-through;
+//             pointer-events: none;
+//             color: darkgray;
+//           }
+          
+//           .md-drppicker td.available.today:not(.invalid-date)   {
+//             text-decoration: unset;
+//             pointer-events: unset;
+//             color: unset;
+//           }
+// }
+// .wrapper {
+//     min-width: 200px;
+// }
+.btn-primary{
+    line-height: 18px !important; 
+}
+.editscroll{
+    max-height: 800px;
+    overflow-y: scroll;
+}
+:host::ng-deep {
+    .date-picker {
+        .md-drppicker .btn {
+            line-height: 10px !important;
+        }
+
+        .daterangepicker-input+.ngx-daterangepicker-material .applyBtn {
+            display: none;
+        }
+
+        .md-drppicker.drops-down-right.ltr.show-ranges.shown {
+            top: 65px !important;
+        }
+
+        .md-drppicker.drops-down-right.ltr.double.show-ranges.shown {
+            top: 65px !important;
+            right: -475px !important;
+            left: unset !important;
+            height: 400px !important;
+        }
+
+        .md-drppicker .btn {
+            border-radius: 8px !important;
+            border: 1px solid var(--Primary-600, #00A3FF) !important;
+            background: var(--Primary-600, #00A3FF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--White, #FFF) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+        }
+
+        .md-drppicker .ranges ul li button {
+            padding: 12px 16px;
+            width: 160px;
+            color: var(--Gray-700, #344054);
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 20px;
+            background: none;
+            border: none;
+            text-align: left;
+            cursor: pointer;
+        }
+
+        .md-drppicker td.active,
+        .md-drppicker td.active:hover {
+            background-color: #029cf4 !important;
+            border-radius: 20px !important;
+            color: var(--White, #FFF) !important;
+            text-align: center !important;
+            font-size: 14px !important;
+            font-weight: 500 !important;
+            line-height: 20px;
+        }
+
+        .md-drppicker.ltr .ranges {
+            float: left;
+            margin-top: 10px !important;
+        }
+
+        .md-drppicker td.in-range {
+            background: var(--Primary-50, #EAF8FF);
+        }
+
+        .md-drppicker .ranges ul li button.active {
+            background: var(--Primary-50, #EAF8FF) !important;
+            border-radius: 8px !important;
+            color: var(--Primary-700, #009BF3);
+            font-size: 14px !important;
+            font-weight: 500 !important;
+            line-height: 20px !important;
+        }
+
+        table th,
+        table td {
+            width: 40px !important;
+            height: 40px !important;
+            padding: 10px 8px !important;
+        }
+
+        .md-drppicker td.available.prev,
+        .md-drppicker th.available.prev {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+            background-repeat: no-repeat !important;
+            background-size: 0.5em !important;
+            background-position: center !important;
+        }
+
+        .md-drppicker td.available.next,
+        .md-drppicker th.available.next {
+            background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K) !important;
+            background-repeat: no-repeat !important;
+            background-size: 0.5em !important;
+            background-position: center !important;
+        }
+
+        table th {
+            border-bottom: 0px solid var(--Gray-200, #EAECF0) !important;
+            background: transparent !important;
+            color: var(--Gray-700, #344054) !important;
+            text-align: center;
+            font-size: 16px !important;
+            font-weight: 500 !important;
+            line-height: 24px;
+        }
+
+        .md-drppicker td.available.invalid-date {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+        }
+
+        .md-drppicker td.available.today:not(.invalid-date) {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+        }
+
+        .md-drppicker .btn.btn-default {
+            border-radius: 8px !important;
+            border: 1px solid var(--Gray-300, #D0D5DD) !important;
+            background: var(--White, #FFF) !important;
+            box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+            color: var(--Gray-700, #344054) !important;
+            font-size: 14px !important;
+            font-weight: 600 !important;
+            line-height: 20px;
+            text-transform: capitalize;
+            margin-right: 10px !important;
+        }
+
+        .md-drppicker td.available.invalid-date {
+            text-decoration: line-through;
+            pointer-events: none;
+            color: darkgray;
+        }
+
+        .md-drppicker td.available.today:not(.invalid-date) {
+            text-decoration: unset;
+            pointer-events: unset;
+            color: unset;
+        }
+    }
+
+
+}
+
+.outer-container {
+    position: relative;
+
+    .form-control {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .input-container {
+        border: 1px solid black;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        border: 1px solid #D0D5DD;
+
+
+        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;
+
+            .initials {
+                color: var(--Primary-600, #00A3FF);
+                font-size: 12px;
+                font-weight: 500;
+                line-height: 18px;
+            }
+        }
+
+        .chip:nth-child(1) {
+            margin-left: 0;
+        }
+
+    }
+}
+
+.toggle-card {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid #EAECF0;
+    background: #FFF;
+
+    .header {
+        color: #344054;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 24px;
+    }
+
+    .desc {
+        color: var(--Gray-500, #667085);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+    }
+
+    &.selected {
+        border: 1px solid #6BCAFF;
+
+        .header {
+            color: #008EDF;
+        }
+
+        .desc {
+            color: #00A3FF;
+        }
+    }
+}
+.cstm-blu-btn {
+    padding: 8px 14px;
+    border-radius: 8px;
+    border: 1px solid #EAF8FF;
+    background: #EAF8FF;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+    color: #009BF3;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+

package/src/lib/components/task-info/taskinfo-edit/taskinfo-edit.component.spec.ts

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

package/src/lib/components/task-info/taskinfo-edit/taskinfo-edit.component.ts

@@ -0,0 +1,202 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import dayjs, { Dayjs } from 'dayjs';
+import { TraxService } from '../../../services/trax.service';
+import { GlobalStateService, PageInfoService } from 'tango-app-ui-global';
+import { ActivatedRoute } from '@angular/router';
+import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil } from "rxjs";
+import { TimePeriod } from 'ngx-daterangepicker-material/daterangepicker.component';
+import { HeaderFilter, ITask } from '../../task-configure/task-configure.interface';
+import { ToastService } from 'tango-app-ui-shared';
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
+@Component({
+  selector: 'lib-taskinfo-edit',
+  templateUrl: './taskinfo-edit.component.html',
+  styleUrl: './taskinfo-edit.component.scss'
+})
+export class TaskinfoEditComponent implements OnDestroy, OnInit {
+  destroy$ = new Subject();
+  openTime: string = '';
+  form: FormGroup;
+  checklistselectControl: FormControl;
+  checklistDropdown = [
+    { _id: 'High', checkListName: 'High' },
+    { _id: 'Medium', checkListName: 'Medium' },
+    { _id: 'Low', checkListName: 'Low' },
+  ];
+  headerData: HeaderFilter
+  currentTaskId: string
+  dayjs = dayjs
+  scheduleDate: any;
+  minDate: any = this.dayjs().format();
+  scheduleEndTime = new FormControl(this.getCurrentTime())
+  taskDetails: ITask | undefined
+  selectAllInput = new FormControl(false)
+  // removedUsers = new Set()
+  approversList: { name: string, value: string }[]
+  approver = new FormControl()
+  priorityType = new FormControl('high')
+  allowedStoreLocation = new FormControl(false)
+  restrictAttendance = new FormControl(false)
+  removedUsers: Set<string> = new Set<string>();
+
+  @Input() editRequestData: any;
+  constructor(private fb: FormBuilder,private traxService: TraxService, private pageInfo: PageInfoService,
+    private route: ActivatedRoute,private gs: GlobalStateService, private toastService: ToastService,  public activeModal: NgbActiveModal,
+  ) {
+    this.selectAllInput.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((val) => {
+      if (val === null || val === undefined) {
+        return
+      }
+      if (val) {
+        this.removedUsers.clear()
+      } else {
+        this.removedUsers.forEach((id) => {
+          this.onUserAssignChange(false, id);
+        });
+      }
+    })
+  }
+  
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  ngOnInit(): void {
+    this.scheduleDate = {startDate:this.dayjs().format('DD-MM-YYYY'),endDate:this.dayjs().format('DD-MM-YYYY')};
+    this.setPageData()
+    this.currentTaskId = this.editRequestData.sourceCheckList_id
+    this.gs.dataRangeValue
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data: any) => {
+        if (data?.client) {
+          this.headerData = data;
+          if (this.currentTaskId) {
+            this.getClientUser()
+            this.getTask(this.currentTaskId)
+          }
+        }
+      })
+  }
+
+  setPageData() {
+    this.pageInfo.setTitle("Tasks");
+    this.pageInfo.setDescription("");
+    this.pageInfo.setBreadcrumbs([
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: false },
+      { title: "Tango Trax", path: "/manage/trax/dashboard", isActive: false, isSeparator: true }
+    ]);
+  }
+
+  getTask(id: string) {
+    this.traxService.getTaskconfig(id, this.headerData?.client!).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if (res?.code === 200) {
+          this.taskDetails = res.data.checkListDetails
+          if (this.taskDetails?.scheduleDate) {
+            if( this.dayjs.utc(this.editRequestData?.date).isBefore(dayjs())){
+              this.minDate = this.dayjs(this.dayjs.utc(this.editRequestData?.date).format('YYYY-MM-DD')).format()
+            }
+            // this.minDate = this.dayjs(this.taskDetails.scheduleDate)
+            this.scheduleDate = {startDate:this.dayjs.utc(this.editRequestData.date).format('DD-MM-YYYY'),endDate:this.dayjs.utc(this.editRequestData.date).format('DD-MM-YYYY')};
+          }
+          if (!this.taskDetails?.removedUsers?.length) {
+            this.selectAllInput.setValue(true, { emitEvent: false })
+          }
+          if (this.taskDetails?.scheduleEndTime) {
+            this.scheduleEndTime.setValue(dayjs.utc(this.editRequestData?.date).format('HH:mm'))
+          }
+
+          if (this.taskDetails?.approver?.length) {
+            this.approver.setValue(this.taskDetails?.approver)
+          }
+
+          if (this.taskDetails?.priorityType) {
+            this.priorityType.setValue(this.taskDetails?.priorityType)
+          }
+
+          if (this.taskDetails?.allowedStoreLocation === true || this.taskDetails?.allowedStoreLocation === false) {
+            this.allowedStoreLocation.setValue(this.taskDetails?.allowedStoreLocation)
+          }
+
+          if (this.taskDetails?.restrictAttendance === true || this.taskDetails?.restrictAttendance === false) {
+            this.restrictAttendance.setValue(this.taskDetails?.restrictAttendance)
+          }
+
+        }
+      }
+    })
+  }
+  getCurrentTime(): string {
+    const now = new Date();
+    const hours = now.getHours().toString().padStart(2, '0');
+    const minutes = now.getMinutes().toString().padStart(2, '0');
+    return `${hours}:${minutes}`;
+  }
+
+  get dueDateFormatted(): string {
+    return this.dayjs(this.scheduleDate.startDate,'DD-MM-YYYY')?.format('DD MMM YYYY');
+  }
+
+  get dueTimeFormatted(): string {
+    return dayjs(this.scheduleEndTime.value, 'HH:mm').format('h:mm A');
+  }
+  onUserAssignChange(event: boolean, id: string) {
+    if (!event) {
+      this.removedUsers.add(id)
+    }else{
+      this.removedUsers.delete(id)
+    }
+  }
+  onApproveAdded(event: any) {
+    this.approver.setValue(event)
+  }
+
+  getClientUser() {
+    this.traxService.getClientUser(this.headerData.client).pipe(takeUntil(this.destroy$)).subscribe((res: any) => {
+      if (res && res.code == 200) {
+        this.approversList = res.data.map((item: any) => { return { name: item.userName, value: item.email } });
+      }
+      else {
+        this.approversList = [];
+      }
+    });
+  }
+  
+  onSubmit() {
+    const payload:any = {
+      scheduleDate: this.dayjs(this.scheduleDate.startDate,'DD-MM-YYYY').format('YYYY-MM-DD'),
+      scheduleEndTime: this.dayjs(this.scheduleEndTime.value, 'HH:mm').format('hh:mm  A'),
+      approver: this.approver.value ?? [],
+      priorityType: this.priorityType.value,
+      allowedStoreLocation: this.editRequestData.allowedStoreLocation,
+      restrictAttendance: this.editRequestData.restrictAttendance,
+      taskId:this.currentTaskId,
+      userEmail: this.editRequestData.userEmail,
+      storeName:this.editRequestData.storeName,
+      store_id:this.editRequestData.store_id,
+      previousEndDate:this.editRequestData.date
+    }
+    this.traxService.getTaskUpdate(payload).pipe(takeUntil(this.destroy$)).subscribe({
+      next: (res: any) => {
+        if(res){
+          if (res.code === 200) {
+            this.toastService.getSuccessToast(res?.data?.message || 'Task Reiniated successfully') 
+            this.activeModal.close();
+        }
+        }else{
+          this.toastService.getErrorToast('Invalid TaskId');
+        }
+      },
+      error: (err:any)=>{
+        console.error('Error:', err);
+        this.toastService.getErrorToast('Failed to update the task. Please try again.');
+      }
+    })
+  }
+  closePopupAndReloadData() {
+    this.activeModal.close();
+  }
+
+}

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

@@ -0,0 +1 @@
+<router-outlet></router-outlet>