feat(shop): add logic for deleting domain

Author: belsman

packages/modules/management/src/lib/components/shop/view/shop-view-details.component.html

@@ -115,13 +115,15 @@ <h4>Data</h4>
       }
     ]"
   >
-    <vcl-select-list>
+    <vcl-select-list value="">
       <vcl-select-list-item
         (click)="onEditDomain(vm.shop, domain, domainIndex); popover.close()"
       >
         Edit
       </vcl-select-list-item>
-      <vcl-select-list-item value=""> Delete </vcl-select-list-item>
+      <vcl-select-list-item (click)="onDeleteDomain(vm.shop, domainIndex)">
+        Delete
+      </vcl-select-list-item>
     </vcl-select-list>
   </ng-template>
 </ng-template>

packages/modules/management/src/lib/components/shop/view/shop-view-details.component.ts

@@ -2,10 +2,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
+  OnDestroy,
   OnInit,
 } from '@angular/core';
+import { SubSink } from 'subsink';
 
-import { LayerRef, LayerService } from '@vcl/ng-vcl';
+import { AlertService, AlertType, LayerRef, LayerService } from '@vcl/ng-vcl';
 
 import { ModeType } from '@console-core/graphql';
 import { ShopFacade } from '@console-core/state';
@@ -19,7 +21,7 @@ import { ShopDomainModalComponent } from './shop-domain-modal.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class ShopViewDetailComponent implements OnInit {
+export class ShopViewDetailComponent implements OnInit, OnDestroy {
   @Input({
     required: true,
   })
@@ -30,8 +32,11 @@ export class ShopViewDetailComponent implements OnInit {
 
   domainLayer!: LayerRef;
 
+  private readonly subscriptions = new SubSink();
+
   constructor(
     private readonly layerService: LayerService,
+    private readonly alertService: AlertService,
     private readonly shopFacade: ShopFacade
   ) {}
 
@@ -42,6 +47,10 @@ export class ShopViewDetailComponent implements OnInit {
     });
   }
 
+  ngOnDestroy(): void {
+    this.subscriptions.unsubscribe();
+  }
+
   onAddDomain(shop: IShop) {
     this.domainLayer
       .open({
@@ -51,14 +60,14 @@ export class ShopViewDetailComponent implements OnInit {
       })
       .subscribe((result: { value: string } | undefined) => {
         if (result) {
-          this.shopFacade.create({
+          this.shopFacade.update({
             items: [
               {
                 ...shop,
                 domains: [...(shop?.domains || []), result.value],
               },
             ],
-            mode: ModeType.Create,
+            mode: ModeType.Update,
           });
         }
       });
@@ -93,4 +102,38 @@ export class ShopViewDetailComponent implements OnInit {
         }
       });
   }
+
+  onDeleteDomain(shop: IShop, index: number) {
+    this.subscriptions.sink = this.alertService
+      .open({
+        text: 'Do you really want to delete the domain?',
+        type: AlertType.Question,
+        showCloseButton: true,
+        showCancelButton: true,
+        cancelButtonLabel: 'Cancel',
+        cancelButtonClass: 'transparent',
+        confirmButtonLabel: 'Delete domain',
+        confirmButtonClass: 'button',
+      })
+      .subscribe((result) => {
+        if (result.action !== 'confirm') {
+          return;
+        }
+
+        const domains = shop?.domains;
+        if (domains) {
+          const domainsWithUpdate = domains.filter((_, idx) => idx !== index);
+
+          this.shopFacade.update({
+            items: [
+              {
+                ...shop,
+                domains: domainsWithUpdate,
+              },
+            ],
+            mode: ModeType.Update,
+          });
+        }
+      });
+  }
 }