feat: 1350 Create admin pages to manage AdditionalFieldsForms

src/app/enums/index.ts

@@ -350,6 +350,12 @@ export namespace Enums {
     export const TypeEnum = {
       FORMLY: "FORMLY" as TypeEnum,
     };
+    export const LanguageEnumTranslate: KeyValue[] = [
+      {
+        key: TypeEnum.FORMLY,
+        value: MARK_AS_TRANSLATABLE("formDescription.typeEnum.formly"),
+      },
+    ];
   }
 
   export namespace Language {

src/app/features/admin/admin.module.ts

@@ -9,6 +9,7 @@ import {AdminNotificationState} from "@admin/notification/stores/admin-notificat
 import {AdminNotificationStatusHistoryState} from "@admin/notification/stores/status-history/admin-notification-status-history.state";
 import {AdminOaiSetState} from "@admin/oai-set/stores/admin-oai-set.state";
 import {AdminOAuth2ClientState} from "@admin/oauth2-client/stores/admin-oauth2-client.state";
+import {AdminOrganizationalUnitAdditionalFieldsFormState} from "@admin/organizational-unit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.state";
 import {AdminOrganizationalUnitState} from "@admin/organizational-unit/stores/admin-organizational-unit.state";
 import {AdminOrganizationalUnitDisseminationPolicyState} from "@admin/organizational-unit/stores/dissemination-policy/admin-organizational-unit-dissemination-policy.state";
 import {AdminOrganizationalUnitFundingAgencyState} from "@admin/organizational-unit/stores/funding-agency/admin-organizational-unit-funding-agency.state";

src/app/features/admin/organizational-unit/admin-organizational-unit-routing.module.ts

+import {AdminOrganizationalUnitAdditionalFieldsListRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-additional-fields-list/admin-organizational-unit-additional-fields-list.routable";
 import {AdminOrganizationalUnitCreateRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-create/admin-organizational-unit-create.routable";
+import {AdminOrganizationalUnitDetailEditRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-detail-edit/admin-organizational-unit-detail-edit.routable";
 import {AdminOrganizationalUnitListRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-list/admin-organizational-unit-list.routable";
-import {AdminOrganizationalUnitDetailEditRoutable} from "@admin/organizational-unit/components/routables/admin-orgunit-detail-edit/admin-organizational-unit-detail-edit.routable";
+import {AdminOrganizationalUnitMetadataRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-metadata/admin-organizational-unit-metadata.routable";
 import {AdminOrganizationalUnitState} from "@admin/organizational-unit/stores/admin-organizational-unit.state";
 import {NgModule} from "@angular/core";
 import {
@@ -14,8 +16,6 @@ import {
 } from "@shared/enums/routes.enum";
 import {CanDeactivateGuard} from "@shared/services/can-deactivate-guard.service";
 import {MARK_AS_TRANSLATABLE} from "solidify-frontend";
-import {AdminOrgUnitAdditionalFieldsFormListRoutable} from "@admin/organizational-unit/components/routables/admin-orgunit-additional-fields-form-list/admin-orgunit-additional-fields-form-list.routable";
-import {AdminOrgUnitTabsRoutable} from "@admin/organizational-unit/components/routables/admin-orgunit-tabs/admin-orgunit-tabs.routable";
 
 const routes: Routes = [
   {
@@ -25,39 +25,40 @@ const routes: Routes = [
   },
   {
     path: AdminRoutesEnum.organizationalUnitDetail + AppRoutesEnum.separator + AppRoutesEnum.paramId,
-    redirectTo: AdminRoutesEnum.organizationalUnitDetail + AppRoutesEnum.separator + AppRoutesEnum.paramId + AppRoutesEnum.separator + AdminRoutesEnum.organizationalUnitDetail,
+    redirectTo: AdminRoutesEnum.organizationalUnitDetail + AppRoutesEnum.separator + AppRoutesEnum.paramId + AppRoutesEnum.separator + AdminRoutesEnum.organizationalUnitData,
     pathMatch: "full",
   },
   {
     path: AdminRoutesEnum.organizationalUnitDetail + AppRoutesEnum.separator + AppRoutesEnum.paramId,
-    component: AdminOrgUnitTabsRoutable,
+    component: AdminOrganizationalUnitDetailEditRoutable,
     data: {
       breadcrumbMemoizedSelector: AdminOrganizationalUnitState.currentTitle,
     },
     children: [
       {
-        path: AdminRoutesEnum.organizationalUnitDetail,
-        component: AdminOrganizationalUnitDetailEditRoutable,
+        path: AdminRoutesEnum.organizationalUnitData,
+        component: AdminOrganizationalUnitMetadataRoutable,
         data: {
-          breadcrumb: MARK_AS_TRANSLATABLE("breadcrumb.admin.organizationalUnit.edit"),
+          breadcrumb: MARK_AS_TRANSLATABLE("breadcrumb.admin.organizationalUnit.detail"),
         },
+        children: [
+          {
+            path: AdminRoutesEnum.organizationalUnitEdit,
+            data: {
+              breadcrumb: MARK_AS_TRANSLATABLE("breadcrumb.admin.organizationalUnit.edit"),
+            },
+            canDeactivate: [CanDeactivateGuard],
+          },
+        ],
       },
       {
         path: AdminRoutesEnum.organizationalUnitAdditionalFieldsForm,
-        component: AdminOrgUnitAdditionalFieldsFormListRoutable,
+        component: AdminOrganizationalUnitAdditionalFieldsListRoutable,
         data: {
           breadcrumb: MARK_AS_TRANSLATABLE("breadcrumb.admin.organizationalUnit.additionalFieldsForm.list"),
         },
-        children: [
-          {
-            path: AppRoutesEnum.paramId,
-            data: {
-              breadcrumb: MARK_AS_TRANSLATABLE("breadcrumb.admin.organizationalUnit.additionalFieldsForm.edit"),
-            },
-          }
-        ]
-      }
-    ]
+      },
+    ],
   },
   {
     path: AdminRoutesEnum.organizationalUnitCreate,
@@ -67,7 +68,6 @@ const routes: Routes = [
     },
     canDeactivate: [CanDeactivateGuard],
   },
-
 ];
 
 @NgModule({

src/app/features/admin/organizational-unit/admin-organizational-unit.module.ts

 import {AdminOrganizationalUnitRoutingModule} from "@admin/organizational-unit/admin-organizational-unit-routing.module";
+import {AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog} from "@admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-detail-create-update/admin-organizational-unit-additional-fields-detail-create-update.dialog";
+import {AdminOrganizationalUnitAdditionalFieldsRenameDialog} from "@admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-rename/admin-organizational-unit-additional-fields-rename.dialog";
 import {AdminOrganizationalUnitDeleteDialog} from "@admin/organizational-unit/components/dialogs/admin-organizational-unit-delete/admin-organizational-unit-delete.dialog";
+import {AdminOrganizationalUnitAdditionalFieldsFormPresentational} from "@admin/organizational-unit/components/presentationals/admin-organizational-unit-additional-fields-form/admin-organizational-unit-additional-fields-form.presentational";
 import {AdminOrganizationalUnitFormPresentational} from "@admin/organizational-unit/components/presentationals/admin-organizational-unit-form/admin-organizational-unit-form.presentational";
+import {AdminOrganizationalUnitAdditionalFieldsListRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-additional-fields-list/admin-organizational-unit-additional-fields-list.routable";
 import {AdminOrganizationalUnitCreateRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-create/admin-organizational-unit-create.routable";
+import {AdminOrganizationalUnitDetailEditRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-detail-edit/admin-organizational-unit-detail-edit.routable";
 import {AdminOrganizationalUnitListRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-list/admin-organizational-unit-list.routable";
-import {AdminOrganizationalUnitDetailEditRoutable} from "@admin/organizational-unit/components/routables/admin-orgunit-detail-edit/admin-organizational-unit-detail-edit.routable";
+import {AdminOrganizationalUnitMetadataRoutable} from "@admin/organizational-unit/components/routables/admin-organizational-unit-metadata/admin-organizational-unit-metadata.routable";
+import {AdminOrganizationalUnitService} from "@admin/organizational-unit/services/admin-organizational-unit.service";
 import {AdminOrganizationalUnitState} from "@admin/organizational-unit/stores/admin-organizational-unit.state";
 import {NgModule} from "@angular/core";
 import {SharedModule} from "@app/shared/shared.module";
@@ -14,13 +20,21 @@ const routables = [
   AdminOrganizationalUnitCreateRoutable,
   AdminOrganizationalUnitDetailEditRoutable,
   AdminOrganizationalUnitListRoutable,
+  AdminOrganizationalUnitMetadataRoutable,
+  AdminOrganizationalUnitAdditionalFieldsListRoutable,
 ];
 const containers = [];
 const dialogs = [
   AdminOrganizationalUnitDeleteDialog,
+  AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog,
+  AdminOrganizationalUnitAdditionalFieldsRenameDialog,
 ];
 const presentationals = [
   AdminOrganizationalUnitFormPresentational,
+  AdminOrganizationalUnitAdditionalFieldsFormPresentational,
+];
+const services = [
+  AdminOrganizationalUnitService,
 ];
 
 @NgModule({
@@ -44,7 +58,9 @@ const presentationals = [
   exports: [
     ...routables,
   ],
-  providers: [],
+  providers: [
+    ...services,
+  ],
 })
 export class AdminOrganizationalUnitModule {
 }

src/app/features/admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-detail-create-update/admin-organizational-unit-additional-fields-detail-create-update.dialog.html

+<dlcm-shared-base-action-dialog [titleToTranslate]="titleToTranslate | translate">
+  <div [dlcmSpinner]="isLoadingObs | async">
+    <dlcm-admin-organizational-unit-additional-fields-form #formPresentational
+                                                           class="form"
+                                                           [model]="data.additionalFieldsForm"
+                                                           [readonly]="data.mode === 'detail'"
+                                                           (submitChange)="update($event)"
+                                                           (checkAvailableChange)="checkAvailable($event)"
+                                                           (dirtyChange)="updateCanDeactivate($event)"
+    ></dlcm-admin-organizational-unit-additional-fields-form>
+  </div>
+</dlcm-shared-base-action-dialog>
+<div mat-dialog-actions>
+  <button mat-button
+          [mat-dialog-close]=""
+          [solidifyAutoFocus]="true"
+  >
+    {{'admin.organizationalUnit.additionalFields.modal.detailCreateUpdate.button.close' | translate}}
+  </button>
+  <button *ngIf="data.mode !== 'detail'"
+          mat-flat-button
+          color="primary"
+          [dlcmButtonSpinner]="isLoadingObs | async"
+          [disabled]="formPresentational?.form?.invalid || formPresentational?.form?.pristine"
+          solidifyShortCuts
+          (onEnter)="confirm(formPresentational?.form?.value)"
+          (click)="confirm(formPresentational?.form?.value)"
+  >
+    {{confirmToTranslate | translate}}
+  </button>
+</div>

src/app/features/admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-detail-create-update/admin-organizational-unit-additional-fields-detail-create-update.dialog.scss

+@import "../sass/abstracts/mixins";
+
+:host {
+  .form {
+    display: block;
+  }
+
+  .form ::ng-deep form > * {
+    width: 100% !important;
+  }
+}
\ No newline at end of file

src/app/features/admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-detail-create-update/admin-organizational-unit-additional-fields-detail-create-update.dialog.ts

+import {AdminOrganizationalUnitAdditionalFieldsFormAction} from "@admin/organizational-unit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.action";
+import {AdminOrganizationalUnitAdditionalFieldsFormState} from "@admin/organizational-unit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.state";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnInit,
+  ViewChild,
+} from "@angular/core";
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogRef,
+} from "@angular/material/dialog";
+import {ActivatedRoute} from "@angular/router";
+import {
+  AdditionalFieldsForm,
+  OaiSet,
+} from "@models";
+import {
+  Actions,
+  ofActionCompleted,
+  Store,
+} from "@ngxs/store";
+import {SharedAbstractDialog} from "@shared/components/dialogs/shared-abstract/shared-abstract.dialog";
+import {SharedAbstractFormPresentational} from "@shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational";
+import {FormControlKey} from "@shared/models/form-control-key.model";
+import {Observable} from "rxjs";
+import {
+  take,
+  tap,
+} from "rxjs/operators";
+import {
+  isTrue,
+  MARK_AS_TRANSLATABLE,
+  MemoizedUtil,
+  ModelFormControlEvent,
+} from "solidify-frontend";
+
+@Component({
+  selector: "dlcm-admin-organizational-unit-additional-fields-detail-create-update-dialog",
+  templateUrl: "./admin-organizational-unit-additional-fields-detail-create-update.dialog.html",
+  styleUrls: ["./admin-organizational-unit-additional-fields-detail-create-update.dialog.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog extends SharedAbstractDialog implements OnInit {
+  isLoadingObs: Observable<boolean> = MemoizedUtil.isLoading(this._store, AdminOrganizationalUnitAdditionalFieldsFormState);
+  confirmToTranslate: string;
+
+  @ViewChild("formPresentational")
+  readonly formPresentational: SharedAbstractFormPresentational<OaiSet>;
+
+  constructor(protected readonly _store: Store,
+              protected readonly _route: ActivatedRoute,
+              protected readonly _actions$: Actions,
+              protected readonly _changeDetector: ChangeDetectorRef,
+              protected readonly _dialog: MatDialog,
+              protected readonly _dialogRef: MatDialogRef<AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog>,
+              @Inject(MAT_DIALOG_DATA) readonly data: AdminOrganizationalUnitAdditionalFieldsDetailCreateEditDialogData) {
+    super();
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+
+    if (this.data.mode === "update") {
+      this.titleToTranslate = MARK_AS_TRANSLATABLE("admin.organizationalUnit.additionalFields.modal.detailCreateUpdate.title.update");
+      this.confirmToTranslate = MARK_AS_TRANSLATABLE("admin.organizationalUnit.additionalFields.modal.detailCreateUpdate.button.confirm");
+    } else if (this.data.mode === "detail") {
+      this.titleToTranslate = MARK_AS_TRANSLATABLE("admin.organizationalUnit.additionalFields.modal.detailCreateUpdate.title.detail");
+      this.confirmToTranslate = MARK_AS_TRANSLATABLE("admin.organizationalUnit.additionalFields.modal.detailCreateUpdate.button.confirm");
+    } else if (this.data.mode === "create") {
+      this.titleToTranslate = MARK_AS_TRANSLATABLE("admin.organizationalUnit.additionalFields.modal.detailCreateUpdate.title.create");
+      this.confirmToTranslate = MARK_AS_TRANSLATABLE("admin.organizationalUnit.additionalFields.modal.detailCreateUpdate.button.confirm");
+    }
+  }
+
+  update($event: ModelFormControlEvent<AdditionalFieldsForm>): void {
+
+  }
+
+  checkAvailable($event: FormControlKey): void {
+
+  }
+
+  updateCanDeactivate($event: boolean): void {
+
+  }
+
+  confirm(additionalFieldsForm: AdditionalFieldsForm): void {
+    this.subscribe(this._actions$.pipe(
+      ofActionCompleted(AdminOrganizationalUnitAdditionalFieldsFormAction.CreateSuccess),
+      take(1),
+      tap((result) => {
+        if (isTrue(result.result.successful)) {
+          this._dialogRef.close();
+        }
+      }),
+    ));
+    this._store.dispatch(new AdminOrganizationalUnitAdditionalFieldsFormAction.Create(this.data.parentResId, additionalFieldsForm));
+  }
+}
+
+export interface AdminOrganizationalUnitAdditionalFieldsDetailCreateEditDialogData {
+  parentResId: string;
+  additionalFieldsForm: AdditionalFieldsForm;
+  mode: "update" | "create" | "detail";
+}

src/app/features/admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-rename/admin-organizational-unit-additional-fields-rename.dialog.html

+<dlcm-shared-base-action-dialog [titleToTranslate]="'admin.organizationalUnit.additionalFields.modal.rename.title' | translate">
+  <form [formGroup]="form"
+        class="form"
+        (ngSubmit)="onSubmit()"
+  >
+    <mat-form-field *ngIf="getFormControl(formDefinition.name) as fd">
+      <input [formControl]="fd"
+             [solidifyValidation]="errors"
+             matInput
+             [placeholder]="'admin.organizationalUnit.additionalFields.modal.rename.name' | translate"
+             [required]="formValidationHelper.hasRequiredField(fd)"
+      >
+      <mat-error #errors></mat-error>
+    </mat-form-field>
+  </form>
+</dlcm-shared-base-action-dialog>
+<div mat-dialog-actions
+     class="footer"
+>
+  <button mat-button
+          [mat-dialog-close]=""
+          cdkFocusInitial
+  >{{'admin.organizationalUnit.additionalFields.modal.rename.button.close' | translate}}
+  </button>
+  <button mat-flat-button
+          color="primary"
+          [dlcmButtonSpinner]="isLoadingObs | async"
+          [disabled]="form.invalid || form.pristine"
+          solidifyShortCuts
+          (onEnter)="onSubmit()"
+          (click)="onSubmit()"
+  >{{'admin.organizationalUnit.additionalFields.modal.rename.button.confirmChange' | translate}}
+  </button>
+</div>
+

src/app/features/admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-rename/admin-organizational-unit-additional-fields-rename.dialog.scss

+@import "../sass/abstracts/variables";
+@import "../sass/abstracts/mixins";
+
+:host {
+  .form {
+    > * {
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file

src/app/features/admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-rename/admin-organizational-unit-additional-fields-rename.dialog.ts

+import {AdminOrganizationalUnitAdditionalFieldsFormAction} from "@admin/organizational-unit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.action";
+import {AdminOrganizationalUnitAdditionalFieldsFormState} from "@admin/organizational-unit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.state";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  OnInit,
+} from "@angular/core";
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+} from "@angular/forms";
+import {
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+} from "@angular/material/dialog";
+import {AdditionalFieldsForm} from "@models";
+import {
+  Actions,
+  ofActionCompleted,
+  Store,
+} from "@ngxs/store";
+import {SharedAbstractContainer} from "@shared/components/containers/shared-abstract/shared-abstract.container";
+import {BaseFormDefinition} from "@shared/models/base-form-definition.model";
+import {Observable} from "rxjs";
+import {
+  take,
+  tap,
+} from "rxjs/operators";
+import {
+  FormValidationHelper,
+  isTrue,
+  MemoizedUtil,
+  PropertyName,
+  SolidifyValidator,
+} from "solidify-frontend";
+
+@Component({
+  selector: "dlcm-admin-organizational-unit-additional-fields-rename-dialog",
+  templateUrl: "./admin-organizational-unit-additional-fields-rename.dialog.html",
+  styleUrls: ["./admin-organizational-unit-additional-fields-rename.dialog.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdminOrganizationalUnitAdditionalFieldsRenameDialog extends SharedAbstractContainer implements OnInit {
+  isLoadingObs: Observable<boolean> = MemoizedUtil.isLoading(this._store, AdminOrganizationalUnitAdditionalFieldsFormState);
+
+  form: FormGroup;
+  formDefinition: FormComponentFormDefinition = new FormComponentFormDefinition();
+
+  constructor(private readonly _store: Store,
+              private readonly _actions$: Actions,
+              private readonly _dialogRef: MatDialogRef<AdminOrganizationalUnitAdditionalFieldsRenameDialog>,
+              @Inject(MAT_DIALOG_DATA) public data: AdminOrganizationalUnitAdditionalFieldsRenameDialogData,
+              private readonly _fb: FormBuilder) {
+    super();
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.form = this._fb.group({
+      [this.formDefinition.name]: [this.data.additionalFieldsForm.name, SolidifyValidator],
+    });
+  }
+
+  close(): void {
+    this._dialogRef.close();
+  }
+
+  onSubmit(): void {
+    this._store.dispatch(new AdminOrganizationalUnitAdditionalFieldsFormAction.Update(this.data.parentResId, {
+      resId: this.data.additionalFieldsForm.resId,
+      name: this.form.get(this.formDefinition.name).value,
+    }));
+
+    this.subscribe(this._actions$.pipe(
+      ofActionCompleted(AdminOrganizationalUnitAdditionalFieldsFormAction.UpdateSuccess),
+      take(1),
+      tap((result) => {
+        if (isTrue(result.result.successful)) {
+          this._dialogRef.close();
+          this._store.dispatch(new AdminOrganizationalUnitAdditionalFieldsFormAction.GetAll(this.data.parentResId));
+        }
+      }),
+    ));
+  }
+
+  getFormControl(key: string): AbstractControl {
+    return FormValidationHelper.getFormControl(this.form, key);
+  }
+
+  get formValidationHelper(): typeof FormValidationHelper {
+    return FormValidationHelper;
+  }
+}
+
+class FormComponentFormDefinition extends BaseFormDefinition {
+  @PropertyName() name: string;
+}
+
+export interface AdminOrganizationalUnitAdditionalFieldsRenameDialogData {
+  parentResId: string;
+  additionalFieldsForm: AdditionalFieldsForm;
+}

src/app/features/admin/organizational-unit/components/presentationals/admin-organizational-unit-additional-fields-form/admin-organizational-unit-additional-fields-form.presentational.html

+<form [formGroup]="form"
+      class="form-two-columns"
+      (ngSubmit)="onSubmit()"
+>
+  <mat-form-field *ngIf="getFormControl(formDefinition.name) as fd">
+    <input [formControl]="fd"
+           [solidifyValidation]="errors"
+           matInput
+           [placeholder]="'admin.organizationalUnit.additionalField.form.name' | translate"
+           [required]="formValidationHelper.hasRequiredField(fd)"
+    >
+    <mat-error #errors></mat-error>
+  </mat-form-field>
+
+  <!--      <mat-form-field *ngIf="getFormControl(formDefinition.type) as fd">-->
+  <!--        <mat-label>{{'admin.organizationalUnit.additionalField.form.type' | translate}}</mat-label>-->
+  <!--        <mat-select [formControl]="fd"-->
+  <!--                    [solidifyValidation]="errors"-->
+  <!--                    [required]="formValidationHelper.hasRequiredField(fd)"-->
+  <!--        >-->
+  <!--          <mat-option *ngFor="let formType of listFormType"-->
+  <!--                      [value]="formType.key"-->
+  <!--          >-->
+  <!--            {{formType.value | translate}}-->
+  <!--          </mat-option>-->
+  <!--        </mat-select>-->
+  <!--        <mat-error #errors></mat-error>-->
+  <!--      </mat-form-field>-->
+  <mat-form-field *ngIf="getFormControl(formDefinition.description) as fd">
+    <mat-label>{{'admin.organizationalUnit.additionalField.form.description' | translate }}</mat-label>
+    <textarea [formControl]="fd"
+              [solidifyValidation]="errors"
+              matInput
+              cdkTextareaAutosize
+              cdkAutosizeMinRows="5"
+              cdkAutosizeMaxRows="10"
+              [required]="formValidationHelper.hasRequiredField(fd)"
+    ></textarea>
+    <mat-error #errors></mat-error>
+  </mat-form-field>
+</form>

src/app/features/admin/organizational-unit/components/presentationals/admin-organizational-unit-additional-fields-form/admin-organizational-unit-additional-fields-form.presentational.ts

+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+} from "@angular/core";
+import {
+  FormBuilder,
+  Validators,
+} from "@angular/forms";
+import {BreakpointService} from "@app/shared/services/breakpoint.service";
+import {Enums} from "@enums";
+import {environment} from "@environments/environment";
+import {AdditionalFieldsForm} from "@models";
+import {SharedAbstractFormPresentational} from "@shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational";
+import {BaseFormDefinition} from "@shared/models/base-form-definition.model";
+import {
+  KeyValue,
+  PropertyName,
+  SolidifyValidator,
+} from "solidify-frontend";
+
+@Component({
+  selector: "dlcm-admin-organizational-unit-additional-fields-form",
+  templateUrl: "./admin-organizational-unit-additional-fields-form.presentational.html",
+  styleUrls: ["../../../../../../shared/components/presentationals/shared-abstract-form/shared-abstract-form.presentational.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdminOrganizationalUnitAdditionalFieldsFormPresentational extends SharedAbstractFormPresentational<AdditionalFieldsForm> {
+  readonly TIME_BEFORE_DISPLAY_TOOLTIP: number = environment.timeBeforeDisplayTooltipOnInput;
+  formDefinition: FormComponentFormDefinition = new FormComponentFormDefinition();
+
+  listFormType: KeyValue[] = Enums.FormDescription.LanguageEnumTranslate;
+
+  constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
+              protected readonly _elementRef: ElementRef,
+              private readonly _fb: FormBuilder,
+              public readonly breakpointService: BreakpointService) {
+    super(_changeDetectorRef, _elementRef);
+  }
+
+  protected initNewForm(): void {
+    this.form = this._fb.group({
+      [this.formDefinition.type]: [Enums.FormDescription.TypeEnum.FORMLY, [Validators.required, SolidifyValidator]],
+      [this.formDefinition.name]: ["", [SolidifyValidator]],
+      [this.formDefinition.description]: [""],
+    });
+
+  }
+
+  protected bindFormTo(additionalFieldsForm: AdditionalFieldsForm): void {
+    this.form = this._fb.group({
+      [this.formDefinition.type]: [additionalFieldsForm.type, [Validators.required, SolidifyValidator]],
+      [this.formDefinition.name]: [additionalFieldsForm.name, [SolidifyValidator]],
+      [this.formDefinition.description]: [additionalFieldsForm.description],
+    });
+  }
+
+  protected treatmentBeforeSubmit(additionalFieldsForm: AdditionalFieldsForm | any): AdditionalFieldsForm {
+    return additionalFieldsForm;
+  }
+}
+
+class FormComponentFormDefinition extends BaseFormDefinition {
+  @PropertyName() type: string;
+  @PropertyName() name: string;
+  @PropertyName() description: string;
+  @PropertyName() creation: string;
+  @PropertyName() lastUpdate: string;
+}

src/app/features/admin/orgunit/components/routables/admin-orgunit-additional-fields-form-list/admin-orgunit-additional-fields-form.routable.html → src/app/features/admin/organizational-unit/components/routables/admin-organizational-unit-additional-fields-list/admin-organizational-unit-additional-fields-list.routable.html

-<div class="additional-fields-form">
-
+<div class="wrapper"
+     [dlcmSpinner]="isLoadingObs | async"
+>
   <dlcm-shared-data-table [columns]="columns"
                           [datas]="additionalFieldsFormObs | async"
                           [queryParameters]="queryParametersObs | async"
+                          [actions]="actions"
                           [isLoading]="isLoadingObs | async"
                           (queryParametersChange)="onQueryParametersEvent($event)"
+                          (selectChange)="select($event)"
   ></dlcm-shared-data-table>
-
-  <div class="wrapper"
-       [dlcmSpinner]="isLoadingObs | async"
-  >
-
-  </div>
-
 </div>

src/app/features/admin/orgunit/components/routables/admin-orgunit-tabs/admin-org-unit-tabs.routable.scss → src/app/features/admin/organizational-unit/components/routables/admin-organizational-unit-additional-fields-list/admin-organizational-unit-additional-fields-list.routable.scss

 @import "../sass/abstracts/variables";
 @import "../sass/abstracts/mixins";
-@import "./../../../../../../shared/components/routables/shared-abstract-detail-edit-common/shared-abstract-detail-edit-common.routable";
 
 :host {
-
+  width: 100%;
+  @include spinner-wrapper();
 }

src/app/features/admin/orgunit/components/routables/admin-orgunit-additional-fields-form-list/admin-orgunit-additional-fields-form-list.routable.ts → src/app/features/admin/organizational-unit/components/routables/admin-organizational-unit-additional-fields-list/admin-organizational-unit-additional-fields-list.routable.ts

-import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from "@angular/core";
+import {
+  AdminOrganizationalUnitAdditionalFieldsDetailCreateEditDialogData,
+  AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog,
+} from "@admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-detail-create-update/admin-organizational-unit-additional-fields-detail-create-update.dialog";
+import {
+  AdminOrganizationalUnitAdditionalFieldsRenameDialog,
+  AdminOrganizationalUnitAdditionalFieldsRenameDialogData,
+} from "@admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-rename/admin-organizational-unit-additional-fields-rename.dialog";
+import {AdminOrganizationalUnitAdditionalFieldsFormAction} from "@admin/organizational-unit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.action";
+import {AdminOrganizationalUnitAdditionalFieldsFormState} from "@admin/organizational-unit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.state";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from "@angular/core";
+import {MatDialog} from "@angular/material/dialog";
+import {ActivatedRoute} from "@angular/router";
+import {DepositDataFile} from "@deposit/models/deposit-data-file.model";
 import {AdditionalFieldsForm} from "@models";
-import {CompositionState, isNullOrUndefined, MARK_AS_TRANSLATABLE, MemoizedUtil, OrderEnum, QueryParameters} from "solidify-frontend";
+import {Store} from "@ngxs/store";
 import {FieldTypeEnum} from "@shared/enums/field-type.enum";
+import {IconNameEnum} from "@shared/enums/icon-name.enum";
+import {AppRoutesEnum} from "@shared/enums/routes.enum";
+import {DataTableActions} from "@shared/models/data-table-actions.model";
 import {DataTableColumns} from "@shared/models/data-table-columns.model";
-import {Store} from "@ngxs/store";
 import {Observable} from "rxjs";
 import {
-  AdminOrganizationalUnitAdditionalFieldsFormState,
-} from "@admin/orgunit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.state";
-import {
-  AdminOrganizationalUnitAdditionalFieldsFormAction,
-} from "@admin/orgunit/stores/additional-fields-form/admin-organizational-unit-additional-fields-form.action";
-import {AppRoutesEnum} from "@shared/enums/routes.enum";
-import {ActivatedRoute} from "@angular/router";
+  CompositionState,
+  isNullOrUndefined,
+  MARK_AS_TRANSLATABLE,
+  MemoizedUtil,
+  OrderEnum,
+  QueryParameters,
+} from "solidify-frontend";
 
 @Component({
-  selector: "dlcm-admin-orgunit-additional-fields-form-routable",
-  templateUrl: "./admin-orgunit-additional-fields-form.routable.html",
-  styleUrls: ["./admin-orgunit-additional-fields-form.routable.scss"],
+  selector: "dlcm-admin-organizational-unit-additional-fields-list-routable",
+  templateUrl: "./admin-organizational-unit-additional-fields-list.routable.html",
+  styleUrls: ["./admin-organizational-unit-additional-fields-list.routable.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AdminOrgUnitAdditionalFieldsFormListRoutable {
+export class AdminOrganizationalUnitAdditionalFieldsListRoutable {
   isLoadingObs: Observable<boolean> = MemoizedUtil.isLoading(this._store, AdminOrganizationalUnitAdditionalFieldsFormState);
 
   _orgUnitResId: string;
@@ -31,7 +50,23 @@ export class AdminOrgUnitAdditionalFieldsFormListRoutable {
 
   columns: DataTableColumns<AdditionalFieldsForm>[];
 
-  constructor(protected readonly _store: Store, protected readonly _route: ActivatedRoute, private readonly _changeDetector: ChangeDetectorRef) {
+  actions: DataTableActions<DepositDataFile>[] = [
+    {
+      logo: IconNameEnum.edit,
+      callback: (additionalFieldsForm: AdditionalFieldsForm) => this.renameVersion(this._resId, additionalFieldsForm),
+      placeholder: current => MARK_AS_TRANSLATABLE("crud.list.action.rename"),
+    },
+    {
+      logo: IconNameEnum.create,
+      callback: (additionalFieldsForm: AdditionalFieldsForm) => this.createNewVersionFromExistingOne(this._resId, additionalFieldsForm),
+      placeholder: current => MARK_AS_TRANSLATABLE("crud.list.action.createNewVersionFromExistingOne"),
+    },
+  ];
+
+  constructor(protected readonly _store: Store,
+              protected readonly _route: ActivatedRoute,
+              private readonly _changeDetector: ChangeDetectorRef,
+              public readonly _dialog: MatDialog) {
     this.retrieveResIdFromUrl();
     this.defineColumns();
   }
@@ -68,4 +103,33 @@ export class AdminOrgUnitAdditionalFieldsFormListRoutable {
       },
     ];
   }
+
+  select(additionalFieldsForm: AdditionalFieldsForm): void {
+    this._dialog.open(AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog, {
+      data: {
+        parentResId: this._orgUnitResId,
+        additionalFieldsForm: additionalFieldsForm,
+        mode: "detail",
+      } as AdminOrganizationalUnitAdditionalFieldsDetailCreateEditDialogData,
+    });
+  }
+
+  private renameVersion(_resId: string, additionalFieldsForm: AdditionalFieldsForm): void {
+    this._dialog.open(AdminOrganizationalUnitAdditionalFieldsRenameDialog, {
+      data: {
+        parentResId: this._orgUnitResId,
+        additionalFieldsForm: additionalFieldsForm,
+      } as AdminOrganizationalUnitAdditionalFieldsRenameDialogData,
+    });
+  }
+
+  private createNewVersionFromExistingOne(_resId: string, additionalFieldsForm: AdditionalFieldsForm): void {
+    this._dialog.open(AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog, {
+      data: {
+        parentResId: this._orgUnitResId,
+        additionalFieldsForm: additionalFieldsForm,
+        mode: "update",
+      } as AdminOrganizationalUnitAdditionalFieldsDetailCreateEditDialogData,
+    });
+  }
 }

src/app/features/admin/organizational-unit/components/routables/admin-organizational-unit-detail-edit/admin-organizational-unit-detail-edit.routable.html

+<lib-empty-container
+    cdkTrapFocus
+    solidifyShortCuts
+    [solidifyFocusFirstElement]="true"
+    (onEscape)="backToList()"
+>
+  <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
+
+
+  <dlcm-shared-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
+                                     [formPresentational]="formPresentational"
+                                     [currentModel]="currentObs | async"
+                                     [listExtraButtons]="listExtraButtons"
+                                     [saveAvailable]="false"
+                                     (editChange)="edit()"
+                                     (deleteChange)="delete()"
+                                     (backToDetailChange)="backToDetail()"
+                                     (backToListChange)="backToList()"
+  >
+  </dlcm-shared-button-toolbar-detail>
+
+  <dlcm-shared-tabs-container [tabs]="listTabs"
+                              [isLoading]="isLoadingObs | async"
+                              (tabChange)="setCurrentTab($event)"
+  >
+    <router-outlet></router-outlet>
+  </dlcm-shared-tabs-container>
+</lib-empty-container>

src/app/features/admin/organizational-unit/components/routables/admin-organizational-unit-detail-edit/admin-organizational-unit-detail-edit.routable.ts

+import {
+  AdminOrganizationalUnitAdditionalFieldsDetailCreateEditDialogData,
+  AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog,
+} from "@admin/organizational-unit/components/dialogs/admin-organizational-unit-additional-fields-detail-create-update/admin-organizational-unit-additional-fields-detail-create-update.dialog";
+import {AdminOrganizationalUnitService} from "@admin/organizational-unit/services/admin-organizational-unit.service";
+import {adminOrganizationalUnitActionNameSpace} from "@admin/organizational-unit/stores/admin-organizational-unit.action";
+import {
+  AdminOrganizationalUnitState,
+  AdminOrganizationalUnitStateModel,
+} from "@admin/organizational-unit/stores/admin-organizational-unit.state";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+} from "@angular/core";
+import {MatDialog} from "@angular/material/dialog";
+import {ActivatedRoute} from "@angular/router";
+import {
+  OrganizationalUnit,
+  PreservationPolicy,
+  Role,
+  SubmissionPolicy,
+} from "@models";
+import {
+  Actions,
+  Select,
+  Store,
+} from "@ngxs/store";
+import {Tab} from "@shared/components/containers/shared-tabs/shared-tabs.container";
+import {SharedAbstractDetailEditCommonRoutable} from "@shared/components/routables/shared-abstract-detail-edit-common/shared-abstract-detail-edit-common.routable";
+import {IconNameEnum} from "@shared/enums/icon-name.enum";
+import {LocalStateEnum} from "@shared/enums/local-state.enum";
+import {
+  AdminRoutesEnum,
+  AppRoutesEnum,
+} from "@shared/enums/routes.enum";
+import {ExtraButtonToolbar} from "@shared/models/extra-button-toolbar.model";
+import {sharedOrgUnitActionNameSpace} from "@shared/stores/organizational-unit/shared-organizational-unit.action";
+import {SharedPreservationPolicyState} from "@shared/stores/preservation-policy/shared-preservation-policy.state";
+import {SharedResearchDomainAction} from "@shared/stores/research-domain/shared-research-domain.action";
+import {SharedRoleState} from "@shared/stores/role/shared-role.state";
+import {SharedSubmissionPolicyState} from "@shared/stores/submission-policy/shared-submission-policy.state";
+import {Observable} from "rxjs";
+import {
+  MARK_AS_TRANSLATABLE,
+  MemoizedUtil,
+  Override,
+  OverrideProperty,
+  ResourceNameSpace,
+} from "solidify-frontend";
+
+@Component({
+  selector: "dlcm-admin-organizational-unit-detail-edit-routable",
+  templateUrl: "./admin-organizational-unit-detail-edit.routable.html",
+  styleUrls: ["../../../../../../shared/components/routables/shared-abstract-detail-edit-common/shared-abstract-detail-edit-common.routable.scss"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdminOrganizationalUnitDetailEditRoutable extends SharedAbstractDetailEditCommonRoutable<OrganizationalUnit, AdminOrganizationalUnitStateModel> implements OnInit {
+  @Select(AdminOrganizationalUnitState.isLoadingWithDependency) isLoadingWithDependencyObs: Observable<boolean>;
+  @Select(AdminOrganizationalUnitState.isReadyToBeDisplayed) isReadyToBeDisplayedObs: Observable<boolean>;
+  listSubmissionPoliciesObs: Observable<SubmissionPolicy[]> = MemoizedUtil.list(this._store, SharedSubmissionPolicyState);
+  listPreservationPoliciesObs: Observable<PreservationPolicy[]> = MemoizedUtil.list(this._store, SharedPreservationPolicyState);
+  listRoleObs: Observable<Role[]> = MemoizedUtil.list(this._store, SharedRoleState);
+
+  @OverrideProperty()
+  checkAvailableResourceNameSpace: ResourceNameSpace = sharedOrgUnitActionNameSpace;
+
+  readonly KEY_PARAM_NAME: keyof OrganizationalUnit & string = "name";
+
+  private currentTab: Tab;
+
+  listTabs: Tab[] = [
+    {
+      id: TabEnum.DATA,
+      suffixUrl: AdminRoutesEnum.organizationalUnitData,
+      icon: IconNameEnum.metadata,
+      titleToTranslate: MARK_AS_TRANSLATABLE("admin.organizationalUnit.tab.detail"),
+      route: () => [...this.rootUrl, AdminRoutesEnum.organizationalUnitData],
+    },
+    {
+      id: TabEnum.ADDITIONAL_FIELDS_FORM,
+      suffixUrl: AdminRoutesEnum.organizationalUnitAdditionalFieldsForm,
+      icon: IconNameEnum.files,
+      titleToTranslate: MARK_AS_TRANSLATABLE("admin.organizationalUnit.tab.additionalFieldsForm"),
+      route: () => [...this.rootUrl, AdminRoutesEnum.organizationalUnitAdditionalFieldsForm],
+    },
+  ];
+
+  private get rootUrl(): string[] {
+    return [AppRoutesEnum.admin, AdminRoutesEnum.organizationalUnit, AdminRoutesEnum.organizationalUnitDetail, this._resId];
+  }
+
+  listExtraButtons: ExtraButtonToolbar<OrganizationalUnit>[] = [
+    {
+      color: "primary",
+      typeButton: "flat-button",
+      icon: IconNameEnum.save,
+      labelToTranslate: (current) => MARK_AS_TRANSLATABLE("app.navigation.button.save"),
+      order: 40,
+      callback: () => this._adminOrganizationalUnitService?.formPresentational?.onSubmit(),
+      displayCondition: () => this.isEdit,
+      disableCondition: () => this._adminOrganizationalUnitService?.formPresentational?.form?.pristine || this._adminOrganizationalUnitService?.formPresentational?.form?.invalid,
+    },
+    {
+      color: "primary",
+      typeButton: "button",
+      icon: IconNameEnum.create,
+      labelToTranslate: (current) => MARK_AS_TRANSLATABLE("admin.organizationalUnit.button.createAdditionalFieldsForm"),
+      order: 40,
+      callback: () => this.createAdditionalFieldsFromScratch(this._resId),
+    },
+  ];
+
+  constructor(protected readonly _store: Store,
+              protected readonly _route: ActivatedRoute,
+              protected readonly _actions$: Actions,
+              protected readonly _changeDetector: ChangeDetectorRef,
+              public readonly _dialog: MatDialog,
+              private readonly _adminOrganizationalUnitService: AdminOrganizationalUnitService) {
+    super(_store, _route, _actions$, _changeDetector, _dialog, LocalStateEnum.admin_organizationalUnit, adminOrganizationalUnitActionNameSpace, LocalStateEnum.admin);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this._store.dispatch(new SharedResearchDomainAction.GetSource());
+  }
+
+  setCurrentTab($event: Tab): void {
+    this.currentTab = $event;
+  }
+
+  protected getSubResourceWithParentId(id: string): void {
+  }
+
+  private createAdditionalFieldsFromScratch(_resId: string): void {
+    this._dialog.open(AdminOrganizationalUnitAdditionalFieldsDetailCreateUpdateDialog, {
+      data: {
+        parentResId: this._resId,
+        additionalFieldsForm: undefined,
+        mode: "create",
+      } as AdminOrganizationalUnitAdditionalFieldsDetailCreateEditDialogData,
+    });
+  }
+
+  @Override()
+  backToDetail(): void {
+    super.backToDetail([...this.rootUrl, AdminRoutesEnum.organizationalUnitData]);
+  }
+}
+
+enum TabEnum {
+  DATA = "DATA",
+  ADDITIONAL_FIELDS_FORM = "ADDITIONAL_FIELDS_FORM",
+}

src/app/features/admin/organizational-unit/components/routables/admin-organizational-unit-metadata/admin-organizational-unit-metadata.routable.html

+<div class="wrapper"
+     [dlcmSpinner]="isLoadingWithDependencyObs | async"
+>
+  <dlcm-admin-organizational-unit-form #formPresentational
+                                       [solidifyFocusFirstElement]="isEdit"
+                                       *ngIf="isReadyToBeDisplayedObs | async"
+                                       [model]="currentObs| async"
+                                       [selectedSubmissionPolicies]="selectedSubmissionPoliciesObs | async"
+                                       [selectedPreservationPolicies]="selectedPreservationPoliciesObs | async"
+                                       [selectedDisseminationPolicies]="selectedDisseminationPoliciesObs | async"
+                                       [selectedPersonRole]="selectedPersonRoleObs | async"
+                                       [selectedFundingAgencies]="selectedFundingAgenciesObs | async"
+                                       [selectedInstitutions]="selectedInstitutionsObs | async"
+                                       [listSubmissionPolicies]="listSubmissionPoliciesObs | async"
+                                       [listPreservationPolicies]="listPreservationPoliciesObs | async"
+                                       [listDisseminationPolicies]="listDisseminationPoliciesObs | async"
+                                       [researchDomainSources]="researchDomainSourcesObs | async"
+                                       [defaultPlatformLicenseId]="(systemPropertyObs | async)?.defaultLicense"
+                                       [listRole]="listRoleObs | async"
+                                       [readonly]="!isEdit"
+                                       [editAvailable]="editAvailable"
+                                       (checkAvailableChange)="checkAvailable($event)"
+                                       (submitChange)="update($event)"
+                                       (dirtyChange)="updateCanDeactivate($event)"
+                                       (navigate)="navigate($event)"
+                                       (editChange)="edit()"
+  ></dlcm-admin-organizational-unit-form>
+</div>

src/app/features/admin/organizational-unit/components/routables/admin-orgunit-detail-edit/admin-organizational-unit-detail-edit.routable.ts → src/app/features/admin/organizational-unit/components/routables/admin-organizational-unit-metadata/admin-organizational-unit-metadata.routable.ts

 import {PersonRole} from "@admin/models/person-role.model";
+import {AdminOrganizationalUnitFormPresentational} from "@admin/organizational-unit/components/presentationals/admin-organizational-unit-form/admin-organizational-unit-form.presentational";
+import {AdminOrganizationalUnitService} from "@admin/organizational-unit/services/admin-organizational-unit.service";
 import {adminOrganizationalUnitActionNameSpace} from "@admin/organizational-unit/stores/admin-organizational-unit.action";
 import {
   AdminOrganizationalUnitState,
@@ -21,6 +23,7 @@ import {
   ChangeDetectorRef,
   Component,
   OnInit,
+  ViewChild,
 } from "@angular/core";
 import {MatDialog} from "@angular/material/dialog";
 import {ActivatedRoute} from "@angular/router";
@@ -35,6 +38,7 @@ import {
   SubmissionPolicy,
   SystemProperty,
 } from "@models";
+import {Navigate} from "@ngxs/router-plugin";
 import {
   Actions,
   Select,
@@ -42,6 +46,11 @@ import {
 } from "@ngxs/store";
 import {SharedAbstractDetailEditCommonRoutable} from "@shared/components/routables/shared-abstract-detail-edit-common/shared-abstract-detail-edit-common.routable";
 import {LocalStateEnum} from "@shared/enums/local-state.enum";
+import {
+  AdminRoutesEnum,
+  DepositRoutesEnum,
+  RoutesEnum,
+} from "@shared/enums/routes.enum";
 import {SharedDisseminationPolicyState} from "@shared/stores/dissemination-policy/shared-dissemination-policy.state";
 import {sharedOrgUnitActionNameSpace} from "@shared/stores/organizational-unit/shared-organizational-unit.action";
 import {SharedPreservationPolicyState} from "@shared/stores/preservation-policy/shared-preservation-policy.state";
@@ -51,22 +60,25 @@ import {SharedRoleState} from "@shared/stores/role/shared-role.state";
 import {SharedSubmissionPolicyState} from "@shared/stores/submission-policy/shared-submission-policy.state";
 import {Observable} from "rxjs";
 import {
-  MARK_AS_TRANSLATABLE,
+  filter,
+  take,
+  tap,
+} from "rxjs/operators";
+import {
+  isNotNullNorUndefined,
   MemoizedUtil,
+  Override,
   OverrideProperty,
   ResourceNameSpace,
 } from "solidify-frontend";
-import {Tab} from "@shared/components/containers/shared-tabs/shared-tabs.container";
-import {AdminRoutesEnum, AppRoutesEnum, DepositRoutesEnum} from "@shared/enums/routes.enum";
-import {IconNameEnum} from "@shared/enums/icon-name.enum";
 
 @Component({
   selector: "dlcm-admin-organizational-unit-detail-edit-routable",
-  templateUrl: "./admin-organizational-unit-detail-edit.routable.html",
+  templateUrl: "./admin-organizational-unit-metadata.routable.html",
   styleUrls: ["../../../../../../shared/components/routables/shared-abstract-detail-edit-common/shared-abstract-detail-edit-common.routable.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AdminOrganizationalUnitDetailEditRoutable extends SharedAbstractDetailEditCommonRoutable<OrganizationalUnit, AdminOrganizationalUnitStateModel> implements OnInit {
+export class AdminOrganizationalUnitMetadataRoutable extends SharedAbstractDetailEditCommonRoutable<OrganizationalUnit, AdminOrganizationalUnitStateModel> implements OnInit {
   @Select(AdminOrganizationalUnitState.isLoadingWithDependency) isLoadingWithDependencyObs: Observable<boolean>;
   @Select(AdminOrganizationalUnitState.isReadyToBeDisplayed) isReadyToBeDisplayedObs: Observable<boolean>;
   selectedSubmissionPoliciesObs: Observable<SubmissionPolicy[]> = MemoizedUtil.selected(this._store, AdminOrganizationalUnitSubmissionPolicyState);
@@ -85,40 +97,32 @@ export class AdminOrganizationalUnitDetailEditRoutable extends SharedAbstractDet
   @OverrideProperty()
   checkAvailableResourceNameSpace: ResourceNameSpace = sharedOrgUnitActionNameSpace;
 
-  readonly KEY_PARAM_NAME: keyof OrganizationalUnit & string = "name";
-
-  private get rootUrl(): string[] {
-    return [AppRoutesEnum.admin, AdminRoutesEnum.organizationalUnit];
-  }
+  @OverrideProperty()
+  @ViewChild("formPresentational")
+  readonly formPresentational: AdminOrganizationalUnitFormPresentational;
 
-  listTabs: Tab[] = [
-    {
-      id: TabEnum.METADATA,
-      suffixUrl: DepositRoutesEnum.metadata,
-      icon: IconNameEnum.metadata,
-      titleToTranslate: MARK_AS_TRANSLATABLE("admin.organizationalUnit.detail"),
-      route: () => [...this.rootUrl, AdminRoutesEnum.organizationalUnitDetail, this._resId],
-    },
-    {
-      id: TabEnum.ADDITIONAL_FIELDS_FORM,
-      suffixUrl: DepositRoutesEnum.metadata,
-      icon: IconNameEnum.files,
-      titleToTranslate: MARK_AS_TRANSLATABLE("admin.organizationalUnit.additionalFieldsForm"),
-      route: () => [...this.rootUrl, AdminRoutesEnum.organizationalUnitAdditionalFieldsForm, this._resId],
-    },
-  ];
+  readonly KEY_PARAM_NAME: keyof OrganizationalUnit & string = "name";
 
-  constructor(protected _store: Store,
-              protected _route: ActivatedRoute,
+  constructor(protected readonly _store: Store,
+              protected readonly _route: ActivatedRoute,
               protected readonly _actions$: Actions,
               protected readonly _changeDetector: ChangeDetectorRef,
-              public _dialog: MatDialog) {
+              public readonly _dialog: MatDialog,
+              private readonly _adminOrganizationalUnitService: AdminOrganizationalUnitService) {
     super(_store, _route, _actions$, _changeDetector, _dialog, LocalStateEnum.admin_organizationalUnit, adminOrganizationalUnitActionNameSpace, LocalStateEnum.admin);
   }
 
   ngOnInit(): void {
     super.ngOnInit();
     this._store.dispatch(new SharedResearchDomainAction.GetSource());
+
+    this.subscribe(this.isReadyToBeDisplayedObs.pipe(
+      filter(ready => ready && isNotNullNorUndefined(this.formPresentational)),
+      take(1),
+      tap(ready => {
+        this._adminOrganizationalUnitService.formPresentational = this.formPresentational;
+      })),
+    );
   }
 
   getSubResourceWithParentId(id: string): void {
@@ -129,9 +133,16 @@ export class AdminOrganizationalUnitDetailEditRoutable extends SharedAbstractDet
     this._store.dispatch(new AdminOrganizationalUnitFundingAgencyAction.GetAll(id));
     this._store.dispatch(new AdminOrganizationalUnitInstitutionAction.GetAll(id));
   }
-}
 
-enum TabEnum {
-  METADATA = "METADATA",
-  ADDITIONAL_FIELDS_FORM = "ADDITIONAL_FIELDS_FORM",
-}
+  @Override()
+  edit(): void {
+    if (this.isEdit) {
+      return;
+    }
+    this._store.dispatch(new Navigate([RoutesEnum.adminOrganizationalUnitDetail, this._resId, AdminRoutesEnum.organizationalUnitData, DepositRoutesEnum.edit]));
+  }
+
+  @Override()
+  protected cleanState(): void {
+  }
+}
\ No newline at end of file

src/app/features/admin/organizational-unit/components/routables/admin-orgunit-detail-edit/admin-organizational-unit-detail-edit.routable.html

-<lib-empty-container
-    cdkTrapFocus
-    solidifyShortCuts
-    [solidifyFocusFirstElement]="true"
-    (onEscape)="backToList()"
->
-  <dlcm-shared-banner-edit-mode [isEdit]="isEdit"></dlcm-shared-banner-edit-mode>
-
-
-  <dlcm-shared-button-toolbar-detail [mode]="isEdit ? 'edit' : 'detail'"
-                                     [formPresentational]="formPresentational"
-                                     [currentModel]="currentObs | async"
-                                     (editChange)="edit()"
-                                     (deleteChange)="delete()"
-                                     (backToDetailChange)="backToDetail()"
-                                     (backToListChange)="backToList()"
-  >
-  </dlcm-shared-button-toolbar-detail>
-
-  <div class="wrapper"
-       [dlcmSpinner]="isLoadingWithDependencyObs | async"
-  >
-    <dlcm-admin-organizational-unit-form #formPresentational
-                                         [solidifyFocusFirstElement]="isEdit"
-                                         *ngIf="isReadyToBeDisplayedObs | async"
-                                         [model]="currentObs| async"
-                                         [selectedSubmissionPolicies]="selectedSubmissionPoliciesObs | async"
-                                         [selectedPreservationPolicies]="selectedPreservationPoliciesObs | async"
-                                         [selectedDisseminationPolicies]="selectedDisseminationPoliciesObs | async"
-                                         [selectedPersonRole]="selectedPersonRoleObs | async"
-                                         [selectedFundingAgencies]="selectedFundingAgenciesObs | async"
-                                         [selectedInstitutions]="selectedInstitutionsObs | async"
-                                         [listSubmissionPolicies]="listSubmissionPoliciesObs | async"
-                                         [listPreservationPolicies]="listPreservationPoliciesObs | async"
-                                         [listDisseminationPolicies]="listDisseminationPoliciesObs | async"
-                                         [researchDomainSources]="researchDomainSourcesObs | async"
-                                         [defaultPlatformLicenseId]="(systemPropertyObs | async)?.defaultLicense"
-                                         [listRole]="listRoleObs | async"
-                                         [readonly]="!isEdit"
-                                         [editAvailable]="editAvailable"
-                                         (checkAvailableChange)="checkAvailable($event)"
-                                         (submitChange)="update($event)"
-                                         (dirtyChange)="updateCanDeactivate($event)"
-                                         (navigate)="navigate($event)"
-                                         (editChange)="edit()"
-    ></dlcm-admin-organizational-unit-form>
-  </div>
-</lib-empty-container>