SED-3222 add custom toast #910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

lukasz-lepa wants to merge 10 commits into master from SED-3222-duplicate-edit

projects/step-core/src/lib/components/toast-container/toast-container.component.html

-Original file line number
+Diff line change
@@ -0,0 +1,14 @@
+    <div class="toast-container">
+      @for (toast of _toasts(); track toast.message) {
+        <step-toast
+          [type]="toast.type"
+          [message]="toast.message"
+          [values]="toast.values"
+          [entity]="toast.entity"
+          [entityName]="toast.entityName"
+          [actions]="toast.actions"
+          [autoClose]="!!toast.autoClose"
+          [duration]="toast.duration"
+        />
+      }
+    </div>

projects/step-core/src/lib/components/toast-container/toast-container.component.scss

-Original file line number
+Diff line change
@@ -0,0 +1,9 @@
+    .toast-container {
+      position: fixed;
+      top: 2rem;
+      right: 2rem;
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }

projects/step-core/src/lib/components/toast-container/toast-container.component.ts

-Original file line number
+Diff line change
@@ -0,0 +1,11 @@
+    import { Component, inject } from '@angular/core';
+    import { ToastService } from '../../services/toast.service';
+    @Component({
+      selector: 'step-toast-container',
+      templateUrl: './toast-container.component.html',
+      styleUrls: ['./toast-container.component.scss'],
+    })
+    export class ToastContainerComponent {
+      protected readonly _toasts = inject(ToastService).toastMessages;
+    }

projects/step-core/src/lib/components/toast/toast.component.html

-Original file line number
+Diff line change
@@ -0,0 +1,25 @@
+    @if (message) {
+      <div class="toast">
+        <div class="toast-message">
+          @if (entity) {
+            <entity-icon [entity]="entity" [entityName]="entityName" />&nbsp;
+          }
+          <ng-container *ngFor="let part of messageParts">
+            <span *ngIf="part.isPlaceholder" [matTooltip]="part.originalValue">{{ part.displayValue }}</span>
+            <span *ngIf="!part.isPlaceholder">{{ part }}</span>
+          </ng-container>
+        </div>
+        <div class="toast-bottom">
+          <div class="toast-actions">
+            @for (action of actions; track action.label) {
+              <a (click)="action.handler()" class="action-btn" type="button" color="primary">
+                {{ action.label }}
+              </a>
+            }
+          </div>
+          <div class="toast-close">
+            <button class="dismiss-btn" (click)="closeToast()">close</button>
+          </div>
+        </div>
+      </div>
+    }

projects/step-core/src/lib/components/toast/toast.component.scss

-Original file line number
+Diff line change
@@ -0,0 +1,72 @@
+    @use 'projects/step-core/styles/core-variables' as var;
+    .toast {
+      display: flex;
+      align-items: center;
+      background-color: var.$white;
+      border: 1px solid var.$light-white-gray;
+      padding: 0.5rem;
+      border-radius: 1rem;
+      box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.1);
+      position: relative;
+      flex-direction: column;
+      gap: 0.5rem;
+      .action-icons {
+        padding: 0 0.2rem;
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+      }
+      .success-icon {
+        margin-right: 10px;
+        color: var.$green-650;
+      }
+      .error-icon,
+      .warning-icon {
+        margin-right: 10px;
+        color: var.$red-100;
+      }
+      .info-icon {
+        margin-right: 10px;
+        color: black;
+      }
+      .toast-message {
+        flex: 1;
+        padding: 1rem 2rem 1rem 1rem;
+      }
+      .toast-bottom {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        .toast-actions {
+          display: flex;
+          width: 100%;
+          padding: 0 0.2rem;
+          justify-content: start;
+          padding-left: 1rem;
+          gap: 1rem;
+          .action-btn {
+            cursor: pointer;
+          }
+        }
+        .toast-close {
+          padding-right: 1rem;
+        }
+      }
+      .dismiss-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+      }
+    }

projects/step-core/src/lib/components/toast/toast.component.ts

-Original file line number
+Diff line change
@@ -0,0 +1,64 @@
+    import { Component, inject, Input, OnInit } from '@angular/core';
+    import { ToastService } from '../../services/toast.service';
+    import { NotificationAction } from '../../shared/toast-action.interface';
+    import { ToastType } from '../../shared/toast-type.enum';
+    import { Entity } from '../../modules/entity/types/entity';
+    @Component({
+      selector: 'step-toast',
+      templateUrl: 'toast.component.html',
+      styleUrls: ['toast.component.scss'],
+    })
+    export class ToastComponent implements OnInit {
+      @Input() type!: ToastType;
+      @Input() message: string = '';
+      @Input() actions: NotificationAction[] | undefined = [];
+      @Input() duration: number | undefined = 3000;
+      @Input() autoClose: boolean = true;
+      @Input() values: string[] = [];
+      @Input() entity?: Entity;
+      @Input() entityName?: string;
+      private _toastService = inject(ToastService);
+      private timer: any;
+      toastType = ToastType;
+      messageParts: any[] = [];
+      ngOnInit(): void {
+        this.formatMessage();
+        if (this.autoClose) {
+          this.timer = setTimeout(() => this.closeToast(), this.duration || 3000);
+        }
+      }
+      ngOnDestroy(): void {
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+      }
+      closeToast(): void {
+        this._toastService.removeToast(this.message, this.values);
+      }
+      private formatMessage(): void {
+        const formattedMessage = this.message.replace(/{(\d+)}/g, (match, index) => {
+          return `{${index}}`;
+        });
+        const parts = formattedMessage.split(/(\{\d+\})/g);
+        this.messageParts = parts.map((part) => {
+          const match = part.match(/\{(\d+)\}/);
+          if (match) {
+            const index = parseInt(match[1], 10);
+            const originalValue = this.values[index];
+            const displayValue = this.truncate(originalValue, 50);
+            return { isPlaceholder: true, originalValue, displayValue };
+          }
+          return part;
+        });
+      }
+      private truncate(value: string, maxLength: number): string {
+        return value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
+      }
+    }

projects/step-core/src/lib/services/toast.service.ts

-Original file line number
+Diff line change
@@ -0,0 +1,49 @@
+    import { Injectable, signal } from '@angular/core';
+    import { NotificationAction } from '../shared/toast-action.interface';
+    import { ToastType } from '../shared/toast-type.enum';
+    import { Entity } from '../modules/entity/types/entity';
+    @Injectable({
+      providedIn: 'root',
+    })
+    export class ToastService {
+      private toastsInternal = signal<
+        {
+          type: ToastType;
+          message: string;
+          values: string[];
+          entity?: Entity;
+          entityName?: string;
+          actions?: NotificationAction[];
+          autoClose?: boolean;
+          duration?: number;
+        }[]
+      >([]);
+      readonly toastMessages = this.toastsInternal.asReadonly();
+      showToast(
+        type: ToastType,
+        message: string,
+        values: string[],
+        entity?: Entity,
+        entityName?: string,
+        actions: NotificationAction[] = [],
+        autoClose: boolean = true,
+        duration: number = 3000,
+      ): void {
+        this.toastsInternal.update((toasts) =>
+          toasts.concat({ type, message, values, entity, entityName, actions, autoClose, duration }),
+        );
+      }
+      removeToast(message: string, values: string[]): void {
+        this.toastsInternal.update((toasts) =>
+          toasts.filter((toast) => toast.message !== message || !this.arraysEqual(toast.values, values)),
+        );
+      }
+      private arraysEqual(arr1: string[], arr2: string[]): boolean {
+        if (arr1.length !== arr2.length) return false;
+        return arr1.every((value, index) => value === arr2[index]);
+      }
+    }

projects/step-core/src/lib/shared/toast-action.interface.ts

-Original file line number
+Diff line change
@@ -0,0 +1,4 @@
+    export interface NotificationAction {
+      label: string;
+      handler: () => void;
+    }

projects/step-core/src/lib/shared/toast-type.enum.ts

-Original file line number
+Diff line change
@@ -0,0 +1,6 @@
+    export enum ToastType {
+      SUCCESS = 'success',
+      ERROR = 'error',
+      WARNING = 'warning',
+      INFO = 'info',
+    }

projects/step-core/src/lib/step-core.module.ts

-Original file line number
+Diff line change
@@ Expand Up @@
     import { ExtractUrlPipe } from './pipes/extract-url.pipe';
     import { ExtractQueryParamsPipe } from './pipes/extract-query-params.pipe';
     import { INFO_BANNER_EXPORTS } from './modules/info-banner';
+    import { ToastComponent } from './components/toast/toast.component';
+    import { ToastContainerComponent } from './components/toast-container/toast-container.component';
     @NgModule({
       declarations: [
@@ Expand Down Expand Up @@
         TestIdDirective,
         ExtractUrlPipe,
         ExtractQueryParamsPipe,
+        ToastComponent,
+        ToastContainerComponent,
       ],
       imports: [
         CommonModule,
@@ Expand Down Expand Up @@
         INFO_BANNER_EXPORTS,
         ExtractUrlPipe,
         ExtractQueryParamsPipe,
+        ToastComponent,
+        ToastContainerComponent,
       ],
       providers: [
         CORE_INITIALIZER,
@@ Expand Down Expand Up @@
     export * from './modules/info-banner';
     export * from './pipes/extract-url.pipe';
     export * from './pipes/extract-query-params.pipe';
+    export * from './services/toast.service';
+    export * from './components/toast/toast.component';
+    export * from './components/toast-container/toast-container.component';
+    export * from './shared/toast-type.enum';

projects/step-frontend/src/lib/components/root/root.component.html

-Original file line number
+Diff line change
@@ -1,2 +1,3 @@
     <step-theme></step-theme>
+    <step-toast-container></step-toast-container>
     <router-outlet></router-outlet>

projects/step-frontend/src/lib/modules/plan/components/plan-list/plan-list.component.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,14 +4,17 @@ import { @@
       AutoDeselectStrategy,
       DialogParentService,
       DialogsService,
-      Plan,
       IsUsedByDialogService,
+      Plan,
       selectionCollectionProvider,
       STORE_ALL,
-      tablePersistenceConfigProvider,
       tableColumnsConfigProvider,
+      tablePersistenceConfigProvider,
+      ToastService,
+      ToastType,
     } from '@exense/step-core';
     import { map, of, pipe, switchMap, tap } from 'rxjs';
+    import { Router } from '@angular/router';
     @Component({
       selector: 'step-plan-list',
@@ Expand All / @@ -34,7 +37,8 @@ import { map, of, pipe, switchMap, tap } from 'rxjs'; @@
     export class PlanListComponent implements DialogParentService {
       private _isUsedByDialogs = inject(IsUsedByDialogService);
       private _dialogs = inject(DialogsService);
+      private toast = inject(ToastService);
+      private _router = inject(Router);
       readonly _plansApiService = inject(AugmentedPlansService);
       readonly dataSource = this._plansApiService.getPlansTableDataSource();
@@ Expand All @@
       }
       duplicatePlan(id: string): void {
+        let clonedPlan: Plan;
+        const values: Array<string> = [];
         this._plansApiService
           .clonePlan(id)
           .pipe(
-            switchMap((clone) => this._plansApiService.savePlan(clone)),
+            switchMap((clone) => {
+              clonedPlan = clone;
+              if (clonedPlan.root?.attributes!['name']) {
+                values.push(clonedPlan.root?.attributes!['name']);
+              }
+              return this._plansApiService.savePlan(clone);
+            }),
             this.updateDataSourceAfterChange,
           )
-          .subscribe();
+          .subscribe(() =>
+            this.toast.showToast(
+              ToastType.SUCCESS,
+              `{0} successfully duplicated`,
+              values,
+              clonedPlan,
+              'plans',
+              [{ label: 'edit', handler: () => this._router.navigateByUrl(`/plans/editor/${clonedPlan.id}`) }],
+              false,
+            ),
+          );
       }
       deletePlan(plan: Plan): void {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SED-3222 add custom toast #910

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

SED-3222 add custom toast #910

Are you sure you want to change the base?

Uh oh!

SED-3222 add custom toast #910

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!