@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-submission/save-as-draft/saveDraftModalComponent.html

@@ -0,0 +1,33 @@
+<div class="save-draft-modal"
+     [style.--primary-color]="primaryColor"
+     [style.--primary-color-rgb]="primaryColorRgb">
+  <div class="modal-card">
+    <div class="status-icon">
+      <div class="icon-wrapper">
+        <i class="bi bi-file-earmark-text-fill"></i>
+      </div>
+    </div>
+
+    <h3>Form Submission Incomplete</h3>
+    <p class="subheader">We noticed some information needs attention</p>
+
+    <div class="message-card">
+      <div class="message-content">
+        <p>Your form contains:</p>
+        <ul>
+          <li><i class="bi bi-x-circle"></i> Missing required fields</li>
+          <li><i class="bi bi-exclamation-triangle"></i> Incorrectly formatted answers</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="action-buttons">
+      <button class="btn btn-continue" (click)="continueEditing()">
+        <i class="bi bi-pencil-square"></i> Continue Editing
+      </button>
+      <button class="btn btn-save" (click)="saveAsDraft()">
+        <i class="bi bi-cloud-arrow-up"></i> Save as Draft
+      </button>
+    </div>
+  </div>
+</div>

package/src/form-submission/save-as-draft/saveDraftModalComponent.scss

@@ -0,0 +1,195 @@
+.save-draft-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1050;
+  backdrop-filter: blur(3px);
+  overflow: hidden;
+  animation: fadeIn 0.25s ease-out forwards;
+
+  .modal-card {
+    background: white;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 480px;
+    min-height: 300px;
+    padding: 2.5rem;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    margin: 20px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rgba(0,0,0,0.1);
+    transform: scale(0.98);
+    animation: scaleIn 0.25s ease-out forwards 0.1s;
+  }
+
+  .status-icon {
+    text-align: center;
+    margin-bottom: 1.5rem;
+    flex-shrink: 0;
+
+    .icon-wrapper {
+      display: inline-flex;
+      background: linear-gradient(
+        135deg,
+        var(--primary-color),
+        color-mix(in srgb, var(--primary-color) 90%, white)
+      );
+      box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+
+      i {
+        color: white;
+        font-size: 2.2rem;
+      }
+    }
+  }
+
+  h3 {
+    color: #2c3e50;
+    text-align: center;
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+    font-size: 1.5rem;
+  }
+
+  .subheader {
+    color: #6c757d;
+    text-align: center;
+    margin-bottom: 1.5rem;
+    font-size: 1rem;
+  }
+
+  .message-card {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 1.25rem;
+    margin-bottom: 2rem;
+    border-left: 4px solid var(--primary-color);
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
+
+    .message-content {
+      p {
+        color: #495057;
+        font-weight: 500;
+        margin-bottom: 0.75rem;
+      }
+
+      ul {
+        list-style: none;
+        padding-left: 0;
+        margin-bottom: 0;
+
+        li {
+          color: #495057;
+          margin-bottom: 0.5rem;
+          display: flex;
+          align-items: center;
+          font-size: 0.95rem;
+
+          i {
+            margin-right: 0.5rem;
+            font-size: 1.1rem;
+          }
+
+          .bi-x-circle {
+            color: #dc3545;
+          }
+
+          .bi-exclamation-triangle {
+            color: #ffc107;
+          }
+        }
+      }
+    }
+  }
+
+  .action-buttons {
+    margin-top: auto;
+    flex-shrink: 0;
+    display: flex;
+    gap: 1rem;
+
+    .btn {
+      flex: 1;
+      padding: 0.8rem;
+      border-radius: 8px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      border: none;
+
+      i {
+        margin-right: 0.5rem;
+        font-size: 1.1rem;
+      }
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      }
+
+      &:active {
+        transform: translateY(0);
+      }
+    }
+
+    .btn-continue {
+      background: white;
+      color: var(--primary-color);
+      border: 1px solid var(--primary-color);
+
+      &:hover {
+        background-color: color-mix(in srgb, var(--primary-color) 5%, white);
+      }
+    }
+
+    .btn-save {
+      background: var(--primary-color);
+      color: white;
+      box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
+
+      &:hover {
+        background-color: color-mix(in srgb, var(--primary-color) 95%, black);
+      }
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (max-width: 576px) {
+  .save-draft-modal {
+    .modal-card {
+      padding: 1.5rem;
+      min-height: auto;
+      height: auto;
+      max-height: 90vh;
+      overflow-y: auto;
+    }
+
+    .action-buttons {
+      flex-direction: column;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+<div class="subModule">
+    <div class="submission-container">
+    <div *ngFor="let qa of parentQuestionAnswers" class="submission-item">
+      <div class="key">{{ qa.question }}</div>
+      <div class="value">
+        <ng-container *ngIf="qa.elementType === 'FILE_PICKER'; else text">
+          <div class="files" *ngFor="let attachment of qa.attachments">
+            <ng-container *ngIf="isImageUrl(attachment.fileName); else fileLink">
+              <img [src]="attachment.fileUrl" alt="{{ attachment.fileName }}" class="image">
+            </ng-container>
+            <ng-template #fileLink>
+              <p>{{ attachment.fileName }}</p>
+              <a class="fileName" [href]="attachment.fileUrl" target="_blank">
+                <i class="bi bi-file-earmark"></i>
+              </a>
+            </ng-template>
+          </div>
+        </ng-container>
+        <ng-template #text>
+          <ng-container [ngSwitch]="qa.elementType">
+            <p *ngSwitchCase="'RICH_TEXT_EDITOR'" [innerHTML]="qa.values"></p>
+            <p *ngSwitchCase="'DROP_DOWN'">{{ qa.values.join(', ') }}</p>
+            <p *ngSwitchCase="'SELECTION_MATRIX'">{{ qa.values.join(', ') }}</p>
+            <p *ngSwitchDefault>{{ qa.values }}</p>
+          </ng-container>
+        </ng-template>
+      </div>
+    </div>
+</div>
+  </div>

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

@@ -0,0 +1,67 @@
+.subModule{
+    width: 100%;
+    position: relative;
+    padding-left: 3rem;
+    padding-right: 3rem;
+    padding-top: 4rem;
+    @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;
+    }
+}
+.submission-container {
+    background: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: 6px;
+    
+  }
+  
+  
+  .submission-item {
+    flex: 1 0 15%;
+    margin: 5px;
+    padding: 10px;  
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .key {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+  
+  .value {
+    word-break: break-word;
+  }
+  
+  .image {
+    max-width: 100%;
+    height: auto;
+    max-height: 100px;
+    margin-top: 5px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-bottom: 10px;
+  }
+  
+  .files{
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .fileName{
+    text-decoration: none;
+    margin-left: 2%;
+    i{
+        font-size: 20px;
+    }
+  }

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

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

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

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'lib-submission-container',
+  templateUrl: './submission-container.component.html',
+  styleUrls: ['./submission-container.component.scss']
+})
+export class SubmissionContainerComponent {
+  @Input() parentQuestionAnswers:any;
+
+  isImageUrl(url: string): boolean {
+    return url.match(/\.(jpeg|jpg|gif|png)$/) != null;
+  }
+}

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

@@ -0,0 +1,76 @@
+<div class="outer-container">
+
+<ng-container *ngIf="isLoadingPages">
+    <ngx-skeleton-loader count="5"></ngx-skeleton-loader>
+</ng-container>
+
+  <div class="head container" *ngIf="!skipMargin">
+    <lib-header [name]="name" [skipMargin]="skipMargin"></lib-header>
+  </div>
+
+
+
+  <div class="body" [ngClass]="{ 'skip-margin': skipMargin,container: !skipMargin}">
+
+    <lib-submission-container [parentQuestionAnswers]="parentQuestionAnswers"
+    *ngIf="parentQuestionAnswers"></lib-submission-container>
+
+    <lib-navigation-tabs
+      *ngIf="navigation == 'TAB'"
+      [skipMargin]="skipMargin"
+      [skipValidation]="skipValidation"
+      [pages]="pages"
+      [currentPageIndex]="currentPageIndex"
+      (pageChanged)="setCurrentPage($event)"
+      (submitEmit)="submitForm()"
+      [pageDetails]="pageDetails"
+      [eligibleForSubmission]="eligibleForSubmission"
+      [edit]="edit"
+      [acceptedLanguage] = "acceptedLanguage"
+      [isActionTriggered]="isActionTriggered"
+      [primaryColor]="primaryColor"
+      [secondaryColor]="secondaryColor"
+      [markAllQuestionsAsRequired]="markAllQuestionsAsRequired"
+      [submissionInProgress]="submissionInProgress"
+      [submissionInDraft]="submissionInDraft"
+      [showCancelButton]="showCancelButton"
+      [submissionProgress]="submissionProgress"
+      [animatedDots]="animatedDots"
+      [currentStep]="currentStep"
+      (saveAsDraftEmit)="saveAsDraft()"
+      (subFormChange)="updateSubFormWithSubmissions($event)"
+      (rowSetIndex)="loadMoreData($event)"
+      (cancel)="cancelled()"
+    ></lib-navigation-tabs>
+    <lib-next-prev-navigation
+      *ngIf="navigation == 'NEXT_AND_PREVIOUS_BUTTON'"
+      [skipMargin]="skipMargin"
+      [currentPageIndex]="currentPageIndex"
+      [pageDetails]="pageDetails"
+      (rowSetIndex)="loadMoreData($event)"
+      [pages]="pages"
+      [previousPage]="previousPage"
+      [isActionTriggered]="isActionTriggered"
+      [currentPage]="currentPage"
+      [primaryColor]="primaryColor"
+      [secondaryColor]="secondaryColor"
+      [nextPage]="nextPage"
+      (navigateNext)="navigateToNextPage()"
+      (navigatePrevious)="navigateToPreviousPage()"
+      [acceptedLanguage] = "acceptedLanguage"
+      (submitEmit)="submitForm()"
+      (saveAsDraftEmit)="saveAsDraft()"
+      [edit]="edit"
+      [eligibleForSubmission]="eligibleForSubmission"
+      [submissionInProgress]="submissionInProgress"
+      [submissionInDraft]="submissionInDraft"
+      [showCancelButton]="showCancelButton"
+      [submissionProgress]="submissionProgress"
+      [animatedDots]="animatedDots"
+      [currentStep]="currentStep"
+      (subFormChange)="updateSubFormWithSubmissions($event)"
+      (cancel)="cancelled()"
+       [skipValidation]="skipValidation"
+    ></lib-next-prev-navigation>
+  </div>
+</div>

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

@@ -0,0 +1,88 @@
+.outer-container {
+  background-color: white;
+  padding: 20px;
+  position: relative;
+  margin-top: 25px;
+  @media (max-width: 576px) {
+    padding: 8px;
+  }
+}
+
+.head {
+  background-color: white;
+  padding: 0 !important;
+}
+
+.body {
+  position: relative;
+  z-index: 1;
+  background: #efefef;
+  border-radius: 6px;
+}
+
+.skip-margin{
+  background: #fff;
+}
+
+// .subModuleContainer{
+//   padding-top: 20px;
+// }
+
+
+.save-draft-wrapper {
+  display: flex;
+  justify-content: flex-end;   /* align to right */
+  gap: 1rem;                   /* space between buttons */
+  margin-top: 1rem;
+  margin-right: 2rem;       /* space above */
+  padding: 0 1.5rem 1.5rem 1.5rem; /* space inside container (left/right/bottom) */
+}
+
+
+.draft-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+
+  padding: 0.65rem 1.6rem;
+  font-size: 14px;
+  font-weight: 500;
+
+  border-radius: 9999px; /* pill shape */
+  border: 1px solid transparent;
+  cursor: pointer;
+
+  background: linear-gradient(135deg, #2563eb, #1d4ed8);
+  color: #fff;
+
+  transition: all 0.2s ease;
+}
+
+.draft-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #1e40af, #1d4ed8);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.draft-btn:disabled {
+  background: #cbd5e1;
+  color: #64748b;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.draft-btn .spinner {
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid #fff;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

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