Skip to content

Commit 7dbe91a

Browse files
jacobsvantejacobsvante
committed
fix(ui): Translations weren't updating in some parts
1 parent 6366ba8 commit 7dbe91a

File tree

11 files changed

+414
-679
lines changed

11 files changed

+414
-679
lines changed

‎ui/src/components/CollectionTableSortMenu.tsx‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,45 @@
11
import { Listbox, Transition } from "@headlessui/react";
22
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
3-
import { Trans } from "@lingui/macro";
4-
import { Dispatch, Fragment, SetStateAction } from "react";
3+
import { t, Trans } from "@lingui/macro";
4+
import { Dispatch, Fragment, SetStateAction, useMemo } from "react";
55
import { NestedStyleSortOrder } from "../types/api";
6-
import {
7-
ALL_SORT_ORDER_ALTERNATIVES,
8-
StyleSortOrderAlternative,
9-
} from "../types/other";
6+
import { StyleSortOrderAlternative } from "../types/other";
107
import { classNames } from "../utils";
8+
import { useLocalize } from "../i18n";
119

1210
interface Params {
1311
sortOrder: NestedStyleSortOrder;
1412
setSortOrder: Dispatch<SetStateAction<NestedStyleSortOrder>>;
1513
}
1614

15+
function allSortOrderAlternatives(): StyleSortOrderAlternative[] {
16+
return [
17+
{ title: t`Number`, apiReference: NestedStyleSortOrder.NumberAsc },
18+
{ title: t`Name`, apiReference: NestedStyleSortOrder.NameAsc },
19+
{
20+
title: t`Delivery period`,
21+
apiReference: NestedStyleSortOrder.DeliveryPeriodAsc,
22+
},
23+
{
24+
title: t`Delivery period (descending)`,
25+
apiReference: NestedStyleSortOrder.DeliveryPeriodDesc,
26+
},
27+
];
28+
}
29+
1730
export default function CollectionTableSortMenu({
1831
sortOrder,
1932
setSortOrder,
2033
}: Params) {
21-
const activeAlternative = ALL_SORT_ORDER_ALTERNATIVES.find(
34+
const { locale } = useLocalize();
35+
const allSortOrderAlternativesMemoed = useMemo(
36+
() => allSortOrderAlternatives(),
37+
[locale],
38+
);
39+
const activeAlternative = allSortOrderAlternativesMemoed.find(
2240
(alt) => alt.apiReference === sortOrder,
2341
) as StyleSortOrderAlternative;
24-
const alternatives = ALL_SORT_ORDER_ALTERNATIVES;
42+
const alternatives = allSortOrderAlternativesMemoed;
2543
return (
2644
<Listbox value={sortOrder} onChange={setSortOrder}>
2745
{({ open }) => (

‎ui/src/components/ExportForm.tsx‎

Lines changed: 146 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Fragment, useState } from "react";
1+
import { Fragment, useMemo, useState } from "react";
22
import { Disclosure, Popover, Transition } from "@headlessui/react";
33
import { ChevronDownIcon } from "@heroicons/react/20/solid";
44
import { t, Trans } from "@lingui/macro";
@@ -12,7 +12,7 @@ import {
1212
PriceListSummary,
1313
Language,
1414
} from "../types/api";
15-
import { locales, useLocaleParam, useLocalize } from "../i18n";
15+
import { locales, useLocalize } from "../i18n";
1616
import { ItemFilters, makeCollectionFilters } from "../types/filters";
1717
import { classNames } from "../utils";
1818
import LoadingIndicator from "./LoadingIndicator";
@@ -44,149 +44,165 @@ interface ExportFieldEntry {
4444
checked: boolean;
4545
}
4646

47-
const allExportFormatEntries: ExportFormatEntry[] = [
48-
{
49-
format: ExportFormat.Xlsx,
50-
label: t`Excel`,
51-
description: t`Uses the newer .xlsx format.`,
52-
checked: true,
53-
},
54-
{
55-
format: ExportFormat.Csv,
56-
label: t`CSV`,
57-
description: t`Often useful for ERP system imports.`,
58-
checked: false,
59-
},
60-
{
61-
format: ExportFormat.Json,
62-
label: t`JSON`,
63-
description: t`Useful for integration with other systems.`,
64-
checked: false,
65-
},
66-
];
47+
function allExportFormatEntries(): ExportFormatEntry[] {
48+
return [
49+
{
50+
format: ExportFormat.Xlsx,
51+
label: t`Excel`,
52+
description: t`Uses the newer .xlsx format.`,
53+
checked: true,
54+
},
55+
{
56+
format: ExportFormat.Csv,
57+
label: t`CSV`,
58+
description: t`Often useful for ERP system imports.`,
59+
checked: false,
60+
},
61+
{
62+
format: ExportFormat.Json,
63+
label: t`JSON`,
64+
description: t`Useful for integration with other systems.`,
65+
checked: false,
66+
},
67+
];
68+
}
6769

68-
const allGroupByEntries: GroupByEntry[] = [
69-
{ groupBy: GroupBy.Style, label: t`Style`, disabled: true, checked: true },
70-
{ groupBy: GroupBy.Color, label: t`Color`, disabled: false, checked: false },
71-
{ groupBy: GroupBy.Size, label: t`Size`, disabled: false, checked: false },
72-
{
73-
groupBy: GroupBy.Category,
74-
label: t`Category`,
75-
disabled: false,
76-
checked: false,
77-
},
78-
{
79-
groupBy: GroupBy.PriceList,
80-
label: t`Price list`,
81-
disabled: false,
82-
checked: false,
83-
},
84-
{
85-
groupBy: GroupBy.Image,
86-
label: t`Image`,
87-
disabled: false,
88-
checked: false,
89-
},
90-
];
70+
function allGroupByEntries(): GroupByEntry[] {
71+
return [
72+
{ groupBy: GroupBy.Style, label: t`Style`, disabled: true, checked: true },
73+
{
74+
groupBy: GroupBy.Color,
75+
label: t`Color`,
76+
disabled: false,
77+
checked: false,
78+
},
79+
{ groupBy: GroupBy.Size, label: t`Size`, disabled: false, checked: false },
80+
{
81+
groupBy: GroupBy.Category,
82+
label: t`Category`,
83+
disabled: false,
84+
checked: false,
85+
},
86+
{
87+
groupBy: GroupBy.PriceList,
88+
label: t`Price list`,
89+
disabled: false,
90+
checked: false,
91+
},
92+
{
93+
groupBy: GroupBy.Image,
94+
label: t`Image`,
95+
disabled: false,
96+
checked: false,
97+
},
98+
];
99+
}
91100

92-
const allFieldEntries: ExportFieldEntry[] = [
93-
{ field: ExportField.StyleNumber, label: t`Style number`, checked: true },
94-
{ field: ExportField.StyleName, label: t`Style name`, checked: true },
95-
{
96-
field: ExportField.StyleDescription,
97-
label: t`Style description`,
98-
checked: true,
99-
},
100-
{ field: ExportField.NewStyle, label: t`New style`, checked: true },
101-
{ field: ExportField.Core, label: t`Core`, checked: true },
102-
{
103-
field: ExportField.CountryOfOrigin,
104-
label: t`Country of origin`,
105-
checked: true,
106-
},
107-
{ field: ExportField.ColorNumber, label: t`Color number`, checked: true },
108-
{ field: ExportField.ColorName, label: t`Color name`, checked: true },
109-
{ field: ExportField.NewColor, label: t`New color`, checked: true },
110-
{ field: ExportField.SizeType, label: t`Size type`, checked: true },
111-
{ field: ExportField.SizeNumber, label: t`Size number`, checked: true },
112-
{ field: ExportField.EanCode, label: t`EAN code`, checked: true },
113-
{ field: ExportField.ServiceItem, label: t`Service item`, checked: true },
114-
{
115-
field: ExportField.RetailPriceAmount,
116-
label: t`Retail price amount`,
117-
checked: true,
118-
},
119-
{
120-
field: ExportField.RetailPriceCurrency,
121-
label: t`Retail price currency`,
122-
checked: true,
123-
},
124-
{
125-
field: ExportField.RetailPriceList,
126-
label: t`Retail price list`,
127-
checked: true,
128-
},
129-
{
130-
field: ExportField.UnitPriceAmount,
131-
label: t`Unit price amount`,
132-
checked: true,
133-
},
134-
{
135-
field: ExportField.UnitPriceCurrency,
136-
label: t`Unit price currency`,
137-
checked: true,
138-
},
139-
{
140-
field: ExportField.UnitPriceList,
141-
label: t`Unit price list`,
142-
checked: true,
143-
},
144-
{ field: ExportField.CategoryName, label: t`Category name`, checked: true },
145-
{
146-
field: ExportField.Attribute,
147-
label: t`Attributes`,
148-
description: t`One column per attribute type will be generated.`,
149-
checked: true,
150-
},
151-
{
152-
field: ExportField.DeliveryPeriod,
153-
label: t`Delivery period`,
154-
checked: true,
155-
},
156-
{ field: ExportField.TariffNo, label: t`Tariff no`, checked: true },
157-
{ field: ExportField.GrossWeight, label: t`Gross weight`, checked: true },
158-
{ field: ExportField.UnitVolume, label: t`Unit volume`, checked: true },
159-
{ field: ExportField.PrimaryImage, label: t`Primary image`, checked: true },
160-
{ field: ExportField.Images, label: t`Images`, checked: false },
161-
{
162-
field: ExportField.StyleExternalid,
163-
label: t`Style external id`,
164-
checked: false,
165-
},
166-
{
167-
field: ExportField.ColorExternalid,
168-
label: t`Color external id`,
169-
checked: false,
170-
},
171-
];
101+
function allFieldEntries(): ExportFieldEntry[] {
102+
return [
103+
{ field: ExportField.StyleNumber, label: t`Style number`, checked: true },
104+
{ field: ExportField.StyleName, label: t`Style name`, checked: true },
105+
{
106+
field: ExportField.StyleDescription,
107+
label: t`Style description`,
108+
checked: true,
109+
},
110+
{ field: ExportField.NewStyle, label: t`New style`, checked: true },
111+
{ field: ExportField.Core, label: t`Core`, checked: true },
112+
{
113+
field: ExportField.CountryOfOrigin,
114+
label: t`Country of origin`,
115+
checked: true,
116+
},
117+
{ field: ExportField.ColorNumber, label: t`Color number`, checked: true },
118+
{ field: ExportField.ColorName, label: t`Color name`, checked: true },
119+
{ field: ExportField.NewColor, label: t`New color`, checked: true },
120+
{ field: ExportField.SizeType, label: t`Size type`, checked: true },
121+
{ field: ExportField.SizeNumber, label: t`Size number`, checked: true },
122+
{ field: ExportField.EanCode, label: t`EAN code`, checked: true },
123+
{ field: ExportField.ServiceItem, label: t`Service item`, checked: true },
124+
{
125+
field: ExportField.RetailPriceAmount,
126+
label: t`Retail price amount`,
127+
checked: true,
128+
},
129+
{
130+
field: ExportField.RetailPriceCurrency,
131+
label: t`Retail price currency`,
132+
checked: true,
133+
},
134+
{
135+
field: ExportField.RetailPriceList,
136+
label: t`Retail price list`,
137+
checked: true,
138+
},
139+
{
140+
field: ExportField.UnitPriceAmount,
141+
label: t`Unit price amount`,
142+
checked: true,
143+
},
144+
{
145+
field: ExportField.UnitPriceCurrency,
146+
label: t`Unit price currency`,
147+
checked: true,
148+
},
149+
{
150+
field: ExportField.UnitPriceList,
151+
label: t`Unit price list`,
152+
checked: true,
153+
},
154+
{ field: ExportField.CategoryName, label: t`Category name`, checked: true },
155+
{
156+
field: ExportField.Attribute,
157+
label: t`Attributes`,
158+
description: t`One column per attribute type will be generated.`,
159+
checked: true,
160+
},
161+
{
162+
field: ExportField.DeliveryPeriod,
163+
label: t`Delivery period`,
164+
checked: true,
165+
},
166+
{ field: ExportField.TariffNo, label: t`Tariff no`, checked: true },
167+
{ field: ExportField.GrossWeight, label: t`Gross weight`, checked: true },
168+
{ field: ExportField.UnitVolume, label: t`Unit volume`, checked: true },
169+
{ field: ExportField.PrimaryImage, label: t`Primary image`, checked: true },
170+
{ field: ExportField.Images, label: t`Images`, checked: false },
171+
{
172+
field: ExportField.StyleExternalid,
173+
label: t`Style external id`,
174+
checked: false,
175+
},
176+
{
177+
field: ExportField.ColorExternalid,
178+
label: t`Color external id`,
179+
checked: false,
180+
},
181+
];
182+
}
172183

173184
export default function ExportForm({
174185
collection,
175186
priceLists,
176187
itemFilters,
177188
}: Props) {
178189
const { token, activeOrganization } = useAppSelector((state) => state.user);
179-
const { i18nDbText } = useLocalize();
190+
const { i18nDbText, locale } = useLocalize();
180191

181-
const locale = useLocaleParam();
182192
const [language, setLanguage] = useState(locale as Language);
183193
const [exportFormat, setExportFormat] = useState(ExportFormat.Xlsx);
194+
const allGroupByEntriesMemoed = useMemo(() => allGroupByEntries(), [locale]);
184195
const [groupByEntries, setGroupByEntries] = useState(() => [
185-
...allGroupByEntries,
196+
...allGroupByEntriesMemoed,
197+
]);
198+
const allFieldEntriesMemoed = useMemo(() => allFieldEntries(), [locale]);
199+
const [fieldEntries, setFieldEntries] = useState(() => [
200+
...allFieldEntriesMemoed,
186201
]);
187-
const [fieldEntries, setFieldEntries] = useState(() => [...allFieldEntries]);
188202
const [downloading, setDownloading] = useState(false);
189203

204+
const exportFormatEntries = useMemo(() => allExportFormatEntries(), [locale]);
205+
190206
function downloadFile() {
191207
if (!!token && !!activeOrganization) {
192208
setDownloading(true);
@@ -309,7 +325,7 @@ export default function ExportForm({
309325
<Trans>Which format you want to export to.</Trans>
310326
</p>
311327
<div className="mt-2 space-y-4">
312-
{allExportFormatEntries.map((entry) => (
328+
{exportFormatEntries.map((entry) => (
313329
<div
314330
key={entry.format}
315331
className="relative flex items-start"

0 commit comments

Comments
 (0)