Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update product stock management to newest design #515

Merged
merged 2 commits into from
May 5, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -4,6 +4,8 @@ All notable, unreleased changes to this project will be documented in this file.

## [Unreleased]

- Update product stock management to newest design - #515 by @dominik-zeglen

## 2.10.0

- Fix minor bugs - #244 by @dominik-zeglen
7 changes: 7 additions & 0 deletions locale/defaultMessages.json
Original file line number Diff line number Diff line change
@@ -1427,6 +1427,9 @@
"src_dot_configuration_dot_1233229030": {
"string": "Miscellaneous"
},
"src_dot_configuration_dot_1440737903": {
"string": "Shipping Settings"
},
"src_dot_configuration_dot_1639245766": {
"string": "View and update your webhook and their settings"
},
@@ -3074,6 +3077,10 @@
"context": "dialog title",
"string": "Delete permission group"
},
"src_dot_permissionGroups_dot_components_dot_PermissionGroupDeleteDialog_dot_956177443": {
"context": "deletion error message",
"string": "Cant's delete group which is out of your permission scope"
},
"src_dot_permissionGroups_dot_components_dot_PermissionGroupDetailsPage_dot_3765873075": {
"context": "checkbox label",
"string": "Group has full access to the store"
2 changes: 1 addition & 1 deletion src/categories/views/CategoryDetails.tsx
Original file line number Diff line number Diff line change
@@ -172,7 +172,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
disabled={loading}
errors={updateResult.data?.categoryUpdate.errors || []}
onAddCategory={() => navigate(categoryAddUrl(id))}
onAddProduct={() => navigate(productAddUrl())}
onAddProduct={() => navigate(productAddUrl)}
onBack={() =>
navigate(
maybe(
2 changes: 1 addition & 1 deletion src/components/Navigator/modes/commands/actions.ts
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@ export function searchInCommands(
{
label: intl.formatMessage(messages.createProduct),
onClick: () => {
navigate(productAddUrl());
navigate(productAddUrl);
return false;
}
},
18 changes: 18 additions & 0 deletions src/hooks/useFormset.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { removeAtIndex } from "@saleor/utils/lists";
import useStateFromProps from "./useStateFromProps";

export type FormsetChange<TValue = any> = (id: string, value: TValue) => void;
@@ -11,11 +12,13 @@ export type FormsetData<TData = object, TValue = any> = Array<
FormsetAtomicData<TData, TValue>
>;
export interface UseFormsetOutput<TData = object, TValue = any> {
add: (data: FormsetAtomicData<TData, TValue>) => void;
change: FormsetChange<TValue>;
data: FormsetData<TData, TValue>;
get: (id: string) => FormsetAtomicData<TData, TValue>;
// Used for some rare situations like dataset change
set: (data: FormsetData<TData, TValue>) => void;
remove: (id: string) => void;
}
function useFormset<TData = object, TValue = any>(
initial: FormsetData<TData, TValue>
@@ -24,10 +27,23 @@ function useFormset<TData = object, TValue = any>(
initial || []
);

function addItem(itemData: FormsetAtomicData<TData, TValue>) {
setData(prevData => [...prevData, itemData]);
}

function getItem(id: string): FormsetAtomicData<TData, TValue> {
return data.find(item => item.id === id);
}

function removeItem(id: string) {
setData(prevData =>
removeAtIndex(
prevData,
prevData.findIndex(item => item.id === id)
)
);
}

function setItemValue(id: string, value: TValue) {
const itemIndex = data.findIndex(item => item.id === id);
setData([
@@ -41,9 +57,11 @@ function useFormset<TData = object, TValue = any>(
}

return {
add: addItem,
change: setItemValue,
data,
get: getItem,
remove: removeItem,
set: setData
};
}
5 changes: 4 additions & 1 deletion src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx
Original file line number Diff line number Diff line change
@@ -338,7 +338,10 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
warehouseStock.quantityAllocated;

return (
<TableCell className={classes.colQuantity}>
<TableCell
className={classes.colQuantity}
key={warehouseStock.id}
>
<div className={classes.colQuantityContent}>
<TextField
type="number"
44 changes: 27 additions & 17 deletions src/products/components/ProductCreatePage/ProductCreatePage.tsx
Original file line number Diff line number Diff line change
@@ -86,7 +86,6 @@ interface ProductCreatePageProps {
fetchCategories: (data: string) => void;
fetchCollections: (data: string) => void;
fetchProductTypes: (data: string) => void;
onWarehouseEdit: () => void;
onBack?();
onSubmit?(data: ProductCreatePageSubmitData);
}
@@ -108,8 +107,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
warehouses,
onBack,
fetchProductTypes,
onSubmit,
onWarehouseEdit
onSubmit
}: ProductCreatePageProps) => {
const intl = useIntl();
const localizeDate = useDateLocalize();
@@ -119,18 +117,12 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
data: attributes,
set: setAttributeData
} = useFormset<ProductAttributeInputData>([]);
const { change: changeStockData, data: stocks, set: setStocks } = useFormset<
null
>([]);
React.useEffect(() => {
const newStocks = warehouses.map(warehouse => ({
data: null,
id: warehouse.id,
label: warehouse.name,
value: stocks.find(stock => stock.id === warehouse.id)?.value || 0
}));
setStocks(newStocks);
}, [JSON.stringify(warehouses)]);
const {
add: addStock,
change: changeStockData,
data: stocks,
remove: removeStock
} = useFormset<null, string>([]);

// Ensures that it will not change after component rerenders, because it
// generates different block keys and it causes editor to lose its content.
@@ -253,11 +245,29 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
<ProductStocks
data={data}
disabled={disabled}
onChange={changeStockData}
onFormDataChange={change}
errors={errors}
stocks={stocks}
onWarehousesEdit={onWarehouseEdit}
warehouses={warehouses}
onChange={(id, value) => {
triggerChange();
changeStockData(id, value);
}}
onWarehouseStockAdd={id => {
triggerChange();
addStock({
data: null,
id,
label: warehouses.find(
warehouse => warehouse.id === id
).name,
value: "0"
});
}}
onWarehouseStockDelete={id => {
triggerChange();
removeStock(id);
}}
/>
<CardSpacer />
</>
Loading