refact: remove bootstrap modal on admin

Co-Authored-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Sep 30, 2024 · 6e720d8 · 6e720d8
1 parent 02ae64a
commit 6e720d8
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 73 deletions.
diff --git a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.spec.ts b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.spec.ts
@@ -20,7 +20,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
-import { BsModalRef, ModalModule } from 'ngx-bootstrap/modal';
 import { UserIdEditorComponent } from './user-id-editor.component';
 
 
@@ -33,13 +32,9 @@ describe('UserIdEditorComponent', () => {
       imports: [
         HttpClientModule,
         TranslateModule.forRoot({}),
-        ModalModule.forRoot(),
         ReactiveFormsModule,
       ],
       declarations: [ UserIdEditorComponent ],
-      providers: [
-        BsModalRef
-      ],
       schemas: [
         CUSTOM_ELEMENTS_SCHEMA
       ]

diff --git a/...rc/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html b/...rc/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html
@@ -14,42 +14,37 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="modal-header">
-  <h4 class="modal-title pull-left" translate>Import</h4>
-</div>
-<div class="modal-body">
-  @if (records.length > 0 || warning) {
-    <h5>{{ 'This document may already exist' | translate }}</h5>
-  }
-  @if (records.length > 0) {
-    <ul class="list-unstyled mb-0">
-      @for (record of records; track record) {
-        <li>
-          <a [routerLink]="['/records', 'documents', 'detail', $any(record).metadata.pid]" (click)="close()">
-            @if ($any(record).metadata.ui_title_text_responsibility) {
-              {{ $any(record).metadata.ui_title_text_responsibility }}
-            } @else {
-              {{ 'Document' | translate }}
-            }
-          </a>
-        </li>
-      }
-    </ul>
-  }
-  @if (warning) {
-    <div class="mt-3 row">
-      <div class="col-1">
-        <i class="fa fa-exclamation-circle fa-2x text-danger" aria-hidden="true"></i>
-      </div>
-      <div class="col-11">
-        <p class="mb-2 font-weight-bold" translate>Too many identifiers: not all identifiers have been verified.</p>
-        <p class="mb-2 font-weight-bold" translate>Please make sure that this document does not already exist before importing.</p>
-      </div>
+@if (records.length > 0 || warning) {
+  <h5 translate>This document may already exist</h5>
+}
+@if (records.length > 0) {
+  <ul class="list-unstyled mb-0">
+    @for (record of records; track record) {
+      <li>
+        <a [routerLink]="['/records', 'documents', 'detail', $any(record).metadata.pid]" (click)="cancel()">
+          @if ($any(record).metadata.ui_title_text_responsibility) {
+            {{ $any(record).metadata.ui_title_text_responsibility }}
+          } @else {
+            {{ 'Document' | translate }}
+          }
+        </a>
+      </li>
+    }
+  </ul>
+}
+@if (warning) {
+  <div class="grid mt-3">
+    <div class="col-fixed" style="width:30px">
+      <i class="fa fa-exclamation-circle fa-2x text-danger" aria-hidden="true"></i>
     </div>
-  }
-  <div class="font-weight-bold mt-3" translate>Do you really want to import this document?</div>
-</div>
-<div class="modal-footer">
-  <button id="modal-cancel-button" type="button" class="btn btn-light" (click)="decline()" translate>Cancel</button>
-  <button id="modal-confirm-button" type="button" class="btn btn-primary" (click)="confirm()" translate>Import</button>
+    <div class="col">
+      <p class="mb-2 font-weight-bold" translate>Too many identifiers: not all identifiers have been verified.</p>
+      <p class="mb-2 font-weight-bold" translate>Please make sure that this document does not already exist before importing.</p>
+    </div>
+  </div>
+}
+<div class="font-weight-bold mt-3" translate>Do you really want to import this document?</div>
+<div class="flex w-full justify-content-end">
+  <p-button class="mr-2" [label]="'Cancel'|translate" severity="secondary" (click)="cancel()" />
+  <p-button [label]="'Import'|translate" (click)="confirm()" />
 </div>
diff --git a/.../src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts b/.../src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts
@@ -14,45 +14,35 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { Subject } from 'rxjs';
+import { Component, inject, OnInit } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 @Component({
   selector: 'admin-dialog-import',
   templateUrl: './dialog-import.component.html'
 })
-export class DialogImportComponent {
+export class DialogImportComponent implements OnInit {
+
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
 
   /** Available record */
   records: any[];
 
   /** Show warning message */
   warning: boolean = false;
 
-  /** Observable for action */
-  confirmation$: Subject<boolean> = new Subject<boolean>();
-
-  /**
-   * Constructor
-   * @param bsModalRef - BsModalRef
-   */
-  constructor(private bsModalRef: BsModalRef) {}
-
-  /** Confirm action */
-  confirm() {
-    this.confirmation$.next(true);
-    this.close();
+  ngOnInit(): void {
+      this.records = this.dynamicDialogConfig?.data?.records || [];
+      // this.warning = this.dynamicDialogConfig?.data?.warning || false;
+      this.warning = true;
   }
 
-  /** Cancel action */
-  decline() {
-    this.confirmation$.next(false);
-    this.close();
+  confirm():void {
+    this.dynamicDialogRef.close(true);
   }
 
-  /** Close modal box */
-  close() {
-    this.bsModalRef.hide();
+  cancel(): void {
+    this.dynamicDialogRef.close();
   }
 }
diff --git a/.../app/record/detail-view/document-detail-view/document-detail/document-detail.component.ts b/.../app/record/detail-view/document-detail-view/document-detail/document-detail.component.ts
@@ -168,13 +168,8 @@ export class DocumentDetailComponent extends DetailComponent implements OnInit {
         if (this.recordService.totalHits(response.hits.total) === 0 && !warning) {
           this.router.navigate(route, { queryParams: data });
         } else {
-          // const config = {
-          //   initialState: {
-          //     records: response.hits.hits,
-          //     warning
-          //   }
-          // };
           const dynamicDialogRef: DynamicDialogRef = this.dialogService.open(DialogImportComponent, {
+            header: this.translate.instant('Import'),
             data: {
               records: response.hits.hits,
               warning

diff --git a/...in/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts b/...in/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
@@ -22,7 +22,6 @@ import { TranslateService } from '@ngx-translate/core';
 import { RecordService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
 import { User, UserService } from '@rero/shared';
-import { BsModalRef } from 'ngx-bootstrap/modal';
 import { MessageService } from 'primeng/api';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Observable } from 'rxjs';