@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/file-picker-fields/file-picker-fields.component.html

@@ -0,0 +1,72 @@
+<div
+  [ngClass]="{ 'mb-4': !inLine }"
+  class="px-3"
+  [id]="(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id"
+  [attr.name]="question.testElementName"
+>
+  <div class="input-wrapper mb-2" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="question?.required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+  [ngClass]="{'field-disabled':disableEdit}"
+  >
+    <lib-docUpload
+    [totalSize]="totalFileSize"
+    [fileAllowed]="fileTypes"
+    [multiple]="multiFileUploads"
+    [fileSize]="fileSize"
+    [files]="files"
+    [avatarPicker]="avatarPicker"
+    (fileTypeNotAllowed)="handleFileTypeNotAllowed($event)"
+    (fileSizeAllowed)="handleFileSize($event)"
+    (finalArray)="handleFinalArray($event)"
+    [attachments]="attachments"
+    (deleteFiles)="deleteFiles($event)"
+  ></lib-docUpload>
+  </div>
+
+  <div *ngIf="isInvalid && (!inLine || (!question.answer||!attachments))" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

package/src/form-fields/file-picker-fields/file-picker-fields.component.scss

@@ -0,0 +1,33 @@
+@import '../../styles/shared-style.scss';
+
+.fileInput {
+  position: relative;
+  height: 44px;
+  width: 111px;
+  background: #d3d3d3;
+  border-radius: 6px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  input {
+    opacity: 0;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: inherit;
+  }
+}
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+.field-disabled{
+  pointer-events: none;
+}

package/src/form-fields/file-picker-fields/file-picker-fields.component.spec.ts

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

package/src/form-fields/file-picker-fields/file-picker-fields.component.ts

@@ -0,0 +1,256 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { ValidationService } from '../../services/validation.service';
+import { DataService } from '../../services/data.service';
+import { WhenClauseService } from '../../services/whenClause.service';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+export interface Attachment {
+  fileId: string;
+  fileName: string;
+  fileUrl: string;
+  previewUrl?: string;
+}
+
+@Component({
+  selector: 'lib-file-picker-fields',
+  templateUrl: './file-picker-fields.component.html',
+  styleUrls: ['./file-picker-fields.component.scss'],
+})
+export class FilePickerFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+  @Output() inlineDeleteFiles = new EventEmitter<any>();
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  multiFileUploads: boolean = true;
+  fileTypes: string[] = [];
+  fileSize: number = 0;
+  fileSizeUnit: string = '';
+  totalFileSize: number = 0;
+  initialFileSize: number = 0;
+  initialTotalSize: number = 0;
+  dragAndDrop: boolean = false;
+  previewUploadedFiles: boolean = true;
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  attachments: Attachment[] = [];
+  timeoutId: any;
+
+  avatarPicker: boolean = false;
+  files: any;
+  private elementId: string='';
+  apiUrl:string = '';
+  selectedFile!: File;
+  selectedFiles: any = [];
+  @Input() disableEdit: boolean = false;
+  header:any;
+  
+  constructor(
+      private validationService: ValidationService,
+      private tracker: ElementTrackerService,
+      private dataService: DataService,
+      private whenClauseService:WhenClauseService,
+      private http: HttpClient
+    ) {
+      this.dataService.apiUrl$.subscribe((data) => {
+        this.apiUrl = data+'/api/cdn/preview?url=';
+      });
+
+      this.dataService.header$.subscribe((data) => {
+        this.header = data;
+      });
+    }
+
+
+    ngOnInit() {
+      this.valueAssigned();
+    }
+  
+    valueAssigned() {
+      this.count = this.question.count;
+      this.required = this.question.required;
+      this.hint = this.question.hint;
+      this.multiFileUploads =
+        this.question.formElement.appearance.multiFileUploads;
+      this.dragAndDrop = this.question.formElement.appearance.dragAndDrop;
+      this.previewUploadedFiles =
+        this.question.formElement.appearance.previewUploadedFiles;
+      this.fileTypes = this.question.formElement.validation.fileTypes;
+      this.fileSizeUnit = this.question.formElement.validation.fileSizeUnit;
+      this.avatarPicker = this.question.formElement.appearance.avatarPicker;
+      this.initialFileSize = this.question.formElement.validation?.fileSize;
+      this.fileSize = this.convertToBytes(
+        this.initialFileSize,
+        this.fileSizeUnit
+      );
+      this.initialTotalSize = this.question.formElement.validation?.totalFileSize;
+      this.totalFileSize = this.convertToBytes(
+        this.initialTotalSize,
+        this.fileSizeUnit
+      );
+  
+      if (this.question.answer) {
+        this.files = this.question.answer;
+      }
+  
+  
+      this.attachments = this.question?.attachments;
+      setTimeout(() => {
+        this.whenClauseService.setQuestionAnswer(this.question.id,this.attachments.length,true);
+      });
+      this.convertUrl();
+    }
+  
+    convertUrl(){
+      const token = this.header.authToken;
+
+      if (!this.attachments || !token) return;
+
+      this.attachments.forEach((attachment, index) => {
+        const fileUrl = `${this.apiUrl}${attachment.fileUrl.replace(/\//g, "%2F")}`;        
+        const headers = new HttpHeaders().set('authorization', `Bearer ${token}`);
+    
+        this.http.get(fileUrl, { headers, responseType: 'blob' }).subscribe((blob) => {
+          const blobUrl = URL.createObjectURL(blob);
+          this.attachments[index].previewUrl = blobUrl;
+        });
+      });      
+    }
+  
+    convertToBytes(size: number, unit: string): number {
+      const units: { [key: string]: number } = {
+        B: 1,
+        KB: 1024,
+        MB: 1024 * 1024,
+        GB: 1024 * 1024 * 1024,
+      };
+      return size * (units[unit.toUpperCase()] || 1);
+    }
+  
+
+  handleFileTypeNotAllowed(fileType: string): void {
+    this.validationFailed = true;
+    this.validationMessage = 'File type not allowed';
+    this.clearValidationMessageAfterTimeout();
+  }
+
+  handleFileSize(event: string): void {
+    this.validationFailed = true;
+    if (event === 'File size exceeds the limit') {
+      this.validationMessage = `${event} ${this.initialFileSize} ${this.fileSizeUnit}`;
+    } else if (event === 'Total size exceeds the limit') {
+      this.validationMessage = `${event} ${this.initialTotalSize} ${this.fileSizeUnit}`;
+    } else {
+      this.validationMessage = event;
+    }
+    this.clearValidationMessageAfterTimeout();
+  }
+
+  clearValidationMessageAfterTimeout(): void {
+  if (this.timeoutId) {
+    clearTimeout(this.timeoutId);
+  }
+
+  this.timeoutId = setTimeout(() => {
+    this.validationMessage = '';
+    this.validationFailed = false;
+    this.timeoutId = null;
+  }, 5000);
+} 
+
+  onFileChange(event: any) {
+    const file: File = event.target.files[0];
+    this.selectedFile = file;
+    this.selectedFiles.push(this.selectedFile);
+    this.question.answer = this.selectedFiles;
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+  }
+
+  handleFinalArray(fileType: any[]): void {
+    const extractedData = fileType.map((item: any) => ({
+      name: item._file.name,
+      size: item._file.size,
+      type: item._file.type,
+    }));
+
+
+    const jsonString = JSON.stringify(extractedData);
+    this.question.answer = fileType;
+    const fileLength = fileType.length;
+    
+    setTimeout(() => {
+      this.whenClauseService.setQuestionAnswer(this.question.id,fileLength);
+    });
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+    this.validationService.clearInvalid(this.buildElementId());
+  }
+  deleteFiles(event: any) {
+    this.question.deleteFiles = event;
+    this.question.attachments = this.question.attachments.filter(
+      (item: any) => {
+        return !event.includes(item.fileId);
+      }
+    );
+    this.question.copiedAttachments = this.question.copiedAttachments.filter(
+      (item: any) => {
+        return !event.includes(item);
+      }
+    );
+    setTimeout(() => {
+      // Check current file count after delay
+      const attachmentsLength = this.question?.attachments?.length || 0;
+      const currentFileCount = this.question?.answer?.length || 0;
+      
+      // Only call when clause if no new files were added recently
+      // (assuming handleFinalArray would have updated this.question.answer)
+      if (attachmentsLength === currentFileCount) {
+        this.whenClauseService.setQuestionAnswer(this.question.id, attachmentsLength);
+      }
+    }, 50);
+    this.inlineDeleteFiles.emit(this.question.deleteFiles);
+  }
+
+  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-fields/form-fields.module.ts

@@ -0,0 +1,110 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CheckBoxFieldsComponent } from './check-box-fields/check-box-fields.component';
+import { DateTimeFieldsComponent } from './date-time-fields/date-time-fields.component';
+import { DropDownFieldsComponent } from './drop-down-fields/drop-down-fields.component';
+import { FilePickerFieldsComponent } from './file-picker-fields/file-picker-fields.component';
+import { LocationFieldsComponent } from './location-fields/location-fields.component';
+import { RadioButtonFieldsComponent } from './radio-button-fields/radio-button-fields.component';
+import { RichTextEditorFieldsComponent } from './rich-text-editor-fields/rich-text-editor-fields.component';
+import { SelectionMatrixFieldsComponent } from './selection-matrix-fields/selection-matrix-fields.component';
+import { SignatureFieldsComponent } from './signature-fields/signature-fields.component';
+import { SliderFieldsComponent } from './slider-fields/slider-fields.component';
+import { TermsAndConditionFieldsComponent } from './terms-and-condition-fields/terms-and-condition-fields.component';
+import { TextAreaFieldsComponent } from './text-area-fields/text-area-fields.component';
+import { TextFieldsComponent } from './text-fields/text-fields.component';
+import { ToggleSwitchFieldsComponent } from './toggle-switch-fields/toggle-switch-fields.component';
+import { UrlFieldsComponent } from './url-fields/url-fields.component';
+import { FormsModule } from '@angular/forms';
+import { MailFieldsComponent } from './mail-fields/mail-fields.component';
+import { MobileFieldsComponent } from './mobile-fields/mobile-fields.component';
+import { NumberFieldsComponent } from './number-fields/number-fields.component';
+import { PasswordFieldsComponent } from './password-fields/password-fields.component';
+import {MatSliderModule} from "@angular/material/slider";
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+
+
+import { GoogleMapsModule } from '@angular/google-maps';
+import { DropdownModule } from '@piserve-tech/drop-down';
+import { FilePreviewModule } from '@piserve-tech/file-preview';
+import { SectionFieldsComponent } from './section-fields/section-fields.component';
+import { DocUploadModule } from '@piserve-tech/file-upload';
+import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
+import { QuillModule } from 'ngx-quill';
+import { AggregateFunctionComponent } from './aggregate-function/aggregate-function.component';
+import { CurrencyFieldsComponent } from './currency-fields/currency-fields.component';
+import { HiddenFieldComponent } from './hidden-field/hidden-field.component';
+import { IframeFieldsComponent } from './iframe-fields/iframe-fields.component';
+
+
+
+
+
+
+@NgModule({
+  declarations: [
+    CheckBoxFieldsComponent,
+    DateTimeFieldsComponent,
+    DropDownFieldsComponent,
+    FilePickerFieldsComponent,
+    LocationFieldsComponent,
+    RadioButtonFieldsComponent,
+    RichTextEditorFieldsComponent,
+    SelectionMatrixFieldsComponent,
+    SignatureFieldsComponent,
+    SliderFieldsComponent,
+    TermsAndConditionFieldsComponent,
+    TextAreaFieldsComponent,
+    TextFieldsComponent,
+    ToggleSwitchFieldsComponent,
+    UrlFieldsComponent,
+    MailFieldsComponent,
+    MobileFieldsComponent,
+    NumberFieldsComponent,
+    PasswordFieldsComponent,
+    SectionFieldsComponent,
+    AggregateFunctionComponent,
+    CurrencyFieldsComponent,
+    HiddenFieldComponent,
+    IframeFieldsComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatSliderModule,
+    BsDatepickerModule.forRoot(),
+    DropdownModule,
+    DocUploadModule,
+    GoogleMapsModule,
+    FilePreviewModule,
+    NgxMaterialTimepickerModule,
+    QuillModule
+  ],
+  exports: [
+    CheckBoxFieldsComponent,
+    DateTimeFieldsComponent,
+    DropDownFieldsComponent,
+    FilePickerFieldsComponent,
+    LocationFieldsComponent,
+    MailFieldsComponent,
+    MobileFieldsComponent,
+    NumberFieldsComponent,
+    PasswordFieldsComponent,
+    RadioButtonFieldsComponent,
+    RichTextEditorFieldsComponent,
+    SelectionMatrixFieldsComponent,
+    SignatureFieldsComponent,
+    SliderFieldsComponent,
+    TermsAndConditionFieldsComponent,
+    TextAreaFieldsComponent,
+    TextFieldsComponent,
+    ToggleSwitchFieldsComponent,
+    UrlFieldsComponent,
+    SectionFieldsComponent,
+    AggregateFunctionComponent,
+    CurrencyFieldsComponent,
+    HiddenFieldComponent,
+    IframeFieldsComponent
+  ]
+})
+export class FormFieldsModule { }

package/src/form-fields/hidden-field/hidden-field.component.spec.ts

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

package/src/form-fields/hidden-field/hidden-field.component.ts

@@ -0,0 +1,156 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { DataService } from '../../services/data.service';
+import { WhenClauseService } from '../../services/whenClause.service';
+
+@Component({
+  selector: 'lib-hidden-field',
+  template: '',
+  styleUrls: ['./hidden-field.component.scss']
+})
+export class HiddenFieldComponent {
+
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+  hint: string = '';
+  hiddenField!: any;
+  key: string = '';
+  valueSource: string = '';
+  value: string = '';
+  user: string = '';
+  private elementId: string='';
+    
+   constructor(
+      private tracker: ElementTrackerService,
+      private dataService:DataService,
+      private whenClauseService:WhenClauseService
+    ) {
+      this.dataService.header$.subscribe((data) => {
+        this.user = data.authUser;
+      });
+    }
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.hint = this.question?.hint;
+    this.hiddenField = this.question?.formElement?.hiddenField;
+    this.key = this.hiddenField?.key;
+    this.value = this.hiddenField?.value;
+    this.valueSource = this.hiddenField?.valueSource;
+  
+    const sourcesThatShouldNotOverride = [
+      'PREDEFINED_VARIABLE',
+      'LOCAL_STORAGE',
+      'SESSION_STORAGE'
+    ];
+  
+    const hasExistingAnswer =
+      this.question.answer !== null &&
+      this.question.answer !== undefined &&
+      this.question.answer !== '';
+  
+    // 🚨 Skip overwrite if answer exists for specific sources
+    if (
+      sourcesThatShouldNotOverride.includes(this.valueSource) &&
+      hasExistingAnswer
+    ) {
+      // Do nothing — keep existing answer
+    } else {
+      this.question.answer = this.resolveHiddenFieldValue(this.hiddenField);
+    }
+    setTimeout(() => {
+      this.whenClauseService.setQuestionAnswer(
+        this.question.id,
+        this.question.answer,
+        true
+      );
+    });
+  
+    this.answerChange.emit({
+      answer: this.question.answer,
+      maxPossibleScore: 0
+    });
+  }
+
+  resolveHiddenFieldValue(hiddenField: {
+    value: string | null,
+    valueSource: string | null,
+    key: string | null
+  }): any {
+    if (!hiddenField?.valueSource) return null;
+  
+    switch (hiddenField.valueSource) {
+      case 'CUSTOM_INPUT':
+        // Directly return the provided value
+        return hiddenField.value;
+  
+      case 'LOCAL_STORAGE':
+        if (hiddenField.key) {
+          return localStorage.getItem(hiddenField.key);
+        }
+        return null;
+  
+      case 'SESSION_STORAGE':
+        if (hiddenField.key) {
+          return sessionStorage.getItem(hiddenField.key);
+        }
+        return null;
+  
+      case 'PREDEFINED_VARIABLE':
+        return this.resolvePredefinedVariable(hiddenField.value);
+  
+      default:
+        return null;
+    }
+  }
+  
+  private resolvePredefinedVariable(variable: string | null): any {
+    if (!variable) return null;
+  
+    const now = new Date();
+  
+    switch (variable) {
+      case 'CURRENT_DATE':
+        return now.toISOString().split('T')[0]; // e.g. "2025-09-29"
+      case 'CURRENT_TIME':
+        return now.toTimeString().split(' ')[0]; // e.g. "15:42:18"
+      case 'CURRENT_DATE_TIME':
+        return now.toLocaleString(); // full ISO datetime
+      case 'EPOCH_TIME':
+        return now.getTime(); // milliseconds since 1970
+      case 'YEAR':
+        return now.getFullYear();
+      case 'MONTH':
+        return now.getMonth() + 1; // 1-12
+      case 'DAY':
+        return now.getDate(); // 1-31
+      case 'SUBMITTED_BY':
+        return this.user ? this.user : 'Unknown';
+      default:
+        return null;
+    }
+  }
+  
+
+  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);
+    }
+  }
+
+}