@piserve-tech/form-submission 1.3.314 → 1.3.316

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

@@ -0,0 +1,185 @@
+<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"
+            class="border border-1"
+            [id]="'question-'+submission.submissionId"
+            [ngClass]="{
+              hidden: getAnswerByQuestionId(submission, formElement)
+                ?.isChild
+            }"
+          >
+            <div
+              [innerHTML]="
+                getAnswerByQuestionId(submission, formElement)
+                  ?.htmlContent
+              "
+            ></div>
+          </td>
+        </ng-container>
+      </ng-container>
+      <ng-container matColumnDef="actions" stickyEnd>
+        <th mat-header-cell *matHeaderCellDef class="border border-1">
+          Actions
+        </th>
+        <td
+          mat-cell
+          *matCellDef="let submission; let i = index"
+          class="text-center border border-1"
+        >
+          <div>
+            <button
+              class="btn"
+              mat-icon-button
+              [matMenuTriggerFor]="menu"
+              aria-label="Example icon-button with a menu"
+            >
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu">
+              <button
+                mat-menu-item
+                (click)="editSubFormSubmission(i, submission)"
+              >
+                <svg
+                  width="29"
+                  height="28"
+                  viewBox="0 0 29 28"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    x="0.5"
+                    y="0.5"
+                    width="28"
+                    height="26.4737"
+                    rx="5.5"
+                    fill="white"
+                    stroke="#D8D8D8"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M12.0009 19.0787H9.1582V16.2361C9.1582 15.9447 9.2739 15.6653 9.47999 15.4593L16.2224 8.71686C16.4284 8.5105 16.708 8.39453 16.9995 8.39453C17.2911 8.39453 17.5707 8.5105 17.7767 8.71686L19.5201 10.4603C19.7264 10.6663 19.8424 10.9458 19.8424 11.2374C19.8424 11.529 19.7264 11.8086 19.5201 12.0145L12.7777 18.757C12.5715 18.9628 12.2922 19.0785 12.0009 19.0787Z"
+                    stroke="#084FFF"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M15.1704 10.3984L17.8415 13.0695"
+                    stroke="#084FFF"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+              <button mat-menu-item (click)="deleteSubForm(i)">
+                <svg
+                  width="29"
+                  height="28"
+                  viewBox="0 0 29 28"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <rect
+                    x="0.5"
+                    y="0.5"
+                    width="27.6402"
+                    height="26.1328"
+                    rx="5.5"
+                    fill="white"
+                    stroke="#D8D8D8"
+                  />
+                  <path
+                    d="M8.60449 9.20637H20.0354"
+                    stroke="#084FFF"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M19.2189 9.20703V17.7863C19.2189 18.6482 18.4881 19.3462 17.5859 19.3462H11.0539C10.1517 19.3462 9.4209 18.6482 9.4209 17.7863V9.20703"
+                    stroke="#084FFF"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M16.7696 6.67122H11.8706"
+                    stroke="#084FFF"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M12.6871 12.3242V16.2239"
+                    stroke="#084FFF"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M15.9532 12.3242V16.2239"
+                    stroke="#084FFF"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </button>
+            </mat-menu>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></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/multiple-subform/multiple-subform.component.scss

@@ -0,0 +1,52 @@
+.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;
+}
+.column-width {
+  min-width: 300px;
+  max-width: 500px;
+  white-space: nowrap;
+}

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

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