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

package/src/lib/components/add-checklist/checklist-popup/checklist-popup.component.html

@@ -0,0 +1,207 @@
+<div class="checklist-card">
+
+  <!-- Header -->
+   <div *ngIf="!excelData.length">
+       <div class="d-flex align-items-center mb-3">
+         <div class="title-icon me-2">
+             <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>
+         <div class="mb-0 titleText">{{type == 'create' ? 'Create Checklist' : 'Bulk Upload'}}</div>
+       </div>
+     
+       <form [formGroup]="checklistForm">
+     
+         <!-- Checklist Name -->
+         <div class="mb-3" *ngIf="type == 'create'">
+           <label class="form-label">Checklist Name</label>
+           <input type="text" class="form-control" formControlName="name">
+         </div>
+     
+         <!-- Description -->
+         <div class="mb-3" *ngIf="type == 'create'">
+           <label class="form-label">Description</label>
+           <textarea class="form-control" rows="3" formControlName="description"></textarea>
+         </div>
+     
+         <!-- Mode Selection -->
+         <div class="row g-2 my-3" *ngIf="type == 'create'">
+     
+           <div class="col-md-6">
+             <div
+               class="option-box"
+               [class.option-active]="mode==='individual'"
+               (click)="selectMode('individual')">
+     
+               <span>Add questions individually</span>
+               <input type="radio" value="individual" formControlName="mode" style="width:15px;height:15px">
+             </div>
+           </div>
+     
+           <div class="col-md-6">
+             <div
+               class="option-box"
+               [class.option-active]="mode==='bulk'"
+               (click)="selectMode('bulk')">
+     
+               <span>Add questions in bulk</span>
+               <input type="radio" value="bulk" formControlName="mode" style="width:15px;height:15px">
+             </div>
+           </div>
+     
+         </div>
+     
+         <!-- Bulk Upload Section -->
+         <div *ngIf="mode === 'bulk'" class="bulkText">
+     
+           <div class="my-5">
+     
+             <div class="mb-2">1. Use the template to upload multiple questions at once</div>
+     
+             <div class="mb-2">
+               2. Download the template here -
+               @if(type == 'create') {
+                   <a class="download-link" href="/assets/files/checklistQuestion.xlsx" download>
+                     <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+                         <path d="M15.8359 10.8359V14.1693C15.8359 14.6113 15.6603 15.0352 15.3478 15.3478C15.0352 15.6603 14.6113 15.8359 14.1693 15.8359H2.5026C2.06058 15.8359 1.63665 15.6603 1.32409 15.3478C1.01153 15.0352 0.835938 14.6113 0.835938 14.1693V10.8359M4.16927 6.66927L8.33594 10.8359M8.33594 10.8359L12.5026 6.66927M8.33594 10.8359V0.835938" stroke="#009BF3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                     </svg> Download Template
+                   </a>
+               }
+               @else {
+                 <span class="download-link" (click)="downloadTemplate()">
+                 <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17" fill="none">
+                     <path d="M15.8359 10.8359V14.1693C15.8359 14.6113 15.6603 15.0352 15.3478 15.3478C15.0352 15.6603 14.6113 15.8359 14.1693 15.8359H2.5026C2.06058 15.8359 1.63665 15.6603 1.32409 15.3478C1.01153 15.0352 0.835938 14.6113 0.835938 14.1693V10.8359M4.16927 6.66927L8.33594 10.8359M8.33594 10.8359L12.5026 6.66927M8.33594 10.8359V0.835938" stroke="#009BF3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                 </svg> Download Template
+                 </span>
+               }
+             </div>
+     
+             <div class="mb-2">3. Add your data to the template</div>
+             <div class="mb-2">4. Upload it for processing</div>
+     
+           </div>
+     
+           <!-- Upload Area -->
+           <div class="upload-box cursor-pointer" (click)="fileInput.click()">
+     
+             <div class="upload-icon mb-2">
+                 <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46" fill="none">
+                     <rect x="3" y="3" width="40" height="40" rx="20" fill="#DAF1FF"/>
+                     <rect x="3" y="3" width="40" height="40" rx="20" stroke="#EAF8FF" stroke-width="6"/>
+                     <g clip-path="url(#clip0_19034_66996)">
+                     <path d="M26.3326 26.3313L22.9992 22.998M22.9992 22.998L19.6659 26.3313M22.9992 22.998V30.498M29.9909 28.323C30.8037 27.8798 31.4458 27.1787 31.8158 26.3301C32.1858 25.4816 32.2627 24.534 32.0344 23.6369C31.8061 22.7397 31.2855 21.9442 30.5548 21.3758C29.8241 20.8074 28.925 20.4986 27.9992 20.498H26.9492C26.697 19.5223 26.2269 18.6166 25.5742 17.8488C24.9215 17.081 24.1033 16.4712 23.181 16.0651C22.2587 15.6591 21.2564 15.4674 20.2493 15.5045C19.2423 15.5416 18.2568 15.8065 17.3669 16.2793C16.477 16.7521 15.7058 17.4205 15.1114 18.2343C14.517 19.048 14.1148 19.9859 13.9351 20.9774C13.7553 21.969 13.8027 22.9884 14.0736 23.959C14.3445 24.9296 14.8319 25.8262 15.4992 26.5813" stroke="#009BF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                     </g>
+                     <defs>
+                     <clipPath id="clip0_19034_66996">
+                     <rect width="20" height="20" fill="white" transform="translate(13 13)"/>
+                     </clipPath>
+                     </defs>
+                 </svg>
+             </div>
+     
+             <div class="text-primary fw-semibold uploadText">Click To Upload</div>
+     
+             <!-- Hidden File Input -->
+             <input
+                 #fileInput
+                 type="file"
+                 hidden
+                 (change)="onFileSelected($event)"
+             >
+     
+             </div>
+     
+           <!-- Uploaded File -->
+           <div *ngIf="fileName" class="upload-file">
+     
+             <div class="d-flex align-items-center">
+                 <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+                     <rect x="2" y="2" width="32" height="32" rx="16" fill="#DAF1FF"/>
+                     <rect x="2" y="2" width="32" height="32" rx="16" stroke="#EAF8FF" stroke-width="4"/>
+                     <path d="M18.668 11.3359H14.0013C13.6477 11.3359 13.3085 11.4764 13.0585 11.7265C12.8084 11.9765 12.668 12.3156 12.668 12.6693V23.3359C12.668 23.6896 12.8084 24.0287 13.0585 24.2787C13.3085 24.5288 13.6477 24.6693 14.0013 24.6693H22.0013C22.3549 24.6693 22.6941 24.5288 22.9441 24.2787C23.1942 24.0287 23.3346 23.6896 23.3346 23.3359V16.0026M18.668 11.3359L23.3346 16.0026M18.668 11.3359V16.0026H23.3346" stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+                 </svg>
+     
+               <div class="d-flex flex-column align-items-start ms-5">
+                 <div>{{fileName}}</div>
+                 <div class="successText">
+                   {{fileSize}} KB – Uploaded
+                 </div>
+               </div>
+             </div>
+     
+             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+                 <path d="M29.3346 14.7705V15.9972C29.333 18.8724 28.402 21.6701 26.6804 23.973C24.9589 26.2758 22.539 27.9605 19.7818 28.7757C17.0245 29.591 14.0776 29.4931 11.3806 28.4967C8.68354 27.5002 6.38084 25.6587 4.81592 23.2466C3.25099 20.8346 2.50769 17.9813 2.69687 15.1123C2.88605 12.2433 3.99758 9.51232 5.86568 7.32665C7.73377 5.14097 10.2583 3.61772 13.0629 2.98408C15.8674 2.35043 18.8017 2.64033 21.428 3.81055M29.3346 5.33055L16.0013 18.6772L12.0013 14.6772" stroke="#12B76A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+             </svg>
+     
+           </div>
+     
+         </div>
+     
+         <!-- Buttons -->
+         <div class="d-flex justify-content-end mt-4">
+     
+           <button type="button" class="btn btn-light me-2" (click)="dialogRef.close()">
+             Cancel
+           </button>
+     
+           <button class="btn btn-primary" (click)="type == 'create' ? createChecklist() : updateChecklist()">
+             Proceed
+           </button>
+     
+         </div>
+     
+       </form>
+   </div>
+
+    <div class="border-0 validateBox" *ngIf="excelData.length">
+        <div class="card-header border-0 mt-0">
+             <div class="card-title mt-3"><span class="config-heading fw-semibold w-auto">Assign Stores</span></div>
+        </div>
+        <div class="card-body pt-0">
+            <div class="row">
+                <div class="col-sm-4">
+                   <div class="popup-card rounded-3 p-3 flex-column h-80px">
+                         <div class="fw-semibold config-heading w-100">{{excelData?.length}}</div>
+                         <div class="fw-semibold subtitle mt-1">Total Records</div>
+                   </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="popup-card rounded-3 p-3 flex-column h-80px">
+                        <div class="fw-semibold config-heading w-100">{{excelData?.length}}</div>
+                        <div class="fw-semibold subtitle mt-1">Rows processed</div>
+                  </div>
+                </div>
+                <div class="col-sm-4">
+                    <div class="popup-card rounded-3 p-3 flex-column h-80px">
+                        <div [ngClass]="excelError ? 'error-heading':''" class="fw-semibold config-heading w-100">{{excelError?.error?.length || 0}}</div>
+                        <div [ngClass]="excelError ? 'excel-error':''" class="fw-semibold subtitle mt-1">Error</div>
+                  </div>
+                </div>
+            </div>
+            <div *ngIf="!excelError" class="table-header mt-5" style="font-weight: 400;">
+                <div>You're about to assign {{excelData?.length}} stores to the checklist. Are you sure want to proceed?</div>
+            </div>
+            <div *ngIf="excelError" class="flex-column mt-5">
+                <div class="config-heading fw-bold">Invalid Details !</div>
+                <div class="subtitle mt-5">Please provide correct and complete layout information.</div>
+                <div class="p-5 w-100 rounded-3 border-error mt-5 flex-column">
+                <div *ngFor="let error of excelError?.error; let i = index; let last = last" [ngClass]="!last ? 'mb-2' : ''" class="text-error">{{i + 1}}) {{error}}</div>
+                </div>
+            </div>
+
+            <input style="visibility: hidden;" #fileInput1 type="file" id="kt_account_team_size_select_2" (change)="onFileSelected($event)" />
+        </div>
+        
+        <div class="d-flex justify-content-end mt-4">
+            <button type="button" class="btn btn-light me-2" (click)="dialogRef.dismiss()">Cancel</button>
+            <button type="button" class="btn btn-primary" *ngIf="!excelError" (click)="type == 'create' ? createChecklist() : updateChecklist()">
+        Proceed
+        </button>
+            <button type="button" *ngIf="excelError" class="btn py-3 ms-3 btn-danger" (click)="Reupload();">Reupload</button>
+        </div>
+    </div>
+
+</div>

package/src/lib/components/add-checklist/checklist-popup/checklist-popup.component.scss

@@ -0,0 +1,213 @@
+.checklist-card{
+    margin:auto;
+    background:white;
+    padding:25px;
+}
+
+.titleText {
+    font-family: Inter;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28px;
+    letter-spacing: 0%;
+    color: #101828;
+}
+
+.option-box{
+    border:1px solid #dee2e6;
+    border-radius:8px;
+    padding:20px;
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    cursor:pointer;
+    font-family: Inter;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0%;
+
+}
+
+.option-active{
+    border: 1px solid #6BCAFF;
+    background:#EAF8FF;
+    color:#009BF3;
+}
+
+.upload-box{
+    border:2px dashed #dee2e6;
+    border-radius:10px;
+    padding:35px;
+    text-align:center;
+    background:#fafafa;
+}
+
+.bulkText {
+    font-family: Inter;
+    font-weight: 400 !important;
+    font-size: 14px !important;
+    line-height: 20px !important;
+    letter-spacing: 0% !important;
+    color:#344054 !important;
+    text-align:center !important
+}
+
+.upload-icon{
+    width:50px;
+    height:50px;
+    border-radius:50%;
+    background:#eaf3ff;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    margin:auto;
+    color:#0d6efd;
+    font-size:22px;
+}
+
+.upload-file{
+    border:1px solid #e4e4e4;
+    border-radius:8px;
+    padding:10px 15px;
+    margin-top:15px;
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+}
+
+.download-link{
+    color:#009BF3;
+    cursor:pointer;
+    font-family: Inter;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0%;
+    text-transform: capitalize;
+}
+
+.uploadText {
+    font-family: Inter;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0%;
+    text-transform: capitalize;
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-thickness: 0%;
+    color:#009BF3
+}
+
+::ng-deep .validateBox{
+    .successText {
+        font-family: Inter;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        letter-spacing: 0%;
+        color:#667085
+    }
+    
+    .text-light-primary{
+        color: var(--Primary-700, #009BF3) !important;
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        text-transform: capitalize;
+    }
+    .bg-light-primary{
+        border-radius: 8px !important;
+        border: 1px solid var(--Primary-50, #EAF8FF) !important;
+        background: var(--Primary-50, #EAF8FF) !important;
+        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    }
+    .selectstore {
+        color: var(--primary-700, #009BF3);
+        font-family: 'Inter';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+        /* 142.857% */
+        text-decoration-line: underline;
+        text-transform: capitalize;
+    }
+    
+    .headeralign {
+        color: var(--gray-500, #667085);
+        font-family: 'Inter';
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+        /* 150% */
+    }
+    
+    .assignpadding {
+        padding: 0px 40px;
+    }
+    
+    .uploadpadding {
+        padding: 0px 20% 9px;
+    }
+    
+    .subtext {
+        color: var(--gray-500, #667085);
+        font-family: 'Inter';
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        align-items: center;
+        gap: 8px;
+        align-self: stretch;
+    }
+    
+    .text-primary{
+        color: var(--primary-700, #009BF3) !important;
+    }
+    .border-primary{
+        border: 1px dashed var(--Primary-500, #33B5FF) !important;
+        background: var(--Primary-25, #F6FCFF) !important;
+    }
+    
+    .bg-light{
+        background: var(--Primary-25, #F6FCFF) !important;
+    }
+    
+    .table-header{
+        color: var(--Gray-800, #1D2939);
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 24px;
+    }
+    .text-error{
+        color: var(--Error-700, #B42318) !important;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+    }
+    .excel-error{
+        color: var(--Error-600, #D92D20);
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+    }
+    .error-heading{
+        color: var(--Error-600, #D92D20);
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 30px; 
+    }
+    .border-error{
+        border: 1px solid var(--Error-300, #FDA29B) !important;
+        background: var(--Error-25, #FFFBFA) !important;
+    }
+    
+    .popup-card{
+        border-radius: 6px;
+        border: 1px solid var(--Gray-300, #D0D5DD);
+        background: #FFF;
+        box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+    }
+}

package/src/lib/components/add-checklist/checklist-popup/checklist-popup.component.spec.ts

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