Add export-table-dialog.component.ts (#13)

Signed-off-by: Pavel Shalamkov <[email protected]>

Author: pavel-s-epam

libs/schematic/package.json

@@ -13,7 +13,8 @@
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0",
     "@angular/forms": "^20.3.0",
-    "@angular/material": "^20.2.0"
+    "@angular/material": "^20.2.0",
+    "@jsverse/transloco": "^7.5.1"
   },
   "sideEffects": false,
   "nx-migrations": {

libs/schematic/src/lib/components/export-table-dialog/export-table-dialog.component.html

@@ -0,0 +1,29 @@
+<div mat-dialog-title class="dialog-title">
+  {{ 'exportData.title' | transloco }}
+  <mat-icon class="close-dialog-icon" [mat-dialog-close]="{action: Actions.Cancel}">close</mat-icon>
+</div>
+
+<div mat-dialog-content>
+  <section data-test="dialogDescription" class="dialog-description">{{ dialogDescription() }}</section>
+  <section>
+    <div class="checkbox-container">
+      <mat-checkbox data-test="exportAllPages" #exportAllPages (change)="setDialogDescription()">
+        {{ 'exportData.exportAllPages' | transloco : {maxExportRows: data.maxExportRows} }}
+      </mat-checkbox>
+    </div>
+    <div class="checkbox-container">
+      @if (!showAllColumnsBox()) {
+        <mat-checkbox data-test="exportAllColumns" #exportAllColumns (change)="setDialogDescription()">
+          {{ 'exportData.exportAllColumns' | transloco : {allColumns: data.allColumns} }}
+        </mat-checkbox>
+      }
+    </div>
+  </section>
+</div>
+
+<div mat-dialog-actions class="dialog-button-container">
+  <button mat-button data-test="closeDialog" [mat-dialog-close]="{action: Actions.Cancel}">{{ 'cancel' | transloco }}</button>
+  <button mat-button data-test="exportData" mat-raised-button class="mat-primary export-button" (click)="exportData()">
+    <span>{{ 'export' | transloco }}</span>
+  </button>
+</div>

libs/schematic/src/lib/components/export-table-dialog/export-table-dialog.component.scss

@@ -0,0 +1,32 @@
+.dialog-button-container {
+  justify-content: flex-end;
+}
+
+.dialog-title {
+  justify-content: space-between;
+  display: flex;
+  align-items: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-weight: bold;
+}
+
+.close-dialog-icon {
+  background: none;
+  border: none;
+  font-size: 1.3rem;
+  cursor: pointer;
+  margin-left: auto;
+}
+
+.dialog-description {
+  font-size: 1.2rem;
+  height: 3rem;
+  margin-right: 2rem;
+  margin-bottom: 1.5rem;
+  float: left;
+}
+
+.checkbox-container {
+  margin: -20px 0 0.5rem -11px;
+}