feat: Choose language for exported data

hyperkliv · Oct 30, 2024 · 538f229 · 538f229
1 parent 2644175
commit 538f229
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 19 deletions.
diff --git a/schema.json b/schema.json
@@ -23,6 +23,7 @@
     "i18n_string",
     "image",
     "image_summary",
+    "language",
     "nested_attribute",
     "nested_color",
     "nested_price",
@@ -58,6 +59,9 @@
     "sort_by": {
       "$ref": "#/definitions/SortByJsonSchema"
     },
+    "language": {
+      "$ref": "#/definitions/Language"
+    },
     "environment": {
       "$ref": "#/definitions/Environment"
     },
@@ -1661,6 +1665,14 @@
         "delivery_period:desc"
       ]
     },
+    "Language": {
+      "type": "string",
+      "enum": [
+        "en",
+        "sv",
+        "de"
+      ]
+    },
     "Attribute": {
       "description": "Attribute",
       "type": "object",

diff --git a/src/i18n.rs b/src/i18n.rs
@@ -17,6 +17,7 @@ use strum::IntoEnumIterator;
     PartialOrd,
     Ord,
     strum::EnumIter,
+    JsonSchema,
 )]
 #[serde(rename_all = "snake_case")]
 pub enum Language {

diff --git a/src/jsonschema.rs b/src/jsonschema.rs
@@ -46,6 +46,7 @@ pub(crate) struct PublicJsonSchema {
     export: ExportSchema,
     filters: FiltersSchema,
     sort_by: SortByJsonSchema,
+    language: crate::Language,
     environment: crate::Environment,
     attribute: crate::Attribute,
     attribute_type: crate::AttributeType,

diff --git a/ui/src/api.ts b/ui/src/api.ts
@@ -32,6 +32,7 @@ import {
   NestedStyleSummary,
   Category,
   ItemFilterChoices,
+  Language,
 } from "./types/api";
 import { useAppDispatch, useAppSelector } from "./state/hooks";
 import { useEffect, useState } from "react";
@@ -170,6 +171,7 @@ interface ApiSurface {
     token: string,
     organizationId: number,
     collectionSlug: string,
+    language: Language,
     exportFormat: ExportFormat,
     groupBy: GroupBy[],
     fields: ExportField[],
@@ -181,6 +183,7 @@ interface ApiGetRequestOptions {
   token: string;
   sortOrder?: string;
   filters?: object;
+  language?: Language; // TODO: This is only really meant for downloadExportFile...
   groupBy?: GroupBy[]; // TODO: This is only really meant for downloadExportFile...
   fields?: ExportField[]; // TODO: This is only really meant for downloadExportFile...
 }
@@ -232,6 +235,9 @@ function makeApi(baseUrl: string): ApiSurface {
     if (!!opts.groupBy) {
       searchParams.append("group_by", JSON.stringify(opts.groupBy));
     }
+    if (!!opts.language) {
+      searchParams.append("language", opts.language);
+    }
     if (!!opts.fields) {
       searchParams.append("fields", JSON.stringify(opts.fields));
     }
@@ -387,13 +393,16 @@ function makeApi(baseUrl: string): ApiSurface {
         token,
       });
     },
-    async fetchItemFilterChoices (
+    async fetchItemFilterChoices(
       token: string,
       organizationId: number,
     ): Promise<Result<ItemFilterChoices, ApiErrorResponse>> {
-      return await getJson<ItemFilterChoices>(`/${organizationId}/admin/filters/items`, {
-        token,
-      });
+      return await getJson<ItemFilterChoices>(
+        `/${organizationId}/admin/filters/items`,
+        {
+          token,
+        },
+      );
     },
     async fetchColors(
       token: string,
@@ -596,18 +605,23 @@ function makeApi(baseUrl: string): ApiSurface {
       token: string,
       organizationId: number,
       collectionSlug: string,
+      language: Language,
       exportFormat: ExportFormat,
       groupBy: GroupBy[],
       fields: ExportField[],
       filters?: CollectionFilters,
     ): Promise<Response> {
       const subpath = `/${organizationId}/exports/slug:${collectionSlug}/${exportFormat}`;
-      return fetchRaw(subpath, { token, filters, groupBy, fields }).catch(
-        (err) => {
-          console.error(`Failed to download file, with error: ${err}`);
-          return err;
-        },
-      );
+      return fetchRaw(subpath, {
+        token,
+        filters,
+        groupBy,
+        language,
+        fields,
+      }).catch((err) => {
+        console.error(`Failed to download file, with error: ${err}`);
+        return err;
+      });
     },
   };
 }
@@ -855,10 +869,7 @@ export function usePricelists(): PricelistsFetchResult {
   useEffect(() => {
     if (!!token && !!activeOrganization) {
       api
-        .fetchPriceLists(
-          token as string,
-          activeOrganization.organization.id,
-        )
+        .fetchPriceLists(token as string, activeOrganization.organization.id)
         .then((result) => {
           setFetchResult(result);
         });
@@ -918,16 +929,24 @@ export function useCollectionList(): [CollectionListFetchResult, () => void] {
   return [fetchResult, refresh];
 }
 
-type ItemFilterChoicesFetchResult = Result<ItemFilterChoices | null, ApiErrorResponse>;
+type ItemFilterChoicesFetchResult = Result<
+  ItemFilterChoices | null,
+  ApiErrorResponse
+>;
 
 export function useItemFilterChoices(): ItemFilterChoicesFetchResult {
   const { token, activeOrganization } = useAppSelector((state) => state.user);
-  const [fetchResult, setFetchResult] = useState(Ok(null) as ItemFilterChoicesFetchResult);
+  const [fetchResult, setFetchResult] = useState(
+    Ok(null) as ItemFilterChoicesFetchResult,
+  );
   useLogoutOnExpiredToken(fetchResult);
   useEffect(() => {
     if (!!token && !!activeOrganization) {
       api
-        .fetchItemFilterChoices(token as string, activeOrganization.organization.id)
+        .fetchItemFilterChoices(
+          token as string,
+          activeOrganization.organization.id,
+        )
         .then((result) => {
           setFetchResult(result);
         });

diff --git a/ui/src/components/ExportForm.tsx b/ui/src/components/ExportForm.tsx
@@ -10,8 +10,9 @@ import {
   GroupBy,
   ExportFormat,
   PriceListSummary,
+  Language,
 } from "../types/api";
-import { useLocalize } from "../i18n";
+import { locales, useLocaleParam, useLocalize } from "../i18n";
 import { ItemFilters, makeCollectionFilters } from "../types/filters";
 import { classNames } from "../utils";
 import LoadingIndicator from "./LoadingIndicator";
@@ -177,6 +178,8 @@ export default function ExportForm({
   const { token, activeOrganization } = useAppSelector((state) => state.user);
   const { i18nDbText } = useLocalize();
 
+  const locale = useLocaleParam();
+  const [language, setLanguage] = useState(locale as Language);
   const [exportFormat, setExportFormat] = useState(ExportFormat.Xlsx);
   const [groupByEntries, setGroupByEntries] = useState(() => [
     ...allGroupByEntries,
@@ -192,6 +195,7 @@ export default function ExportForm({
           token,
           activeOrganization.organization.id,
           collection.slug,
+          language,
           exportFormat,
           groupByEntries.filter((g) => g.checked).map((g) => g.groupBy),
           fieldEntries.filter((f) => f.checked).map((f) => f.field),
@@ -260,6 +264,43 @@ export default function ExportForm({
                   evt.preventDefault();
                 }}
               >
+                <fieldset className="mt-6">
+                  <legend className="contents text-base font-medium text-gray-900">
+                    <Trans>Language</Trans>
+                  </legend>
+                  <p className="text-sm text-gray-500">
+                    <Trans>Which language you want to export to.</Trans>
+                  </p>
+                  <div className="mt-2 space-y-4">
+                    {Object.values(Language).map((value) => (
+                      <div key={value} className="relative flex items-start">
+                        <div className="flex h-5 items-center">
+                          <input
+                            id={`export-language-${value}`}
+                            name="language"
+                            checked={language === value}
+                            value={value}
+                            type="radio"
+                            onChange={(evt) => {
+                              return evt.target.checked
+                                ? setLanguage(value)
+                                : "";
+                            }}
+                            className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:text-gray-400"
+                          />
+                        </div>
+                        <div className="ml-3 text-sm">
+                          <label
+                            htmlFor={`export-language-${value}`}
+                            className="font-medium text-gray-700"
+                          >
+                            {locales[value]}
+                          </label>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </fieldset>
                 <fieldset className="mt-6">
                   <legend className="contents text-base font-medium text-gray-900">
                     <Trans>Format</Trans>

diff --git a/ui/src/pages/app/Style.tsx b/ui/src/pages/app/Style.tsx
@@ -302,7 +302,7 @@ function StyleInner({ collection, item, activeColor }: StyleInnerProps) {
                               {attributes.map((attr) => (
                                 <li key={attr.id}>
                                   <>
-                                    {i18nDbText(attr.title)}{" "}
+                                    <b>{i18nDbText(attr.title)}</b>{" "}
                                     {i18nDbText(attr.description)}
                                   </>
                                 </li>

diff --git a/ui/src/types/api.ts b/ui/src/types/api.ts
@@ -28,6 +28,7 @@ export interface Api {
     i18n_string:            I18NString;
     image:                  Image;
     image_summary:          ImageSummary;
+    language:               Language;
     nested_attribute:       AttributeSummary;
     nested_color:           NestedColor;
     nested_price:           NestedPrice;
@@ -775,6 +776,12 @@ export interface Image {
     [property: string]: any;
 }
 
+export enum Language {
+    De = "de",
+    En = "en",
+    Sv = "sv",
+}
+
 /**
  * Style nested with colors and sizes, with some metadata fields excluded
  */
@@ -1666,6 +1673,7 @@ const typeMap: any = {
         { json: "i18n_string", js: "i18n_string", typ: r("I18NString") },
         { json: "image", js: "image", typ: r("Image") },
         { json: "image_summary", js: "image_summary", typ: r("ImageSummary") },
+        { json: "language", js: "language", typ: r("Language") },
         { json: "nested_attribute", js: "nested_attribute", typ: r("AttributeSummary") },
         { json: "nested_color", js: "nested_color", typ: r("NestedColor") },
         { json: "nested_price", js: "nested_price", typ: r("NestedPrice") },
@@ -2324,6 +2332,11 @@ const typeMap: any = {
         "size",
         "style",
     ],
+    "Language": [
+        "de",
+        "en",
+        "sv",
+    ],
     "NestedStyleSortOrder": [
         "delivery_period:asc",
         "delivery_period:desc",