From 0d51b13f69ac6df8661480a7b9c7bcf3f5d3e301 Mon Sep 17 00:00:00 2001
From: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
Date: Tue, 11 Feb 2025 13:29:38 +0100
Subject: [PATCH] fix(templates): incorrect menu display

* Changes the position of the load template.
* Changes the label of submit button to load.
* Fixes translation of form buttons.

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
---
 .../lib/record/editor/editor.component.html   | 36 +++++++++----------
 .../load-template-form.component.html         |  4 +--
 .../load-template-form.component.ts           |  3 +-
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.html b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
index 529c4de6..15858a7d 100644
--- a/projects/rero/ng-core/src/lib/record/editor/editor.component.html
+++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO angular core
-  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2020-2025 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -26,32 +26,31 @@
           </legend>
         }
       </div>
-      <div class="flex align-items-center justify-content-end">
+      <div class="flex align-items-center justify-content-end gap-1">
+        <!-- load from template button -->
+        @if (canLoadTemplate()) {
+          <p-button
+            id="editor-load-template-button"
+            [label]="'Load template…' | translate"
+            [outlined]="true"
+            icon="fa fa-upload"
+            (onClick)="showLoadTemplateDialog()"
+          />
+        }
         <!-- cancel button -->
         <p-button
-        id="editor-cancel-button"
-        [label]="'Cancel' | translate"
-        icon="fa fa-times"
-        [outlined]="true"
-        severity="danger"
-        (onClick)="cancel()" />
-      <!-- load from template button -->
-      @if (canLoadTemplate()) {
-        <p-button
-          id="editor-load-template-button"
-          [label]="'Load template…' | translate"
+          id="editor-cancel-button"
+          [label]="'Cancel' | translate"
+          icon="fa fa-times"
           [outlined]="true"
-          icon="fa fa-upload"
-          styleClass="ml-1"
-          (onClick)="showLoadTemplateDialog()"
+          severity="danger"
+          (onClick)="cancel()"
         />
-      }
       <!-- save button -->
         @if (saveAlternatives.length === 0) {
         <p-button
           id="editor-save-button"
           [label]="'Save' | translate"
-          styleClass="ml-1"
           (onClick)="submit()"
           [disabled]="isSaveButtonDisabled"
         />
@@ -59,7 +58,6 @@
         <p-splitButton
           id="editor-save-button-split"
           [label]="'Save' | translate"
-          styleClass="ml-1"
           (onClick)="submit()"
           [model]="saveAlternatives"
         />
diff --git a/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.html b/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.html
index 53044cd1..78229c9c 100644
--- a/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.html
+++ b/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.html
@@ -31,8 +31,8 @@ <h4 class="text-error" translate>Warning!</h4>
     <div class="my-1 font-bold" translate>Select a template</div>
     <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
     <div class="flex justify-content-end gap-2">
-      <p-button label="Cancel" severity="secondary" (onClick)="closeDialog()" />
-      <p-button type="submit" label="Save" [disabled]="this.form.status !== 'VALID'" />
+      <p-button [label]="'Cancel'|translate" severity="secondary" (onClick)="closeDialog()" />
+      <p-button type="submit" [label]="'Load'|translate"  [disabled]="this.form.status !== 'VALID'" />
     </div>
   </form>
 }
diff --git a/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.ts b/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.ts
index 70cb060f..7f900046 100644
--- a/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.ts
+++ b/projects/rero/ng-core/src/lib/record/editor/widgets/load-template-form/load-template-form.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO angular core
- * Copyright (C) 2020-2024 RERO
+ * Copyright (C) 2020-2025 RERO
  * Copyright (C) 2020-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -59,6 +59,7 @@ export class LoadTemplateFormComponent implements OnInit {
       key: 'template',
       type: 'select',
       props: {
+        appendTo: 'body',
         required: true,
         options: [],
         attributes: {