feat(admin-ui): Implement delete for Facets

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.html

@@ -94,7 +94,7 @@
                             ></vdr-custom-field-control>
                         </td>
                     </ng-container>
-                    <td class="actions">
+                    <td>
                         <clr-dropdown>
                             <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
                                 {{ 'common.actions' | translate }}

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.scss

@@ -1,9 +1 @@
 @import "variables";
-
-.actions button {
-    line-height: 24px;
-}
-
-.delete-button {
-    color: #e12200;
-}

admin-ui/src/app/catalog/components/facet-detail/facet-detail.component.ts

@@ -190,25 +190,18 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
     }
 
     deleteFacetValue(facetValueId: string) {
-        this.showDeleteFacetValueModalAndDelete(facetValueId)
+        this.showModalAndDelete(facetValueId)
             .pipe(
                 switchMap(response => {
-                    if (response.deleteFacetValues[0].result === DeletionResult.DELETED) {
+                    if (response.result === DeletionResult.DELETED) {
                         return [true];
                     } else {
-                        return this.showDeleteFacetValueModalAndDelete(
-                            facetValueId,
-                            response.deleteFacetValues[0].message || '',
-                        ).pipe(map(r => r.deleteFacetValues[0].result === DeletionResult.DELETED));
-                    }
-                }),
-                switchMap(deleted => {
-                    if (deleted) {
-                        return this.dataService.facet.getFacet(this.id).single$;
-                    } else {
-                        return [];
+                        return this.showModalAndDelete(facetValueId, response.message || '').pipe(
+                            map(r => r.result === DeletionResult.DELETED),
+                        );
                     }
                 }),
+                switchMap(deleted => (deleted ? this.dataService.facet.getFacet(this.id).single$ : [])),
             )
             .subscribe(
                 () => {
@@ -224,7 +217,7 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
             );
     }
 
-    private showDeleteFacetValueModalAndDelete(facetValueId: string, message?: string) {
+    private showModalAndDelete(facetValueId: string, message?: string) {
         return this.modalService
             .dialog({
                 title: _('catalog.confirm-delete-facet-value'),
@@ -235,12 +228,10 @@ export class FacetDetailComponent extends BaseDetailComponent<FacetWithValues.Fr
                 ],
             })
             .pipe(
-                switchMap(result => {
-                    if (result) {
-                        return this.dataService.facet.deleteFacetValues([facetValueId], !!message);
-                    }
-                    return EMPTY;
-                }),
+                switchMap(result =>
+                    result ? this.dataService.facet.deleteFacetValues([facetValueId], !!message) : EMPTY,
+                ),
+                map(result => result.deleteFacetValues[0]),
             );
     }
 

admin-ui/src/app/catalog/components/facet-list/facet-list.component.html

@@ -19,6 +19,7 @@
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column>{{ 'catalog.values' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
     <ng-template let-facet="item">
         <td class="left align-middle">{{ facet.code }}</td>
         <td class="left align-middle">{{ facet.name }}</td>
@@ -37,5 +38,23 @@
                 [linkTo]="['./', facet.id]"
             ></vdr-table-row-action>
         </td>
+        <td class="right align-middle">
+            <clr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" clrDropdownTrigger>
+                    {{ 'common.actions' | translate }}
+                    <clr-icon shape="caret down"></clr-icon>
+                </button>
+                <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
+                    <button
+                        type="button"
+                        class="delete-button"
+                        (click)="deleteFacet(facet.id)"
+                        clrDropdownItem
+                    >
+                        {{ 'common.delete' | translate }}
+                    </button>
+                </clr-dropdown-menu>
+            </clr-dropdown>
+        </td>
     </ng-template>
 </vdr-data-table>

admin-ui/src/app/catalog/components/facet-list/facet-list.component.ts

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { GetFacetList } from 'shared/generated-types';
+import { EMPTY } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { DeletionResult, GetFacetList } from 'shared/generated-types';
 
 import { BaseListComponent } from '../../../common/base-list.component';
+import { _ } from '../../../core/providers/i18n/mark-for-extraction';
+import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
+import { ModalService } from '../../../shared/providers/modal/modal.service';
 
 @Component({
     selector: 'vdr-facet-list',
@@ -11,8 +16,58 @@ import { DataService } from '../../../data/providers/data.service';
     styleUrls: ['./facet-list.component.scss'],
 })
 export class FacetListComponent extends BaseListComponent<GetFacetList.Query, GetFacetList.Items> {
-    constructor(private dataService: DataService, router: Router, route: ActivatedRoute) {
+    constructor(
+        private dataService: DataService,
+        private modalService: ModalService,
+        private notificationService: NotificationService,
+        router: Router,
+        route: ActivatedRoute,
+    ) {
         super(router, route);
         super.setQueryFn((...args: any[]) => this.dataService.facet.getFacets(...args), data => data.facets);
     }
+
+    deleteFacet(facetValueId: string) {
+        this.showModalAndDelete(facetValueId)
+            .pipe(
+                switchMap(response => {
+                    if (response.result === DeletionResult.DELETED) {
+                        return [true];
+                    } else {
+                        return this.showModalAndDelete(facetValueId, response.message || '').pipe(
+                            map(r => r.result === DeletionResult.DELETED),
+                        );
+                    }
+                }),
+            )
+            .subscribe(
+                () => {
+                    this.notificationService.success(_('common.notify-delete-success'), {
+                        entity: 'FacetValue',
+                    });
+                    this.refresh();
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-delete-error'), {
+                        entity: 'FacetValue',
+                    });
+                },
+            );
+    }
+
+    private showModalAndDelete(facetId: string, message?: string) {
+        return this.modalService
+            .dialog({
+                title: _('catalog.confirm-delete-facet'),
+                body: message,
+                buttons: [
+                    { type: 'seconday', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
+            })
+            .pipe(
+                switchMap(res => (res ? this.dataService.facet.deleteFacet(facetId, !!message) : EMPTY)),
+                map(res => res.deleteFacet),
+            );
+    }
 }

admin-ui/src/app/data/definitions/facet-definitions.ts

@@ -54,6 +54,15 @@ export const UPDATE_FACET = gql`
     ${FACET_WITH_VALUES_FRAGMENT}
 `;
 
+export const DELETE_FACET = gql`
+    mutation DeleteFacet($id: ID!, $force: Boolean) {
+        deleteFacet(id: $id, force: $force) {
+            result
+            message
+        }
+    }
+`;
+
 export const CREATE_FACET_VALUES = gql`
     mutation CreateFacetValues($input: [CreateFacetValueInput!]!) {
         createFacetValues(input: $input) {

admin-ui/src/app/data/providers/facet-data.service.ts

@@ -3,6 +3,7 @@ import {
     CreateFacetInput,
     CreateFacetValueInput,
     CreateFacetValues,
+    DeleteFacet,
     DeleteFacetValues,
     GetFacetList,
     GetFacetWithValues,
@@ -17,6 +18,7 @@ import { getDefaultLanguage } from '../../common/utilities/get-default-language'
 import {
     CREATE_FACET,
     CREATE_FACET_VALUES,
+    DELETE_FACET,
     DELETE_FACET_VALUES,
     GET_FACET_LIST,
     GET_FACET_WITH_VALUES,
@@ -63,6 +65,13 @@ export class FacetDataService {
         return this.baseDataService.mutate<UpdateFacet.Mutation, UpdateFacet.Variables>(UPDATE_FACET, input);
     }
 
+    deleteFacet(id: string, force: boolean) {
+        return this.baseDataService.mutate<DeleteFacet.Mutation, DeleteFacet.Variables>(DELETE_FACET, {
+            id,
+            force,
+        });
+    }
+
     createFacetValues(facetValues: CreateFacetValueInput[]) {
         const input: CreateFacetValues.Variables = {
             input: facetValues.map(pick(['facetId', 'code', 'translations', 'customFields'])),

admin-ui/src/app/shared/components/simple-dialog/simple-dialog.component.ts

@@ -14,6 +14,6 @@ import { Dialog, DialogButtonConfig } from '../../providers/modal/modal.service'
 export class SimpleDialogComponent implements Dialog<any> {
     resolveWith: (result?: any) => void;
     title = '';
-    message = '';
+    body = '';
     buttons: Array<DialogButtonConfig<any>> = [];
 }

admin-ui/src/i18n-messages/en.json

@@ -28,6 +28,7 @@
     "add-facet-value": "Add facet value",
     "add-facets": "Add facets",
     "assets-selected-count": "{ count } assets selected",
+    "confirm-delete-facet": "Delete facet?",
     "confirm-delete-facet-value": "Delete facet value?",
     "confirm-generate-product-variants": "Click 'Finish' to generate {count} product variants.",
     "create-group": "Create option group",

admin-ui/src/styles/styles.scss

@@ -39,3 +39,11 @@ a:link, a:visited {
         display: none;
     }
 }
+
+table tr .dropdown-menu button.dropdown-item {
+    line-height: 24px;
+
+    &.delete-button {
+        color: #e12200;
+    }
+}

shared/generated-types.ts

@@ -5682,6 +5682,24 @@ export namespace UpdateFacet {
     export type UpdateFacet = FacetWithValues.Fragment;
 }
 
+export namespace DeleteFacet {
+    export type Variables = {
+        id: string;
+        force?: boolean | null;
+    };
+
+    export type Mutation = {
+        __typename?: 'Mutation';
+        deleteFacet: DeleteFacet;
+    };
+
+    export type DeleteFacet = {
+        __typename?: 'DeletionResponse';
+        result: DeletionResult;
+        message?: string | null;
+    };
+}
+
 export namespace CreateFacetValues {
     export type Variables = {
         input: CreateFacetValueInput[];