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

package/src/lib/modules/layout/toolbar/metrics-header/metrics-header.component.html

@@ -0,0 +1,311 @@
+<div class="me-3">
+    <label *ngIf="selectedCountriesLabel()" class="badge badge-light-default mx-2">{{selectedCountriesLabel()}} 
+        <span class="cursor-pointer" (click)="removeCountry()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg></span>
+    </label>
+    <label *ngIf="selectedLocationsLabel()" class="badge badge-light-default mx-2">{{selectedLocationsLabel()}} 
+        <span class="cursor-pointer" (click)="removeLocation()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg></span>
+    </label>
+    <label *ngIf="selectedGroupsLabel()"  class="badge badge-light-default mx-2">{{selectedGroupsLabel()}} 
+        <span class="cursor-pointer" (click)="removeGroup()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg></span>
+    </label>
+    <label  class="badge badge-light-default">{{selectedStoresLabel()}}</label>
+      <label class="badge badge-light-default mx-2">{{selectedZonesLabel()}} 
+        <!-- <span class="cursor-pointer" (click)="removeGroup()"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg></span> -->
+    </label>
+</div>
+
+
+<div class="wrapper me-3" *ngIf="(gs.userAccess | async)?.userType === 'tango'">
+<lib-select [items]="clientList" [multi]="false" [searchField]="'clientName'" [disabled]="false" [idField]="'clientId'"
+(selected)="onClientSelect($event)" [selectedValues]="[selectedClient]"></lib-select>
+</div>
+<div class="d-flex align-items-center position-relative my-1">
+    <span class="svg-icon svg-icon-1 position-absolute ms-3">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path
+                d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </span>
+    <input class="fx-date-range form-control ps-14" style="min-width: 260px !important;" type="text" matInput
+        ngxDaterangepickerMd [drops]="'down'" [opens]="'right'" [ranges]="ranges" [showCustomRangeLabel]="true" [autoApply]="true"
+        [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true" [showCancel]="true" autocomplete="off"
+        [(ngModel)]="selectedDateRange" (startDateChanged)="onStartDateChange($event)" [isCustomDate]="isCustomDate"
+        [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+        (datesUpdated)="datechange($event)" name="daterange" [readonly]="true" />
+</div>
+<div class="position-relative">
+    <button type="button" (click)="opendropdown($event)"  class="btn btn-default mx-2 rounded-3 text-nowrap border-val">
+        <!-- <span class="me-2">Filter</span> -->
+        <svg class="pl-3" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5 10H15M2.5 5H17.5M7.5 15H12.5" stroke="#344054" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+        </svg>
+    </button>
+
+    <div *ngIf="Opendropdown" class="card p-5 dropdown2 position-absolute z-1 end-0" style="z-index: 1 !important;" (clickOutside)="closeDropdown1()">
+        <div class="dropdown-title d-flex justify-content-between mb-2">Filter Options
+            <button class="btn btn-outline w-25 ms-3 btn-resize" (click)="Reset()"> Reset </button>
+            <button class="btn btn-primary w-25  btn-resize" (click)="Apply()">Apply</button>
+        </div>
+
+             <!-- Country Dropdown -->
+<div class="dropdown-container" (clickOutside)="closeDropdown()">
+    <div class="dropdown-header" (click)="toggleDropdown('country')">
+        <input 
+            type="text" 
+            class="form-control dropdown-input cursor-pointer" 
+            [value]="selectedCountriesLabel()"
+            readonly
+            placeholder="Select country"
+        />
+    </div>
+    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'country'">
+        <input 
+            type="text" 
+            class="form-control mb-2 dropdown-search" 
+            placeholder="Search country" 
+            [(ngModel)]="searchCountryText" 
+            (ngModelChange)="filterCountries()" 
+        />
+        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
+            <input 
+                class="form-check-input cursor-pointer" 
+                type="checkbox" 
+                id="selectAllCountries" 
+                [checked]="isAllCountriesSelected()" 
+                (change)="toggleSelectAllCountries($event)" 
+            />
+            <label class="form-check-label" for="selectAllCountries">
+                Select All
+            </label>
+        </div>
+        <div 
+            class="dropdown-item form-check custom-dropdown-item" 
+            *ngFor="let country of filteredCountries"
+        >
+        <input 
+        class="form-check-input cursor-pointer" 
+        type="checkbox" 
+        [id]="country.country" 
+        [(ngModel)]="country.checked"
+        (change)="updateSelectedCountries()" 
+      />
+      <label class="form-check-label" [for]="country.country">
+        {{ country.country }}
+      </label>
+      
+        </div>
+    </div>
+</div>
+
+     <!-- Location Dropdown -->
+<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
+    <div class="dropdown-header" (click)="toggleDropdown('location')">
+        <input 
+            type="text" 
+            class="form-control dropdown-input cursor-pointer" 
+            [value]="selectedLocationsLabel()"
+            readonly
+            placeholder="Select Region"
+        />
+    </div>
+    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'location'">
+        <input 
+            type="text" 
+            class="form-control mb-2 dropdown-search" 
+            placeholder="Search Region" 
+            [(ngModel)]="searchLocationText" 
+            (ngModelChange)="filterLocations()" 
+        />
+        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
+            <input 
+                class="form-check-input cursor-pointer" 
+                type="checkbox" 
+                id="selectAllLocations" 
+                [checked]="isAllLocationsSelected()" 
+                (change)="toggleSelectAllLocations($event)" 
+            />
+            <label class="form-check-label" for="selectAllLocations">
+                Select All
+            </label>
+        </div>
+        <div 
+            class="dropdown-item form-check custom-dropdown-item" 
+            *ngFor="let location of filteredLocations"
+        >
+            <input 
+                class="form-check-input cursor-pointer" 
+                type="checkbox" 
+                [id]="location.city" 
+                [(ngModel)]="location.checked"
+                (change)="updateSelectedLocations()" 
+            />
+            <label class="form-check-label" [for]="location.city">
+                {{ location.city }}
+            </label>
+        </div>
+    </div>
+</div>
+
+<!-- Group Dropdown -->
+<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
+    <div class="dropdown-header" (click)="toggleDropdown('group')">
+        <input 
+            type="text" 
+            class="form-control dropdown-input cursor-pointer" 
+            [value]="selectedGroupsLabel()" readonly
+            placeholder="Select clusters"
+        />
+    </div>
+    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'group'">
+        <input 
+            type="text" 
+            class="form-control mb-2 dropdown-search" 
+            placeholder="Search clusters" 
+            [(ngModel)]="searchGroupText" 
+            (ngModelChange)="filterGroups()" 
+        />
+        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
+            <input 
+                class="form-check-input cursor-pointer" 
+                type="checkbox" 
+                id="selectAllGroups" 
+                [checked]="isAllGroupsSelected()" 
+                (change)="toggleSelectAllGroups($event)" 
+            />
+            <label class="form-check-label" for="selectAllGroups">
+                Select All
+            </label>
+        </div>
+        <div 
+            class="dropdown-item form-check custom-dropdown-item" 
+            *ngFor="let group of filteredGroups"
+        >
+            <input 
+                class="form-check-input cursor-pointer" 
+                type="checkbox" 
+                [id]="group.groupName"
+                [(ngModel)]="group.checked"
+                (change)="updateSelectedGroups()" 
+            />
+            <label class="form-check-label" [for]="group.groupName">
+                {{ group.groupName }}
+            </label>
+        </div>
+    </div>
+</div>
+
+
+<!-- Store Dropdown -->
+<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
+    <div class="dropdown-header" (click)="toggleDropdown('store')">
+        <input 
+            type="text" 
+            class="form-control dropdown-input cursor-pointer"
+            [value]="selectedStoresLabel()"
+            readonly
+            placeholder="Select stores"
+        />
+    </div>
+    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'store'">
+        <input 
+            type="text" 
+            class="form-control mb-2 dropdown-search " 
+            placeholder="Search stores" 
+            [(ngModel)]="searchStoreText" 
+            (ngModelChange)="filterStores()" 
+        />
+        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
+            <input 
+                class="form-check-input cursor-pointer" 
+                type="checkbox" 
+                id="selectAllStores" 
+                [checked]="isAllStoresSelected()" 
+                (change)="toggleSelectAllStores($event)" 
+            />
+            <label class="form-check-label" for="selectAllStores">
+                Select All
+            </label>
+        </div>
+        <div 
+            class="dropdown-item form-check custom-dropdown-item" 
+            *ngFor="let store of filteredStores"
+        >
+            <input 
+                class="form-check-input" 
+                type="checkbox" 
+                [id]="store.storeId"
+                [(ngModel)]="store.checked"
+                (change)="updateSelectedStores()" 
+            />
+            <label class="form-check-label" [for]="store.storeId">
+                {{ store.storeName }}
+            </label>
+        </div>
+    </div>
+</div>
+
+<!-- Zone Dropdown -->
+<div class="dropdown-container mt-3" (clickOutside)="closeDropdown()">
+    <div class="dropdown-header" (click)="toggleDropdown('zone')">
+        <input 
+            type="text" 
+            class="form-control dropdown-input cursor-pointer"
+            [value]="selectedZonesLabel()"
+            readonly
+            placeholder="Select zones"
+        />
+    </div>
+    <div class="dropdown-menu custom-dropdown-menu" *ngIf="dropdownOpen === 'zone'">
+        <input 
+            type="text" 
+            class="form-control mb-2 dropdown-search " 
+            placeholder="Search zones" 
+            [(ngModel)]="searchZoneText" 
+            (ngModelChange)="filterZones()" 
+        />
+        <div class="form-check mb-2 dropdown-item custom-dropdown-item">
+            <input 
+                class="form-check-input cursor-pointer" 
+                type="checkbox" 
+                id="selectAllZones" 
+                [checked]="isAllZonesSelected()" 
+                (change)="toggleSelectAllZones($event)" 
+            />
+            <label class="form-check-label" for="selectAllZones">
+                Select All
+            </label>
+       </div>
+        <div 
+            class="dropdown-item form-check custom-dropdown-item" 
+            *ngFor="let zone of filteredZones"
+        >
+            <input 
+                class="form-check-input" 
+                type="checkbox" 
+                [id]="zone._id"
+                [(ngModel)]="zone.checked"
+              (change)="updateSelectedZones(zone._id)"
+            />
+            <label class="form-check-label" [for]="zone._id">
+                {{ zone.tagName }}
+            </label>
+        </div>
+    </div>
+</div>
+
+
+
+
+
+    </div>
+</div>

package/src/lib/modules/layout/toolbar/metrics-header/metrics-header.component.scss

@@ -0,0 +1,311 @@
+.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; 
+}
+.filter-label{
+    color: var(--Gray-500, #667085) !important;
+font-size: 14px;
+font-style: normal;
+font-weight: 600;
+line-height: 20px;
+text-transform: capitalize;
+}
+
+.position-relative {
+    position: relative;
+  }
+  
+  .filter-icon {
+    cursor: pointer;
+  }
+  
+  .dropdown-container {
+    position: relative;
+    display: inline-block;
+    width: 100%; /* Adjust this based on your design */
+}
+
+.dropdown-header {
+    cursor: pointer;
+    width: 100%; /* Adjust based on need */
+}
+
+.form-control {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 14px !important;
+    font-weight: 600;
+    line-height: 20px;
+    text-transform: capitalize;
+    width: 100%; /* Ensures input takes full width */
+    box-sizing: border-box;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    z-index: 1000;
+    max-height: 230px;
+    overflow-y: auto;
+    display: block;
+    box-sizing: border-box;
+    padding: 10px 5px;
+}
+
+.dropdown-item {
+    padding: 6px 0px;
+}
+
+.dropdown-item:hover {
+    background-color: #f1f1f1;
+}
+
+.dropdown-item input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+.custom-dropdown-menu {
+    border-radius: 4px;
+    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+}
+
+.custom-dropdown-item {
+    display: flex;
+    align-items: center;
+
+}
+
+.custom-dropdown-item input {
+    margin-left: 10px;
+}
+
+.btn-resize{
+    font-size: 13px !important;
+    height: 29px !important;
+    line-height: 11px !important;
+    padding: 3px !important;
+}
+
+.dropdown2 {
+    position: absolute;
+    top: 70px;
+    // right: 14.5%;
+    min-width: 270px !important;
+
+    .dropdown-title {
+        color: var(--Gray-900, #101828);
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 24px
+    }
+
+    .dropdown {
+        position: relative;
+        display: inline-block;
+
+        span {
+            color: var(--Gray-700, #344054);
+            font-size: 14px;
+            font-weight: 600;
+            line-height: 20px;
+        }
+    }
+}
+
+// ::ng-deep .dropdown2{
+//     z-index: 1 !important;
+// }
+.form-check-label {
+color: var(--Gray-700, #344054) !important;
+font-size: 14px;
+font-style: normal;
+font-weight: 500;
+line-height: 20px;
+}
+
+input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 0px 5px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-300, #D0D5DD);
+    box-shadow: none;
+    font-size: 0.8em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+input[type='checkbox']:checked {
+    outline: 1px solid var(--primary-600, #00A3FF);
+    background-color: var(--primary-50, #EAF8FF);
+}
+
+input[type='checkbox']:checked:after {
+    content: '';
+    transform: rotate(45deg);
+    border-bottom: 2px solid #00A3FF;
+    border-right: 2px solid #00A3FF;
+    display: inline-block;
+    width: 0.2em;
+    padding-left: 0px;
+    padding-top: 9px;
+    padding-right: 4px;
+}

package/src/lib/modules/layout/toolbar/metrics-header/metrics-header.component.spec.ts

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