tango-app-ui-manage-tickets 3.7.0-beta.6 → 3.7.0-beta.61

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

@@ -0,0 +1,100 @@
+<div class="modal fade show d-block" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content merge-ticket-modal">
+
+            <!-- Header -->
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title">Merge ticket</h5>
+                <button type="button" class="btn-close" aria-label="Close" (click)="closepopup()"></button>
+            </div>
+
+            <!-- Body -->
+            <div class="modal-body">
+
+                <!-- Info banner -->
+                <div class="alert merge-info d-flex">
+                    <div class="me-3 mt-1">
+                        <i class="bi bi-info-circle"></i>
+                    </div>
+                    <div>
+                        <p class="mb-1">
+                            This ticket has already been audited internally by Tango.
+                        </p>
+                        <p class="mb-0">
+                            Clicking <b>‘Merge’</b> will merge the Tango audit with this ticket.
+                            If needed, you can perform a new audit by clicking
+                            <b>‘Start Audit’</b>.
+                        </p>
+                    </div>
+                </div>
+
+                <!-- Cards -->
+                <div class="row g-3 mt-2">
+                    <!-- Central Ops -->
+                    <div class="col-12 col-md-6">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="card-title mb-3 fw-semibold">Central Ops</div>
+                                <div class="d-flex justify-content-between align-items-end mb-1">
+                                    <div>
+                                        <div class="value">{{centralOpsData?.revicedFootfall}}</div>
+                                        <div class="label">Footfall</div>
+                                    </div>
+                                    <div class="text-end">
+                                        <div class="value text-primary">
+                                           {{centralOpsData?.revicedPerc}}
+                                            <span class="arrow" *ngIf="centralOpsData?.revicedFootfall<tangoData?.revicedFootfall" >
+                                                ↓
+                                            </span>
+                                             <span class="arrow" *ngIf="centralOpsData?.revicedFootfall>tangoData?.revicedFootfall">
+                                                ↑
+                                            </span>
+                                        </div>
+                                        <div class="label">Accuracy</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Tango -->
+                    <div class="col-12 col-md-6">
+                        <div class="card h-100">
+                            <div class="card-body">
+                                <div class="card-title mb-3 fw-semibold">Tango</div>
+                                <div class="d-flex justify-content-between align-items-end mb-1">
+                                    <div>
+                                        <div class="value">{{tangoData?.revicedFootfall}}</div>
+                                        <div class="label">Footfall</div>
+                                    </div>
+                                    <div class="text-end">
+                                        <div class="value text-primary">
+                                           {{tangoData?.revicedPerc}}
+                                            <span class="arrow" *ngIf="centralOpsData?.revicedFootfall>tangoData?.revicedFootfall" >
+                                                ↓
+                                            </span>
+                                             <span class="arrow" *ngIf="centralOpsData?.revicedFootfall<tangoData?.revicedFootfall">
+                                                ↑
+                                            </span>
+                                        </div>
+                                        <div class="label">Accuracy</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="modal-footer border-0 pt-0">
+                <button type="button" class="btn btn-outline-secondary" (click)="submit('start')">
+                    Start Audit
+                </button>
+                <button type="button" class="btn btn-primary" (click)="submit('merge')">
+                    Merge
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,34 @@
+.merge-ticket-modal {
+  border-radius: 16px;
+}
+
+.merge-info {
+  border: 1px dashed #a9c4ff;
+  background: #f5f9ff;
+  border-radius: 10px;
+  font-size: 13px;
+  color: #008EDF;
+}
+
+.merge-info i {
+  font-size: 18px;
+}
+
+.card {
+  border-radius: 12px;
+}
+
+.card .value {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.card .label {
+  font-size: 12px;
+  color: #6c757d;
+}
+
+.arrow {
+  font-size: 16px;
+  margin-left: 4px;
+}

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

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

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

@@ -0,0 +1,48 @@
+import { Component, Input } from '@angular/core';
+
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+@Component({
+  selector: 'lib-ticketclosepopup',
+  templateUrl: './ticketclosepopup.component.html',
+  styleUrl: './ticketclosepopup.component.scss'
+})
+export class TicketclosepopupComponent {
+
+  @Input() tangoTicket: any;
+  @Input() storeTicket: any;
+  centralOpsData: any
+  tangoData: any
+
+
+  constructor(public activeModal: NgbActiveModal) {
+
+
+  }
+
+
+  ngOnInit(): void {
+    console.log("🚀 ~ TicketclosepopupComponent ~ tangoTicket:", this.tangoTicket)
+    console.log("🚀 ~ TicketclosepopupComponent ~ storeTicket:", this.storeTicket)
+    if (this.storeTicket && this.storeTicket?.mappingInfo.length > 0) {
+      this.centralOpsData = this.storeTicket.mappingInfo.filter((data: any) => data.type != "tangoreview")[0]
+      console.log("🚀 ~ TicketclosepopupComponent ~ ngOnInit ~ this.centralOpsData:", this.centralOpsData)
+    }
+    if (this.tangoTicket && this.tangoTicket?.mappingInfo.length > 0) {
+      this.tangoData = this.tangoTicket.mappingInfo.filter((data: any) => data.type === "tangoreview")[0]
+      console.log("🚀 ~ TicketclosepopupComponent ~ ngOnInit ~ this.tangoData:", this.tangoData)
+    }
+
+
+
+  }
+  submit(type: any) {
+    this.activeModal.close({ type: type });
+  }
+
+  closepopup() {
+    this.activeModal.close({ type: 'close' });
+  }
+
+
+
+}