Fix image detail, reorganise translation files, use observables in co…

…nfig component (#109) * fix: iamge detail and reorganise tr files * fix: bump deps * fix: use observables in configure * fix: almost finish configure tests * fix: finish configure tests * fix: finish overview tests * fix: missing translations * fix: more missing translations, tooltip pos --------- Co-authored-by: Christian Badura <[email protected]>
onecx · Sep 3, 2024 · 55042aa · 55042aa
1 parent 12049d3
commit 55042aa
Show file tree

Hide file tree

Showing 12 changed files with 498 additions and 349 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,10 +85,10 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.4.1",
     "@openapitools/openapi-generator-cli": "^2.13.4",
-    "@schematics/angular": "^18.1.1",
+    "@schematics/angular": "^18.2.2",
     "@svgr/webpack": "^8.1.0",
     "@types/jasmine": "~5.1.4",
-    "@types/node": "~22.5.1",
+    "@types/node": "~22.5.2",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "css-loader": "^7.1.2",
@@ -108,7 +108,7 @@
     "ng-packagr": "18.1.0",
     "ngx-build-plus": "^18.0.0",
     "ngx-translate-testing": "^7.0.0",
-    "postcss": "8.4.41",
+    "postcss": "8.4.43",
     "postcss-import": "~16.1.0",
     "postcss-preset-env": "~9.6.0",
     "postcss-url": "~10.1.3",

diff --git a/src/app/welcome/welcome-configure/image-create/image-create.component.html b/src/app/welcome/welcome-configure/image-create/image-create.component.html
@@ -37,7 +37,7 @@
         [multiple]="false"
         [autoResize]="true"
         [chooseLabel]="'ACTIONS.CREATE.SELECT' | translate"
-        [aria-label]="'ACTIONS.CREATE.SELECT' | translate"
+        [attr.aria-label]="'ACTIONS.CREATE.SELECT' | translate"
         [pTooltip]="'ACTIONS.CREATE.SELECT.TOOLTIP' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
@@ -49,7 +49,7 @@
             id="wc_image_create_form_url"
             class="w-full"
             formControlName="url"
-            [aria-label]="'ACTIONS.CREATE.URL' | translate"
+            [attr.aria-label]="'ACTIONS.CREATE.URL' | translate"
             [pTooltip]="'ACTIONS.CREATE.URL.TOOLTIP' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
@@ -76,7 +76,7 @@
         icon="pi pi-times"
         (onClick)="onDialogHide()"
         [label]="'GENERAL.CANCEL' | translate"
-        [aria-label]="'GENERAL.CANCEL' | translate"
+        [attr.aria-label]="'GENERAL.CANCEL' | translate"
         [pTooltip]="'GENERAL.TOOLTIPS.CANCEL_AND_CLOSE' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"
@@ -87,7 +87,7 @@
         (onClick)="onSave()"
         [disabled]="!formGroup.valid"
         [label]="'GENERAL.SAVE' | translate"
-        [aria-label]="'GENERAL.SAVE' | translate"
+        [attr.aria-label]="'GENERAL.SAVE' | translate"
         [pTooltip]="'GENERAL.TOOLTIPS.SAVE' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"

diff --git a/src/app/welcome/welcome-configure/image-detail/image-detail.component.html b/src/app/welcome/welcome-configure/image-detail/image-detail.component.html
@@ -10,20 +10,12 @@
   [style]="{ width: '50vw' }"
   [showHeader]="true"
 >
-  <p-carousel [value]="imageInfos" [numVisible]="1" [numScroll]="1" [page]="imageIndex">
+  <p-carousel [value]="imageData" [numVisible]="1" [numScroll]="1" [page]="imageIndex">
     <ng-template let-info let-i="index" pTemplate="item">
       <div class="border-1 surface-border border-round m-2 p-3">
         <div class="mb-3">
           <div class="relative mx-auto">
-            <img
-              class="w-full border-round"
-              [src]="this.buildImageSrc(info)"
-              [alt]="'DETAIL.IMAGE' | translate"
-              [aria-label]="'DETAIL.IMAGE' | translate"
-              [pTooltip]="'DETAIL.TOOLTIP' | translate"
-              tooltipPosition="top"
-              tooltipEvent="hover"
-            />
+            <img class="w-full border-round" [src]="this.buildImageSrc(info)" [alt]="'DETAIL.IMAGE' | translate" />
           </div>
         </div>
       </div>
@@ -37,7 +29,7 @@
         icon="pi pi-times"
         (onClick)="onDialogHide()"
         [label]="'GENERAL.CANCEL' | translate"
-        [aria-label]="'GENERAL.CANCEL' | translate"
+        [attr.aria-label]="'GENERAL.CANCEL' | translate"
         [pTooltip]="'GENERAL.TOOLTIPS.CANCEL' | translate"
         tooltipPosition="top"
         tooltipEvent="hover"

diff --git a/src/app/welcome/welcome-configure/image-detail/image-detail.component.ts b/src/app/welcome/welcome-configure/image-detail/image-detail.component.ts
@@ -11,7 +11,7 @@ export class ImageDetailComponent {
   @Input() public displayDetailDialog = false
   @Input() public imageInfoCount: number = 0
   @Input() public images: ImageDataResponse[] = []
-  @Input() public imageInfos: ImageInfo[] = []
+  @Input() public imageData: ImageInfo[] = []
   @Input() public imageIndex = 0
   @Output() public hideDialogAndChanged = new EventEmitter<boolean>()