feat(admin-ui): Can delete TaxCategory via list view

Relates to #262

packages/admin-ui/src/app/common/generated-types.ts

@@ -4316,6 +4316,13 @@ export type UpdateTaxCategoryMutationVariables = {
 
 export type UpdateTaxCategoryMutation = ({ __typename?: 'Mutation' } & { updateTaxCategory: ({ __typename?: 'TaxCategory' } & TaxCategoryFragment) });
 
+export type DeleteTaxCategoryMutationVariables = {
+  id: Scalars['ID']
+};
+
+
+export type DeleteTaxCategoryMutation = ({ __typename?: 'Mutation' } & { deleteTaxCategory: ({ __typename?: 'DeletionResponse' } & Pick<DeletionResponse, 'result' | 'message'>) });
+
 export type TaxRateFragment = ({ __typename?: 'TaxRate' } & Pick<TaxRate, 'id' | 'createdAt' | 'updatedAt' | 'name' | 'enabled' | 'value'> & { category: ({ __typename?: 'TaxCategory' } & Pick<TaxCategory, 'id' | 'name'>), zone: ({ __typename?: 'Zone' } & Pick<Zone, 'id' | 'name'>), customerGroup: Maybe<({ __typename?: 'CustomerGroup' } & Pick<CustomerGroup, 'id' | 'name'>)> });
 
 export type GetTaxRateListQueryVariables = {
@@ -5315,6 +5322,12 @@ export namespace UpdateTaxCategory {
   export type UpdateTaxCategory = TaxCategoryFragment;
 }
 
+export namespace DeleteTaxCategory {
+  export type Variables = DeleteTaxCategoryMutationVariables;
+  export type Mutation = DeleteTaxCategoryMutation;
+  export type DeleteTaxCategory = DeleteTaxCategoryMutation['deleteTaxCategory'];
+}
+
 export namespace TaxRate {
   export type Fragment = TaxRateFragment;
   export type Category = TaxRateFragment['category'];

packages/admin-ui/src/app/data/definitions/settings-definitions.ts

@@ -194,6 +194,15 @@ export const UPDATE_TAX_CATEGORY = gql`
     ${TAX_CATEGORY_FRAGMENT}
 `;
 
+export const DELETE_TAX_CATEGORY = gql`
+    mutation DeleteTaxCategory($id: ID!) {
+        deleteTaxCategory(id: $id) {
+            result
+            message
+        }
+    }
+`;
+
 export const TAX_RATE_FRAGMENT = gql`
     fragment TaxRate on TaxRate {
         id

packages/admin-ui/src/app/data/providers/settings-data.service.ts

@@ -15,6 +15,7 @@ import {
     CreateZoneInput,
     DeleteChannel,
     DeleteCountry,
+    DeleteTaxCategory,
     DeleteTaxRate,
     GetActiveChannel,
     GetAllJobs,
@@ -60,6 +61,7 @@ import {
     CREATE_ZONE,
     DELETE_CHANNEL,
     DELETE_COUNTRY,
+    DELETE_TAX_CATEGORY,
     DELETE_TAX_RATE,
     GET_ACTIVE_CHANNEL,
     GET_ALL_JOBS,
@@ -199,6 +201,15 @@ export class SettingsDataService {
         );
     }
 
+    deleteTaxCategory(id: string) {
+        return this.baseDataService.mutate<DeleteTaxCategory.Mutation, DeleteTaxRate.Variables>(
+            DELETE_TAX_CATEGORY,
+            {
+                id,
+            },
+        );
+    }
+
     getTaxRates(take: number = 10, skip: number = 0, fetchPolicy?: FetchPolicy) {
         return this.baseDataService.query<GetTaxRateList.Query, GetTaxRateList.Variables>(
             GET_TAX_RATE_LIST,

packages/admin-ui/src/app/settings/components/tax-category-list/tax-category-list.component.html

@@ -11,6 +11,7 @@
 <vdr-data-table [items]="taxCategories$ | async">
     <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>
     <vdr-dt-column></vdr-dt-column>
+    <vdr-dt-column></vdr-dt-column>
     <ng-template let-taxCategory="item">
         <td class="left align-middle">{{ taxCategory.name }}</td>
         <td class="right align-middle">
@@ -20,5 +21,25 @@
                 [linkTo]="['./', taxCategory.id]"
             ></vdr-table-row-action>
         </td>
+        <td class="right align-middle">
+            <vdr-dropdown>
+                <button type="button" class="btn btn-link btn-sm" vdrDropdownTrigger>
+                    {{ 'common.actions' | translate }}
+                    <clr-icon shape="caret down"></clr-icon>
+                </button>
+                <vdr-dropdown-menu vdrPosition="bottom-right">
+                    <button
+                        type="button"
+                        class="delete-button"
+                        (click)="deleteTaxCategory(taxCategory)"
+                        [disabled]="!('DeleteSettings' | hasPermission)"
+                        vdrDropdownItem
+                    >
+                        <clr-icon shape="trash" class="is-danger"></clr-icon>
+                        {{ 'common.delete' | translate }}
+                    </button>
+                </vdr-dropdown-menu>
+            </vdr-dropdown>
+        </td>
     </ng-template>
 </vdr-data-table>

packages/admin-ui/src/app/settings/components/tax-category-list/tax-category-list.component.ts

@@ -1,8 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import { EMPTY, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 
-import { TaxCategory } from '../../../common/generated-types';
+import { DeletionResult, GetTaxCategories, TaxCategory } from '../../../common/generated-types';
+import { _ } from '../../../core/providers/i18n/mark-for-extraction';
+import { NotificationService } from '../../../core/providers/notification/notification.service';
 import { DataService } from '../../../data/providers/data.service';
+import { QueryResult } from '../../../data/query-result';
+import { ModalService } from '../../../shared/providers/modal/modal.service';
 
 @Component({
     selector: 'vdr-tax-list',
@@ -12,10 +17,49 @@ import { DataService } from '../../../data/providers/data.service';
 })
 export class TaxCategoryListComponent {
     taxCategories$: Observable<TaxCategory.Fragment[]>;
+    private queryResult: QueryResult<GetTaxCategories.Query>;
 
-    constructor(private dataService: DataService) {
-        this.taxCategories$ = this.dataService.settings
-            .getTaxCategories()
-            .mapStream(data => data.taxCategories);
+    constructor(
+        private dataService: DataService,
+        private notificationService: NotificationService,
+        private modalService: ModalService,
+    ) {
+        this.queryResult = this.dataService.settings.getTaxCategories();
+        this.taxCategories$ = this.queryResult.mapStream(data => data.taxCategories);
+    }
+
+    deleteTaxCategory(taxCategory: TaxCategory.Fragment) {
+        return this.modalService
+            .dialog({
+                title: _('settings.confirm-delete-tax-category'),
+                body: taxCategory.name,
+                buttons: [
+                    { type: 'secondary', label: _('common.cancel') },
+                    { type: 'danger', label: _('common.delete'), returnValue: true },
+                ],
+            })
+            .pipe(
+                switchMap(res => (res ? this.dataService.settings.deleteTaxCategory(taxCategory.id) : EMPTY)),
+                map(res => res.deleteTaxCategory),
+            )
+            .subscribe(
+                res => {
+                    if (res.result === DeletionResult.DELETED) {
+                        this.notificationService.success(_('common.notify-delete-success'), {
+                            entity: 'TaxRate',
+                        });
+                        this.queryResult.ref.refetch();
+                    } else {
+                        this.notificationService.error(res.message || _('common.notify-delete-error'), {
+                            entity: 'TaxRate',
+                        });
+                    }
+                },
+                err => {
+                    this.notificationService.error(_('common.notify-delete-error'), {
+                        entity: 'TaxRate',
+                    });
+                },
+            );
     }
 }

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

@@ -560,6 +560,7 @@
     "channel": "Channel",
     "channel-token": "Channel token",
     "confirm-delete-role": "Delete role?",
+    "confirm-delete-tax-category": "Delete tax category?",
     "confirm-delete-tax-rate": "Delete tax rate?",
     "create": "Create",
     "create-new-channel": "Create new channel",