#19: create delete a user dialog confirmation

src/app/shared/components/delete-user-dialog-confirmation-action/delete-user-dialog-confirmation-action.component.html

+<mat-toolbar class="dialog-header">
+  <div style="display: flex; align-items: center; padding: 0; flex: 1 1 auto">
+    <h2>Delete Shared Member</h2>
+  </div>
+  <button
+    type="button"
+    mat-icon-button
+    [mat-dialog-close]="true"
+    class="close"
+    tabindex="-1"
+  >
+    <mat-icon aria-hidden="false" aria-label="Close icon">close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-dialog-content>
+  <div class="star-rating-container">
+    <p>
+      Would you like to delete '{{ user.firstName }} {{ user.lastName }}' from
+      the shared list?
+    </p>
+  </div></mat-dialog-content
+>
+<mat-toolbar class="form-footer">
+  <button mat-dialog-close mat-raised-button style="margin-right: auto">
+    Cancel
+  </button>
+  <button color="primary" mat-raised-button (click)="confirm()">Confirm</button>
+</mat-toolbar>

src/app/shared/components/delete-user-dialog-confirmation-action/delete-user-dialog-confirmation-action.component.scss

+@use "@angular/material" as mat;
+@import "../../../../styles.scss";
+
+.form-container {
+  width: 100%;
+}
+
+.asterix--after:after {
+  content: "*";
+  color: red;
+}
+
+.login-form {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+.mat-mdc-dialog-content {
+  max-height: 75vh;
+  min-width: 800px;
+}
+
+.dialog-header {
+  background-color: mat.get-color-from-palette($graphene-ui-primary);
+  height: 39px;
+  color: #fff;
+
+  h2 {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+  }
+}
+
+.version {
+  font-size: 12px;
+  color: #bbb;
+  padding-left: 5px;
+}
+
+.legend {
+  width: 100%;
+  max-width: 100%;
+  white-space: normal;
+  font-size: 16px !important;
+  font-weight: 600;
+  line-height: 30px !important;
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 8px !important;
+  padding: 5px 8px 5px 0 !important;
+  color: #671c9d !important;
+  text-transform: uppercase;
+  font-family: "Open Sans", sans-serif;
+}
+
+.font600 {
+  font-weight: 600;
+}
+
+.md-txtarea {
+  border: 1px solid #d5d5d5;
+  padding: 7px;
+  height: 82px;
+  font-size: 14px;
+}

src/app/shared/components/delete-user-dialog-confirmation-action/delete-user-dialog-confirmation-action.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteUserDialogConfirmationActionComponent } from './delete-user-dialog-confirmation-action.component';
+
+describe('DeleteUserDialogConfirmationActionComponent', () => {
+  let component: DeleteUserDialogConfirmationActionComponent;
+  let fixture: ComponentFixture<DeleteUserDialogConfirmationActionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeleteUserDialogConfirmationActionComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(DeleteUserDialogConfirmationActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/delete-user-dialog-confirmation-action/delete-user-dialog-confirmation-action.component.ts

+import { Component, Inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
+import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
+import { Alert, AlertType, UserDetails } from '../../models';
+import { AlertService } from 'src/app/core/services/alert.service';
+
+@Component({
+  selector: 'gp-delete-user-dialog-confirmation-action',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatIconModule,
+  ],
+  templateUrl: './delete-user-dialog-confirmation-action.component.html',
+  styleUrl: './delete-user-dialog-confirmation-action.component.scss',
+})
+export class DeleteUserDialogConfirmationActionComponent implements OnInit {
+  user!: UserDetails;
+
+  constructor(
+    public dialogRef: MatDialogRef<DeleteUserDialogConfirmationActionComponent>,
+    private privateCatalogsService: PrivateCatalogsService,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private alertService: AlertService,
+  ) {}
+
+  ngOnInit(): void {
+    this.user = this.data.dataKey.user;
+  }
+
+  confirm() {
+    this.privateCatalogsService
+      .deleteShareWithTeam(this.user.userId ?? '', this.data.dataKey.solutionId)
+      .subscribe((res) => {
+        const alert: Alert = {
+          message: '',
+          type: AlertType.Success,
+        };
+
+        if (res.error_code === '100') {
+          alert.message = 'Deleted successfully. ';
+        }
+
+        this.alertService.notify(alert, 3000);
+        this.dialogRef.close();
+      });
+  }
+}

src/app/shared/components/rate-model-details/rate-model-details.component.ts

@@ -21,7 +21,6 @@ import {
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { RateModelDialogComponent } from '../rate-model-dialog/rate-model-dialog.component';
 import { FormsModule } from '@angular/forms';
-import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
 
 @Component({
   selector: 'gp-rate-model-details',