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

package/src/lib/components/trax-run-ai-popup/trax-run-ai-popup.component.scss

@@ -0,0 +1,229 @@
+.Overlay {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 200 !important;
+    position: fixed;
+    background: rgba(88, 87, 87, 0.6);
+}
+
+input[type='checkbox'] {
+    width: 16px !important;
+    height: 16px !important;
+    margin: 5px;
+    border-radius: 4px !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    outline: 1px solid var(--gray-600, #D0D5DD) !important;
+    box-shadow: none;
+    font-size: 0.5em;
+    text-align: center;
+    line-height: 1em;
+    background: white;
+}
+
+.form-check.form-check-solid .form-check-input:checked {
+    background-color: var(--primary-50, #EAF8FF) !important;
+}
+
+input[type='checkbox']:checked {
+    outline: 1px solid var(--primary-600, #00A3FF) !important;
+    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.5em;
+    padding-left: 3px;
+    padding-top: 10px;
+    padding-right: 0px;
+}
+
+.min-width-popup {
+    min-width: 47% !important;
+}
+
+.content {
+    color: var(--gray-500, #667085);
+    font-family: 'Inter';
+    font-size: 14px;
+    padding: 0px !important;
+    font-style: normal;
+    font-weight: 400;
+}
+
+.label {
+    color: var(--gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+input {
+    font-size: 16px;
+    color: var(--gray-900, #101828);
+}
+
+.inputlabel {
+    width: 100%;
+    margin-top: 5px;
+    padding: 10px 14px;
+    border-radius: 8px;
+    border: 1px solid var(--gray-300, #D0D5DD);
+    background: var(--white, #FFF);
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+}
+
+.inputlabel:focus {
+    outline: 1px solid var(--gray-300, #D0D5DD) !important;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    border: #F9FAFB !important;
+    outline: 1px solid var(--primary-300, #6BCAFF) !important;
+    box-shadow: 0px 0px 0px 4px #D5EFFE, 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    color: #101828;
+}
+
+.popup {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    opacity: 1;
+    transform: translate(-50%, -50%);
+    background: var(--white, #FFF);
+    border-radius: 12px !important;
+    border-radius: 12px;
+    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+    padding: 30px;
+    width: 400px;
+    height: fit-content;
+}
+
+.btn-outline {
+    border: 1px solid lightgrey;
+    padding: calc(0.75rem + 1px) calc(1.5rem + 1px);
+}
+
+.fs-18px {
+    font-size: 18px;
+    color: var(--black, #000);
+    font-family: inter;
+}
+
+.fw-600 {
+    font-weight: 600 !important;
+}
+
+::ng-deep .mat-dialog-container {
+    box-shadow: none;
+    background: #fff;
+    color: rgba(0, 0, 0, .87);
+}
+
+.symbol-label {
+    color: var(--primary-600, #00A3FF);
+    text-align: center;
+
+    /* Text sm/Medium */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.invitemain {
+    color: var(--gray-700, #344054);
+
+    /* Text sm/Semibold */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.invitesub {
+    color: var(--gray-500, #667085);
+
+    /* Text sm/Regular */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.subtitle {
+    color: var(--Black, #101828);
+
+    /* Text sm/Medium */
+    font-family: 'Inter';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    /* 142.857% */
+}
+
+.customtitle {
+    color: var(--gray-900, #101828);
+
+    /* Text lg/Semibold */
+    font-family: 'Inter';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    /* 155.556% */
+}
+
+.addScroll {
+    height: 300px;
+    overflow-y: scroll;
+}
+
+.storesubtitle {
+    word-break: break-all;
+    padding-top: .5em;
+}
+
+::ng-deep.mat-dialog-container {
+    display: block;
+    padding: 24px;
+    border-radius: 12px;
+    box-sizing: border-box;
+    overflow: auto;
+    outline: 0;
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
+    max-height: inherit;
+}
+
+.error {
+    color: var(--Error-700, #B42318);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    border-radius: 8px;
+    border: 1px solid var(--Error-300, #FDA29B);
+    background: var(--Error-25, #FFFBFA);
+}
+
+.absolute{
+    right: 2px
+}

package/src/lib/components/trax-run-ai-popup/trax-run-ai-popup.component.spec.ts

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

package/src/lib/components/trax-run-ai-popup/trax-run-ai-popup.component.ts

@@ -0,0 +1,111 @@
+import { array } from '@amcharts/amcharts5';
+import { Component, Input, OnInit } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastService } from 'tango-app-ui-shared';
+import { TraxService } from '../../services/trax.service';
+
+@Component({
+  selector: "lib-trax-run-ai-popup",
+  templateUrl: "./trax-run-ai-popup.component.html",
+  styleUrl: "./trax-run-ai-popup.component.scss",
+})
+export class TraxRunAIPopupComponent implements OnInit {
+  requestText: string = "";
+  next: boolean = true;
+  runAIFeatures: any = [
+    { featureName: "Matched/Not Matched", lableName: "detectionStatus" },
+    { featureName: "Count", lableName: "No of Employee" },
+    { featureName: "Character Extraction", lableName: "GST Number" },
+    { featureName: "Others", lableName: "" },
+  ];
+  selectedFeatures: any[] = [];
+  @Input() data: any;
+  constructor(
+    public dialogRef: NgbActiveModal,
+    private sanitizer: DomSanitizer,
+    private toast:ToastService,
+    private sopService:TraxService
+  ) {}
+
+  ngOnInit(): void {
+    this.sopService.getClientrunAIFeatues(this.data.clientId).subscribe((res:any) => {
+      if(res && res.code == 200 && res.data.length) {
+        this.runAIFeatures = res.data.map((ele:any) => {return {featureName:ele.featureName,lableName:ele.lableName}})
+      }
+    })
+    if (this.data?.user) {
+      this.data.user.forEach((item: any) => {
+        item.invite = true;
+      });
+    }
+    this.data.images = JSON.parse(JSON.stringify(this.data.images))
+    this.next = this.data.images.length ? true : false
+    this.selectedFeatures = this.data.runAIFeatures;
+  }
+
+  closepopup() {
+    this.dialogRef.close('cancel');
+  }
+
+  confirmpopup() {
+    let errors:any = [];
+    if(!this.selectedFeatures.length){
+      this.toast.getErrorToast('Please select a Features');
+      return;
+    }
+    this.selectedFeatures.forEach((ele) => {
+      ele.lableName = ele?.lableName.trim();
+      if (!ele?.lableName.length) {
+        errors.push(`${ele.featureName}`);
+      }
+    });
+    if(errors.length) {
+      this.toast.getErrorToast(`${errors.toString()} feature label is missing`);
+      return;
+    }
+    let confirmData = {
+      images: this.data.images,
+      runAIFeatures: this.selectedFeatures,
+      runAIDescription: this.data.runAIDescription,
+    };
+    this.dialogRef.close(confirmData);
+  }
+
+  checkRunAI() {
+    if (this.data?.images?.length) {
+      let enableRunAI = this.data?.images?.find((ele: any) => ele.runAI);
+      return enableRunAI ? false : true;
+    }
+  }
+
+  onStoreSelect(selectedItems: any[]) {
+    this.selectedFeatures = selectedItems.map((item) => {
+      // Find the full feature object from runAIFeatures to get the lableName
+      const fullFeature = this.runAIFeatures.find(
+        (f: any) => f.featureName === item.featureName
+      );
+      return {
+        ...item,
+        lableName: fullFeature?.lableName,
+        customLabel: "", // Initialize custom label
+      };
+    });
+    console.log(this.selectedFeatures,'features')
+  }
+
+  onInputChange(value: string) {
+    // Remove leading/trailing spaces
+    let cleanValue = value.trim();
+
+    // Block <script> or suspicious tags
+    cleanValue = cleanValue.replace(/<script.*?>.*?<\/script>/gi, '');
+
+    // (Optional) remove all angle brackets to block any HTML
+    cleanValue = cleanValue.replace(/<.*?>/g, '');
+
+    this.data.runAIDescription = cleanValue;
+  }
+}
+
+

package/src/lib/components/trax-store/trax-store.component.html

@@ -0,0 +1,78 @@
+<div class="storePopupcontent p-5">
+    <div class="mb-4">
+        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none">
+            <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF" />
+            <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8" />
+            <path d="M28 21V35M21 28H35" stroke="#009BF3" stroke-width="2" stroke-linecap="round"
+                stroke-linejoin="round" />
+        </svg>
+    </div>
+    <span class="popuptitle">Assign Single <span *ngIf="data?.coverage ==='store'" >Store</span><span *ngIf="data?.coverage ==='user'" >User</span></span>
+    <p class="popupsubtitle mt-3">Finish configuring your <span *ngIf="data?.coverage ==='store'">store</span> <span *ngIf="data?.coverage ==='user'">user</span> by providing the details below.</p>
+    <div *ngIf="data?.coverage ==='store'" class="pt-3 position-relative" (clickOutside)="closeDropDown()">
+        <label for="inputmodel" class="label pb-2">Select Store</label>
+        <div class="dropdown-close">
+            <div class="w-100">
+                <div class="d-flex align-items-center position-relative w-100">
+                    <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="M2.68015 5.8038L2.6269 5.88697C2.06886 6.87402 2.66469 8.12144 3.7363 8.26454C3.83339 8.27641 3.92373 8.28269 4.012 8.28269C4.59015 8.28269 5.10132 8.03467 5.45759 7.64794L6.01093 7.04732L6.56238 7.64967C6.91432 8.03409 7.42433 8.28269 8.00639 8.28269C8.58583 8.28269 9.09877 8.03374 9.45039 7.64967L10.0036 7.04543L10.5568 7.64967C10.9084 8.03374 11.4213 8.28269 12.0008 8.28269C12.5802 8.28269 13.0932 8.03374 13.4448 7.64967L13.998 7.04543L14.5511 7.64967C14.9028 8.03374 15.4157 8.28269 15.9952 8.28269C16.0805 8.28269 16.1736 8.2764 16.27 8.26464C17.3652 8.11532 17.963 6.80105 17.3243 5.8043C17.3242 5.80425 17.3242 5.80419 17.3242 5.80413L15.566 3.06272L15.566 3.06272L15.5651 3.06125C15.5499 3.03742 15.5124 3.01186 15.4652 3.01186H4.53581C4.48866 3.01186 4.45117 3.03742 4.43597 3.06125L4.43535 3.06222L2.68015 5.8038ZM15.6516 10.7371V13.869V14.619H14.9016H5.09943H4.34943V13.869V10.7375C4.2392 10.7457 4.12768 10.75 4.01507 10.75C3.97276 10.75 3.93074 10.7493 3.889 10.7481V13.869V15.8035C3.889 16.4469 4.4229 16.9881 5.09943 16.9881H14.9016C15.5781 16.9881 16.112 16.4469 16.112 15.8035V13.869V10.7483C16.0722 10.7494 16.0322 10.75 15.9921 10.75C15.8777 10.75 15.7641 10.7456 15.6516 10.7371Z"
+                                stroke="#667085" stroke-width="1.5" />
+                        </svg>
+                    </span>
+                    <input type="text" class="form-control dropdown-input ps-14" [ngModel]="selectedStore?.name"
+                        (click)="toggleDropDown()" readonly placeholder="Select Store..." />
+                </div>
+            </div>
+            <div class="dropdown-menu custom-dropdown-menu w-100" *ngIf="showDropDown">
+                <input type="text" class="form-control mb-2 dropdown-search mx-3 formSeach"
+                    placeholder="Search Store..." [(ngModel)]="searchStore" (ngModelChange)="filterSearch()" />
+                <div [class]="storeList?.length > 5 ? 'h-200px overflow-auto' : 'h-auto'">
+                    <div class="dropdown-item form-check custom-dropdown-item"
+                        *ngFor="let store of storeList;let i= index" (click)="updateSelectedStore(i)">
+                        <label class="" [for]="store.name">
+                            {{ store.name }}
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="data?.coverage ==='store'" class="storetext mt-2">Store that I’m looking for isn’t available,<a class="text-primary"
+            href="/manage/stores/addition-method"><u>Onboard Stores</u></a></div>
+
+    <div class="pt-5">
+        <label for="inputmodel" class="label pb-2">Assign To</label>
+        <input type="text" class="form-control form-control-solid w-430px fw-bold inputname" placeholder="User Name"
+            [(ngModel)]="userName">
+    </div>
+
+    <div class="pt-5">
+        <label for="inputmodel" class="label pb-2">Assignee Mail ID</label>
+        <div class="d-flex align-items-center position-relatives w-100">
+            <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="M18.3334 4.99999C18.3334 4.08333 17.5834 3.33333 16.6667 3.33333H3.33341C2.41675 3.33333 1.66675 4.08333 1.66675 4.99999M18.3334 4.99999V15C18.3334 15.9167 17.5834 16.6667 16.6667 16.6667H3.33341C2.41675 16.6667 1.66675 15.9167 1.66675 15V4.99999M18.3334 4.99999L10.0001 10.8333L1.66675 4.99999"
+                        stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </span>
+            <input type="text" class="form-control form-control-solid w-430px ps-14 fw-bold inputname"
+                placeholder="User Email" [(ngModel)]="userEmail" (input)="userEmail = userEmail.toLowerCase()">
+        </div>
+    </div>
+    <div *ngIf="data?.coverage ==='store'" class="pt-5">
+        <label for="inputmodel" class="label pb-2">City</label>
+        <input type="text" class="form-control form-control-solid w-430px fw-bold inputname" placeholder="City"
+            [(ngModel)]="this.selectedStore.city">
+    </div>
+    <div class="mt-6 d-flex align-items-center justify-content-end">
+        <button class="btn btn-md btn-outline w-auto me-2" (click)="Activemodel.close()">
+            Cancel
+        </button>
+        <button class="btn btn-md btn-primary w-auto ms-2" (click)="updatedStore()">
+            Assign
+        </button>
+    </div>
+</div>

package/src/lib/components/trax-store/trax-store.component.scss

@@ -0,0 +1,134 @@
+.storePopupcontent {
+    // padding-top: 10px !important;
+    font-family: Inter;
+    align-items: left;
+
+    .popuptitle {
+        color: var(--gray-900, #101828);
+        font-size: 18px;
+        font-weight: 600;
+        line-height: 20px;
+    }
+
+    .popupsubtitle {
+        color: var(--gray-500, #667085);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+    }
+
+    .btn-outline {
+        border: 1px solid lightgrey;
+    }
+
+    button {
+        width: 45%;
+    }
+
+    .inputname {
+        width: 100%;
+        border: none;
+        color: rgba(0, 0, 0, .87);
+        height: 45px;
+        font-size: 14px !important;
+        padding: 10px 16px;
+        border-radius: 4px;
+        outline: 1px solid #D0D5DD;
+    }
+}
+
+.label {
+    color: var(--Gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}
+
+::ng-deep .storePopupcontent input {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    align-self: stretch !important;
+    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;
+}
+
+.btn-primary {
+    line-height: 18px !important;
+}
+
+.position-relative {
+    position: relative;
+}
+
+.form-control {
+    color: var(--Gray-700, #344054) !important;
+    font-size: 14px !important;
+    font-weight: 600;
+    line-height: 20px;
+    // text-transform: capitalize;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    z-index: 1000;
+    display: block;
+    box-sizing: border-box;
+}
+
+.dropdown-item {
+    padding: 8px 12px;
+}
+
+.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;
+}
+
+.formSeach {
+    width: 95%
+}
+
+.storetext {
+    color: var(--Gray-500, #667085);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    // text-transform: lowercase;
+}

package/src/lib/components/trax-store/trax-store.component.spec.ts

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