Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add quick actions dropdown menu per variation item (#39816) 

* Add the dropdown menu to the variations list

* Add preview link to the preview dropdown menu item

* Add delete variation support to the delete menu item

* Fix linter error

* Add changelog file

* Add wcadmin_product_variations_menu_view, wcadmin_product_variations_preview and wcadmin_product_variations_delete tracking events to the variation quick actions menu items
This commit is contained in:
Maikel David Pérez Gómez 2023-08-22 10:42:18 -04:00 committed by GitHub
parent cb2cf79342
commit 897e0673a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 123 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/add-39787 Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add quick actions dropdown menu to variation items

16
packages/js/product-editor/src/components/variations-table/styles.scss
View File

@ -49,6 +49,12 @@
align-items: center;
justify-content: flex-end;
&--delete {
&.components-button.components-menu-item__button.is-link {
text-decoration: none;
}
}
.components-button {
position: relative;
color: var(--wp-admin-theme-color);
@ -63,8 +69,14 @@
}
}
.components-button svg {
fill: none;
.components-button {
&.components-dropdown-menu__toggle.has-icon svg {
fill: inherit;
}
svg {
fill: none;
}
}
.components-button--visible {

126
packages/js/product-editor/src/components/variations-table/variations-table.tsx
View File

@ -1,22 +1,29 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, Spinner, Tooltip } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import {
Button,
DropdownMenu,
MenuGroup,
MenuItem,
Spinner,
Tooltip,
} from '@wordpress/components';
import {
EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME,
ProductVariation,
} from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
import { ListItem, Pagination, Sortable, Tag } from '@woocommerce/components';
import {
Link,
ListItem,
Pagination,
Sortable,
Tag,
} from '@woocommerce/components';
import { getNewPath } from '@woocommerce/navigation';
import { useContext, useState, createElement } from '@wordpress/element';
useContext,
useState,
createElement,
Fragment,
} from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import { moreVertical } from '@wordpress/icons';
import classnames from 'classnames';
import truncate from 'lodash/truncate';
import { CurrencyContext } from '@woocommerce/currency';
@ -34,6 +41,7 @@ import { getProductStockStatus, getProductStockStatusClass } from '../../utils';
import {
DEFAULT_PER_PAGE_OPTION,
PRODUCT_VARIATION_TITLE_LIMIT,
TRACKS_SOURCE,
} from '../../constants';
const NOT_VISIBLE_TEXT = __( 'Not visible to customers', 'woocommerce' );
@ -87,7 +95,7 @@ export function VariationsTable() {
[ currentPage, perPage, productId ]
);
const { updateProductVariation } = useDispatch(
const { updateProductVariation, deleteProductVariation } = useDispatch(
EXPERIMENTAL_PRODUCT_VARIATIONS_STORE_NAME
);
@ -124,6 +132,29 @@ export function VariationsTable() {
);
}
function handleDeleteVariationClick( variationId: number ) {
if ( isUpdating[ variationId ] ) return;
setIsUpdating( ( prevState ) => ( {
...prevState,
[ variationId ]: true,
} ) );
deleteProductVariation< Promise< ProductVariation > >( {
product_id: productId,
id: variationId,
} )
.then( () => {
recordEvent( 'product_variations_delete', {
source: TRACKS_SOURCE,
} );
} )
.finally( () =>
setIsUpdating( ( prevState ) => ( {
...prevState,
[ variationId ]: false,
} ) )
);
}
return (
<div className="woocommerce-product-variations">
{ isLoading ||
@ -266,17 +297,70 @@ export function VariationsTable() {
</Tooltip>
) }
<Link
href={ getNewPath(
{},
`/product/${ productId }/variation/${ variation.id }`,
{}
) }
type="wc-admin"
className="components-button"
<DropdownMenu
icon={ moreVertical }
label={ __( 'Actions', 'woocommerce' ) }
toggleProps={ {
onClick() {
recordEvent(
'product_variations_menu_view',
{
source: TRACKS_SOURCE,
}
);
},
} }
>
{ __( 'Edit', 'woocommerce' ) }
</Link>
{ ( { onClose } ) => (
<>
<MenuGroup
label={ sprintf(
/** Translators: Variation ID */
__(
'Variation Id: %s',
'woocommerce'
),
variation.id
) }
>
<MenuItem
href={ variation.permalink }
onClick={ () => {
recordEvent(
'product_variations_preview',
{
source: TRACKS_SOURCE,
}
);
} }
>
{ __(
'Preview',
'woocommerce'
) }
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItem
isDestructive
variant="link"
onClick={ () => {
handleDeleteVariationClick(
variation.id
);
onClose();
} }
className="woocommerce-product-variations__actions--delete"
>
{ __(
'Delete',
'woocommerce'
) }
</MenuItem>
</MenuGroup>
</>
) }
</DropdownMenu>
</div>
</ListItem>
) ) }