Updated add plugin modal and edit plugin modal to Carbon Design (#1008)

valtimo-platform · May 24, 2024 · 3bac1a3 · 3bac1a3
1 parent 997f617
commit 3bac1a3
Show file tree

Hide file tree

Showing 26 changed files with 111 additions and 210 deletions.
diff --git a/...ponents/src/lib/components/stepper/stepper-footer-step/stepper-footer-step.component.html b/...ponents/src/lib/components/stepper/stepper-footer-step/stepper-footer-step.component.html
@@ -33,36 +33,31 @@
 </div>
 
 <ng-template #cancelButton let-disabled="disabled">
-  <v-button (clickEvent)="cancel()" type="secondary" [disabled]="disabled">{{
-    cancelButtonTranslationKey
-      ? (cancelButtonTranslationKey | translate)
-      : ('stepper.cancelButtonText' | translate)
-  }}</v-button>
+  <button cdsButton="secondary" (click)="cancel()" [disabled]="disabled">
+    {{
+      cancelButtonTranslationKey
+        ? (cancelButtonTranslationKey | translate)
+        : ('stepper.cancelButtonText' | translate)
+    }}
+  </button>
 </ng-template>
 
 <ng-template #nextButton let-disabled="disabled">
-  <v-button
-    [disabled]="!nextButtonEnabled || disabled"
-    (clickEvent)="goToNextStep()"
-    mdiIcon="arrow-right"
-    >{{
+  <button cdsButton="primary" [disabled]="!nextButtonEnabled || disabled" (click)="goToNextStep()">
+    {{
       nextButtonTranslationKey
         ? (nextButtonTranslationKey | translate)
         : ('stepper.nextButtonText' | translate)
-    }}</v-button
-  >
+    }}
+  </button>
 </ng-template>
 
 <ng-template #completeButton let-disabled="disabled">
-  <v-button
-    [disabled]="!completeButtonEnabled || disabled"
-    (clickEvent)="complete()"
-    [mdiIcon]="completeButtonMdiIcon || 'check'"
-    type="success"
-    >{{
+  <button cdsButton="primary" [disabled]="!completeButtonEnabled || disabled" (click)="complete()">
+    {{
       completeButtonTranslationKey
         ? (completeButtonTranslationKey | translate)
         : ('stepper.completeButtonText' | translate)
-    }}</v-button
-  >
+    }}
+  </button>
 </ng-template>
diff --git a/projects/valtimo/components/src/lib/components/stepper/stepper.module.ts b/projects/valtimo/components/src/lib/components/stepper/stepper.module.ts
@@ -24,6 +24,7 @@ import {StepperStepComponent} from './stepper-step/stepper-step.component';
 import {TranslateModule} from '@ngx-translate/core';
 import {StepperFooterStepComponent} from './stepper-footer-step/stepper-footer-step.component';
 import {ButtonModule} from '../button/button.module';
+import {ButtonModule as CarbonButtonModule} from 'carbon-components-angular';
 
 /**
  * @deprecated Migrate old design to Carbon
@@ -37,7 +38,12 @@ import {ButtonModule} from '../button/button.module';
     StepperStepComponent,
     StepperFooterStepComponent,
   ],
-  imports: [CommonModule, TranslateModule, ButtonModule],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ButtonModule,
+    CarbonButtonModule
+  ],
   exports: [
     StepperContainerComponent,
     StepperContentComponent,

diff --git a/...imo/plugin-management/src/lib/components/plugin-add-modal/plugin-add-modal.component.html b/...imo/plugin-management/src/lib/components/plugin-add-modal/plugin-add-modal.component.html
@@ -20,11 +20,11 @@
   [disabled]="inputDisabled$ | async"
   [returnToFirstStepSubject$]="returnToFirstStepSubject$"
 >
-  <v-modal #pluginAddModal (closeEvent)="hide()">
-    <div role="header">
+  <cds-modal #pluginAddModal [open]="open">
+    <cds-modal-header [showCloseButton]="true" (closeSelect)="hide()">
       <v-stepper-header></v-stepper-header>
-    </div>
-    <div role="content">
+    </cds-modal-header>
+    <section cdsModalContent>
       <v-stepper-content>
         <v-stepper-step titleTranslationKey="pluginManagement.addSteps.step0">
           <valtimo-plugin-add-select></valtimo-plugin-add-select>
@@ -36,9 +36,9 @@
           ></valtimo-plugin-configure>
         </v-stepper-step>
       </v-stepper-content>
-    </div>
-    <div role="footer">
-      <v-stepper-footer>
+    </section>
+    <cds-modal-footer>
+      <v-stepper-footer class="stepper-footer">
         <v-stepper-footer-step
           nextButtonTranslationKey="pluginManagement.addSteps.step1"
           [nextButtonEnabled]="selectedPluginDefinition$ | async"
@@ -48,6 +48,6 @@
           [completeButtonEnabled]="configurationValid$ | async"
         ></v-stepper-footer-step>
       </v-stepper-footer>
-    </div>
-  </v-modal>
+    </cds-modal-footer>
+  </cds-modal>
 </v-stepper-container>
diff --git a/...imo/plugin-management/src/lib/components/plugin-add-modal/plugin-add-modal.component.scss b/...imo/plugin-management/src/lib/components/plugin-add-modal/plugin-add-modal.component.scss
@@ -13,3 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+.stepper-footer {
+  width: 100%;
+}
diff --git a/...ltimo/plugin-management/src/lib/components/plugin-add-modal/plugin-add-modal.component.ts b/...ltimo/plugin-management/src/lib/components/plugin-add-modal/plugin-add-modal.component.ts
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {PluginManagementStateService} from '../../services';
 import {take} from 'rxjs/operators';
-import {VModalComponent, ModalService} from '@valtimo/components';
-import {BehaviorSubject, Subject, Subscription} from 'rxjs';
+import {BehaviorSubject, Subject} from 'rxjs';
 import {PluginConfigurationData, PluginManagementService} from '@valtimo/plugin';
 import {NGXLogger} from 'ngx-logger';
 
@@ -27,29 +26,22 @@ import {NGXLogger} from 'ngx-logger';
   templateUrl: './plugin-add-modal.component.html',
   styleUrls: ['./plugin-add-modal.component.scss'],
 })
-export class PluginAddModalComponent implements OnInit {
-  @ViewChild('pluginAddModal') pluginAddModal: VModalComponent;
+export class PluginAddModalComponent {
+  @Input() open = false;
+
+  @Output() closeModal: EventEmitter<boolean> = new EventEmitter();
 
   readonly inputDisabled$ = this.stateService.inputDisabled$;
   readonly selectedPluginDefinition$ = this.stateService.selectedPluginDefinition$;
   readonly configurationValid$ = new BehaviorSubject<boolean>(false);
   readonly returnToFirstStepSubject$ = new Subject<boolean>();
 
-  private showSubscription!: Subscription;
-  private hideSubscription!: Subscription;
-
   constructor(
     private readonly stateService: PluginManagementStateService,
-    private readonly modalService: ModalService,
     private readonly pluginManagementService: PluginManagementService,
     private readonly logger: NGXLogger
   ) {}
 
-  ngOnInit(): void {
-    this.openShowSubscription();
-    this.openHideSubscription();
-  }
-
   complete(): void {
     this.stateService.save();
   }
@@ -59,12 +51,10 @@ export class PluginAddModalComponent implements OnInit {
   }
 
   hide(): void {
-    this.stateService.disableInput();
-    this.modalService.closeModal(() => {
-      this.returnToFirstStep();
-      this.stateService.enableInput();
-      this.stateService.clear();
-    });
+    this.closeModal.emit();
+    this.returnToFirstStep();
+    this.stateService.enableInput();
+    this.stateService.clear();
   }
 
   onValid(valid: boolean): void {
@@ -98,25 +88,7 @@ export class PluginAddModalComponent implements OnInit {
     });
   }
 
-  private openShowSubscription(): void {
-    this.showSubscription = this.stateService.showModal$.subscribe(modalType => {
-      if (modalType === 'add') {
-        this.show();
-      }
-    });
-  }
-
-  private openHideSubscription(): void {
-    this.hideSubscription = this.stateService.hideModal$.subscribe(() => {
-      this.hide();
-    });
-  }
-
   private returnToFirstStep(): void {
     this.returnToFirstStepSubject$.next(true);
   }
-
-  private show(): void {
-    this.modalService.openModal(this.pluginAddModal);
-  }
 }
diff --git a/...o/plugin-management/src/lib/components/plugin-edit-modal/plugin-edit-modal.component.html b/...o/plugin-management/src/lib/components/plugin-edit-modal/plugin-edit-modal.component.html
@@ -14,42 +14,39 @@
   ~ limitations under the License.
   -->
 
-<v-modal
+<cds-modal
   #pluginEditModal
-  (closeEvent)="hide()"
+  [open]="open"
+  (close)="hide()"
   *ngIf="{selectedConfiguration: selectedPluginConfiguration$ | async} as obs"
 >
-  <div role="header">
-    <div class="edit-configuration-title">
-      <v-title [margin]="false" type="h2">{{
-        obs.selectedConfiguration?.title +
-          ' - ' +
-          ('title' | pluginTranslate: obs.selectedConfiguration?.pluginDefinition?.key | async)
-      }}</v-title>
-    </div>
-  </div>
-  <div role="content">
+  <cds-modal-header [showCloseButton]="true" (closeSelect)="hide()">
+    {{
+      obs.selectedConfiguration?.title +
+        ' - ' +
+        ('title' | pluginTranslate: obs.selectedConfiguration?.pluginDefinition?.key | async)
+    }}
+  </cds-modal-header>
+  <section cdsModalContent>
     <valtimo-plugin-edit
       (valid)="onPluginValid($event)"
       (configuration)="onPluginConfiguration($event)"
     ></valtimo-plugin-edit>
-  </div>
-  <div role="footer">
-    <div class="edit-plugin-buttons">
-      <v-button
-        [disabled]="inputDisabled$ | async"
-        (clickEvent)="delete()"
-        [mdiIcon]="'delete'"
-        type="danger"
-        >{{ 'pluginManagement.remove' | translate }}</v-button
-      >
-      <v-button
-        [disabled]="(configurationValid$ | async) === false || (inputDisabled$ | async)"
-        (clickEvent)="save()"
-        [mdiIcon]="'check'"
-        type="success"
-        >{{ 'pluginManagement.save' | translate }}</v-button
-      >
-    </div>
-  </div>
-</v-modal>
+  </section>
+  <cds-modal-footer>
+    <button
+      cdsButton="danger"
+      (click)="delete()"
+      [disabled]="inputDisabled$ | async"
+    >
+      {{ 'pluginManagement.remove' | translate }}
+    </button>
+    <button
+      cdsButton="primary"
+      [disabled]="(configurationValid$ | async) === false || (inputDisabled$ | async)"
+      (click)="save()"
+    >
+      {{ 'pluginManagement.save' | translate }}
+    </button>
+  </cds-modal-footer>
+</cds-modal>
diff --git a/...o/plugin-management/src/lib/components/plugin-edit-modal/plugin-edit-modal.component.scss b/...o/plugin-management/src/lib/components/plugin-edit-modal/plugin-edit-modal.component.scss
@@ -13,15 +13,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-.edit-plugin-buttons {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-
-.edit-configuration-title {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
diff --git a/...imo/plugin-management/src/lib/components/plugin-edit-modal/plugin-edit-modal.component.ts b/...imo/plugin-management/src/lib/components/plugin-edit-modal/plugin-edit-modal.component.ts
@@ -14,11 +14,10 @@
  * limitations under the License.
  */
 
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {PluginManagementStateService} from '../../services';
 import {take} from 'rxjs/operators';
-import {VModalComponent, ModalService} from '@valtimo/components';
-import {BehaviorSubject, Observable, Subject, Subscription} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {
   PluginConfigurationData,
   PluginConfiguration,
@@ -31,29 +30,22 @@ import {NGXLogger} from 'ngx-logger';
   templateUrl: './plugin-edit-modal.component.html',
   styleUrls: ['./plugin-edit-modal.component.scss'],
 })
-export class PluginEditModalComponent implements OnInit {
-  @ViewChild('pluginEditModal') pluginEditModal: VModalComponent;
+export class PluginEditModalComponent {
+  @Input() open = false;
+
+  @Output() closeModal: EventEmitter<boolean> = new EventEmitter();
 
   readonly inputDisabled$ = this.stateService.inputDisabled$;
   readonly selectedPluginConfiguration$: Observable<PluginConfiguration> =
     this.stateService.selectedPluginConfiguration$;
   readonly configurationValid$ = new BehaviorSubject<boolean>(false);
 
-  private showSubscription!: Subscription;
-  private hideSubscription!: Subscription;
-
   constructor(
     private readonly stateService: PluginManagementStateService,
-    private readonly modalService: ModalService,
     private readonly pluginManagementService: PluginManagementService,
     private readonly logger: NGXLogger
   ) {}
 
-  ngOnInit(): void {
-    this.openShowSubscription();
-    this.openHideSubscription();
-  }
-
   save(): void {
     this.stateService.saveEdit();
   }
@@ -79,18 +71,16 @@ export class PluginEditModalComponent implements OnInit {
       });
   }
 
-  hide(): void {
-    this.modalService.closeModal(() => {
-      this.stateService.enableInput();
-      this.stateService.clear();
-    });
+  public hide(): void {
+    this.closeModal.emit();
+    this.stateService.enableInput();
   }
 
-  onPluginValid(valid: boolean): void {
+  public onPluginValid(valid: boolean): void {
     this.configurationValid$.next(valid);
   }
 
-  onPluginConfiguration(configuration: PluginConfigurationData): void {
+  public onPluginConfiguration(configuration: PluginConfigurationData): void {
     this.stateService.disableInput();
 
     this.stateService.selectedPluginConfiguration$
@@ -120,22 +110,4 @@ export class PluginEditModalComponent implements OnInit {
           );
       });
   }
-
-  private openShowSubscription(): void {
-    this.showSubscription = this.stateService.showModal$.subscribe(modalType => {
-      if (modalType === 'edit') {
-        this.show();
-      }
-    });
-  }
-
-  private openHideSubscription(): void {
-    this.hideSubscription = this.stateService.hideModal$.subscribe(() => {
-      this.hide();
-    });
-  }
-
-  private show(): void {
-    this.modalService.openModal(this.pluginEditModal);
-  }
 }