@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/url-fields/url-fields.component.ts

@@ -0,0 +1,123 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { ValidationService } from '../../services/validation.service';
+
+@Component({
+  selector: 'lib-url-fields',
+  templateUrl: './url-fields.component.html',
+  styleUrls: ['./url-fields.component.scss'],
+})
+export class UrlFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  placeholder: string = '';
+  showPreviewButton!: boolean;
+  enteredUrl: string = '';
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  defaultValue: string = '';
+  @Input() disableEdit: boolean = false;
+
+   private elementId: string='';
+     
+  constructor(
+    private validationService: ValidationService,
+    private tracker: ElementTrackerService
+  )  { }
+  
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  handleClick() {
+    let textFieldValue = (document.getElementById('textField') as HTMLInputElement).value.trim();
+
+  if (!/^https?:\/\//i.test(textFieldValue)) {
+    textFieldValue = 'http://' + textFieldValue;
+  }
+
+  window.open(textFieldValue, '_blank');
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.placeholder = this.question.formElement.appearance.placeholder;
+    this.showPreviewButton =
+      this.question.formElement.appearance.showPreviewButton;
+    this.defaultValue = this.question?.defaultValue;
+    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
+    this.enteredUrl = this.defaultValue;
+    if(this.question.answer){
+      this.enteredUrl = this.question?.answer;  
+    }else if(this.defaultValue && !this.question.answer){
+      this.question.answer = this.defaultValue;
+    }
+  }
+  validateUrl() {
+    this.validationService.clearInvalid(this.buildElementId());
+    this.validationFailed = false;
+    this.validationMessage = '';
+    if (this.required && !this.enteredUrl) {
+      this.validationFailed = true;
+      this.validationMessage = 'This is a required question';
+      this.question.validation = false;
+      this.question.validationMessage = 'This is a required question';
+    }
+    else {
+      this.question.validation = true;
+    }
+  }
+
+  validateInput(event: any) {
+    this.validateUrl();
+    this.question.answer = event.target.value;
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+  }
+
+  handleValidation(isValid: boolean, message: string = 'This field is required') {
+    if (isValid) {
+      this.validationService.clearInvalid(this.buildElementId());
+    } else {
+      // this.validationService.setInvalid(this.question.id, message);
+    }
+  }
+
+  private buildElementId(): string {
+    return (this.inLine || this.inCard)
+      ? `${this.submissionIndex}-${this.question.id}`
+      : `${this.question.id}`;
+  }
+
+  get isInvalid(): boolean {
+    return !!this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  get errorMessage(): string | null {
+    return this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  ngAfterViewInit() {
+    if (this.inLine || this.inCard) {
+      this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
+    } else {
+      this.elementId = `question-${this.question.id}`;
+    }
+  
+    this.tracker.registerElement(this.elementId);
+  }
+
+  ngOnDestroy() {
+    if (this.elementId) {
+      this.tracker.unregisterElement(this.elementId);
+    }
+  }
+}

package/src/form-submission/form-submission.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SubmitFormComponent } from './submit-form/submit-form.component';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { HeaderComponent } from './header/header.component';
+import { NavigationTabsComponent } from './navigation-tabs/navigation-tabs.component';
+import { NextPrevNavigationComponent } from './next-prev-navigation/next-prev-navigation.component';
+import { ToastrModule } from 'ngx-toastr';
+import { SubmissionContainerComponent } from './submission-container/submission-container.component';
+import { SharedModule } from '../shared/shared.module';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatIconModule } from "@angular/material/icon";
+import { SaveDraftModalComponent } from './save-as-draft/saveDraftModalComponent ';
+
+
+
+@NgModule({
+  declarations: [
+    SubmitFormComponent,
+    HeaderComponent,
+    NavigationTabsComponent,
+    NextPrevNavigationComponent,
+    SubmissionContainerComponent,
+    SaveDraftModalComponent,
+  ],
+  imports: [
+    CommonModule,
+    BsDatepickerModule.forRoot(),
+    ToastrModule,
+    SharedModule,
+    InfiniteScrollModule,
+    NgxSkeletonLoaderModule,
+    MatDialogModule,
+    MatIconModule
+],
+  exports: [SubmitFormComponent, NextPrevNavigationComponent]
+})
+export class FormSubmitModule { }

package/src/form-submission/header/header.component.html

@@ -0,0 +1,6 @@
+<div class="head container">
+  <div class="registration-header">
+    <p>{{ name }}</p>
+  </div>
+  <div class="line" *ngIf="!skipMargin"></div>
+</div>

package/src/form-submission/header/header.component.scss

@@ -0,0 +1,26 @@
+.head {
+    background-color: white;
+    padding: 0 !important;
+  }
+  
+  .registration-header {
+    top: 20px;
+    left: 50%;
+    p{
+      font-size: 20px;
+      font-weight: 600;
+    }
+  }
+  
+  .line {
+    margin-top: 1%;
+    margin-bottom: 2%;
+    width: 100%;
+    height: 0px;
+    border: 1.5px solid #eaeaea; // Adjusted border width
+    transform: rotate(180deg);
+    @media (max-width: 576px) {
+      margin-bottom: 5%;
+    }
+  }
+  

package/src/form-submission/header/header.component.spec.ts

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

package/src/form-submission/header/header.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent {
+  @Input() name: string = '';
+  @Input() skipMargin: boolean = false;
+
+}

package/src/form-submission/navigation-tabs/navigation-tabs.component.html

@@ -0,0 +1,134 @@
+<div class="tab-inner-container" [ngClass]="{ 'skip-margin': skipMargin}">
+  <div class="d-flex gap-2">
+    <div class="tab-navigation" *ngIf="!hideTabs">
+      <ul class="nav nav-tabs navTabs" id="myTab" role="tablist">
+        <li
+          class="nav-item"
+          role="presentation"
+          *ngFor="let page of pageDetails; let i = index; trackBy: trackByIndex"
+          [ngClass]="{'nav-item-ara': acceptedLanguage === 'ara', 'nav-item-default': acceptedLanguage !== 'ara'}"
+        >
+          <button
+            class="nav-link"
+            [title]="page.name"
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            data-bs-custom-class="custom-tooltip"
+            [class.active]="i === currentPageIndex"
+            id="tab-{{ i }}"
+            type="button"
+            role="tab"
+            [attr.aria-controls]="'content-' + i"
+            [attr.aria-selected]="i === currentPageIndex"
+            (click)="setCurrentPage(i)"
+          >
+            {{ page.name }}
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div class="d-flex align-items-center" *ngIf="showNavArrows">
+      <button class="nav-arrow">
+        <img src="assets/icons/left_arrow.svg" alt="left arrow"
+        (click)="scrollTabs(-1)">
+        <img src="assets/icons/right_arrow.svg" alt="right arrow"
+        (click)="scrollTabs(1)">
+      </button>
+    </div>
+  </div>
+
+
+
+  <div class="tab-content pt-5 pb-3 px-1" [attr.name]="pages[currentPageIndex].testElementName">
+    <ng-container *ngIf="pages[currentPageIndex]">
+      <div
+        class="tab-pane fade show active"
+        id="content-{{ currentPageIndex }}"
+        role="tabpanel"
+        [attr.aria-labelledby]="'tab-' + currentPageIndex"
+      >
+        <div *ngIf="loadedPages[currentPageIndex]">
+          <div class="data-container"
+          infiniteScroll
+          [infiniteScrollDistance]="2"
+          [infiniteScrollThrottle]="200"
+          (scrolled)="loadMoreData()">
+          <div *ngFor="let row of pages[currentPageIndex].rows">
+            <div class="margin d-flex">
+              <div *ngFor="let grid of row.grid"
+                   [ngStyle]="{'width.%': (grid.element.count) * (100 / 12)}">
+                <lib-form-elements
+                  [grid]="grid"
+                  [edit]="edit"
+                  [acceptedLanguage]="acceptedLanguage"
+                  [pages]="pages"
+                  (subFormChange)="updateSubFormWithSubmissions($event)"
+                ></lib-form-elements>
+              </div>
+            </div>
+          </div>
+          </div>
+          <div class="footerButton d-flex justify-content-between align-items-center me-4 ms-4 position-relative">
+          <!-- Hover detection container -->
+                    <div  [ngStyle]="{ display: currentPageIndex === pageDetails.length - 1 ? 'block' : 'none' }" id="captcha-container"></div>
+          <div
+            class="button-container position-relative"
+            (mouseenter)="showTooltip = true"
+            (mouseleave)="showTooltip = false"
+          >
+
+          <div  *ngIf="currentPageIndex == pageDetails.length - 1">
+            <button *ngIf="showCancelButton" class="btn submitButton rounded-pill bg-secondary text-white"
+            (click)="cancelled()" type="button"
+            >Cancel</button>
+               <button
+            *ngIf="!isActionTriggered && skipValidation"
+              class="btn rounded-pill submitButton text-white"
+              [ngStyle]="{ 'background-color': secondaryColor ? secondaryColor : '#084fff' }"
+              type="button"
+              (click)="saveAsDraft()"
+              [disabled]="!eligibleForSubmission.status || submissionInDraft"
+            >
+            <ng-container *ngIf="submissionInDraft; else showSubmitText">
+              <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+              Submitting...
+            </ng-container>
+            <ng-template #showSubmitText>
+             Save Draft
+            </ng-template>
+            </button>
+            
+
+            <button
+            *ngIf="!isActionTriggered"
+              class="btn rounded-pill submitButton text-white"
+              [ngStyle]="{ 'background-color': primaryColor ? primaryColor: '#084fff' }"
+              type="button"
+              (click)="submitForm()"
+              [disabled]="!eligibleForSubmission.status || submissionInProgress"
+            >
+            <ng-container *ngIf="submissionInProgress; else showSubmitText">
+              <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+              Submitting...
+            </ng-container>
+            <ng-template #showSubmitText>
+              Submit
+            </ng-template>
+            </button>
+            <div *ngIf="showTooltip && !eligibleForSubmission.status" class="custom-tooltip">
+              {{eligibleForSubmission.message}}
+            </div>
+              </div>
+          </div>
+
+        </div>
+        <div *ngIf="submissionInProgress" class="text-loader">
+          {{ currentStep }}{{ animatedDots }}
+          <span class="percentage">{{ submissionProgress }}%</span>
+        </div>
+
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>

package/src/form-submission/navigation-tabs/navigation-tabs.component.scss

@@ -0,0 +1,200 @@
+.tab-inner-container {
+    width: 100%;
+    position: relative;
+    padding-left: 3rem;
+    padding-right: 3rem;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    @media (max-width: 1024px) {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    @media (max-width: 576px) {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      padding-top: 2rem;
+      padding-bottom: 2rem;
+    }
+  }
+
+  .skip-margin{
+    padding: 0;
+  }
+  /* Tooltip styling */
+/* Tooltip styling */
+.custom-tooltip {
+  visibility: hidden;
+  position: absolute;
+  top: -40px; /* Position above the button */
+  right: 0;
+  background: #efefef;
+  color: #7b7878;
+  padding: 8px 12px;
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  white-space: nowrap;
+  z-index: 10;
+}
+
+/* Yellow (Warning) Tooltip */
+.custom-tooltip.warning {
+  background: linear-gradient(135deg, #ffd700, #ffb400); /* Yellow for Warning */
+}
+
+/* Tooltip Animation */
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+
+  .footerButton:hover .custom-tooltip {
+    visibility: visible;
+  }
+
+  .navTabs {
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex-wrap: unset;
+    margin: 0 !important;
+    margin-bottom: -1px !important;
+    padding-right: 0;
+  }
+
+  .nav-item {
+    background-color: white;
+    border-radius: 5px;
+    &.nav-item-default {
+      margin-right: .5%;
+    }
+    &.nav-item-ara {
+      margin-left: .5%;
+    }
+  }
+
+  .nav-link {
+    position: relative;
+    margin-bottom: -2px;
+    padding-left: 25px;
+    padding-right: 25px;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 101%;
+      height: 6px;
+      background: #efefef;
+    }
+    &.active {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .tab-content {
+    background-color: white;
+  }
+
+
+  .custom-tooltip {
+    --bs-tooltip-bg: var(--bd-violet-bg);
+    --bs-tooltip-color: var(--bs-white);
+  }
+
+
+  .tab-navigation {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 95%;
+  }
+
+  .navTabs {
+    display: flex;
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    white-space: nowrap;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    scrollbar-width: none; /* Hide scrollbar for Firefox */
+    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
+  }
+
+  .navTabs::-webkit-scrollbar {
+    display: none; /* Hide scrollbar for Chrome/Safari */
+  }
+
+  .nav-arrow {
+    position: absolute;
+    background: white;
+    border: none;
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 5px 10px;
+    z-index: 1000;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    width: 45px;
+    height: 27px;
+    gap: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    img{
+      width: 8px;
+      height: 15px;
+    }
+  }
+
+  .submitButton{
+    margin-right: 1rem;
+  }
+
+  .spinner-border {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-bottom;
+    border: 0.15em solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: spinner-border 0.75s linear infinite;
+  }
+
+  @keyframes spinner-border {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+
+  .text-loader {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 8px 12px;
+    border-radius: 6px;
+    align-items: center;
+    gap: 8px;
+    display: flex;
+    justify-content: center;
+  }
+  
+  .percentage {
+    font-weight: 600;
+    color: var(--primaryColor, #084fff);
+  }

package/src/form-submission/navigation-tabs/navigation-tabs.component.spec.ts

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