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

package/src/lib/components/activity-log-v2/log-view-popup/date-range-picker/date-range-picker.component.spec.ts

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

package/src/lib/components/activity-log-v2/log-view-popup/date-range-picker/date-range-picker.component.ts

@@ -0,0 +1,141 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import { GlobalStateService } from "tango-app-ui-global";
+
+@Component({
+  selector: 'lib-date-range-picker',
+  templateUrl: './date-range-picker.component.html',
+  styleUrl: './date-range-picker.component.scss'
+})
+export class DateRangePickerComponent {
+  @Output() dateChange = new EventEmitter<any>();
+  dayjs = dayjs;
+  selectedClient:any
+   isCustomDate = (m: dayjs.Dayjs) => {
+      const isValidDate = m > this.dayjs();
+      return isValidDate ? "invalid-date" : false;
+    };
+  selectedDateRange: any = {
+    startDate: dayjs().subtract(2, 'days'),
+    endDate: dayjs().subtract(0, "days"),
+  };
+  selectedFilters: any = {
+    client: null,
+    clientName: null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+    group: [],
+    location: [],
+  };
+  ranges: any = {};
+    constructor(
+      public gs: GlobalStateService,
+    ) {}
+  @Input() value:number;
+
+  ngOnInit(): void {
+    this.selectedClient = JSON.parse(
+      localStorage.getItem("header-filters") || "{}"
+    );
+    this.getDateRanges();
+  }
+
+ getDateRanges(): any {
+ 
+   if (this.selectedClient?.client === "11") {
+     this.ranges = {
+       Today: [dayjs(), dayjs()],
+       Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+      //  'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
+      //  'Last Week': [
+      //    dayjs().subtract(14, 'days').startOf('day'),
+      //    dayjs().subtract(8, 'days').endOf('day'),
+      //  ],
+     };
+   } else {
+     this.ranges = {
+      Today: [dayjs(), dayjs()],
+        Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+        // 'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
+        // 'Last Week': [
+        //   dayjs().subtract(14, 'days').startOf('day'),
+        //   dayjs().subtract(8, 'days').endOf('day'),
+        // ],
+        'This Month': [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
+        'Last Month': [
+          dayjs().subtract(1, 'month').startOf('month'),
+          dayjs().subtract(1, 'month').endOf('month'),
+        ],
+     };
+   }
+ 
+ }
+
+  resetValidation() {
+    this.isCustomDate = (m: dayjs.Dayjs) => {
+      // Check if the given date is before yesterday
+      return m.isAfter(this.dayjs(), 'day') ? 'invalid-date' : false;
+    };
+  }
+  
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      // traxDateRange
+      if (this.selectedClient?.client === "11") {
+        this.isCustomDate = (m: dayjs.Dayjs) => {
+          const isValidDate =
+            m > this.dayjs() || m > this.dayjs(event.startDate.add(2, "days"));
+          return isValidDate ? "invalid-date" : false;
+        };
+      } else {
+        this.isCustomDate = (m: dayjs.Dayjs) => {
+          const isValidDate =
+            m > this.dayjs() || m > this.dayjs(event.startDate.add(30, "days"));
+          return isValidDate ? "invalid-date" : false;
+        };
+      }
+    }
+    // this.emitDateChange();
+  }
+  emitDateChange(event:any) {
+    if(event.startDate && event.endDate) {      
+      this.dateChange.emit({ startDate: dayjs(event.startDate).format('YYYY-MM-DD'), endDate: dayjs(event.endDate).format('YYYY-MM-DD')});
+    }
+    else {
+      this.dateChange.emit({startDate: dayjs().subtract(6, "days").format("YYYY-MM-DD"),
+            endDate: dayjs().subtract(0, "days").format("YYYY-MM-DD")});
+    }
+    this.resetValidation();
+   
+  }
+  // datechange(event: any) {
+  //   if (event && event.startDate && event.endDate) {
+  //     if (
+  //       this.dayjs(event.startDate).isValid() &&
+  //       this.dayjs(event.endDate).isValid()
+  //     ) {
+  //       this.selectedDateRange.startDate = event.startDate;
+  //       this.selectedDateRange.endDate = event.endDate;
+  //       var datetime = {
+  //         startDate: this.dayjs(event.startDate, "DD-MM-YYYY").format(
+  //           "YYYY-MM-DD"
+  //         ),
+  //         endDate: this.dayjs(event.endDate, "DD-MM-YYYY").format("YYYY-MM-DD"),
+  //       };
+  //       this.selectedFilters.date = datetime;
+  //       localStorage.setItem(
+  //         "header-filters",
+  //         JSON.stringify(this.selectedFilters)
+  //       );
+  //       this.resetValidation();
+  //       // window.location.reload()
+  //     this.gs.dataRangeValue.next(this.selectedFilters);
+  //     }
+  //   } 
+ 
+  // }
+
+}

package/src/lib/components/activity-log-v2/log-view-popup/store-user-dropdown/store-user-dropdown.component.html

@@ -0,0 +1,42 @@
+<div class="relative inline-block text-left">
+  <!-- Display first 5 stores inline -->
+  <div class="flex flex-wrap gap-2 mb-2">
+    <span *ngFor="let item of items.slice(0, 5); let last = last" class="py-1">
+      {{ item }}<span *ngIf="!last">,</span>
+    </span>
+  </div>
+
+  <!-- Show dropdown only if more than 5 stores exist -->
+  <span *ngIf="items.length > 5" 
+        (click)="toggleDropdown()" 
+        [ngClass]="isOpen ? 'showlessbutton' : 'showmorebutton'"
+        class="px-4 py-2 cursor-pointer flex items-center gap-2">
+    {{ isOpen ? 'Show Less' : 'Show More' }}
+    <svg *ngIf="!isOpen" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+    <svg *ngIf="isOpen" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path d="M15 12.5L10 7.5L5 12.5" stroke="#009BF3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  </span>
+
+  <!-- Dropdown -->
+  <div *ngIf="isOpen" class="absolute left-0 mt-2 w-40 z-10 dropdownbar">
+    <!-- Header with Close Button -->
+    <div class="storeend px-4 py-2 flex justify-between items-center">
+      <span class="storestext font-semibold">{{ title }}</span>
+      <span (click)="toggleDropdown()" class="cursor-pointer">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path d="M18 6L6 18M6 6L18 18" stroke="#009BF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </span>
+    </div>
+
+    <!-- Extra stores in dropdown -->
+    <div class="max-h-60 overflow-y-auto">
+      <div *ngFor="let item of items.slice(5)" class="px-4 py-2 hover:bg-gray-200 cursor-pointer">
+        {{ item }}
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/components/activity-log-v2/log-view-popup/store-user-dropdown/store-user-dropdown.component.scss

@@ -0,0 +1,49 @@
+.max-h-60 {
+    max-height: 15rem;
+  }
+  .showlessbutton{
+justify-content: center;
+align-items: center;
+gap: 4px;
+border-radius: 8px;
+border: 1px solid var(--Primary-700, #009BF3);
+color: var(--Primary-700, #009BF3);
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px; /* 142.857% */
+text-transform: capitalize;
+
+  }
+  .storestext{
+    color: var(--Primary-700, #009BF3);
+font-size: 18px;
+font-style: normal;
+font-weight: 500;
+line-height: 28px; /* 155.556% */
+  }
+  .storeend{
+    display: flex;
+    justify-content: space-between !important;
+    border-bottom: 1px solid var(--Primary-700, #009BF3);
+  }
+  .dropdownbar{
+    margin-right: 32%;
+    border-radius: 8px;
+border: 1px solid var(--Gray-400, #98A2B3);
+background: #FFF;
+  }
+  .showmorebutton{
+justify-content: center;
+align-items: center;
+gap: 4px;
+border-radius: 8px;
+border: 1px solid var(--Gray-500, #667085);
+color: var(--Gray-500, #667085);
+font-family: Inter;
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px; /* 142.857% */
+text-transform: capitalize;
+  }

package/src/lib/components/activity-log-v2/log-view-popup/store-user-dropdown/store-user-dropdown.component.spec.ts

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

package/src/lib/components/activity-log-v2/log-view-popup/store-user-dropdown/store-user-dropdown.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-store-user-dropdown',
+  templateUrl: './store-user-dropdown.component.html',
+  styleUrl: './store-user-dropdown.component.scss'
+})
+export class StoreUserDropdownComponent {
+  // @Input() title: string = 'Items';  // Default title (Stores, Approvers, etc.)
+  @Input() title: string = '';
+  @Input() items: string[] = [];
+  isOpen = false;
+  // showAll = false;
+
+  toggleDropdown() {
+    this.isOpen = !this.isOpen;
+  }
+
+  // toggleShowMore() {
+  //   this.showAll = !this.showAll;
+  // }
+}