fix: sort search results by diaply name (#178)

onecx · Jul 20, 2024 · 380dc04 · 380dc04
1 parent 9795995
commit 380dc04
Show file tree

Hide file tree

Showing 10 changed files with 14,369 additions and 8,200 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -74,7 +74,6 @@
     "primeng": "15.2.1",
     "rxjs": "7.8.1",
     "tslib": "^2.5.0",
-    "zod": "^3.22.1",
     "zone.js": "~0.12.0"
   },
   "devDependencies": {
@@ -107,10 +106,7 @@
     "@types/node": "18.16.3",
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "@typescript-eslint/parser": "5.48.2",
-    "autoprefixer": "10.4.14",
-    "chromatic": "^6.17.4",
     "css-loader": "^6.10.0",
-    "cypress": "^12.11.0",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-cypress": "^2.13.3",
@@ -133,7 +129,7 @@
     "ng-packagr": "15.2.2",
     "ngx-build-plus": "^14.0.0",
     "ngx-translate-testing": "^6.1.0",
-    "postcss": "8.4.38",
+    "postcss": "8.4.39",
     "postcss-import": "~16.1.0",
     "postcss-preset-env": "~9.5.2",
     "postcss-url": "~10.1.3",
@@ -148,7 +144,6 @@
     "typescript": "4.9.5",
     "url-loader": "^4.1.1",
     "webpack": "^5.91.0",
-    "webpack-merge": "^5.8.0",
-    "winston": "^3.8.2"
+    "webpack-merge": "^5.8.0"
   }
 }
diff --git a/src/app/shared/image-container/image-container.component.html b/src/app/shared/image-container/image-container.component.html
@@ -5,13 +5,17 @@
   [ocxSrc]="displayImageUrl"
   (error)="onImageError()"
   [alt]="title"
-  [title]="title ? title : ('IMAGE.TOOLTIPS.IMAGE' | translate)"
+  [pTooltip]="title ? title : ('IMAGE.TOOLTIPS.IMAGE' | translate)"
+  tooltipPosition="top"
+  tooltipEvent="hover"
 />
 <img
   [id]="id"
   *ngIf="displayDefaultLogo"
   [class]="'image-object image-' + (small ? 'sm' : 'lg') + ' sm:image-lg ' + (styleClass ? styleClass : '')"
   [src]="defaultImageUrl"
   [alt]="'LOGO.LABEL' | translate"
-  [title]="title ? title : ('IMAGE.TOOLTIPS.PLACEHOLDER' | translate)"
+  [pTooltip]="title ? title : ('IMAGE.TOOLTIPS.PLACEHOLDER' | translate)"
+  tooltipPosition="top"
+  tooltipEvent="hover"
 />
diff --git a/src/app/theme/theme-detail/theme-detail.component.html b/src/app/theme/theme-detail/theme-detail.component.html
@@ -20,23 +20,22 @@
       <p-tabPanel id="theme_detail_panel_props" [header]="'THEME.TABS.PROPERTIES' | translate">
         <div class="grid grid-nogutter m-3">
           <div class="col-12 md:col-10 lg:col-10 xl:col-6 flex flex-column row-gap-4">
-            <span class="p-float-label" [title]="'THEME.TOOLTIPS.NAME' | translate">
-              <input pInputText type="text" readonly class="w-full" id="theme_detail_item_name" [value]="theme?.name" />
-              <label for="theme_detail_item_name">{{ 'THEME.NAME' | translate }}</label>
-            </span>
-            <span class="p-float-label" [title]="'THEME.TOOLTIPS.DISPLAY_NAME' | translate">
+            <span class="p-float-label">
               <input
                 pInputText
                 type="text"
                 readonly
                 class="w-full"
                 id="theme_detail_item_display_name"
                 [value]="theme?.displayName"
+                [pTooltip]="'THEME.TOOLTIPS.DISPLAY_NAME' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
               />
               <label for="theme_detail_item_display_name">{{ 'THEME.DISPLAY_NAME' | translate }}</label>
             </span>
 
-            <span class="p-float-label" [title]="'THEME.TOOLTIPS.DESCRIPTION' | translate">
+            <span class="p-float-label">
               <textarea
                 pInputTextarea
                 readonly
@@ -47,7 +46,7 @@
                 [ngModel]="theme?.description"
                 [pTooltip]="'THEME.DESCRIPTION' | translate"
                 tooltipPosition="top"
-                tooltipEvent="focus"
+                tooltipEvent="hover"
               ></textarea>
               <label for="theme_detail_item_description">{{ 'THEME.DESCRIPTION' | translate }}</label>
             </span>

diff --git a/src/app/theme/theme-detail/theme-intern/theme-intern.component.html b/src/app/theme/theme-detail/theme-intern/theme-intern.component.html
@@ -1,5 +1,22 @@
-<div class="surface-section w-full my-3 sm:my-5">
-  <div class="flex flex-wrap flex-column row-gap-4 my-3 w-12 sm:w-10 md:w-8 lg:w-6 xl:w-6">
+<div class="surface-section w-full my-3">
+  <div class="flex flex-wrap flex-column row-gap-4 w-12 sm:w-10 md:w-8 lg:w-6 xl:w-6">
+    <div class="w-12 px-3">
+      <span class="p-float-label">
+        <input
+          pInputText
+          type="text"
+          readonly
+          class="w-full"
+          id="theme_detail_item_name"
+          [value]="theme?.name"
+          [pTooltip]="'THEME.TOOLTIPS.NAME' | translate"
+          tooltipPosition="top"
+          tooltipEvent="hover"
+        />
+        <label for="theme_detail_item_name">{{ 'THEME.NAME' | translate }}</label>
+      </span>
+    </div>
+
     <div class="flex flex-wrap row-gap-4">
       <div class="w-12 sm:w-6 px-3">
         <span class="p-float-label mb-1">
@@ -10,7 +27,9 @@
             id="theme_detail_item_creationDate"
             class="w-full pt-3 pb-2"
             [value]="theme?.creationDate | date : dateFormat"
-            [title]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate"
+            [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
           />
           <label for="theme_detail_item_creationDate">{{ 'INTERNAL.CREATION_DATE' | translate }}</label>
         </span>
@@ -25,7 +44,9 @@
             id="theme_detail_item_creationUser"
             class="w-full pt-3 pb-2"
             [value]="theme?.creationUser"
-            [title]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate"
+            [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
           />
           <label for="theme_detail_item_creationUser">{{ 'INTERNAL.CREATION_USER' | translate }}</label>
         </span>
@@ -42,7 +63,9 @@
             id="theme_detail_item_modificationDate"
             class="w-full pt-3 pb-2"
             [value]="theme?.modificationDate | date : dateFormat"
-            [title]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
+            [pTooltip]="'THEME.TOOLTIPS.NAME' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
           />
           <label for="theme_detail_item_modificationDate">{{ 'INTERNAL.MODIFICATION_DATE' | translate }}</label>
         </span>
@@ -57,7 +80,9 @@
             id="theme_detail_item_modificationUser"
             class="w-full pt-3 pb-2"
             [value]="theme?.modificationUser"
-            [title]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
+            [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"
+            tooltipPosition="top"
+            tooltipEvent="hover"
           />
           <label for="theme_detail_item_modificationUser">{{ 'INTERNAL.MODIFICATION_USER' | translate }}</label>
         </span>
@@ -73,7 +98,9 @@
         [binary]="true"
         [styleClass]="'cursor-auto shadow-none'"
         [label]="'INTERNAL.OPERATOR' | translate"
-        [title]="'INTERNAL.TOOLTIPS.OPERATOR' | translate"
+        [pTooltip]="'INTERNAL.TOOLTIPS.OPERATOR' | translate"
+        tooltipPosition="top"
+        tooltipEvent="hover"
       ></p-checkbox>
     </div>
     <div class="w-12 px-3">
@@ -86,7 +113,9 @@
           autoresize="true"
           rows="3"
           id="theme_detail_intern_item_workspaces"
-          [title]="'THEME.TOOLTIPS.WORKSPACES' | translate"
+          [pTooltip]="'THEME.TOOLTIPS.WORKSPACES' | translate"
+          tooltipPosition="top"
+          tooltipEvent="hover"
         >
         </textarea>
         <label for="theme_detail_intern_item_workspaces">{{ 'THEME.WORKSPACES' | translate }}</label>

diff --git a/src/app/theme/theme-search/theme-search.component.html b/src/app/theme/theme-search/theme-search.component.html
@@ -10,13 +10,13 @@
     <ng-container *ngIf="themes$ | async as themes">
       <p-dataView
         id="theme_search_dataview"
-        [value]="themes.stream || []"
+        [value]="(themes.stream || []).sort(sortThemesByName)"
         [paginator]="true"
         [alwaysShowPaginator]="true"
         [rowsPerPageOptions]="viewMode === 'grid' ? [12, 24, 60] : [10, 20, 50]"
         [rows]="viewMode === 'grid' ? 12 : 10"
         [layout]="viewMode"
-        filterBy="name"
+        filterBy="displayName,name"
         [sortField]="sortField"
         [sortOrder]="sortOrder"
       >
@@ -26,18 +26,22 @@
             [enableSorting]="true"
             [supportedViews]="['grid', 'list']"
             [initialViewMode]="viewMode"
-            [sortingOptions]="[{ label: 'THEME.NAME' | translate, value: 'name' }]"
+            [sortingOptions]="[
+              { label: 'THEME.DISPLAY_NAME' | translate, value: 'displayName' },
+              { label: 'THEME.NAME' | translate, value: 'name' }
+            ]"
             [defaultSortOption]="sortField"
             [defaultSortDirection]="sortOrder === 1"
             (dataViewChange)="onLayoutChange($event)"
             (filterChange)="onFilterChange($event)"
-            [filterColumns]="['THEME.NAME' | translate]"
+            [filterColumns]="['THEME.DISPLAY_NAME' | translate, 'THEME.NAME' | translate]"
             (sortChange)="onSortChange($event)"
             (sortDirectionChange)="onSortDirChange($event)"
             [translations]="dataViewControlsTranslations"
           >
           </ocx-data-view-controls
         ></ng-template>
+        <!-- LIST -->
         <ng-template let-theme pTemplate="listItem">
           <div
             class="col-12 grid grid-nogutter align-items-center row-gap-1 listview-row p-1 hover:bg-gray-200 cursor-pointer"
@@ -49,7 +53,6 @@
                   id="theme_search_logo"
                   [imageUrl]="getLogoUrl(theme)"
                   [small]="true"
-                  [title]="(theme.logoUrl ? 'LOGO.IMAGE' : 'IMAGE.TOOLTIPS.PLACEHOLDER') | translate"
                 ></app-image-container>
               </div>
             </div>
@@ -66,6 +69,7 @@
             </div>
           </div>
         </ng-template>
+        <!-- GRID -->
         <ng-template let-theme let-row="rowIndex" pTemplate="gridItem">
           <div class="col-12 sm:col-6 md:col-4 lg:col-4 xl:col-3 p-3" [routerLink]="['./', theme.name]">
             <div
@@ -79,10 +83,22 @@
               ></app-image-container>
               <app-theme-color-box [properties]="theme.properties" styleClass="h-1rem text-center" />
               <div class="text-center">
-                <div class="font-bold text-lg lg:text-xl" [title]="'Theme: ' + limitText(theme.displayName, 100)">
+                <div
+                  class="font-bold text-lg lg:text-xl"
+                  [pTooltip]="'Theme: ' + theme.displayName"
+                  tooltipPosition="top"
+                  tooltipEvent="hover"
+                >
                   {{ limitText(theme.displayName, 20) }}
                 </div>
-                <div class="text-xs" [title]="'THEME.TOOLTIPS.NAME' | translate">{{ limitText(theme.name, 20) }}</div>
+                <div
+                  class="text-xs"
+                  [pTooltip]="'THEME.TOOLTIPS.NAME' | translate"
+                  tooltipPosition="top"
+                  tooltipEvent="hover"
+                >
+                  {{ limitText(theme.name, 30) }}
+                </div>
               </div>
             </div>
           </div>

diff --git a/src/app/theme/theme-search/theme-search.component.spec.ts b/src/app/theme/theme-search/theme-search.component.spec.ts
@@ -8,7 +8,7 @@ import { TranslateTestingModule } from 'ngx-translate-testing'
 import { DataViewModule } from 'primeng/dataview'
 import { of } from 'rxjs'
 
-import { ThemesAPIService } from 'src/app/shared/generated'
+import { Theme, ThemesAPIService } from 'src/app/shared/generated'
 import { ThemeSearchComponent } from './theme-search.component'
 
 describe('ThemeSearchComponent', () => {
@@ -147,4 +147,24 @@ describe('ThemeSearchComponent', () => {
     component.onImportThemeClick()
     expect(component.themeImportDialogVisible).toBe(true)
   })
+
+  it('should sort themes by display name ', () => {
+    let a: Theme = {
+      name: 'a',
+      displayName: 'a'
+    }
+    let b: Theme = {
+      name: 'b',
+      displayName: 'b'
+    }
+    let c: Theme = {
+      name: 'c',
+      displayName: 'c'
+    }
+    const themes = [b, c, a]
+
+    themes.sort((x, y) => component.sortThemesByName(x, y))
+
+    expect(themes).toEqual([a, b, c])
+  })
 })
diff --git a/src/app/theme/theme-search/theme-search.component.ts b/src/app/theme/theme-search/theme-search.component.ts
@@ -18,7 +18,7 @@ export class ThemeSearchComponent implements OnInit {
   public actions$: Observable<Action[]> | undefined
   public viewMode = 'grid'
   public filter: string | undefined
-  public sortField = 'name'
+  public sortField = 'displayName'
   public sortOrder = 1
   public limitText = limitText
 
@@ -43,11 +43,15 @@ export class ThemeSearchComponent implements OnInit {
   public loadThemes(): void {
     this.themes$ = this.themeApi.getThemes({})
   }
+  public sortThemesByName(a: Theme, b: Theme): number {
+    return (a.displayName ?? '').toUpperCase().localeCompare((b.displayName ?? '').toUpperCase())
+  }
 
   private prepareTranslations() {
     this.translate
       .get([
         'THEME.NAME',
+        'THEME.DISPLAY_NAME',
         'SEARCH.SORT_BY',
         'SEARCH.FILTER',
         'SEARCH.FILTER_OF',
@@ -62,7 +66,7 @@ export class ThemeSearchComponent implements OnInit {
           this.dataViewControlsTranslations = {
             sortDropdownPlaceholder: data['SEARCH.SORT_BY'],
             filterInputPlaceholder: data['SEARCH.FILTER'],
-            filterInputTooltip: data['SEARCH.FILTER_OF'] + data['THEME.NAME'],
+            filterInputTooltip: data['SEARCH.FILTER_OF'] + data['THEME.DISPLAY_NAME'] + ', ' + data['THEME.NAME'],
             viewModeToggleTooltips: {
               grid: data['GENERAL.TOOLTIP.VIEW_MODE_GRID'],
               list: data['GENERAL.TOOLTIP.VIEW_MODE_LIST']

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -76,8 +76,8 @@
     "CREATION_USER": "Erstellt von",
     "MODIFICATION_DATE": "Geändert am",
     "MODIFICATION_USER": "Geändert von",
-    "OPERATOR": "Erstellt durch Operator",
-    "OPERATOR_MESSAGE": "Dieses Theme wurde durch den Operator erstellt. Alle Änderungen gehen beim nächsten Deployment verloren.",
+    "OPERATOR": "Automatisiert erstellt",
+    "OPERATOR_MESSAGE": "Dieses Theme wurde automatisiert erstellt. Alle Änderungen gehen beim nächsten Deployment verloren.",
     "TOOLTIPS": {
       "CREATION_DATE": "Zeitpunkt der Erstellung",
       "CREATION_USER": "Name des Benutzers der Erstellung",

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -17,7 +17,7 @@
     },
     "DELETE": {
       "LABEL": "Delete",
-      "TOOLTIP": "Delete theme",
+      "TOOLTIP": "Delete Theme",
       "THEME_MESSAGE": "Do you want to delete \"{{ITEM}}\"?",
       "MESSAGE_INFO": "This action cannot be undone!",
       "THEME_NOK": "Theme could not be deleted",
@@ -29,7 +29,7 @@
       "MESSAGE": {
         "CHANGE_OK": "The Theme was changed successfully",
         "CHANGE_NOK": "An error has occurred. The Theme was not changed.",
-        "IMAGE_CONSTRAINT": "An error has occurred. Please add a theme name before uploading a file.",
+        "IMAGE_CONSTRAINT": "An error has occurred. Please add a Theme name before uploading a file.",
         "IMAGE_CONSTRAINT_SIZE": "An error has occurred. The image is too large."
       }
     },
@@ -63,7 +63,7 @@
     "TOOLTIPS": {
       "CANCEL_AND_CLOSE": "Cancel and close dialog",
       "SAVE": "Save changes",
-      "SAVE_AS": "Save as new theme"
+      "SAVE_AS": "Save as new Theme"
     }
   },
   "BREADCRUMBS": {
@@ -76,14 +76,14 @@
     "CREATION_USER": "Created by",
     "MODIFICATION_DATE": "Changed on",
     "MODIFICATION_USER": "Changed by",
-    "OPERATOR": "Created by Operator",
-    "OPERATOR_MESSAGE": "This theme was created by the operator. All changes will be lost during the next deployment.",
+    "OPERATOR": "Automated created",
+    "OPERATOR_MESSAGE": "This Theme was automated created. All changes will be lost during the next deployment.",
     "TOOLTIPS": {
       "CREATION_DATE": "Timestamp of the creation",
       "CREATION_USER": "Name of the user of the creation",
       "MODIFICATION_DATE": "Timestamp of the last change",
       "MODIFICATION_USER": "Name of the user of the last change",
-      "OPERATOR": "If set, the theme cannot be deleted and all changes will be lost during the next deployment."
+      "OPERATOR": "If set, the Theme cannot be deleted and all changes will be lost during the next deployment."
     }
   },
   "GENERAL": {