Add display name in import dialog (#213)

* feat: add display name in import dialog * feat: fix double import --------- Co-authored-by: Christian Badura <[email protected]>
onecx · Aug 9, 2024 · 2c005e4 · 2c005e4
1 parent 8a387e1
commit 2c005e4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/src/app/theme/theme-import/theme-import.component.html b/src/app/theme/theme-import/theme-import.component.html
@@ -40,11 +40,26 @@
       />
       <label class="ocx-required-label" for="theme_import_theme_name">{{ 'THEME.THEME_NAME' | translate }}</label>
     </span>
+    <span class="p-float-label" controlErrorAnchor>
+      <input
+        pInputText
+        type="text"
+        id="theme_import_theme_display_name"
+        class="w-full pt-3 pb-2"
+        [(ngModel)]="displayName"
+        (ngModelChange)="checkThemeExistence()"
+        (keyup)="checkThemeExistence()"
+        [pTooltip]="'THEME.DISPLAY_NAME' | translate"
+        tooltipPosition="top"
+        tooltipEvent="focus"
+      />
+      <label class="ocx-required-label" for="theme_import_display_name">{{ 'THEME.DISPLAY_NAME' | translate }}</label>
+    </span>
     <app-theme-color-box *ngIf="properties" [properties]="properties" styleClass="h-inputtext" />
     <div *ngIf="!properties">{{ 'THEME.NO_PROPERTIES' | translate }}</div>
   </div>
   <p-message
-    *ngIf="themeSnapshot && themeNameExists"
+    *ngIf="themeSnapshot && (themeNameExists || displayNameExists)"
     severity="warn"
     styleClass="mt-3"
     text="{{ 'THEME.IMPORT.THEME_EXISTS_MESSAGE' | translate }}"

diff --git a/src/app/theme/theme-import/theme-import.component.ts b/src/app/theme/theme-import/theme-import.component.ts
@@ -20,7 +20,9 @@ export class ThemeImportComponent implements OnInit {
 
   public themes!: Theme[]
   public themeName = ''
+  public displayName = ''
   public themeNameExists = false
+  public displayNameExists = false
   public themeImportError = false
   public themeSnapshot: ThemeSnapshot | null = null
   public httpHeaders!: HttpHeaders
@@ -51,6 +53,7 @@ export class ThemeImportComponent implements OnInit {
           if (themeSnapshot.themes) {
             const key: string[] = Object.keys(themeSnapshot.themes)
             this.themeName = key[0]
+            this.displayName = themeSnapshot.themes[key[0]].displayName ?? ''
             this.properties = themeSnapshot.themes[key[0]].properties
           }
           this.checkThemeExistence()
@@ -66,6 +69,7 @@ export class ThemeImportComponent implements OnInit {
 
   public checkThemeExistence() {
     this.themeNameExists = this.themes.filter((theme) => theme.name === this.themeName).length > 0
+    this.displayNameExists = this.themes.filter((theme) => theme.displayName === this.displayName).length > 0
   }
 
   public onImportThemeHide(): void {
@@ -78,15 +82,13 @@ export class ThemeImportComponent implements OnInit {
   public onThemeUpload(): void {
     if (!this.themeSnapshot?.themes) return
     const key: string[] = Object.keys(this.themeSnapshot?.themes)
+    this.themeSnapshot.themes[key[0]].displayName = this.displayName
     if (key[0] !== this.themeName) {
       // save the theme properties to be reassigned on new key
       const themeProps = Object.getOwnPropertyDescriptor(this.themeSnapshot.themes, key[0])
       Object.defineProperty(this.themeSnapshot.themes, this.themeName, themeProps ?? {})
       delete this.themeSnapshot.themes[key[0]]
     }
-    if (!this.themeSnapshot?.themes['displayName']) {
-      this.themeSnapshot.themes[key[0]] = { ...this.themeSnapshot.themes[key[0]], displayName: this.themeName }
-    }
     this.themeApi
       .importThemes({
         themeSnapshot: this.themeSnapshot