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

package/src/lib/components/activity-log-v2/log-view-popup/view-action/view-action.component.scss

@@ -0,0 +1,217 @@
+.logheader{
+display: flex;
+padding: 16px;
+justify-content: space-between;
+align-items: center;
+flex: 1 0 0;
+border-radius: 6px;
+opacity: 0.8;
+background: var(--Primary-100, #DAF1FF);
+}
+.logheadertext{
+    color: var(--Primary-800, #008EDF);
+text-align: center;
+font-family: 'Inter';
+font-size: 18px;
+font-style: normal;
+font-weight: 500;
+line-height: 28px; /* 155.556% */
+}
+.questext{
+    color: var(--Gray-900, #101828);
+font-family: 'Inter';
+font-size: 18px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 155.556% */
+}
+.quessubtext{
+    color: var(--Gray-700, #344054);
+font-family: 'Inter';
+font-size: 18px;
+font-style: normal;
+font-weight: 500;
+line-height: 28px;
+}
+.checklistframe{
+    // display: flex;
+align-items: flex-start;
+align-self: stretch;
+border-radius: 16px !important;
+border: 1px solid var(--Gray-100, #F2F4F7);
+}
+.table th, .table td {
+    vertical-align: middle;
+    text-align: start;
+  }
+  
+  .image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+  }
+  
+  .image-grid img {
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 5px;
+  }
+  
+.questionfieldtext{
+    color: var(--Gray-900, #101828) !important;
+font-family: 'Inter';
+font-size: 18px !important;
+font-weight: 600 !important;
+line-height: 28px; /* 155.556% */
+border: 1px solid var(--Gray-100, #F2F4F7) !important;
+text-align: start !important;
+width: 150px;
+}
+.frametext{
+    color: var(--Gray-500, #667085) !important;
+font-family: 'Inter';
+font-size: 16px !important;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 24px; /* 150% */
+background: var(--Gray-200, #EAECF0) !important;
+text-align: start !important;
+}
+.frametext1{
+    color: var(--Gray-500, #667085) !important;
+font-family: 'Inter';
+font-size: 16px !important;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 24px; /* 150% */
+background: var(--Gray-100, #F2F4F7) !important;
+}
+.frametextprimary{
+    background: var(--Primary-50, #EAF8FF) !important;
+    color: var(--Primary-600, #00A3FF) !important;
+font-family: 'Inter';
+font-size: 16px !important;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 24px; /* 150% */
+}
+.Previousfieldtext{
+    color: var(--Gray-500, #667085) !important;
+font-family: 'Inter';
+font-size: 16px !important;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 24px; /* 150% */
+background: var(--Gray-100, #F2F4F7) !important;
+border: 1px solid var(--Gray-100, #F2F4F7) !important;
+text-align: start !important;
+}
+.changesfieldtext{
+    color: var(--Black, #101828) !important;
+font-family: 'Inter';
+font-size: 16px !important;
+font-style: normal;
+font-weight: 500 !important;
+line-height: 24px; /* 150% */
+border: 1px solid var(--Gray-100, #F2F4F7) !important;
+text-align: start !important;
+}
+.changesfieldimg{
+    border-radius: 8px;
+border: 1px solid var(--Gray-100, #F2F4F7);
+}
+.checklistscroll{
+    overflow-y: scroll;
+    min-height: 250px;
+    max-height: 600px;
+}
+// table td {
+//     // height: 44px !important;
+//     padding: 12px 10px !important;
+// }
+.configPreviousfieldtext{
+    color: var(--Gray-500, #667085) !important;
+    font-family: 'Inter';
+    font-size: 16px !important;
+    font-style: normal;
+    font-weight: 500 !important;
+    line-height: 24px; /* 150% */
+    background: var(--Gray-100, #F2F4F7) !important;
+    border: 1px solid var(--Gray-100, #F2F4F7) !important;
+    text-align: start !important;
+}
+.newlineheight{
+    line-height: 50px !important;
+}
+.previouslineheight{
+    line-height: 50px !important;
+}
+.w-50 {
+    width: 50px !important;
+}
+.table-responsive {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed; /* Ensures equal column width distribution */
+}
+
+th, td {
+    text-align: left;
+    padding: 12px;
+    // border: 1px solid #ddd;
+    vertical-align: middle;
+    word-wrap: break-word;
+}
+
+th {
+    background-color: #f4f4f4;
+    font-weight: bold;
+}
+
+/* Setting fixed widths for columns */
+.frametext1, .questionfieldtext {
+    width: 22%; /* Adjust if needed */
+}
+
+.frametext, .configPreviousfieldtext,
+.frametextprimary, .changesfieldtext {
+    width: 40%;
+}
+
+/* Responsive handling */
+@media (max-width: 1024px) {
+    th, td {
+        font-size: 14px;
+        padding: 10px;
+    }
+}
+
+@media (max-width: 768px) {
+    table {
+        display: block;
+    }
+    thead {
+        display: none; /* Hide headers for smaller screens */
+    }
+    tbody tr {
+        display: flex;
+        flex-direction: column;
+        // border: 1px solid #ddd;
+        margin-bottom: 10px;
+    }
+    td {
+        display: flex;
+        justify-content: space-between;
+        padding: 8px;
+        font-size: 14px;
+    }
+}
+

package/src/lib/components/activity-log-v2/log-view-popup/view-action/view-action.component.spec.ts

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

package/src/lib/components/activity-log-v2/log-view-popup/view-action/view-action.component.ts

@@ -0,0 +1,122 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import dayjs from "dayjs";
+
+@Component({
+  selector: 'lib-view-action',
+  templateUrl: './view-action.component.html',
+  styleUrl: './view-action.component.scss'
+})
+export class ViewActionComponent {
+  @Input() logDetails: any;
+  @Input() checkListName: string;
+  @Input() storeName: string;
+  @Input() actionType: string;
+  @Input() receivedData!: string;
+
+  updatedChecklistName: any;
+  updatedChecklistDescription: any;
+  updatedSectionNames: any[] = [];
+  addedQuestions: any[] = [];
+  editedQuestions: any[] = [];
+  deletedQuestions: any[] = [];
+  schedulePreviousRepeats: string;
+  schedulePreviousTime: string;
+  schedulePreviousOccurs: string[];
+  scheduleNewRepeats: string;
+  scheduleNewTime: string;
+  scheduleNewOccurs: string[];
+  formattedDate: string = '-';
+
+  constructor(public activeModal: NgbActiveModal) {
+    
+    // logDetails = {
+    //   storeAdded: ["LKST011", "LKST022", "LKST3444", "LKST455", "LKST566", "LKST666"]
+    // };
+  }
+  // ngOnChanges(changes: SimpleChanges) {
+  //   if (changes['receivedData']) {
+  //     console.log("view:", this.receivedData);
+  //   }
+  // }
+
+  ngOnInit() {
+    console.log("Rviure", this.receivedData);
+    const dateString = this.logDetails?.schedule?.new?.specificDate;
+    if (dateString) {
+      this.formattedDate = dayjs(dateString, 'D-M-YYYY').format('DD MMM YYYY');
+    }
+    
+    if (this.logDetails) {
+      this.updatedChecklistName = this.logDetails.updatedChecklistName;
+      this.updatedChecklistDescription = this.logDetails.updatedChecklistDescription;
+      this.updatedSectionNames = this.logDetails.updatedSectionName || [];
+      this.addedQuestions = this.logDetails.questionAdd || [];
+      this.editedQuestions = this.logDetails.questionEdit || [];
+      this.deletedQuestions = this.logDetails.questionDelete || [];
+      this.schedulePreviousRepeats = this.logDetails.schedule?.previous?.repeats || '';
+      this.schedulePreviousTime = this.logDetails.schedule?.previous?.time || '';
+      this.schedulePreviousOccurs = this.logDetails.schedule?.previous?.occurs || [];
+      this.scheduleNewRepeats = this.logDetails.schedule?.new?.repeats || '';
+      this.scheduleNewTime = this.logDetails.schedule?.new?.time || '';
+      this.scheduleNewOccurs = this.logDetails.schedule?.new?.occurs || [];
+    }
+  }
+
+  formatDate(dateString: string | undefined | null): string {
+    if (!dateString) return 'Invalid Date';
+  
+    const date = new Date(dateString);
+    if (isNaN(date.getTime())) return 'Invalid Date'; // Check if date is valid
+  
+    const options: Intl.DateTimeFormatOptions = { day: '2-digit', month: 'short', year: 'numeric' };
+    return date.toLocaleDateString('en-GB', options); // Outputs: "26 Mar 2025"
+  }
+  formatDateString(dateStr: string): string {
+    const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const [day, month, year] = dateStr.split('-').map(Number);
+    return `${day} ${months[month - 1]} ${year}`;
+  }
+  
+  getWeekOrdinal(value: number): string {
+    const ordinalMap: { [key: number]: string } = {
+      1: 'First',
+      2: 'Second',
+      3: 'Third',
+      4: 'Fourth',
+      5: 'Last'
+    };
+    return ordinalMap[value] || value.toString(); // Default to number if not mapped
+  }
+  scheduleWeeksArray(): string[] {
+    const weeks: string | undefined = this.logDetails?.schedule?.new?.scheduleRepeatedMonthWeek;
+    return weeks ? weeks.split(',').map((item: string) => item.trim()) : [];
+}
+
+parseWeekNumber(value: string): number {
+  return parseInt(value, 10) || 0; // Convert to number or default to 0
+}
+closePopup() {
+  this.activeModal.close();
+}
+
+getAnswerTypeLabel(answerType: string): string {
+  const typeMappings: { [key: string]: string } = {
+    descriptive: 'Descriptive Answer',
+    'yes/no': 'A/B Question',
+    multiplechoicesingle: 'Multiple Choice Question - Single Answer',
+    multiplechoicemultiple: 'Multiple Choice Question - Multiple Answer',
+    descriptiveImage: 'Capture Image with Description',
+    image: 'Capture Image as Answer',
+    video: 'Capture Video as Answer',
+    multipleImage: 'Capture Multiple Image',
+    date: 'Date - DD/MM/YYYY',
+    linearscale: 'Linear Scale',
+    time: 'Time',
+  };
+
+  return typeMappings[answerType] || answerType || '-';
+}
+
+
+}