tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/layout/toolbar/datepicker/datepicker.component.scss

@@ -0,0 +1,149 @@
+.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;
+          }
+}

package/src/lib/modules/layout/toolbar/datepicker/datepicker.component.spec.ts

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

package/src/lib/modules/layout/toolbar/datepicker/datepicker.component.ts

@@ -0,0 +1,183 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core";
+import dayjs from "dayjs";
+import "dayjs/locale/en";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import { LayoutService } from "tango-app-ui-global";
+import { AuthService } from "../../../../services/auth.service";
+import { Subscription } from "rxjs";
+import { GlobalStateService } from "tango-app-ui-global";
+@Component({
+  selector: "lib-datepicker",
+  templateUrl: "./datepicker.component.html",
+  styleUrl: "./datepicker.component.scss",
+})
+export class DatepickerComponent implements OnDestroy, OnInit {
+  dayjs = dayjs;
+  private unsubscribe: Subscription[] = [];
+  isCustomDate = (m: dayjs.Dayjs) => {
+    const isValidDate =  m > this.dayjs();    
+    return isValidDate ? 'invalid-date' : false;
+}
+  selectedDateRange: any = {};
+  selectedFilters: any = {
+    client: null,
+    clientName:null,
+    clients: [],
+    store: null,
+    stores: [],
+    date: null,
+  };
+  users: any;
+  
+
+  constructor(
+    private layout: LayoutService,
+    private gs: GlobalStateService,
+    private service: AuthService,
+    private cd: ChangeDetectorRef
+  ) {}
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+  }
+
+  ngOnInit(): void {
+    if ("user-info" in localStorage) {
+      const userData: any = JSON.parse(
+        localStorage.getItem("user-info") || "{}"
+      );
+      this.users = userData;
+    }  
+    if ("header-filters" in localStorage) {
+      const headerFilters: any = JSON.parse(
+        localStorage.getItem("header-filters") || "{}"
+      );
+      this.selectedFilters.client = this.users.clientId;
+      this.selectedFilters.clients = [this.users.clientId];
+      this.selectedFilters.clientName = headerFilters.clientName;
+      this.selectedFilters.store = headerFilters.store;
+      this.selectedFilters.date = headerFilters.date;
+
+      this.selectedDateRange = {
+        startDate:this.dayjs( headerFilters?.date.startDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+        endDate: this.dayjs( headerFilters?.date.endDate, "YYYY-MM-DD").format("DD-MM-YYYY"),
+      };
+   
+      localStorage.setItem(
+        "header-filters",
+        JSON.stringify(this.selectedFilters)
+      );
+      this.gs.dataRangeValue.next(this.selectedFilters);
+    } else {
+      this.selectedFilters.client = this.users.clientId;
+      this.selectedFilters.clients = [this.users.clientId];
+                 this.selectedDateRange = {
+  startDate: this.dayjs("2025-09-09").format("DD-MM-YYYY"),
+  endDate: this.dayjs("2025-09-09").format("DD-MM-YYYY"),
+};
+
+var datetime = {
+  startDate: this.dayjs("2025-09-09").format("YYYY-MM-DD"),
+  endDate: this.dayjs("2025-09-09").format("YYYY-MM-DD"),
+};
+      // this.selectedDateRange = {
+      //   startDate: this.dayjs().subtract(2, "days").format("DD-MM-YYYY"), // Yesterday
+      //   endDate: this.dayjs().subtract(2, "days").format("DD-MM-YYYY"),   // Yesterday
+      // };
+  
+      // // Set datetime to yesterday's date as well
+      // var datetime = {
+      //   startDate: this.dayjs().subtract(2, "days").format("YYYY-MM-DD"), // Yesterday
+      //   endDate: this.dayjs().subtract(2, "days").format("YYYY-MM-DD"),   // Yesterday
+      // };
+      // var datetime = {
+      //   startDate: this.dayjs().subtract(1, 'days').format("YYYY-MM-DD"), // Yesterday
+      //   endDate: this.dayjs().subtract(1, 'days').format("YYYY-MM-DD"),   // Yesterday
+      // };
+      this.selectedFilters.date = datetime;
+      localStorage.setItem(
+        "header-filters",
+        JSON.stringify(this.selectedFilters)
+      );
+      this.gs.dataRangeValue.next(this.selectedFilters);
+    }
+    this.getUserInfo(this.selectedFilters.client)
+  }
+  getUserInfo(client:any){
+    let obj ={
+        clientId: client ? client :''
+    }
+    if(client){
+      this.service.getHeaderUsers(obj).subscribe({
+        next: (e) => {
+          localStorage.setItem(
+            "usersEmail-info",
+            JSON.stringify(e?.data?.userEmailData || [])
+          );
+        } 
+      })
+    }
+  }
+  ranges: any = {
+    Today: [this.dayjs(), this.dayjs()],
+    Yesterday: [
+      this.dayjs().subtract(1, "days"),
+      this.dayjs().subtract(1, "days"),
+    ],
+    "This Week": [this.dayjs().subtract(7, "days"), this.dayjs().subtract(1, "days")],
+    "Last Week": [
+      this.dayjs().subtract(14, "days").startOf("days"),
+      this.dayjs().subtract(8, "days").endOf("days"),
+    ],
+   "This Month": [
+    this.dayjs().subtract(30, "days"), // Start date is 30 days before today
+    this.dayjs().subtract(1, "days") // End date is Yesterday
+  ],
+    "Last Month": [
+      this.dayjs().subtract(1, "month").startOf("month"),
+      this.dayjs().subtract(1, "month").endOf("month"),
+    ],
+  };
+
+  onStartDateChange(event: any) {
+    if (this.dayjs(event.startDate).isValid()) {
+      this.isCustomDate = (m: dayjs.Dayjs) => {
+        const isValidDate =
+          m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
+        return isValidDate ? "invalid-date" : false;
+      };
+    }
+  }
+
+  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;
+      }
+    } else {
+      const headerFilters: any = JSON.parse(
+        localStorage.getItem("header-filters") || "{}"
+      );
+      this.selectedFilters.date = headerFilters.date;
+    }
+   
+    this.selectedFilters.client = this.users.clientId;
+    this.selectedFilters.clients = [this.users.clientId];
+    this.selectedFilters.date = this.selectedFilters.date;
+    this.gs.dataRangeValue.next(this.selectedFilters);
+    localStorage.setItem(
+      "header-filters",
+      JSON.stringify(this.selectedFilters)
+    );
+  }
+}

package/src/lib/modules/layout/toolbar/extended/extended.component.html

@@ -0,0 +1,100 @@
+<!--begin::Label-->
+<span class="fs-7 fw-bold text-gray-700 pe-4 d-none d-md-block">Team:</span>
+<!--end::Label-->
+
+<!--begin::Users-->
+<div class="symbol-group symbol-hover flex-shrink-0 me-2">
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <div class="symbol-label fw-bold bg-warning text-inverse-warning">A</div>
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-1.jpg" alt="" />
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-2.jpg" alt="" />
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <div class="symbol-label fw-bold bg-primary text-inverse-primary">S</div>
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-5.jpg" alt="" />
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <div class="symbol-label fw-bold bg-danger text-inverse-danger">P</div>
+  </div>
+  <!--end::User-->
+
+  <!--begin::User-->
+  <div class="symbol symbol-circle symbol-35px">
+    <img src="./assets/media/avatars/300-20.jpg" alt="" />
+  </div>
+  <!--end::User-->
+</div>
+<!--end::Users-->
+
+<!--begin::Button-->
+<div data-bs-toggle="tooltip" data-bs-placement="top" data-bs-trigger="hover" title="Invite a team member">
+  <a href="#" class="btn btn-sm btn-icon">
+    <lib-keenicon name="plus-square" class="fs-2hx text-success"></lib-keenicon>
+  </a>
+</div>
+<!--end::Button-->
+<!--end::Toolbar start-->
+
+<!--begin::Toolbar end-->
+<div class="d-flex align-items-center overflow-auto">
+  <!--begin::Search-->
+  <div class="position-relative my-1">
+    <lib-keenicon name="magnifier" class="fs-3 text-gray500 position-absolute top-50 translate-middle ps-10"></lib-keenicon>
+    <input type="text" class="form-control form-control-sm form-control-solid w-150px ps-10" name="Search Team" value=""
+      placeholder="Search Team" />
+  </div>
+  <!--end::Search-->
+
+  <!--begin::Separartor-->
+  <div class="bullet bg-secondary h-35px w-1px mx-6"></div>
+  <!--end::Separartor-->
+
+  <!--begin::Label-->
+  <span class="fs-7 fw-bold text-gray-700 flex-shrink-0 pe-4 d-none d-md-block">Sort By:</span>
+  <!--end::Label-->
+
+  <!--begin::Select-->
+  <select class="form-select form-select-sm w-125px form-select-solid me-6" data-control="select2"
+    data-placeholder="Latest" data-hide-search="true">
+    <option value=""></option>
+    <option value="1" selected>Latest</option>
+    <option value="2">In Progress</option>
+    <option value="3">Done</option>
+  </select>
+  <!--end::Select-->
+
+  <!--begin::Actions-->
+  <div class="d-flex align-items-center">
+    <button type="button" class="btn btn-sm btn-icon btn-light-primary me-3" data-bs-toggle="tooltip"
+      data-bs-placement="top" title="Enable grid view">
+      <lib-keenicon name="element-11" class="fs-3 text-primary"></lib-keenicon>
+    </button>
+
+    <button type="button" class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top"
+      title="Enable row view">
+      <lib-keenicon name="row-horizontal" class="fs-3 text-gray400"></lib-keenicon>
+    </button>
+  </div>
+  <!--end::Actions-->

package/src/lib/modules/layout/toolbar/extended/extended.component.spec.ts

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

package/src/lib/modules/layout/toolbar/extended/extended.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-extended',
+  templateUrl: './extended.component.html',
+  styleUrls: ['./extended.component.scss'],
+})
+export class ExtendedComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}