@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/question/inline-multiple-subform/inline-multiple-subform.component.html

@@ -0,0 +1,321 @@
+<div class="example-container" tabindex="0">
+  <div class="table-container">
+    <table mat-table [dataSource]="submissions" class="mat-elevation-z8">
+      <ng-container *ngFor="let row of subForm.rows">
+        <ng-container
+          *ngFor="let formElement of row.grid"
+          [matColumnDef]="formElement.element.question"
+        >
+          <th
+            mat-header-cell
+            *matHeaderCellDef
+            class="border border-1 column-width"
+          >
+            {{ formElement.element.question }}
+          </th>
+          <td
+            mat-cell
+            *matCellDef="let submission;let i=index"
+            class="border-cell column-width"
+            [id]="'question-'+submission.submissionId"
+          >
+            <div *ngIf="formElement.entityType === 'QUESTION' && whenClauseService.checkElementVisibility(formElement.element.id,submission)">
+              <div [ngSwitch]="formElement.element.formElement.elementType">
+                <lib-check-box-fields
+                  *ngSwitchCase="'CHECK_BOX'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [rowId]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-check-box-fields>
+                <lib-date-time-fields
+                  *ngSwitchCase="'DATE_TIME'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-date-time-fields>
+                <lib-drop-down-fields
+                  *ngSwitchCase="'DROP_DOWN'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-drop-down-fields>
+                <lib-file-picker-fields
+                  *ngSwitchCase="'FILE_PICKER'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                  (inlineDeleteFiles)="
+                    updateDeletedFiles(submission, formElement.element, $event)
+                  "
+                ></lib-file-picker-fields>
+                <lib-location-fields
+                  *ngSwitchCase="'LOCATION'"
+                  [inLine]="true"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-location-fields>
+                <lib-mail-fields
+                  *ngSwitchCase="'EMAIL'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-mail-fields>
+                <lib-mobile-fields
+                  *ngSwitchCase="'MOBILE'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-mobile-fields>
+                <lib-number-fields
+                  *ngSwitchCase="'NUMBER'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  [rowId]="i"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-number-fields>
+                <lib-password-fields
+                  *ngSwitchCase="'PASSWORD'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-password-fields>
+                <lib-radio-button-fields
+                  *ngSwitchCase="'RADIO_BUTTON'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  [rowId]="i"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-radio-button-fields>
+                <lib-rich-text-editor-fields
+                  *ngSwitchCase="'RICH_TEXT_EDITOR'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-rich-text-editor-fields>
+                <lib-selection-matrix-fields
+                  *ngSwitchCase="'SELECTION_MATRIX'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [acceptedLanguage]="acceptedLanguage"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  [rowId]="i"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-selection-matrix-fields>
+                <lib-signature-fields
+                  *ngSwitchCase="'SIGNATURE'"
+                  [inLine]="true"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-signature-fields>
+                <lib-slider-fields
+                  *ngSwitchCase="'SLIDER'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-slider-fields>
+                <lib-terms-and-condition-fields
+                  *ngSwitchCase="'TERMS_AND_CONDITION'"
+                  [inLine]="true"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-terms-and-condition-fields>
+                <lib-text-area-fields
+                  *ngSwitchCase="'TEXT_AREA'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-text-area-fields>
+                <lib-text-fields
+                  *ngSwitchCase="'TEXT_BOX'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-text-fields>
+                <lib-toggle-switch-fields
+                  *ngSwitchCase="'TOGGLE_SWITCH'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  [acceptedLanguage]="acceptedLanguage"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-toggle-switch-fields>
+                <lib-url-fields
+                  *ngSwitchCase="'URL'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-url-fields>
+                <lib-currency-fields
+                  *ngSwitchCase="'CURRENCY'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-currency-fields>
+                <lib-hidden-field
+                  *ngSwitchCase="'HIDDEN_FIELD'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-hidden-field>
+                <lib-aggregate-function
+                  *ngSwitchCase="'AGGREGATE_FUNCTION'"
+                  [inLine]="true"
+                  [submissionIndex]="i"
+                  [question]="getSubmissionQuestion(submission, formElement)"
+                  [disableEdit]="isSubmissionEditable(submission,formElement.element.id)"
+                  [rowId]="i"
+                  (answerChange)="
+                    updateInlineAnswer(submission, formElement.element, $event)
+                  "
+                ></lib-aggregate-function>
+              </div>
+            </div>
+          </td>
+        </ng-container>
+      </ng-container>
+
+      <ng-container matColumnDef="actions" stickyEnd>
+        <th
+          mat-header-cell
+          *matHeaderCellDef
+          class="border border-1 action-column"
+        >
+          Actions
+        </th>
+        <td
+          mat-cell
+          *matCellDef="let submission; let i = index"
+          class="border-cell text-center"
+        >
+          <button class="delete-button" (click)="deleteSubmission(i)">
+            <i class="bi bi-trash"></i>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr
+        mat-header-row
+        *matHeaderRowDef="displayedColumns"
+        class="border-row"
+      ></tr>
+      <tr
+        mat-row
+        *matRowDef="let submission; columns: displayedColumns"
+        class="border-row"
+      ></tr>
+    </table>
+  </div>
+
+  <div class="footer">
+    <div class="addNewBtn" (click)="addNewSubmission()">
+      <svg
+        width="15"
+        height="14"
+        viewBox="0 0 15 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M12.5556 13.2778H2.44444C1.64639 13.2778 1 12.6673 1 11.9136V2.3642C1 1.61048 1.64639 1 2.44444 1H12.5556C13.3536 1 14 1.61048 14 2.3642V11.9136C14 12.6673 13.3536 13.2778 12.5556 13.2778Z"
+          stroke="#D8D8D8"
+          stroke-width="0.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M5.3335 7.50347H9.66683"
+          stroke="#084FFF"
+          stroke-width="0.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M7.50005 5.33594V9.66927"
+          stroke="#084FFF"
+          stroke-width="0.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+      <a class="ms-2 text-decoration-none">{{addButtonLabel}}</a>
+    </div>
+  </div>
+</div>

package/src/question/inline-multiple-subform/inline-multiple-subform.component.scss

@@ -0,0 +1,78 @@
+.table-container {
+  overflow-x: auto;
+  width: 100%;
+  .mat-table-sticky {
+    background: white;
+    z-index: 1;
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  cursor: pointer;
+  margin-top: 15px;
+}
+
+.hidden {
+  display: none;
+}
+
+.dropdown-menu {
+  position: relative;
+  z-index: 999;
+}
+
+::-webkit-scrollbar {
+  width: 2px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #dbd9d9;
+  border-radius: 6px;
+}
+
+::ng-deep .mat-mdc-menu-panel {
+  min-width: 65px !important;
+}
+
+table {
+  border-collapse: separate !important;
+}
+
+.border-row th,
+.border-row td {
+  border: 1px solid #d8d8d8;
+}
+
+.border-cell {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.delete-button {
+  border: none;
+  background-color: white;
+  font-size: 20px;
+}
+
+.action-column {
+  width: 30px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.column-width {
+  min-width: 320px;
+  white-space: nowrap;
+}
+
+::ng-deep .ql-toolbar.ql-snow{
+  display: flex;
+}

package/src/question/inline-multiple-subform/inline-multiple-subform.component.spec.ts

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