feat(admin-ui): Implement deletion of ProductOptions via variant manager

Relates to #1134

packages/admin-ui/i18n-coverage.json

@@ -1,70 +1,70 @@
 {
-  "generatedOn": "2022-07-22T14:11:18.272Z",
-  "lastCommit": "e663547f04d00cd601b028013bb23b80c4226ee1",
+  "generatedOn": "2022-08-17T13:04:00.715Z",
+  "lastCommit": "afa9340409a191b75d701b3c4d789131e8a9c4db",
   "translationStatus": {
     "cs": {
-      "tokenCount": 653,
-      "translatedCount": 592,
+      "tokenCount": 654,
+      "translatedCount": 593,
       "percentage": 91
     },
     "de": {
-      "tokenCount": 653,
-      "translatedCount": 571,
+      "tokenCount": 654,
+      "translatedCount": 572,
       "percentage": 87
     },
     "en": {
-      "tokenCount": 653,
-      "translatedCount": 652,
+      "tokenCount": 654,
+      "translatedCount": 653,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 653,
-      "translatedCount": 623,
+      "tokenCount": 654,
+      "translatedCount": 624,
       "percentage": 95
     },
     "fr": {
-      "tokenCount": 653,
-      "translatedCount": 613,
+      "tokenCount": 654,
+      "translatedCount": 614,
       "percentage": 94
     },
     "it": {
-      "tokenCount": 653,
-      "translatedCount": 621,
+      "tokenCount": 654,
+      "translatedCount": 622,
       "percentage": 95
     },
     "pl": {
-      "tokenCount": 653,
-      "translatedCount": 406,
+      "tokenCount": 654,
+      "translatedCount": 407,
       "percentage": 62
     },
     "pt_BR": {
-      "tokenCount": 653,
-      "translatedCount": 590,
+      "tokenCount": 654,
+      "translatedCount": 591,
       "percentage": 90
     },
     "pt_PT": {
-      "tokenCount": 653,
-      "translatedCount": 634,
+      "tokenCount": 654,
+      "translatedCount": 635,
       "percentage": 97
     },
     "ru": {
-      "tokenCount": 653,
-      "translatedCount": 620,
+      "tokenCount": 654,
+      "translatedCount": 621,
       "percentage": 95
     },
     "uk": {
-      "tokenCount": 653,
-      "translatedCount": 620,
+      "tokenCount": 654,
+      "translatedCount": 621,
       "percentage": 95
     },
     "zh_Hans": {
-      "tokenCount": 653,
-      "translatedCount": 558,
+      "tokenCount": 654,
+      "translatedCount": 559,
       "percentage": 85
     },
     "zh_Hant": {
-      "tokenCount": 653,
-      "translatedCount": 386,
+      "tokenCount": 654,
+      "translatedCount": 387,
       "percentage": 59
     }
   }

packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.html

@@ -23,7 +23,7 @@
             [groupName]="group.name"
             [disabled]="group.name === ''"
             (add)="addOption(group.id, $event.name)"
-            (remove)="removeOption(group.id, $event.id)"
+            (remove)="removeOption(group.id, $event)"
         ></vdr-option-value-input>
     </div>
     <div>
@@ -120,7 +120,7 @@
                         <button
                             type="button"
                             class="delete-button"
-                            (click)="deleteVariant(productVariantId)"
+                            (click)="deleteVariant(productVariantId, variant.options)"
                             vdrDropdownItem
                         >
                             <clr-icon shape="trash" class="is-danger"></clr-icon>

packages/admin-ui/src/lib/catalog/src/components/product-variants-editor/product-variants-editor.component.ts

@@ -7,6 +7,7 @@ import {
     CurrencyCode,
     DataService,
     DeactivateAware,
+    DeletionResult,
     getDefaultUiLanguage,
     GetProductVariantOptions,
     LanguageCode,
@@ -120,11 +121,43 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
         this.generateVariants();
     }
 
-    removeOption(groupId: string, optionId: string) {
+    removeOption(groupId: string, { id, name }: { id?: string; name: string }) {
         const optionGroup = this.optionGroups.find(g => g.id === groupId);
         if (optionGroup) {
-            optionGroup.values = optionGroup.values.filter(v => v.id !== optionId);
-            this.generateVariants();
+            if (!id) {
+                optionGroup.values = optionGroup.values.filter(v => v.name !== name);
+                this.generateVariants();
+            } else {
+                this.modalService
+                    .dialog({
+                        title: _('catalog.confirm-delete-product-option'),
+                        translationVars: { name },
+                        buttons: [
+                            { type: 'secondary', label: _('common.cancel') },
+                            { type: 'danger', label: _('common.delete'), returnValue: true },
+                        ],
+                    })
+                    .pipe(
+                        switchMap(val => {
+                            if (val) {
+                                return this.dataService.product.deleteProductOption(id);
+                            } else {
+                                return EMPTY;
+                            }
+                        }),
+                    )
+                    .subscribe(({ deleteProductOption }) => {
+                        if (deleteProductOption.result === DeletionResult.DELETED) {
+                            this.notificationService.success(_('common.notify-delete-success'), {
+                                entity: 'ProductOption',
+                            });
+                            optionGroup.values = optionGroup.values.filter(v => v.id !== id);
+                            this.generateVariants();
+                        } else {
+                            this.notificationService.error(deleteProductOption.message ?? '');
+                        }
+                    });
+            }
         }
     }
 
@@ -183,10 +216,11 @@ export class ProductVariantsEditorComponent implements OnInit, DeactivateAware {
         };
     }
 
-    deleteVariant(id: string) {
+    deleteVariant(id: string, options: GeneratedVariant['options']) {
         this.modalService
             .dialog({
                 title: _('catalog.confirm-delete-product-variant'),
+                translationVars: { name: options.map(o => o.name).join(' ') },
                 buttons: [
                     { type: 'secondary', label: _('common.cancel') },
                     { type: 'danger', label: _('common.delete'), returnValue: true },

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -7170,6 +7170,16 @@ export type UpdateProductOptionMutation = { updateProductOption: (
     & ProductOptionFragment
   ) };
 
+export type DeleteProductOptionMutationVariables = Exact<{
+  id: Scalars['ID'];
+}>;
+
+
+export type DeleteProductOptionMutation = { deleteProductOption: (
+    { __typename?: 'DeletionResponse' }
+    & Pick<DeletionResponse, 'result' | 'message'>
+  ) };
+
 export type DeleteProductVariantMutationVariables = Exact<{
   id: Scalars['ID'];
 }>;
@@ -10043,6 +10053,12 @@ export namespace UpdateProductOption {
   export type UpdateProductOption = (NonNullable<UpdateProductOptionMutation['updateProductOption']>);
 }
 
+export namespace DeleteProductOption {
+  export type Variables = DeleteProductOptionMutationVariables;
+  export type Mutation = DeleteProductOptionMutation;
+  export type DeleteProductOption = (NonNullable<DeleteProductOptionMutation['deleteProductOption']>);
+}
+
 export namespace DeleteProductVariant {
   export type Variables = DeleteProductVariantMutationVariables;
   export type Mutation = DeleteProductVariantMutation;

packages/admin-ui/src/lib/core/src/data/definitions/product-definitions.ts

@@ -564,6 +564,15 @@ export const UPDATE_PRODUCT_OPTION = gql`
     ${PRODUCT_OPTION_FRAGMENT}
 `;
 
+export const DELETE_PRODUCT_OPTION = gql`
+    mutation DeleteProductOption($id: ID!) {
+        deleteProductOption(id: $id) {
+            result
+            message
+        }
+    }
+`;
+
 export const DELETE_PRODUCT_VARIANT = gql`
     mutation DeleteProductVariant($id: ID!) {
         deleteProductVariant(id: $id) {

packages/admin-ui/src/lib/core/src/data/providers/product-data.service.ts

@@ -19,6 +19,7 @@ import {
     CreateTagInput,
     DeleteAssets,
     DeleteProduct,
+    DeleteProductOption,
     DeleteProductVariant,
     DeleteTag,
     GetAsset,
@@ -73,6 +74,7 @@ import {
     CREATE_TAG,
     DELETE_ASSETS,
     DELETE_PRODUCT,
+    DELETE_PRODUCT_OPTION,
     DELETE_PRODUCT_VARIANT,
     DELETE_TAG,
     GET_ASSET,
@@ -322,6 +324,13 @@ export class ProductDataService {
         );
     }
 
+    deleteProductOption(id: string) {
+        return this.baseDataService.mutate<DeleteProductOption.Mutation, DeleteProductOption.Variables>(
+            DELETE_PRODUCT_OPTION,
+            { id },
+        );
+    }
+
     removeOptionGroupFromProduct(variables: RemoveOptionGroupFromProduct.Variables) {
         return this.baseDataService.mutate<
             RemoveOptionGroupFromProduct.Mutation,

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Smazat atribut?",
     "confirm-delete-facet-value": "Smazat hodnotu atributu?",
     "confirm-delete-product": "Smazat produkt?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Smazat variantu produktu?",
     "confirm-delete-promotion": "Smazat propagaci?",
     "confirm-delete-shipping-method": "Smazat dopravní metodu?",
@@ -684,4 +685,4 @@
     "job-result": "Výsledek úlohy",
     "job-state": "Stav úlohy"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Facette löschen?",
     "confirm-delete-facet-value": "Facettenwert löschen?",
     "confirm-delete-product": "Produkt löschen?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Produktvariante löschen?",
     "confirm-delete-promotion": "Werbeaktion löschen?",
     "confirm-delete-shipping-method": "Versandart löschen?",
@@ -684,4 +685,4 @@
     "job-result": "Job-Ergebnis",
     "job-state": "Job-Status"
   }
-}
+}

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

@@ -77,7 +77,8 @@
     "confirm-delete-facet": "Delete facet?",
     "confirm-delete-facet-value": "Delete facet value?",
     "confirm-delete-product": "Delete product?",
-    "confirm-delete-product-variant": "Delete product variant?",
+    "confirm-delete-product-option": "Delete product option \"{name}\"?",
+    "confirm-delete-product-variant": "Delete product variant \"{name}\"?",
     "confirm-delete-promotion": "Delete promotion?",
     "confirm-delete-shipping-method": "Delete shipping method?",
     "confirm-delete-zone": "Delete zone?",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "¿Eliminar faceta?",
     "confirm-delete-facet-value": "¿Eliminar valor de faceta?",
     "confirm-delete-product": "¿Eliminar producto?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "¿Eliminar variante?",
     "confirm-delete-promotion": "¿Eliminar promoción?",
     "confirm-delete-shipping-method": "¿Eliminar método de envío?",
@@ -684,4 +685,4 @@
     "job-result": "Resultado",
     "job-state": "Estado"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Supprimer composant ?",
     "confirm-delete-facet-value": "Supprimer valeur du composant ?",
     "confirm-delete-product": "Supprimer produit ?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Supprimer variation du produit ?",
     "confirm-delete-promotion": "Supprimer promotion ?",
     "confirm-delete-shipping-method": "Supprimer mode d'expédition ?",
@@ -684,4 +685,4 @@
     "job-result": "Résultat de la tâche",
     "job-state": "Etat de la tâche"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/it.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Eliminare l'attributo?",
     "confirm-delete-facet-value": "Eliminare il valore attributo?",
     "confirm-delete-product": "Eliminare il prodotto?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Eliminare la variante?",
     "confirm-delete-promotion": "Eliminare la promozione?",
     "confirm-delete-shipping-method": "Eliminare il metodo di spedizione?",
@@ -684,4 +685,4 @@
     "job-result": "Risultato operazione",
     "job-state": "Stato operazione"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Usunąć faset?",
     "confirm-delete-facet-value": "Usunąć wartość faseta?",
     "confirm-delete-product": "Usunąć produkt?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Usunąć wariant produktu?",
     "confirm-delete-promotion": "Usunąć promocje?",
     "confirm-delete-shipping-method": "Usunąć metode wysyłki?",
@@ -684,4 +685,4 @@
     "job-result": "Rezultat zlecenia",
     "job-state": "Status zlecenia"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Excluir etiqueta?",
     "confirm-delete-facet-value": "Excluir valor da etiqueta?",
     "confirm-delete-product": "Excluir produto?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Excluir variação de produto?",
     "confirm-delete-promotion": "Excluir promoção?",
     "confirm-delete-shipping-method": "Excluir método de envio?",
@@ -684,4 +685,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/pt_PT.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Eliminar etiqueta?",
     "confirm-delete-facet-value": "Eliminar valor da etiqueta?",
     "confirm-delete-product": "Eliminar produto?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Eliminar variante do produto?",
     "confirm-delete-promotion": "Eliminar promoção?",
     "confirm-delete-shipping-method": "Eliminar método de envio?",
@@ -684,4 +685,4 @@
     "job-result": "Resultado do trabalho",
     "job-state": "Estado do trabalho"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Удалить тег?",
     "confirm-delete-facet-value": "Удалить значение тега?",
     "confirm-delete-product": "Удалить товар?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Удалить вариант товара?",
     "confirm-delete-promotion": "Удалить промо-акцию?",
     "confirm-delete-shipping-method": "Удалить способ доставки?",
@@ -684,4 +685,4 @@
     "job-result": "Результат задания",
     "job-state": "Состояние задания"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/uk.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "Видалити тег?",
     "confirm-delete-facet-value": "Видалити значення тегу?",
     "confirm-delete-product": "Видалити товар?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "Видалити варіант товару?",
     "confirm-delete-promotion": "Видалити промо-акцію?",
     "confirm-delete-shipping-method": "Видалити спосіб доставки?",
@@ -684,4 +685,4 @@
     "job-result": "Результат завдання",
     "job-state": "Стан завдання"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "确认删除特征?",
     "confirm-delete-facet-value": "确认删除特征值?",
     "confirm-delete-product": "确认删除商品?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "确认删除商品规格?",
     "confirm-delete-promotion": "确认删除优惠券?",
     "confirm-delete-shipping-method": "确认删除邮寄方式?",
@@ -684,4 +685,4 @@
     "job-result": "任务结果",
     "job-state": "任务状态"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -77,6 +77,7 @@
     "confirm-delete-facet": "確認移除此特徵?",
     "confirm-delete-facet-value": "確認移除特徵值?",
     "confirm-delete-product": "確認移除商品?",
+    "confirm-delete-product-option": "",
     "confirm-delete-product-variant": "確認移除商品規格?",
     "confirm-delete-promotion": "確認移除優惠券?",
     "confirm-delete-shipping-method": "確認移除此郵寄方式?",
@@ -684,4 +685,4 @@
     "job-result": "",
     "job-state": ""
   }
-}
+}