Fixing settings AlbumCover sorting #706

src/frontend/app/ui/settings/template/CustomSettingsEntries.ts

@@ -1,13 +1,20 @@
 import {propertyTypes} from 'typeconfig/common';
 
+/**
+ * Configuration in these class have a custom UI
+ */
 export class CustomSettingsEntries {
   public static readonly entries = ['ClientSortingConfig', 'ClientGroupingConfig', 'SVGIconConfig'];
 
-  static getName(s: { tags?: { uiType?: string }, type?: propertyTypes }): string {
+  public static getConfigName(s: { tags?: { uiType?: string }, type?: propertyTypes, arrayType?: propertyTypes }): string {
     let c = s.tags?.uiType;
     try {
       if (!c) {
-        c = Object.getPrototypeOf(Object.getPrototypeOf(s?.type))?.name;
+        if (s.arrayType) {
+          c = Object.getPrototypeOf(Object.getPrototypeOf(s?.arrayType))?.name;
+        } else {
+          c = Object.getPrototypeOf(Object.getPrototypeOf(s?.type))?.name;
+        }
       }
     } catch (e) {
       // no action
@@ -15,8 +22,16 @@ export class CustomSettingsEntries {
     return c;
   }
 
+  public static getFullName(s: { tags?: { uiType?: string }, type?: propertyTypes, arrayType?: propertyTypes }): string {
+    const cN = this.getConfigName(s);
+    if (!s.tags?.uiType && s.arrayType) {
+      return cN + '-Array';
+    }
+    return cN;
+  }
+
   public static iS(s: { tags?: { uiType?: string }, type?: propertyTypes }) {
-    const c = this.getName(s);
+    const c = this.getConfigName(s);
     return this.entries.includes(c);
   }
 }

src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html

@@ -275,8 +275,9 @@
                          [name]="'list_ml_url_'+idName+i" [id]="'list_ml_url_'+idName+i" required>
                 </td>
                 <td>
-                  <button [disabled]="state.value.length == 1" (click)="removeLayer(layer)"
+                  <button [disabled]="state.value.length == 1"
                           [ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
+                          (click)="removeLayer(layer)"
                           class="btn float-end">
                     <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
                   </button>
@@ -533,6 +534,48 @@
           </div>
         </ng-container>
 
+
+        <ng-container *ngSwitchCase="'ClientSortingConfig-Array'">
+          <ng-container *ngFor="let _ of state.value; let i=index">
+            <div class="row col-12 mt-1 m-0 p-0">
+              <div class="col p-0">
+                <app-settings-entry-sorting-method
+                  class="w-100"
+                  [(ngModel)]="state.value[i]"
+                  [sortingByEnum]="SortByTypes"
+                  [id]="'list_'+idName+i"
+                  [name]="'list_'+idName+i"
+                  (ngModelChange)="onChange($event)">
+                </app-settings-entry-sorting-method>
+
+
+              </div>
+              <ng-container>
+                <div class="col-auto pe-0">
+                  <button class="btn float-end"
+                          [disabled]="state.value.length == 1"
+                          [ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
+                          [id]="'list_btn_'+idName+i"
+                          [name]="'list_btn_'+idName+i" (click)="remove(i)">
+                    <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
+                  </button>
+                </div>
+              </ng-container>
+            </div>
+          </ng-container>
+          <ng-container>
+            <div class="col-12 p-0">
+              <button class="btn btn-primary mt-1 float-end"
+                      [id]="'btn_add_'+idName"
+                      [name]="'btn_add_'+idName"
+                      (click)="AddNew()">
+                <ng-icon name="ionAddOutline" class="me-1"></ng-icon>
+                <span i18n>Add</span>
+              </button>
+            </div>
+          </ng-container>
+        </ng-container>
+
         <ng-container *ngSwitchCase="'EnumArray'">
           <ng-container *ngFor="let _ of state.value; let i=index">
             <div class="row col-12 mt-1 m-0 p-0">
@@ -552,7 +595,9 @@
               </div>
               <ng-container>
                 <div class="col-auto pe-0">
-                  <button class="btn btn-secondary float-end"
+                  <button class="btn float-end"
+                          [disabled]="state.value.length == 1"
+                          [ngClass]="state.value.length > 1? 'btn-danger':'btn-secondary'"
                           [id]="'list_btn_'+idName+i"
                           [name]="'list_btn_'+idName+i" (click)="remove(i)">
                     <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>

src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts

@@ -239,7 +239,7 @@ export class SettingsEntryComponent
     }
     this.uiType = this.arrayType;
     if(CustomSettingsEntries.iS(this.state)){
-      this.uiType = CustomSettingsEntries.getName(this.state);
+      this.uiType = CustomSettingsEntries.getFullName(this.state);
     }
     if (!this.state.isEnumType &&
       !this.state.isEnumArrayType &&