Enable import and export (#139)

* feat: update api, prepare import and export * feat: make dialogs visible, write import functions * fix: disable lint for explicit any * fix: add buttons and text in export dialog, fix translations * fix: make export work * fix: make import also work * fix: use display names in export, show only used products * fix: bump deps * fix: tests * fix: remove fdescribe * fix: add date time to filename, add tooltips, and cancel button, fix tests --------- Co-authored-by: Christian Badura <[email protected]>
onecx · Aug 2, 2024 · 205e291 · 205e291
1 parent 8c2e476
commit 205e291
Show file tree

Hide file tree

Showing 20 changed files with 1,376 additions and 318 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "@onecx/portal-integration-angular": "^5.2.0",
     "@onecx/portal-layout-styles": "^5.2.0",
     "@webcomponents/webcomponentsjs": "^2.8.0",
+    "file-saver": "^2.0.5",
     "keycloak-angular": "^16.0.1",
     "ngx-color": "^9.0.0",
     "primeflex": "^3.3.1",
@@ -75,7 +76,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.1.1",
-    "@angular-devkit/core": "^18.1.1",
+    "@angular-devkit/core": "^18.1.3",
     "@angular-devkit/schematics": "^18.1.1",
     "@angular-eslint/builder": "^18.1.0",
     "@angular-eslint/eslint-plugin": "^18.1.0",
@@ -93,7 +94,7 @@
     "@schematics/angular": "^18.1.1",
     "@storybook/addon-essentials": "8.2.5",
     "@storybook/angular": "8.2.5",
-    "@storybook/core-server": "8.2.5  ",
+    "@storybook/core-server": "8.2.6  ",
     "@svgr/webpack": "^8.1.0",
     "@swc-node/register": "^1.10.9",
     "@swc/cli": "~0.4.0",
@@ -132,7 +133,7 @@
     "sonar-scanner": "^3.1.0",
     "sonarqube-scanner": "^4.0.1",
     "style-loader": "^4.0.0",
-    "tailwindcss": "3.4.6",
+    "tailwindcss": "3.4.7",
     "ts-node": "10.9.2",
     "typescript": "5.5",
     "url-loader": "^4.1.1",

diff --git a/src/_mixins.scss b/src/_mixins.scss
@@ -140,3 +140,13 @@
     }
   }
 }
+
+@mixin listbox-zebra-rows {
+  :host ::ng-deep {
+    .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled) {
+      &:nth-child(odd) {
+        background-color: #f8f9fa;
+      }
+    }
+  }
+}
diff --git a/src/app/help/help-detail/help-detail.component.html b/src/app/help/help-detail/help-detail.component.html
@@ -26,13 +26,19 @@
         [label]="'GENERAL.CANCEL' | translate"
         (onClick)="onDialogHide()"
         icon="pi pi-times"
+        [pTooltip]="'GENERAL.CANCEL' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></p-button>
       <p-button
         id="help_detail_button_save"
         [label]="'GENERAL.SAVE' | translate"
         (onClick)="onSave()"
         icon="pi pi-save"
         [disabled]="!helpFormComponent.formGroup.valid"
+        [pTooltip]="'GENERAL.SAVE' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></p-button>
     </div>
   </ng-template>

diff --git a/src/app/help/help-search/help-search.component.html b/src/app/help/help-search/help-search.component.html
@@ -196,6 +196,107 @@
   </ng-template>
 </p-dialog>
 
+<p-dialog
+  [(visible)]="displayImportDialog"
+  [header]="'ACTIONS.IMPORT.HELP_ITEM' | translate"
+  [modal]="true"
+  [resizable]="false"
+  [dismissableMask]="true"
+  [style]="{ 'max-width': '500px' }"
+>
+  <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
+    <p-fileUpload
+      #fileUploader
+      id="help_import_file_upload"
+      mode="advanced"
+      name="file"
+      accept=".json"
+      [maxFileSize]="1000000"
+      [customUpload]="true"
+      (uploadHandler)="onImportConfirmation()"
+      (onClear)="onClear()"
+      (onRemove)="onClear()"
+      (onSelect)="onSelect($event)"
+      [showUploadButton]="isFileValid()"
+      [chooseLabel]="'ACTIONS.IMPORT.CHOOSE' | translate"
+      [uploadLabel]="'ACTIONS.IMPORT.UPLOAD' | translate"
+      [cancelLabel]="'GENERAL.CANCEL' | translate"
+    />
+  </div>
+  <ng-template pTemplate="footer">
+    <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
+      <button
+        pButton
+        type="button"
+        id="help_import_button_cancel"
+        class="m-0"
+        icon="pi pi-times"
+        iconPos="left"
+        [label]="'GENERAL.CANCEL' | translate"
+        (click)="onCloseImportDialog()"
+        [pTooltip]="'GENERAL.CANCEL' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      ></button>
+    </div>
+  </ng-template>
+</p-dialog>
+
+<p-dialog
+  [(visible)]="displayExportDialog"
+  [header]="'ACTIONS.EXPORT.HELP_ITEM' | translate"
+  [modal]="true"
+  [resizable]="false"
+  [dismissableMask]="true"
+  [style]="{ 'max-width': '500px' }"
+>
+  <div class="flex flex-column row-gap-2">
+    <div>{{ 'HELP_ITEM.APPLICATION_LIST' | translate }}</div>
+    <p-listbox
+      [options]="resultsForDisplay"
+      [(ngModel)]="selectedResults"
+      optionLabel="productDisplayName"
+      [filter]="true"
+      [checkbox]="true"
+      [multiple]="true"
+      [metaKeySelection]="false"
+      [showToggleAll]="false"
+      [emptyMessage]="'ACTIONS.SEARCH.NO_DATA' | translate"
+      [listStyle]="{ 'max-height': '300px' }"
+    />
+  </div>
+  <ng-template pTemplate="footer">
+    <div class="flex flex-wrap column-gap-2 row-gap-1 justify-content-end">
+      <button
+        pButton
+        type="button"
+        id="help_export_button_cancel"
+        class="m-0"
+        icon="pi pi-times"
+        iconPos="left"
+        [label]="'GENERAL.CANCEL' | translate"
+        (click)="onCloseExportDialog()"
+        [pTooltip]="'GENERAL.CANCEL' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      ></button>
+      <button
+        pButton
+        type="button"
+        id="help_export_button_save"
+        class="m-0"
+        icon="pi pi-check"
+        iconPos="left"
+        [label]="'GENERAL.SAVE' | translate"
+        (click)="onExportConfirmation()"
+        [pTooltip]="'GENERAL.SAVE' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
+      ></button>
+    </div>
+  </ng-template>
+</p-dialog>
+
 <app-help-detail
   *ngIf="productsLoaded"
   [(displayDetailDialog)]="displayDetailDialog"

diff --git a/src/app/help/help-search/help-search.component.scss b/src/app/help/help-search/help-search.component.scss
@@ -2,6 +2,7 @@
 
 @include danger-action;
 @include table-inline-buttons;
+@include listbox-zebra-rows;
 
 :host ::ng-deep {
   .p-datatable .p-sortable-column .p-sortable-column-icon {
@@ -16,6 +17,21 @@
       min-width: unset;
     }
   }
+  .p-listbox {
+    box-shadow:
+      0 2px 1px -1px rgba(0, 0, 0, 0.2),
+      0 1px 1px 0 rgba(0, 0, 0, 0.14),
+      0 1px 3px 0 rgba(0, 0, 0, 0.12);
+    .p-listbox-list-wrapper {
+      border-radius: var(--border-radius);
+      .p-listbox-list .p-listbox-item {
+        padding: 0.5rem 1rem;
+        .p-checkbox {
+          margin-right: 1rem;
+        }
+      }
+    }
+  }
 
   // responsive table result view
   @media screen and (min-width: 576px) {